/* Módulo «mar»: el estado del mar en la ficha, debajo del tiempo y con su misma forma (Edgar,
   05/11/2026). Solo lo descargan las webs que lo encienden. Las tarjetas de «ahora» son las de «ahora
   mismo» (.now, .now-datos y .now-item, en site.css): en el ordenador, en fila; en el móvil, filas con
   el icono a la izquierda. Aquí, solo la caja de los próximos días, que imita la de la previsión
   (prevision.css), que puede no estar encendida. */
.mar{margin-top:1.4rem}
:root{--wi-mar:#1C6E8C}
.mar-flecha{display:inline-block;width:1em;height:1em;margin-left:.3em;vertical-align:-.15em;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* El icono de las olas de cada día y cada hora: una, dos o tres ondas según su tamaño */
.wi-mar{width:2rem;height:2rem;flex:none}
.wi-olas path{fill:none;stroke:var(--wi-mar);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Olas muy grandes (3 m o más): ondas más altas y más gruesas, para que se vean de un vistazo */
.wi-mar--4 .wi-olas path{stroke-width:2.3}

/* Los próximos días, en su caja y uno al lado del otro, como los del tiempo */
.mar-prev{margin:.7rem 0 0;padding:.9rem 1rem 1rem;background:var(--deep);border-radius:var(--r)}
.mar-prev-h{font:500 .98rem/1.2 var(--display);color:var(--haze);margin:0 0 .5rem}
.mar-dias{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.5rem;margin:0;padding:0;max-width:36rem}
.mar-dia{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto;align-items:center;gap:.05rem .55rem;
  padding:.55rem .7rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--deep)}
.mar-dia .wi-mar{grid-column:1;grid-row:1/4}
.mar-dia--hoy{border-color:var(--acento)}
.mar-nombre{grid-column:2;font:600 .95rem/1.2 var(--display)}
.mar-olas{grid-column:2;font-size:1.02rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.mar-det{grid-column:2;font-size:.82rem;color:var(--dim);white-space:nowrap}
/* El viento del día, debajo de las olas: su icono, de dónde viene y el máximo; si la ficha dice hacia
   dónde mira su costa, si sopla del mar, de tierra o de lado */
.mar-viento{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:0 .3rem;margin-top:.15rem;font-size:.82rem;color:var(--haze);white-space:nowrap}
.mar-viento .i{width:1rem;height:1rem;color:var(--dim)}
.mar-rel{flex-basis:100%;color:var(--dim)}
/* En una pantalla estrecha no caben tres tarjetas con el icono al lado: se pone encima */
@media (max-width:34rem){
  .mar-dia{grid-template-columns:1fr;grid-template-rows:none;justify-items:center;text-align:center;padding:.5rem .2rem}
  .mar-dia .wi-mar{grid-column:auto;grid-row:auto;width:1.8rem;height:1.8rem}
  .mar-nombre,.mar-olas,.mar-det,.mar-viento{grid-column:auto}
  .mar-viento{justify-content:center;font-size:.76rem}
  .mar-dia .mar-nombre{order:-1;font-size:.88rem}
  .mar-olas{font-size:.9rem}
  .mar-det{font-size:.76rem}
}

/* Cada 3 horas: una tira que se arrastra, como la de las horas del tiempo, con la última hora
   desvaneciéndose en el borde para que se vea que sigue */
.mar-detalle{margin:.7rem 0 0;font-size:.9rem}
.mar-detalle>summary{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;padding:.4rem .85rem;
  border:1.5px solid var(--rule);border-radius:2rem;background:var(--deep2);font:500 .98rem/1.2 var(--display);color:var(--snow)}
.mar-detalle>summary:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.mar-detalle>summary::before{content:"";flex:none;width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease}
.mar-detalle[open]>summary::before{transform:rotate(45deg)}
.mar-detalle>summary:hover{border-color:var(--acento);color:var(--acento)}
@media (prefers-reduced-motion:reduce){.mar-detalle>summary::before{transition:none}}
.mar-n{font-weight:400;font-size:.88em;color:var(--dim)}
.mar-horas{list-style:none;display:flex;gap:.35rem;overflow-x:auto;margin:.6rem 0 0;padding:0 2rem .4rem 0;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2rem),transparent)}
.mar-horas li{flex:0 0 4.4rem;border:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.45rem .2rem;
  border-radius:var(--r);background:var(--deep2);font-size:.85rem}
.mar-horas .wi-mar{width:1.7rem;height:1.7rem}
.mh-hora{color:var(--dim);font-variant-numeric:tabular-nums}
.mh-ola{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.mh-per,.mh-dir{font-size:.78rem;color:var(--haze);white-space:nowrap}
.mh-viento{display:flex;align-items:center;gap:.2rem;margin-top:.15rem;padding-top:.2rem;border-top:1px solid var(--rule);font-size:.76rem;color:var(--haze);white-space:nowrap}
.mh-viento .i{width:.9rem;height:.9rem;color:var(--dim)}