/* ============================================================================
 * PRAIA · sistema de diseño
 * ----------------------------------------------------------------------------
 * Objetivo: que instalada en la pantalla de inicio del iPhone no se note que es
 * una web. Las trampas de las PWA en iOS que hay aquí resueltas están pagadas a
 * base de bugs en Dafne; los comentarios explican por qué, no qué.
 * ==========================================================================*/

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

/* ============================================================================
 * EL SISTEMA · instrumento de medida, no app de consumo
 * ----------------------------------------------------------------------------
 * Tres reglas, y de ellas sale todo lo demás:
 *
 *   1. EL COLOR ES UN DATO. Si un elemento no codifica una magnitud, va en
 *      gris. Sin excepciones. Los cuatro sitios con color de una pantalla se
 *      leen de un vistazo precisamente porque son los únicos cuatro.
 *
 *   2. LA JERARQUÍA LA MARCA EL PESO, NO EL TONO. Antes se destacaba con
 *      azules saturados y fondos de color; ahora con tamaño, grosor y espacio.
 *      Es lo que separa un panel de instrumentación de una app de móvil.
 *
 *   3. LOS NÚMEROS SON TIPOGRAFÍA TABULAR. Una columna de cifras que baila al
 *      cambiar de valor delata que nadie miró la pantalla dos veces.
 *
 * La escala de grises es AZULADA (matiz ~210°), no neutra: sobre una app de
 * costa, un gris frío se lee como instrumento y un gris cálido como documento.
 * ==========================================================================*/

:root{
  /* --- superficies: cuatro niveles y ni uno más ------------------------- */
  --bg:#EEF1F4; --surf:#FFFFFF; --surf2:#F4F6F8; --surf3:#E7EBEF;
  --tx:#16202A; --tx2:#4B5763; --tx3:#5F6B77;
  --bd:rgba(22,32,42,.09); --bd2:rgba(22,32,42,.16);

  /* --- acento: uno, y contenido. Sirve para "esto es interactivo" y para
         nada más. No es un color de marca que haya que repartir. --------- */
  --acc:#2C6E8F; --accrgb:44,110,143; --accbg:#E4EDF2; --acctx:#1E5470;

  /* --- semánticos: MISMOS valores que COL en public/js/escalas.js.
         Si se tocan aquí hay que tocarlos allí, o el mismo dato saldría de
         un color en una tarjeta y de otro en el mapa. ------------------- */
  --ok:#3D8168; --ok2:#6B9364; --warn:#C08A3E; --warn2:#C0734A; --bad:#B4574F;
  --okrgb:61,129,104; --warnrgb:192,138,62; --badrgb:180,87,79;
  /* Y los mismos, en versión TINTA. Un relleno y una letra no necesitan el
     mismo contraste: el ámbar de relleno da 2,8:1 como texto y una etiqueta de
     9 px con ese contraste no se lee. Mismo tono, distinta luminosidad.
     Espejo de COL_TX en public/js/escalas.js. */
  --ok-tx:#2E6450; --ok2-tx:#4E6E48; --warn-tx:#87621F; --warn2-tx:#8C5231; --bad-tx:#8E3F38;

  /* --- sombras: casi nada. Un instrumento no flota. -------------------- */
  --sh:0 1px 2px rgba(22,32,42,.06);
  --shlg:0 12px 32px rgba(22,32,42,.14);

  /* --- la rosa de abrigo, en tonos de carta náutica -------------------- */
  --mar1:#2A4A5E; --mar2:#3D6A85;
  --mar-claro:#B9CDD9; --mar-medio:#6E93A8; --mar-hondo:#33546B;
  --arena:#E2D8C4; --arena-borde:#B9A87F; --arena-tx:#7A6A47;

  --topbar:rgba(255,255,255,.82);
  accent-color:#2C6E8F;
}
.dark{
  --bg:#0E1419; --surf:#161E25; --surf2:#1D262E; --surf3:#26313A;
  --tx:#E8EDF1; --tx2:#A3B0BB; --tx3:#8593A0;
  --bd:rgba(255,255,255,.08); --bd2:rgba(255,255,255,.14);
  --acc:#5E9DBC; --accrgb:94,157,188; --accbg:#12303F; --acctx:#A9D2E6;
  /* Los mismos tonos, con la luminosidad justa para el fondo oscuro: el verde
     de "buen día" sigue siendo reconociblemente el mismo verde. */
  --ok:#5AA98A; --ok2:#8AB27F; --warn:#D9A45C; --warn2:#D98F63; --bad:#D1736A;
  --okrgb:90,169,138; --warnrgb:217,164,92; --badrgb:209,115,106;
  --ok-tx:#7DC4A6; --ok2-tx:#A5C99B; --warn-tx:#E8BE85; --warn2-tx:#E8AE8B; --bad-tx:#E2958D;
  --sh:0 1px 2px rgba(0,0,0,.4);
  --shlg:0 14px 36px rgba(0,0,0,.55);
  --mar-claro:#33454F; --mar-medio:#4A6A7E; --mar-hondo:#8FB0C2;
  --arena:#4A4436; --arena-borde:#6E6449; --arena-tx:#C4B58E;
  --mar1:#1B3040; --mar2:#2A4A5E;
  --topbar:rgba(22,30,37,.82);
  accent-color:#5E9DBC;
}

/* OJO: nunca poner position:fixed en <body> — rompe el viewport de las PWA de
   iOS (elementos fijos desplazados, scroll interno roto). El layout va en flujo
   con height:100dvh en el contenedor raíz. */
/* ============================================================================
 * TIPOGRAFÍA · los números tienen su propia voz
 * ----------------------------------------------------------------------------
 * Dos familias, las dos del sistema (cero peticiones de red, cero saltos de
 * fuente al cargar):
 *
 *   · Texto — la de interfaz del dispositivo. Se lee sola.
 *   · Datos — la monoespaciada del sistema, con cifras de ancho fijo. Un 18 y
 *     un 22 ocupan lo mismo, así que una columna de temperaturas queda
 *     alineada y no baila al actualizarse. Es LA señal tipográfica que separa
 *     un instrumento de una app de consumo, y sale gratis.
 *
 * `font-variant-numeric: tabular-nums` va en la raíz para que ningún número se
 * escape aunque no lleve la clase.
 * ==========================================================================*/
:root{
  --f-datos:ui-monospace,'SF Mono','SFMono-Regular','Menlo','Consolas','Roboto Mono',monospace;
}
.num,.n,.f-num,
.num-v,.hero-pt .n,.fila-pt .n,.bt-graf .bg-cab b,.boya-c b,.tb-n,.ap-d b,
.esc-nums,.mt-hora,.pu-h b,.peso-cab b,.asis-tabla b{
  font-family:var(--f-datos);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

html,body{
  margin:0;height:100%;
  font-variant-numeric:tabular-nums;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  background:var(--bg);color:var(--tx);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.011em;overscroll-behavior:none;
}
html{-webkit-text-size-adjust:100%;}
body{overflow:hidden;}

#app{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  max-width:520px;margin:0 auto;background:var(--bg);
  position:relative;overflow:hidden;
}
/* En escritorio se ve como un móvil centrado, no como una web estirada. */
@media (min-width:560px){
  body{background:#0B1218;}
  #app{box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 30px 90px rgba(0,0,0,.5);}
}

#screen{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:12px 12px 20px;overscroll-behavior-y:contain;scrollbar-width:none;}
#screen::-webkit-scrollbar{display:none;width:0;}
#screen.fullbleed{padding:0;}

/* ------------------------------------------------------------------ barras */

#topbar{
  position:relative;z-index:6;
  display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;
  background:var(--surf);border-bottom:1px solid var(--bd);
}
/* z-index 60, por encima de la hoja (50). Abrir la ficha de una playa ya no
   te deja sin navegación: puedes saltar al mapa o a las cámaras sin cerrarla
   antes a mano, que es lo que hace cualquier app con hojas modales. */
/* El hueco de abajo lo pone el propio teléfono cuando tiene barra de gestos.
   Antes se forzaba un mínimo de 12 px, y en los dispositivos que NO tienen esa
   barra eso era una franja muerta: la barra parecía flotar sobre un margen.
   Ahora el mínimo es simbólico y el sitio que sobraba se lo quedan los iconos. */
#navbar{
  display:flex;background:var(--surf);border-top:1px solid var(--bd);
  padding-bottom:max(env(safe-area-inset-bottom,0px),3px);
  position:relative;z-index:60;
}
/* Los materiales de iOS: es lo que más "vende" el look nativo. */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  #topbar,#navbar{
    background:var(--topbar) !important;
    -webkit-backdrop-filter:saturate(1.6) blur(18px);
            backdrop-filter:saturate(1.6) blur(18px);
  }
}
.nb{flex:1;border:none;background:transparent;color:var(--tx3);padding:9px 0 8px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:10.5px;font-weight:600;letter-spacing:.01em;position:relative;z-index:1;}
.nb.on{color:var(--acc);}
.nb svg{width:27px;height:27px;}
.nb-i{display:flex;align-items:center;justify-content:center;height:27px;}
.nb-t{line-height:1;}
.nb.on .nb-t{font-weight:700;}

/* La pastilla de la sección activa. Se desliza de una a otra en vez de
   encenderse y apagarse: el movimiento es lo que cuenta de dónde vienes y a
   dónde vas, y es la diferencia entre un menú web y una app. La curva se pasa
   un poco de largo al llegar (el 1.35) para que frene como algo con peso. */
.nb-pastilla{
  position:absolute;left:0;top:5px;
  height:calc(100% - 10px - max(env(safe-area-inset-bottom,0px),3px));
  border-radius:15px;background:rgba(var(--accrgb),.12);
  pointer-events:none;z-index:0;
}
/* Sólo desliza a partir de la segunda colocación: ver moverPastilla(). */
.nb-pastilla.viva{
  transition:transform .40s cubic-bezier(.34,1.35,.5,1), width .40s cubic-bezier(.34,1.35,.5,1);
}

/* El icono acusa el cambio con un salto corto. Corto de verdad: 0,42 s. Todo lo
   que pase de medio segundo en un menú deja de sentirse ágil y empieza a
   sentirse lento. */
@keyframes nbSalta{
  0%{transform:translateY(0) scale(1);}
  32%{transform:translateY(-3px) scale(1.16);}
  66%{transform:translateY(0) scale(.98);}
  100%{transform:none;}
}
.nb.salta .nb-i{animation:nbSalta .42s cubic-bezier(.3,.9,.3,1);}

/* Marca + sección, en una sola línea. La barrita separadora es un degradado
   vertical que se desvanece por los extremos: en las apps del tiempo buenas los
   separadores no son rayas duras, son insinuaciones. */
.marca-caja{flex:1;min-width:0;display:flex;align-items:center;gap:10px;}
.marca{font-size:19px;font-weight:800;letter-spacing:.14em;flex:0 0 auto;text-align:left;
  background:none;border:none;padding:0;color:var(--tx);font-family:inherit;}
.marca span{color:var(--acc);}
.marca:active{transform:scale(.96);}
.marca-sep{flex:0 0 1px;width:1px;height:19px;border-radius:1px;
  background:linear-gradient(180deg,transparent,var(--bd2) 22%,var(--bd2) 78%,transparent);}
.seccion{
  flex:1;min-width:0;font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Al cambiar de sección el rótulo entra deslizándose, no parpadea. */
.seccion.cambia{animation:seccionEntra .32s cubic-bezier(.2,.8,.2,1);}
@keyframes seccionEntra{
  from{opacity:0;transform:translateX(-6px);}
  to{opacity:1;transform:translateX(0);}
}
@media (prefers-reduced-motion:reduce){
  .seccion.cambia{animation:none;}
}
.nb{transition:color .22s ease;}
/* El hundido va en el icono, no en el botón entero: encogiendo el botón se
   movía también la etiqueta y el conjunto temblaba. */
.nb:active .nb-i{transform:scale(.88);}
.nb-i{transition:transform .12s ease;}
#btnRefrescar.girando svg{animation:spin .6s cubic-bezier(.3,.7,.3,1);}

/* ------------------------------------------------------------- componentes */

.cd{background:var(--surf);border:1px solid var(--bd);border-radius:16px;padding:14px 15px;margin-bottom:10px;box-shadow:var(--sh);}
button{cursor:pointer;font-family:inherit;color:inherit;}
.pri{background:var(--acc);color:#fff;border:none;border-radius:12px;padding:13px;font-size:15px;font-weight:600;width:100%;box-shadow:0 2px 9px rgba(var(--accrgb),.30);background-image:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%);}
.gho{background:transparent;color:var(--tx);border:1px solid var(--bd2);border-radius:11px;padding:10px 12px;font-size:13.5px;font-weight:500;}
/* Un chip nunca parte su texto en dos líneas: con un icono dentro se convertía
   en una pastilla alta y desmañada («Con cámara» en dos pisos). Se mantiene en
   una sola línea, el contenido se alinea en fila y el icono es flex:none. */
.chip{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:13px;padding:7px 13px;border:1px solid var(--bd2);border-radius:20px;
  background:transparent;color:var(--tx2);font-weight:500;line-height:1.25;
}
.chip svg{flex:0 0 auto;width:15px;height:15px;}
.chip em{font-style:normal;font-size:11px;font-weight:700;opacity:.6;}
.chip.on{background:var(--accbg);color:var(--acctx);border-color:var(--acc);font-weight:600;}
.chiprow{display:flex;gap:7px;flex-wrap:wrap;}
.seg{display:flex;gap:0;background:var(--surf2);border-radius:11px;padding:3px;border:1px solid var(--bd);}
.seg button{flex:1;padding:8px 4px;font-size:13.5px;font-weight:600;border:none;border-radius:8px;background:transparent;color:var(--tx2);}
.seg button.on{background:var(--surf);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.10);}
.dark .seg button.on{background:var(--surf3);}
.rowbtn{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surf2);border:1px solid var(--bd2);border-radius:11px;padding:11px 12px;font-size:15px;}
.lbl{font-size:10.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.13em;font-weight:700;margin:14px 4px 8px;}

.cd,.chip,.rowbtn,.pri,.gho,.seg button{transition:transform .12s ease,background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;}
.cd.tap:active,.chip:active,.rowbtn:active,.pri:active,.gho:active{transform:scale(.985);}
button:focus-visible,a:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}
button:disabled{opacity:.5;box-shadow:none;}

.hscroll{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x;overscroll-behavior-x:contain;}
.hscroll::-webkit-scrollbar{display:none;height:0;}
.hscroll>*{flex:0 0 auto;}

.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum';}
strong{font-weight:700;}
em.fuente{font-style:normal;color:var(--tx3);font-size:11.5px;}

/* ------------------------------------------------- escala de puntuación
   Único color que codifica información. SIEMPRE acompañado de número o
   etiqueta: hay gente daltónica, y hay sol directo sobre la pantalla. */

.pt{display:inline-flex;align-items:baseline;gap:3px;font-weight:800;font-variant-numeric:tabular-nums;}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:20px;letter-spacing:.01em;}
.b-ok{background:rgba(var(--okrgb),.14);color:var(--ok);}
.b-ok2{background:rgba(var(--okrgb),.11);color:var(--ok2);}
.b-warn{background:rgba(var(--warnrgb),.16);color:var(--warn2);}
.b-warn2{background:rgba(var(--warnrgb),.16);color:var(--warn2);}
.b-bad{background:rgba(var(--badrgb),.14);color:var(--bad);}
.b-acc{background:var(--accbg);color:var(--acctx);}

/* ------------------------------------------------------------------- héroe */

/* SIN degradado azul. Era el mayor foco de color decorativo de la app: medio
   panel teñido de un color que no significaba nada. Ahora la cabecera es una
   superficie más y quien manda es el nombre de la playa. El score, que sí es
   un dato, conserva su color. */
.hero{
  position:relative;overflow:hidden;border-radius:14px;padding:0;margin-bottom:12px;
  border:1px solid var(--bd2);box-shadow:var(--sh);background:var(--surf);
}
.hero-top{
  position:relative;padding:15px 15px 13px;color:var(--tx);
  background:var(--surf);border-bottom:1px solid var(--bd);
  overflow:hidden;
}
/* Con foto sí hay que blanquear el texto: va sobre la imagen. */
.hero.con-foto .hero-top{color:#fff;border-bottom:none;}
/* Sin ornamento: un velo oscuro abajo para que el texto se lea sobre la foto
   y nada más. La ola dibujada de antes le daba aire de app infantil. */
.hero-top::after{content:none;}
/* Cabecera compacta: nombre a la izquierda, score a la derecha. El score ya no
   va en posición absoluta, así que el nombre nunca se le mete debajo. */
.hero-fila{display:flex;align-items:flex-start;gap:12px;position:relative;z-index:1;}
.hero-id{flex:1;min-width:0;}
.hero-kicker{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--tx3);margin:0 0 3px;}
.hero.con-foto .hero-kicker{color:rgba(255,255,255,.85);}
.hero-nombre{margin:0;font-size:29px;line-height:1.06;font-weight:800;letter-spacing:-.032em;}
.hero-sub{margin:3px 0 0;font-size:12.5px;color:var(--tx2);font-weight:500;}
.hero.con-foto .hero-sub{color:rgba(255,255,255,.88);}
.hero-ventana{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  background:var(--surf2);border:1px solid var(--bd);color:var(--tx2);
  padding:5px 11px;border-radius:11px;font-size:13px;font-weight:700;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hero-pt{flex:none;text-align:center;}
.hero-pt .n{font-size:30px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
.hero-pt .e{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);display:block;margin-top:2px;max-width:74px;}
.hero.con-foto .hero-pt .e{color:rgba(255,255,255,.85);}
.hero-cuerpo{padding:12px 14px 12px;}
.frase{margin:0 0 10px;font-size:15px;line-height:1.45;color:var(--tx);}
.frase:last-child{margin-bottom:0;}
.frase .ico{display:inline-block;width:17px;margin-right:5px;opacity:.75;}
.practico{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid var(--bd);}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--tx2);background:var(--surf2);border:1px solid var(--bd);padding:5px 10px;border-radius:9px;}

/* ------------------------------------------------------------ lista playas */

.fila{display:flex;align-items:center;gap:12px;padding:12px 13px;background:var(--surf);border:1px solid var(--bd);border-radius:14px;margin-bottom:7px;width:100%;text-align:left;box-shadow:var(--sh);}
.fila.veto{opacity:.72;border-color:rgba(var(--badrgb),.3);}
.fila-txt{flex:1;min-width:0;}
.fila-nom{margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.015em;display:flex;align-items:center;gap:6px;}
.fila.veto .fila-nom span.n{text-decoration:line-through;text-decoration-color:var(--bad);}
.fila-raz{margin:2px 0 0;font-size:12.5px;color:var(--tx2);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.fila-pt{flex:0 0 46px;text-align:center;}
.fila-pt .n{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;}
.medidor{height:3px;border-radius:2px;background:var(--surf3);margin-top:5px;overflow:hidden;}
.medidor i{display:block;height:100%;border-radius:2px;}

/* --------------------------------------------------------------- avisos */

.aviso{display:flex;gap:10px;align-items:flex-start;padding:12px 13px;border-radius:14px;font-size:13px;line-height:1.42;margin-bottom:10px;border:1px solid;}
.aviso.info{background:var(--accbg);color:var(--acctx);border-color:rgba(var(--accrgb),.25);}
.aviso.warn{background:rgba(var(--warnrgb),.13);color:var(--warn2);border-color:rgba(var(--warnrgb),.3);}
.aviso.bad{background:rgba(var(--badrgb),.11);color:var(--bad);border-color:rgba(var(--badrgb),.28);}
.aviso svg{flex:0 0 18px;margin-top:1px;}

details.honestidad{background:var(--surf2);border:1px solid var(--bd);border-radius:14px;padding:11px 13px;margin-top:14px;}
details.honestidad summary{font-size:12.5px;font-weight:700;color:var(--tx2);cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px;}
details.honestidad summary::-webkit-details-marker{display:none;}
details.honestidad li{font-size:12.5px;color:var(--tx2);line-height:1.45;margin:8px 0;}
details.honestidad ul{margin:10px 0 2px;padding-left:18px;}

/* ------------------------------------------------------------ tira horaria */

.tira{display:flex;gap:2px;align-items:flex-end;padding:2px 0 0;}
.tira-h{flex:0 0 30px;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:8px;padding:4px 0 5px;}
.tira-h.on{background:rgba(var(--accrgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--accrgb),.28);}
.tira-h .hh{font-size:9.5px;color:var(--tx3);font-variant-numeric:tabular-nums;font-weight:600;}
.tira-h .tt{font-size:10.5px;color:var(--tx2);font-variant-numeric:tabular-nums;font-weight:600;}
.tira-bar{width:9px;border-radius:5px;background:var(--surf3);position:relative;}
.tira-bar i{position:absolute;bottom:0;left:0;right:0;border-radius:5px;}
/* Los cinco tramos de viento de la tira horaria. Mismos valores que
   coloresViento() en svg.js, resueltos por tema. */
.v0{background:#9BB0BF;} .v1{background:var(--mar-medio);} .v2{background:var(--mar1);}
.v3{background:var(--warn2);} .v4{background:var(--bad);}

/* --------------------------------------------------------------- webcam */

.cam{position:relative;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--surf2);border:1px solid var(--bd);}
.cam img{width:100%;height:100%;object-fit:cover;display:block;}
.cam .et{position:absolute;left:9px;bottom:9px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:600;padding:4px 9px;border-radius:8px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}

/* --------------------------------------------------------------- hoja */

#sheet{position:absolute;inset:0;display:none;z-index:50;}
#sheetScrim{position:absolute;inset:0;background:rgba(0,0,0,.5);animation:fadeIn .18s ease;}
/* El panel es el contenedor anclado abajo; dentro van el asa (fija) y el
   cuerpo (que hace scroll). Antes el cuerpo era las dos cosas a la vez y el
   asa se iba con el scroll, que es justo lo que no puede hacer un asa. */
#sheetPanel{position:absolute;left:0;right:0;background:var(--surf);
  bottom:var(--navh,0px);border-radius:22px 22px 0 0;max-height:88%;display:flex;flex-direction:column;
  animation:sheetUp .24s cubic-bezier(.2,.8,.2,1);overflow:hidden;}
#sheetBody{flex:1;min-height:0;padding:4px 16px 18px;overflow-y:auto;scrollbar-width:none;}
#sheetBody::-webkit-scrollbar{display:none;}


#modal{position:absolute;inset:0;bottom:0;display:none;z-index:40;background:var(--bg);flex-direction:column;}

/* ------------------------------------------------------------ movimiento
   Rápido y corto. Nada por encima de 250 ms. */

/* CAMBIAR DE SECCIÓN ES INSTANTÁNEO, y no lleva animación ninguna.
   Había un fundido de 190 ms en la pantalla y encima una entrada en cascada de
   las filas con retardos de hasta 160 ms: sumados, tocar una pestaña y ver su
   contenido quieto podía irse a un tercio de segundo. Como animación estaba bien
   hecha; como respuesta a un toque en un menú, estorbaba — cada vez, y son las
   pulsaciones más frecuentes de la app. La regla que queda: se animan las cosas
   que el usuario provoca sobre un elemento concreto (un corazón, una hoja que
   sube), no la navegación. */
@keyframes sheetUp{from{transform:translateY(44px);opacity:.5;}to{transform:translateY(0);opacity:1;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulso{0%,100%{opacity:1;}50%{opacity:.45;}}
.cargando{animation:pulso 1.4s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* --------------------------------------------------------------- esqueleto */
.sk{background:linear-gradient(90deg,var(--surf2) 25%,var(--surf3) 37%,var(--surf2) 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:10px;}
@keyframes sk{0%{background-position:100% 0;}100%{background-position:-100% 0;}}

/* --------------------------------------------------------------- splash
   Es lo que mata la sensación de "página web cargando". */
/* Arranque en el azul oscuro del propio logo, para que el icono de la pantalla
   de inicio y la primera pantalla de la app sean la misma cosa. */
#splash{position:fixed;inset:0;z-index:200;background:radial-gradient(120% 80% at 50% 35%,#16283A 0%,#0A1017 70%);transition:opacity .45s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;}
#splash .logo{width:88px;height:88px;border-radius:22px;box-shadow:0 14px 44px rgba(0,0,0,.55);
  animation:logoEntra .7s cubic-bezier(.2,.9,.3,1) both;}
@keyframes logoEntra{from{opacity:0;transform:scale(.82) translateY(10px);}to{opacity:1;transform:none;}}
#splash .t{font-size:34px;font-weight:800;letter-spacing:.24em;margin:0;text-shadow:0 2px 20px rgba(0,0,0,.35);animation:logoEntra .7s .1s cubic-bezier(.2,.9,.3,1) both;}

#splash .sp{width:22px;height:22px;border:2.5px solid rgba(255,255,255,.22);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;margin-top:10px;}

/* La salida de emergencia del arranque (ver js/arranque.js). Sale sola si a los
   ocho segundos la app no ha dado señales de vida. */
#splashFallo{display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:22px;padding:0 32px;text-align:center;animation:logoEntra .5s both;}
#splashFallo[hidden]{display:none;}
#splashFallo .sf-t{margin:0;font-size:15px;font-weight:700;}
#splashFallo .sf-s{margin:0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.62);max-width:280px;}
#splashReparar{margin-top:6px;padding:11px 20px;border:none;border-radius:12px;
  background:#fff;color:#0A1017;font-size:14px;font-weight:700;cursor:pointer;}
#splashReparar:disabled{opacity:.6;}

/* --------------------------------------------------------------- mapa */
#lienzo{display:block;width:100%;touch-action:none;background:var(--surf2);}
.atrib{position:absolute;right:6px;bottom:6px;font-size:9.5px;color:var(--tx3);background:rgba(255,255,255,.72);padding:2px 6px;border-radius:5px;}
.dark .atrib{background:rgba(0,0,0,.5);}

/* ------------------------------------------------------- orientación */
/* La app se usa en vertical, pero hay UNA excepción y es justo la que importa:
   una webcam a pantalla completa. Las cámaras son horizontales, así que mientras
   el visor está abierto (<html class="con-cine">, lo pone cine.js) el aviso
   desaparece y girar el móvil hace lo que se espera: la imagen ocupa la pantalla
   entera en horizontal. Antes había un botón que rotaba la imagen por CSS y la
   app seguía enseñando el cartel: lo peor de las dos opciones a la vez. */
#rotateHint{display:none;position:fixed;inset:0;z-index:2147483600;background:var(--bg);align-items:center;justify-content:center;text-align:center;padding:30px;flex-direction:column;gap:12px;}
@media (orientation:landscape) and (max-height:500px){
  html:not(.con-cine) #rotateHint{display:flex;}
  /* En horizontal y con el visor abierto, el visor manda: fuera márgenes y que
     la imagen use el alto entero, que es todo lo que hay. */
  html.con-cine #cine .cine-img,html.con-cine #cine .cine-video{max-height:100vh;max-width:100vw;}
  html.con-cine #cine .cine-barra{padding-top:calc(env(safe-area-inset-top,0px) + 4px);padding-bottom:4px;}
}

::selection{background:rgba(var(--accrgb),.24);}
::placeholder{color:var(--tx3);opacity:1;}

/* ============================================================================
 * v2 · fechas, filtros, gráficos, mapa, webcams, guía
 * ==========================================================================*/

/* ------------------------------------------------------------ tira de fechas
   De una semana atrás a dos adelante. El día elegido se marca en azul; los que
   ya pasaron van atenuados, para que se note que son comprobación, no decisión. */
.fechas{gap:6px;padding:2px 12px 8px;margin:0 -12px;}
.fecha{flex:0 0 50px;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:7px 0 8px;border-radius:13px;border:1px solid var(--bd);background:var(--surf);
  color:var(--tx2);box-shadow:var(--sh);}
.fecha.pas{opacity:.6;}
.fecha.on{background:var(--acc);border-color:var(--acc);color:#fff;opacity:1;
  box-shadow:0 3px 12px rgba(var(--accrgb),.36);}
.fecha .f-sem{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.75;}
.fecha .f-num{font-size:18px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;}
.fecha .f-mes{font-size:9px;font-weight:600;opacity:.72;}
.fecha-larga{margin:0 0 11px 3px;font-size:12.5px;color:var(--tx3);font-weight:500;}

/* --------------------------------------------------------------- controles */
.controles{display:flex;gap:8px;align-items:center;margin-bottom:13px;}
.controles .hscroll{gap:7px;}
.chip em{font-style:normal;opacity:.6;margin-left:4px;font-size:10.5px;font-weight:600;}
.chip.filtro{flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:7px 11px;}
.chip.filtro b{background:var(--acc);color:#fff;border-radius:9px;padding:0 5px;font-size:10.5px;}
.chip.filtro.on b{background:var(--acctx);color:var(--accbg);}
.modos{gap:7px;margin-bottom:10px;}

/* ------------------------------------------------------------------ héroe */
.hero-ventana span b{font-weight:800;}
.frase.tocable{display:flex;gap:8px;align-items:flex-start;width:100%;text-align:left;
  background:none;border:none;padding:7px 8px;margin:0 -8px 4px;border-radius:11px;
  font-size:15px;line-height:1.45;color:var(--tx);font-family:inherit;}
.frase.tocable:active{background:var(--surf2);}
.frase.tocable .lupa{margin-left:auto;color:var(--tx3);flex:0 0 auto;opacity:.6;}
.frase.evol{color:var(--tx2);font-size:14px;background:var(--surf2);padding:9px 11px;border-radius:11px;}
.hero-rosa{display:flex;gap:14px;align-items:center;margin-top:14px;padding-top:13px;border-top:1px solid var(--bd);}
.hero-rosa p{margin:0;font-size:12.5px;color:var(--tx2);line-height:1.45;}
.tira-btn{display:block;width:100%;background:none;border:none;padding:0;text-align:left;}
.cd.tira-btn{background:var(--surf);border:1px solid var(--bd);padding:12px 10px;}
.pri-tag{background:var(--accbg) !important;color:var(--acctx) !important;border-color:rgba(var(--accrgb),.3) !important;}

/* -------------------------------------------------- números de un vistazo */
.numeros{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:0 0 2px;}
.num-c{background:var(--surf2);border:1px solid var(--bd);border-radius:11px;padding:8px 3px 7px;
  text-align:center;display:flex;flex-direction:column;gap:1px;cursor:pointer;
  transition:transform .12s ease;}
.num-c:active{transform:scale(.95);}
.num-t{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);}
.num-v{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15;}
.num-s{font-size:9px;font-weight:700;line-height:1.2;letter-spacing:-.01em;}

/* ------------------------------------------------------------------- filas */
/* Cada dato es un <span> y el separador lo pone el CSS: si se ponen puntos
   sueltos como texto, el flex los convierte en items y quedan bailando. */
.fila-meta{margin:3px 0 0;font-size:11.5px;color:var(--tx3);font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1.5;}
.fila-meta>span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;}
.fila-meta>span+span::before{content:"·";margin:0 5px 0 2px;color:var(--bd2);font-weight:700;}
.fila-meta svg{vertical-align:-2px;}
.fila.estatica{cursor:default;}
.fila .cara{font-size:25px;flex:0 0 auto;}
.fila-raz.cita{font-style:italic;}
.mini{display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;
  border-radius:6px;padding:1px 4px;line-height:1.5;}
.mini-cam{background:var(--accbg);color:var(--acctx);padding:2px 4px;}
.mini-cam svg{width:12px;height:12px;}
.mini.warn{background:rgba(var(--warnrgb),.18);color:var(--warn2);}

/* ------------------------------------------------------------------ avisos */
.tocable-aviso{width:100%;text-align:left;font-family:inherit;align-items:center;cursor:pointer;}
.tocable-aviso svg:last-child{margin-left:auto;opacity:.6;flex:0 0 18px;}
.nota-lbl{margin:-4px 4px 10px;font-size:12px;color:var(--tx3);line-height:1.45;}
.cabecera{margin:2px 3px 3px;font-size:22px;font-weight:800;letter-spacing:-.03em;}
.pie{font-size:11px;color:var(--tx3);margin:10px 3px 0;line-height:1.45;}
.vacio{font-size:12.5px;color:var(--tx3);margin:6px 0;}
.vacio-cd{text-align:center;padding:30px 20px;}
.v-t{font-size:15.5px;font-weight:700;margin:0 0 6px;}
.v-s{font-size:13.5px;color:var(--tx2);margin:0 0 16px;line-height:1.5;}

/* --------------------------------------------------------------- el ayuda */
.ayuda{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;border:none;background:var(--surf3);color:var(--tx2);
  font-size:10.5px;font-weight:800;font-family:inherit;vertical-align:1px;margin-left:2px;flex:0 0 auto;
  transition:transform .12s ease,background .15s ease;}
.ayuda:active{transform:scale(.85);background:var(--acc);color:#fff;}

/* ------------------------------------------------------------------ mapa */
.mapa-caja{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--bd);
  box-shadow:var(--sh);margin-bottom:10px;background:var(--surf2);}
.mapa-btns{position:absolute;right:9px;top:9px;display:flex;flex-direction:column;gap:6px;}
.mapa-b{width:34px;height:34px;border-radius:10px;border:1px solid var(--bd2);
  background:rgba(255,255,255,.9);color:var(--tx);font-size:18px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .12s ease;}
.dark .mapa-b{background:rgba(20,28,36,.88);}
.mapa-b:active{transform:scale(.9);}
.leyenda{background:var(--surf);border:1px solid var(--bd);border-radius:14px;padding:11px 13px;
  margin-bottom:11px;box-shadow:var(--sh);}
.leyenda-barra{display:flex;height:9px;border-radius:5px;overflow:hidden;}
.leyenda-pie{display:flex;justify-content:space-between;font-size:11px;color:var(--tx3);
  font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums;}
.leyenda-nota{margin:7px 0 0;font-size:12px;color:var(--tx2);line-height:1.4;}
#lienzoPreview{display:block;width:100%;touch-action:none;}

/* --------------------------------------------------------------- gráficos */
.graf{margin:0 0 16px;}
.graf figcaption{display:flex;align-items:baseline;gap:6px;font-size:11.5px;font-weight:700;color:var(--tx2);margin-bottom:4px;
  text-transform:uppercase;letter-spacing:.05em;}
.graf figcaption span{font-weight:600;color:var(--tx3);text-transform:none;letter-spacing:0;}
.graf svg{width:100%;height:130px;display:block;overflow:visible;}

/* --------------------------------------------------------------- tendencia */
.tend{display:flex;gap:2px;align-items:flex-end;height:112px;}
.tend-d{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;
  height:100%;background:none;border:none;padding:0 0 2px;border-radius:7px;min-width:0;}
.tend-d.on{background:rgba(var(--accrgb),.12);box-shadow:inset 0 0 0 1.5px rgba(var(--accrgb),.4);}
.tend-n{font-size:8.5px;font-weight:800;color:var(--tx3);font-variant-numeric:tabular-nums;}
.tend-b{width:min(100%,15px);border-radius:3px 3px 0 0;min-height:3px;transition:height .3s ease;}
.tend-f{font-size:8.5px;color:var(--tx3);font-weight:700;}
.tend-pie{margin:9px 0 0;font-size:11.5px;color:var(--tx3);line-height:1.4;}

/* --------------------------------------------------------------- desglose */
.desg{display:flex;align-items:center;gap:9px;margin:8px 0;}
.desg-n{flex:0 0 122px;font-size:12.5px;color:var(--tx2);}
.desg-n em{font-style:normal;color:var(--tx3);font-size:10.5px;margin-left:4px;}
.desg-b{flex:1;height:6px;border-radius:3px;background:var(--surf3);overflow:hidden;}
.desg-b i{display:block;height:100%;border-radius:3px;transition:width .3s ease;}
.desg-v{flex:0 0 28px;text-align:right;font-size:12px;font-weight:700;color:var(--tx2);}

/* ------------------------------------------------------------------ ficha */
.ficha-cab{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;}
.ficha-tit{flex:1;min-width:0;}
.ficha-tit h2{margin:0;font-size:25px;font-weight:800;letter-spacing:-.03em;}
.ficha-tit p{margin:3px 0 0;font-size:12.5px;color:var(--tx2);display:flex;align-items:center;
  gap:5px;flex-wrap:wrap;}
.ficha-pt{text-align:center;flex:0 0 auto;}
.ficha-pt .n{font-size:31px;font-weight:800;line-height:1;}
.ficha-pt .badge{margin-top:4px;}
.ventana-cd{display:flex;align-items:center;gap:10px;background:var(--accbg);
  border-color:rgba(var(--accrgb),.25);color:var(--acctx);}
.ventana-cd .sub{font-size:12.5px;opacity:.9;}
.rosa-cd{display:flex;gap:14px;align-items:center;}
.r-frase{margin:0 0 8px;font-size:14px;line-height:1.45;}
.r-ley{margin:0 0 9px;font-size:11.5px;color:var(--tx3);line-height:1.4;}
.gho.peq{padding:7px 10px;font-size:12px;display:inline-flex;align-items:center;gap:5px;}
.gho.peq svg{width:14px;height:14px;}
.lin{display:flex;gap:10px;margin-bottom:13px;}
.lin:last-child{margin-bottom:0;}
.lin-i{flex:0 0 17px;color:var(--tx3);margin-top:2px;}
.lin-c{flex:1;min-width:0;}
.lin-t{margin:0 0 2px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--tx3);display:flex;align-items:center;gap:3px;}
.lin-x{margin:0 0 7px;font-size:14px;line-height:1.45;}
.p-l{margin:0 0 9px;font-size:14px;line-height:1.5;}
.p-sub{margin:0;font-size:12.5px;color:var(--tx2);line-height:1.55;}
.p-warn{margin:10px 0 0;font-size:11.5px;color:var(--warn2);line-height:1.5;}
.valorar{display:flex;gap:8px;}
.valorar button{flex:1;font-size:15px;}
.resumen3{display:flex;text-align:center;}
.resumen3>div{flex:1;display:flex;flex-direction:column;gap:2px;}
.r-n{font-size:26px;font-weight:800;}
.r-t{font-size:11px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.06em;}

/* --------------------------------------------------------------- mareas */
.mareas{display:flex;gap:7px;margin-top:4px;}
.marea-c{flex:1;text-align:center;background:var(--surf2);border-radius:11px;padding:8px 4px;}
.m-e{margin:0;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);}
.m-h{margin:2px 0 0;font-size:15px;font-weight:800;}
.m-a{margin:0;font-size:11px;color:var(--tx2);}

/* ---------------------------------------------------------------- foto */
.foto{margin:0 0 12px;border-radius:16px;overflow:hidden;border:1px solid var(--bd);
  box-shadow:var(--sh);background:var(--surf2);}
.foto img,.foto .ilus{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}
.foto figcaption{font-size:10.5px;color:var(--tx3);padding:6px 10px 7px;background:var(--surf);line-height:1.35;}
.foto-sk{height:190px;border-radius:16px;margin-bottom:12px;}

/* --------------------------------------------------------------- webcams */
.cam{display:block;width:100%;padding:0;border:none;background:var(--surf2);
  position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;}
.cam img{width:100%;height:100%;object-fit:cover;display:block;}
.cam .et{position:absolute;left:9px;bottom:9px;background:rgba(0,0,0,.58);color:#fff;font-size:11.5px;
  font-weight:700;padding:4px 10px;border-radius:9px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.cam.grande{aspect-ratio:auto;margin-bottom:10px;}
.cam.grande img{height:auto;max-height:60vh;}
.cam-cd{padding:9px;}
.cam-pie{display:flex;align-items:center;gap:10px;margin-top:9px;padding:0 3px 2px;}
.cam-mira{flex:1;margin:0;font-size:12px;color:var(--tx2);line-height:1.4;}

/* ---------------------------------------------------------------- guía */
.rowbtn{margin-bottom:7px;}
.rowbtn>span{display:flex;flex-direction:column;gap:2px;text-align:left;}
.rowbtn em{font-style:normal;font-size:11.5px;color:var(--tx3);font-weight:500;}
.g-p{margin:0 0 11px;font-size:13.5px;line-height:1.55;color:var(--tx2);}
.g-p:last-child{margin-bottom:0;}
.glos-p{margin:0 0 13px;font-size:14.5px;line-height:1.6;}
.hoja-t{margin:0 0 4px;font-size:22px;font-weight:800;letter-spacing:-.03em;}

/* --------------------------------------------------------------- filtros */
.toggle{position:relative;width:46px;height:27px;border-radius:14px;background:var(--bd2);
  transition:background .2s;flex:0 0 46px;display:inline-block;}
.toggle.on{background:var(--acc);}
.toggle i{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:left .2s cubic-bezier(.3,.8,.3,1);box-shadow:0 1px 3px rgba(0,0,0,.25);}
.toggle.on i{left:22px;}
.filtros-pie{display:flex;gap:9px;margin-top:18px;position:sticky;bottom:0;
  padding:12px 0 2px;background:linear-gradient(transparent,var(--surf) 26%);}
.filtros-pie .gho{flex:0 0 auto;}
.filtros-pie .pri{flex:1;}

/* --------------------------------------------------------------- hoja */
#sheet.cerrando #sheetPanel{animation:sheetDown .18s ease forwards;}
#sheet.cerrando #sheetScrim{animation:fadeOut .18s ease forwards;}
@keyframes sheetDown{to{transform:translateY(100%);opacity:.4;}}
@keyframes fadeOut{to{opacity:0;}}
#sheetPanel{will-change:transform;}

/* --------------------------------------------------------------- toast */
#toast{position:absolute;left:50%;transform:translate(-50%,10px);bottom:92px;z-index:80;
  background:rgba(16,24,32,.94);color:#fff;font-size:13px;font-weight:600;padding:10px 16px;
  border-radius:12px;max-width:88%;text-align:center;box-shadow:0 8px 26px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;}
#toast.on{opacity:1;transform:translate(-50%,0);}

/* ============================================================================
 * v3 · mapa a pantalla completa, asistente, visor, favoritos, pesos
 * ==========================================================================*/

/* ------------------------------------------------------------------ marca */
.marca span{color:var(--acc);}
.tb-b{width:34px;height:34px;border:none;background:transparent;display:flex;align-items:center;
  justify-content:center;color:var(--tx);border-radius:9px;transition:transform .12s ease,background .15s ease;}
.tb-b.acc{color:var(--acc);}
.tb-b:active{transform:scale(.88);background:var(--surf2);}
#splash .t span{color:#3FC8F5;}

/* --------------------------------------------------------------- mapa full */
#screen.fullbleed{padding:0;}
.mapa-lienzo{position:relative;background:var(--surf2);}
#lienzo{display:block;width:100%;touch-action:none;}
.mapa-arriba{position:absolute;left:0;right:0;top:0;padding:10px 10px 22px;
  background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,0));pointer-events:none;}
.mapa-arriba .hscroll{pointer-events:auto;}
.pill{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:18px;border:none;
  background:rgba(255,255,255,.9);color:#101820;box-shadow:0 2px 8px rgba(0,0,0,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .12s ease,background .15s ease;white-space:nowrap;}
.dark .pill{background:rgba(20,28,36,.9);color:#ECF1F5;}
.pill.on{background:var(--acc);color:#fff;}
.pill:active{transform:scale(.94);}
.pill em{font-style:normal;opacity:.65;margin-left:4px;font-size:10.5px;}
.pill b{background:rgba(255,255,255,.35);border-radius:8px;padding:0 5px;font-size:10.5px;margin-left:4px;}
.mapa-btns{position:absolute;right:9px;top:56px;display:flex;flex-direction:column;gap:6px;}
.mapa-zoom{position:absolute;right:9px;bottom:34px;display:flex;flex-direction:column;gap:6px;}
.mapa-b{width:36px;height:36px;border-radius:11px;border:1px solid var(--bd2);
  background:rgba(255,255,255,.92);color:var(--tx);font-size:17px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 9px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .12s ease;}
.dark .mapa-b{background:rgba(20,28,36,.9);}
.mapa-b.on{background:var(--acc);color:#fff;border-color:var(--acc);}
.mapa-b:active{transform:scale(.88);}
.atrib{position:absolute;left:8px;bottom:8px;font-size:9.5px;color:#fff;
  background:rgba(0,0,0,.42);padding:2px 7px;border-radius:5px;max-width:70%;}

/* leyenda con tramos filtrables */
.leyenda{background:var(--surf);border:1px solid var(--bd);border-radius:0 0 16px 16px;
  padding:10px 12px 11px;margin:0 0 12px;box-shadow:var(--sh);}
#screen.fullbleed .leyenda{border-radius:0;border-left:none;border-right:none;}
.ley-tramos{display:flex;gap:5px;}
.ley-t{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:none;
  background:transparent;padding:5px 2px 6px;border-radius:9px;min-width:0;
  transition:background .15s ease,transform .12s ease;}
.ley-t i{width:100%;height:7px;border-radius:4px;}
.ley-t span{font-size:9.5px;font-weight:700;color:var(--tx2);text-align:center;line-height:1.15;}
.ley-t em{font-style:normal;font-size:8.5px;color:var(--tx3);font-variant-numeric:tabular-nums;}
.ley-t.on{background:var(--accbg);box-shadow:inset 0 0 0 1.5px var(--acc);}
.ley-t:active{transform:scale(.94);}

/* panel de lista bajo el mapa */
.panel-cab{display:flex;gap:8px;align-items:center;padding:0 12px 8px;}
#screen.fullbleed .panel-cab{padding:0 12px 8px;}
.panel-n{margin:0 15px 8px;font-size:11.5px;color:var(--tx3);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;}
#screen.fullbleed .fila,#screen.fullbleed .honestidad,
#screen.fullbleed .vacio-cd{margin-left:12px;margin-right:12px;}
#screen.fullbleed .honestidad{margin-bottom:16px;}

/* --------------------------------------------------------------- héroe */
/* La foto acompaña, no manda: 148 px bastan para que se reconozca la playa y
   dejan sitio para que asome la lista de debajo sin tener que scrollear. */
.hero.con-foto .hero-top{background-size:cover;background-position:center;min-height:148px;
  display:flex;flex-direction:column;justify-content:flex-end;}
.hero.con-foto .hero-top::after{opacity:.10;}
/* Ya no flota: vive en la columna derecha, encima del score. */
.hero-der{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;}
.hero-fav{width:32px;height:32px;flex:none;border:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.18);color:#fff;font-size:17px;line-height:1;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .12s ease;}
/* La cabecera de la recomendada abre su ficha: la foto grande es lo primero que
   se toca y no llevaba a ninguna parte. */
.hero-top{cursor:pointer;transition:filter .15s ease;}
.hero-top:active{filter:brightness(.94);}
.hero-top button{cursor:pointer;}
/* Rojo, no amarillo: un corazón amarillo no lo lee nadie como favorito. */
.hero-fav.on{color:#FF5A6E;}
.hero-fav:active{transform:scale(.85);}

/* --------------------------------------------------------------- ficha */
.ficha-sticky{position:sticky;top:-16px;z-index:5;margin:-16px -16px 10px;padding:14px 16px 10px;
  background:var(--surf);border-bottom:1px solid var(--bd);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .ficha-sticky{background:color-mix(in srgb, var(--surf) 88%, transparent);}
}
.ficha-cab{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px;}
.ficha-fav{border:none;background:transparent;font-size:21px;line-height:1;color:var(--tx3);
  padding:0 2px;transition:transform .12s ease;}
.ficha-fav.on{color:#F2B01E;}
.ficha-fav:active{transform:scale(.82);}
.ficha-acc{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;}
.ficha-acc::-webkit-scrollbar{display:none;}
.ficha-acc .gho{flex:0 0 auto;}
.ventana-cd{width:100%;text-align:left;font-family:inherit;}
.ventana-cd svg:last-child{margin-left:auto;opacity:.6;}
.desg-cd{width:100%;text-align:left;font-family:inherit;}
.ficha-foto{margin-bottom:12px;}
.ficha-foto img{aspect-ratio:16/9;}
.p-warn{margin:10px 0 0;font-size:11.5px;color:var(--warn2);line-height:1.5;text-align:left;
  background:rgba(var(--warnrgb),.10);border:1px solid rgba(var(--warnrgb),.25);
  border-radius:10px;padding:9px 11px;width:100%;font-family:inherit;}
.sep{height:1px;background:var(--bd);margin:12px 0;}

/* visitas en la ficha */
.visitas{display:flex;flex-direction:column;gap:11px;}
.visita{display:flex;gap:10px;align-items:flex-start;}
.v-cara{font-size:22px;}
.v-f{margin:0;font-size:12.5px;font-weight:700;}
.v-d{margin:1px 0 0;font-size:11.5px;color:var(--tx3);line-height:1.4;}
.v-n{margin:3px 0 0;font-size:12.5px;font-style:italic;color:var(--tx2);}

/* --------------------------------------------------------------- pesos */
.peso{margin-bottom:14px;}
.peso-cab{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:5px;}
.peso-cab span{font-size:13.5px;font-weight:600;display:flex;flex-direction:column;}
.peso-cab em{font-style:normal;font-size:11px;color:var(--tx3);font-weight:500;}
.peso-cab b{font-size:15px;color:var(--acc);}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;height:22px;}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:var(--surf3);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);margin-top:-8.5px;border:1px solid var(--bd2);}
input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:var(--surf3);}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid var(--bd2);}

/* --------------------------------------------------------------- gráficos */
.graf-viento svg{height:150px;}
.graf-ley{display:flex;gap:12px;margin-top:5px;flex-wrap:wrap;}
.graf-ley span{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--tx2);font-weight:600;}
.graf-ley i{width:11px;height:11px;border-radius:3px;display:inline-block;}
.mas-graf{margin-top:6px;}
.mas-graf summary{font-size:13px;font-weight:700;color:var(--acc);cursor:pointer;list-style:none;
  padding:11px 0;}
.mas-graf summary::-webkit-details-marker{display:none;}

/* --------------------------------------------------------------- cámaras */
.cam-live-tapa{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;background:linear-gradient(150deg,#12283A,#0B1218);color:#fff;}
.cam-live-tapa svg{width:30px;height:30px;opacity:.9;}
.cam-live-tapa span{font-size:14px;font-weight:700;}
.cam-live-tapa em{font-style:normal;font-size:11.5px;opacity:.6;}
.et-live{position:absolute;right:9px;top:9px;background:#E5484D;color:#fff;font-size:10px;
  font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:7px;}
.cam-info{flex:1;min-width:0;}
.cam-meta{margin:3px 0 0;font-size:11px;color:var(--tx3);font-weight:600;}
.mini.fav{background:rgba(242,176,30,.18);color:#B8860B;}
.dark .mini.fav{color:#FFD36A;}
.mini.ok2{background:rgba(var(--okrgb),.16);color:var(--ok2);padding:1px 6px;}
.mini.bad{background:rgba(var(--badrgb),.16);color:var(--bad);padding:1px 6px;}

/* --------------------------------------------------------------- visor */
#cine{position:fixed;inset:0;z-index:300;background:#000;display:none;
  flex-direction:column;color:#fff;}
#cine.on{display:flex;}
html.sin-scroll,html.sin-scroll body{overflow:hidden;}
.cine-barra{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px;
  background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,0));position:relative;z-index:2;}
.cine-b{width:38px;height:38px;border:none;border-radius:50%;background:rgba(255,255,255,.14);
  color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 38px;
  transition:transform .12s ease;}
.cine-b:active{transform:scale(.88);}
.cine-tit{flex:1;min-width:0;}
.cine-tit p{margin:0;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cine-hora{font-size:11.5px;opacity:.7;}
.cine-hora.live{color:#FF8A8C;font-weight:700;}
.cine-marco{flex:1;display:flex;align-items:center;justify-content:center;padding:0 4px;min-height:0;}
.cine-lienzo{max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;
  transition:transform .28s cubic-bezier(.2,.8,.3,1);}
.cine-img,.cine-video{max-width:100%;max-height:78vh;display:block;object-fit:contain;border-radius:6px;}
/* Fuera la rotación por CSS (`#cine.girado`) y fuera la nota de "si no arranca":
   se gira el teléfono, y el aviso de HLS vive en el respaldo `.cine-fallo`, que
   sólo aparece cuando el vídeo de verdad no ha arrancado. */
.cine-pie{margin:0;padding:8px 16px;font-size:12px;opacity:.7;text-align:center;}
/* El aviso de "sin imagen" del visor. A pantalla completa, el icono de imagen
   rota del navegador se lee como una avería de la app. */
.cine-fallo{display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:38px 20px;color:#fff;opacity:.85;}
.cine-fallo svg{width:34px;height:34px;opacity:.9;}
.cine-fallo span{font-size:15px;font-weight:700;}
.cine-fallo em{font-style:normal;font-size:12px;opacity:.65;}
#cine.cine-sin-imagen .cine-fallo{display:flex;}
/* El vídeo también: si el navegador no reproduce HLS quedaba un rectángulo negro
   y parecía que la app se había colgado. El respaldo sustituye a los dos. */
#cine.cine-sin-imagen .cine-img,#cine.cine-sin-imagen .cine-video{display:none;}
@media (orientation:landscape){
  .cine-img,.cine-video{max-height:100vh;}
  .cine-pie{display:none;}
}

/* --------------------------------------------------------------- asistente */
#asistente{position:absolute;inset:0;z-index:120;display:none;}
#asistente.on{display:block;}
#asisScrim{position:absolute;inset:0;background:rgba(0,0,0,.45);animation:fadeIn .18s ease;}
#asisPanel{position:absolute;left:0;right:0;bottom:0;top:52px;background:var(--bg);
  border-radius:20px 20px 0 0;display:flex;flex-direction:column;overflow:hidden;
  animation:sheetUp .24s cubic-bezier(.2,.8,.2,1);box-shadow:0 -8px 40px rgba(0,0,0,.3);}
#asisCab{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--bd);}
#asisCab p{margin:0;font-size:17px;font-weight:800;flex:1;display:flex;flex-direction:column;letter-spacing:-.02em;}
#asisCab em{font-style:normal;font-size:11.5px;color:var(--tx3);font-weight:500;}
#asisCab button{width:32px;height:32px;border:none;background:var(--surf2);border-radius:50%;
  color:var(--tx2);display:flex;align-items:center;justify-content:center;}
#asisHilo{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
#asisHilo::-webkit-scrollbar{display:none;}
.asis-m{max-width:92%;padding:11px 13px;border-radius:16px;font-size:14.5px;line-height:1.5;
  animation:asisIn .2s cubic-bezier(.2,.8,.3,1);}
@keyframes asisIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.asis-m.app{background:var(--surf);border:1px solid var(--bd);align-self:flex-start;box-shadow:var(--sh);}
.asis-m.yo{background:var(--acc);color:#fff;align-self:flex-end;border-bottom-right-radius:5px;}
.asis-m p{margin:0 0 8px;}
.asis-m p:last-child{margin-bottom:0;}
.asis-nota{font-size:11.5px;color:var(--tx3);border-top:1px solid var(--bd);padding-top:7px;margin-top:9px;}
.asis-veto{color:var(--bad);font-weight:600;}
.asis-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.asis-chip{font-size:12px;font-weight:600;padding:7px 11px;border-radius:16px;border:1px solid var(--bd2);
  background:var(--surf2);color:var(--tx2);transition:transform .12s ease;}
.asis-chip.pri-chip{background:var(--accbg);color:var(--acctx);border-color:rgba(var(--accrgb),.35);}
.asis-chip:active{transform:scale(.94);}
.asis-p{background:var(--surf2);border-radius:12px;padding:9px 11px;margin-top:8px;}
.asis-p-cab{display:flex;align-items:center;gap:8px;font-size:14px;}
.asis-p-cab b{flex:1;}
.asis-pt{color:#fff;font-size:12px;font-weight:800;padding:2px 8px;border-radius:10px;}
.asis-p-m{margin:3px 0 0;font-size:11.5px;color:var(--tx3);line-height:1.4;}
.asis-tabla{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px;}
.asis-tabla th{text-align:left;font-size:11px;color:var(--tx3);text-transform:uppercase;
  letter-spacing:.06em;padding:3px 6px;}
.asis-tabla td{padding:5px 6px;border-top:1px solid var(--bd);font-variant-numeric:tabular-nums;}
.asis-tabla td:first-child{color:var(--tx3);font-size:12px;}
.asis-esc{display:inline-flex;gap:3px;align-items:center;color:var(--tx3);}
.asis-esc i{width:6px;height:6px;border-radius:50%;background:var(--tx3);display:inline-block;
  animation:puntito 1.1s infinite;}
.asis-esc i:nth-child(2){animation-delay:.15s;}
.asis-esc i:nth-child(3){animation-delay:.3s;}
@keyframes puntito{0%,60%,100%{opacity:.25;}30%{opacity:1;}}
#asisForm{display:flex;gap:8px;padding:11px 14px calc(env(safe-area-inset-bottom,0px) + 12px);
  border-top:1px solid var(--bd);background:var(--surf);}
#asisEntrada{flex:1;border:1px solid var(--bd2);background:var(--surf2);border-radius:22px;
  padding:11px 15px;font-size:15px;font-family:inherit;color:var(--tx);outline:none;}
#asisEntrada:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--accrgb),.16);}
#asisForm button{width:44px;height:44px;border:none;border-radius:50%;background:var(--acc);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 44px;transition:transform .12s ease;}
#asisForm button:active{transform:scale(.9);}

/* ============================================================================
 * v4 · mapa a pantalla completa, tarjeta emergente, modo corrido, corazones
 * ==========================================================================*/

/* --------------------------------------------------- mapa a pantalla completa
   El mapa ES la pantalla: ocupa todo el hueco entre las dos barras y los
   controles van encima, flotando. Nada de lista debajo. */
#screen.fullbleed{padding:0;overflow:hidden;}
.mapa-lienzo{position:relative;height:100%;background:var(--surf2);}
#lienzo{display:block;width:100%;touch-action:none;}

.mapa-arriba{position:absolute;left:0;right:0;top:0;padding:10px 10px 26px;
  background:linear-gradient(180deg,rgba(0,0,0,.36),rgba(0,0,0,0));pointer-events:none;z-index:3;}
.mapa-arriba .hscroll{pointer-events:auto;}
.mapa-btns{position:absolute;right:9px;top:58px;display:flex;flex-direction:column;gap:6px;z-index:3;}
.mapa-zoom{position:absolute;right:9px;bottom:118px;display:flex;flex-direction:column;gap:6px;z-index:3;}
.mapa-b{position:relative;}
.mapa-b.medio{background:var(--accbg);color:var(--acctx);border-color:rgba(var(--accrgb),.4);}
.mapa-b .pin{position:absolute;top:-4px;right:-4px;background:var(--acc);color:#fff;font-size:9.5px;
  font-weight:800;border-radius:9px;padding:1px 5px;line-height:1.4;}

.mapa-abajo{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;}
.mapa-abajo .leyenda{pointer-events:auto;margin:0;border-radius:16px 16px 0 0;border-left:none;
  border-right:none;border-bottom:none;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px);
  background:var(--topbar);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);}
.mapa-abajo .atrib{position:static;margin:0 auto;display:block;width:max-content;
  transform:translateY(-100%);opacity:.85;pointer-events:none;}

/* ------------------------------------------------------------ modo corrido */
.mapa-tiempo{position:absolute;left:10px;right:10px;bottom:150px;z-index:4;display:flex;
  align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:22px;
  background:rgba(255,255,255,.9);box-shadow:0 4px 18px rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
.dark .mapa-tiempo{background:rgba(20,28,36,.9);}
.mt-play{width:34px;height:34px;flex:0 0 34px;border:none;border-radius:50%;background:var(--acc);
  color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .12s ease;}
.mapa-tiempo.play .mt-play{background:var(--bad);}
.mt-play:active{transform:scale(.88);}
.mt-barra{flex:1;min-width:0;position:relative;padding-bottom:11px;}
#mapaHora{width:100%;margin:0;}
.mt-marcas{position:absolute;left:0;right:0;bottom:0;height:10px;pointer-events:none;}
.mt-marcas span{position:absolute;transform:translateX(-50%);font-size:8.5px;color:var(--tx3);
  font-weight:700;font-variant-numeric:tabular-nums;}
.mt-hora{flex:0 0 auto;font-size:14px;font-weight:800;color:var(--tx);min-width:42px;text-align:right;}

/* -------------------------------------------------------- tarjeta emergente */
#mapaPop{position:absolute;left:0;right:0;bottom:0;z-index:6;pointer-events:none;
  transform:translateY(105%);transition:transform .24s cubic-bezier(.2,.85,.3,1);}
#mapaPop.on{transform:translateY(0);pointer-events:auto;}
.pop{margin:0 8px calc(env(safe-area-inset-bottom,0px) + 8px);background:var(--surf);
  border:1px solid var(--bd);border-radius:20px;box-shadow:0 -4px 30px rgba(0,0,0,.28);
  padding:12px 13px 11px;position:relative;}
.pop-cerrar{position:absolute;top:8px;right:8px;width:28px;height:28px;border:none;border-radius:50%;
  background:var(--surf2);color:var(--tx3);display:flex;align-items:center;justify-content:center;}
.pop-cerrar svg{width:15px;height:15px;}
.pop-cab{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;
  padding:0 30px 0 0;text-align:left;font-family:inherit;color:inherit;}
.pop-pt{flex:0 0 42px;height:42px;border-radius:13px;color:#fff;font-size:18px;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;}
.pop-tit{flex:1;min-width:0;}
.pop-n{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:6px;}
.pop-s{margin:1px 0 0;font-size:11.5px;color:var(--tx3);font-weight:600;}
.pop-veto{margin:9px 0 0;font-size:12px;color:var(--bad);font-weight:600;}
.pop-datos{display:flex;gap:5px;margin:11px 0 10px;}
.pop-datos>div{flex:1;background:var(--surf2);border-radius:10px;padding:6px 3px 7px;text-align:center;
  display:flex;flex-direction:column;gap:1px;min-width:0;}
.pop-datos span{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);}
.pop-datos b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15;}
.pop-datos b.peq{font-size:12px;}
.pop-datos em{font-style:normal;font-size:9px;color:var(--tx3);font-weight:600;display:block;}
.pop-acc{display:flex;gap:7px;align-items:center;}
.pop-b{width:38px;height:38px;flex:0 0 38px;border:1px solid var(--bd2);border-radius:11px;
  background:var(--surf2);color:var(--tx2);display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease;}
.pop-b.on{color:#FF4D6D;border-color:rgba(255,77,109,.35);background:rgba(255,77,109,.10);}
.pop-b:active{transform:scale(.9);}
.pop-pri{flex:1;padding:11px;font-size:14px;}

/* ------------------------------------------------ la tarjeta de una BOYA
 * Misma caja que la de una playa, para que se lea como lo mismo, pero con dos
 * diferencias que cuentan de qué va: el icono de boya en vez de la puntuación
 * —una boya no puntúa nada, mide— y la rejilla de datos en dos filas, porque
 * son ocho sensores y no cinco. */
.pop-cab-boya{display:flex;align-items:center;gap:11px;padding-right:34px;}
.pop-bico{flex:0 0 40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:var(--surf2);color:var(--acc);}
.pop-bico svg{width:24px;height:24px;}
.pop-vivo{flex:0 0 auto;font-size:10.5px;font-weight:700;color:var(--tx3);white-space:nowrap;}
.pop-vivo.on{color:var(--ok2);}
/* Ocho celdas no caben en una línea: se envuelven en dos de cuatro. */
.pop-boya .pop-datos{flex-wrap:wrap;}
.pop-boya .pop-datos>div{flex:1 1 calc(25% - 5px);min-width:60px;}
.pop-nota{margin:0 0 10px;font-size:11px;color:var(--tx3);line-height:1.45;
  display:flex;align-items:flex-start;gap:6px;}
.pop-nota svg{flex:0 0 14px;width:14px;height:14px;margin-top:1px;}

/* --------------------------------------------------------- corazón en lista */
.fila-caja{position:relative;margin-bottom:7px;}
.fila-caja .fila{margin-bottom:0;padding-right:46px;width:100%;}
.fila-caja.veto .fila{opacity:.72;border-color:rgba(var(--badrgb),.3);}
.fila-fav{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  border:none;background:transparent;color:var(--tx3);display:flex;align-items:center;
  justify-content:center;border-radius:50%;transition:transform .14s ease,color .15s ease;}
.fila-fav.on{color:#FF4D6D;}
.fila-fav:active{transform:translateY(-50%) scale(.82);}

/* ------------------------------------------------------------- héroe compacto */
/* (El bloque .hero-fav vivía aquí en posición absoluta y pisaba al de arriba:
   por eso el corazón se montaba encima del score. Ahora sólo hay una
   definición, en la sección del héroe, y va en flujo dentro de .hero-der.) */
.hero-mas{margin-top:12px;}
.hero-mas>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  gap:6px;font-size:13.5px;font-weight:700;color:var(--acc);padding:10px;border-radius:12px;
  background:var(--surf2);}
.hero-mas>summary::-webkit-details-marker{display:none;}
.hero-mas>summary svg{transition:transform .2s ease;transform:rotate(90deg);}
.hero-mas[open]>summary svg{transform:rotate(-90deg);}
.hero-mas .cerrar{display:none;}
.hero-mas[open] .abrir{display:none;}
.hero-mas[open] .cerrar{display:inline;}
.hero-mas-c{padding-top:12px;animation:desplegar .22s ease;}
@keyframes desplegar{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

/* ------------------------------------------------------------------ webcams */
.cam-video{width:100%;height:100%;object-fit:cover;display:block;background:#0B1218;}
.cam-lupa{position:absolute;right:9px;bottom:9px;width:28px;height:28px;border-radius:9px;
  background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}

/* --------------------------------------------------------------- gráficos */
.graf-viento svg{height:190px;}
.graf-ley-f{color:var(--tx3);font-weight:500;}

/* Respaldo cuando el navegador no reproduce el HLS (Chrome de escritorio). */
.cam-fallo{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;text-align:center;padding:16px;color:#fff;
  background:linear-gradient(150deg,#12283A,#0B1218);}
.cam-fallo svg{width:30px;height:30px;opacity:.9;}
.cam-fallo span{font-size:14px;font-weight:700;}
.cam-fallo em{font-style:normal;font-size:11.5px;opacity:.65;}
.cam.sin-video .cam-fallo,.cam.sin-imagen .cam-fallo{display:flex;}
.cam.sin-video .cam-video{visibility:hidden;}
.cam.sin-imagen .cam-img{visibility:hidden;}

/* ============================================================================
 * v5 · mapa maximizado, controles agrupados, filas con webcam plegable
 * ==========================================================================*/

/* ------------------------------------------------------- controles del mapa
   Todo flota sobre el mapa y ocupa lo mínimo. Los grupos se pliegan en un solo
   botón y se abren en horizontal, que es hacia donde sobra sitio. */
.mapa-btns{position:absolute;right:9px;top:56px;display:flex;flex-direction:column;
  gap:6px;z-index:5;align-items:flex-end;}
.mapa-zoom{display:none;}

.mapa-grupo{display:flex;align-items:center;gap:6px;}
.mapa-sub{display:flex;gap:6px;overflow:hidden;max-width:0;opacity:0;
  transition:max-width .26s cubic-bezier(.2,.85,.3,1),opacity .18s ease;}
.mapa-grupo.abierto .mapa-sub{max-width:230px;opacity:1;}
.mapa-grupo>[data-grupo]{position:relative;}
.mapa-grupo.abierto>[data-grupo]{background:var(--acc);color:#fff;border-color:var(--acc);}

.mapa-b{width:36px;height:36px;flex:0 0 36px;border-radius:11px;border:1px solid var(--bd2);
  background:rgba(255,255,255,.93);color:var(--tx);font-size:17px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 9px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .12s ease;}
.dark .mapa-b{background:rgba(20,28,36,.92);}
.mapa-b.on{background:var(--acc);color:#fff;border-color:var(--acc);}
.mapa-b:active{transform:scale(.88);}
.mapa-b.redondo{border-radius:50%;}
.mapa-b.redondo.play{background:var(--bad);color:#fff;border-color:var(--bad);}
.mapa-b .pin{position:absolute;top:-4px;right:-4px;background:var(--bad);color:#fff;font-size:9.5px;
  font-weight:800;border-radius:9px;padding:1px 5px;line-height:1.4;}

/* UV: dato de esquina, no un modo de color */
.mapa-uv{position:absolute;left:10px;top:56px;z-index:4;display:flex;align-items:baseline;gap:5px;
  padding:5px 10px;border-radius:12px;border:1px solid var(--bd2);background:rgba(255,255,255,.9);
  box-shadow:0 2px 8px rgba(0,0,0,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.dark .mapa-uv{background:rgba(20,28,36,.9);}
.mapa-uv span{font-size:9.5px;font-weight:800;letter-spacing:.1em;color:var(--tx3);}
.mapa-uv b{font-size:15px;font-weight:800;}

/* --------------------------------------------------- pie del mapa: leyenda */
.mapa-pie{position:absolute;left:8px;right:8px;bottom:8px;z-index:4;display:flex;
  align-items:center;gap:8px;}
.ley-fila{flex:1;min-width:0;display:flex;gap:4px;padding:5px;border-radius:16px;
  background:rgba(255,255,255,.92);box-shadow:0 3px 14px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
.dark .ley-fila{background:rgba(20,28,36,.92);}
.ley-t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  border:none;background:transparent;padding:4px 2px 5px;border-radius:11px;
  transition:background .15s ease,transform .12s ease;}
.ley-t i{width:100%;height:6px;border-radius:3px;}
.ley-t span{font-size:8.5px;font-weight:700;color:var(--tx2);text-align:center;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.ley-t em{display:none;}
.ley-t.on{background:var(--accbg);box-shadow:inset 0 0 0 1.5px var(--acc);}
.ley-t:active{transform:scale(.93);}
.leyenda{display:contents;}
.leyenda-nota,.ley-tramos{display:none;}

.atrib{position:absolute;left:10px;bottom:64px;font-size:9px;color:#fff;
  background:rgba(0,0,0,.38);padding:2px 6px;border-radius:5px;z-index:3;pointer-events:none;}

/* --------------------------------------------- línea temporal, sólo si se abre */
.mapa-tiempo{position:absolute;left:8px;right:8px;bottom:62px;z-index:5;display:none;
  align-items:center;gap:10px;padding:7px 12px 7px 10px;border-radius:20px;
  background:rgba(255,255,255,.94);box-shadow:0 4px 18px rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  animation:subirTiempo .22s cubic-bezier(.2,.85,.3,1);}
.dark .mapa-tiempo{background:rgba(20,28,36,.94);}
.mapa-tiempo.abierta{display:flex;}
@keyframes subirTiempo{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.mt-play{display:none;}
.mt-barra{flex:1;min-width:0;position:relative;padding-bottom:10px;}
.mt-hora{flex:0 0 auto;font-size:14px;font-weight:800;min-width:44px;text-align:right;
  font-variant-numeric:tabular-nums;}

/* La línea de progreso del modo corrido.
   Va DEBAJO del input, alineada con su carril, y es lo que hace que el tiempo se
   vea correr en vez de dar saltos de hora: su ancho se actualiza en cada
   fotograma con el índice fraccionario (ver mapaIrAHora). Sin transición CSS a
   propósito — la suavidad la da el propio bucle de reproducción, y una transición
   encima la retrasaría media hora de reloj. */
/* 8,5 px = (22 − 5) / 2: el input mide 22 px de alto y su carril 5, así que el
   relleno cae exactamente encima del carril (ver input[type=range] más arriba). */
.mt-relleno{position:absolute;left:0;top:8.5px;height:5px;border-radius:3px;
  background:var(--acc);opacity:.75;pointer-events:none;max-width:100%;}
.mapa-tiempo.play .mt-relleno{opacity:1;}

/* --------------------------------------------------- filas con webcam plegable */
.fila-caja{position:relative;margin-bottom:8px;background:var(--surf);border:1px solid var(--bd);
  border-radius:14px;box-shadow:var(--sh);overflow:hidden;}
.fila-caja.veto{border-color:rgba(var(--badrgb),.3);}
.fila-caja.veto .fila{opacity:.72;}
.fila-top{display:flex;align-items:stretch;}
.fila-caja .fila{flex:1;min-width:0;margin:0;border:none;border-radius:0;box-shadow:none;
  background:transparent;padding:11px 4px 11px 13px;}
.fila-nom{margin:0 0 1px;font-size:15.5px;font-weight:700;letter-spacing:-.015em;
  display:block;line-height:1.25;}
.fila-nom .aprox{font-style:normal;font-size:11px;font-weight:800;color:var(--warn2);
  background:rgba(var(--warnrgb),.16);border-radius:5px;padding:0 4px;margin-left:5px;
  vertical-align:1px;}
.fila-acc{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 7px 0 2px;}
.fila-fav,.fila-cam{position:static;transform:none;width:34px;height:32px;border:none;
  background:transparent;color:var(--tx3);display:flex;align-items:center;justify-content:center;
  border-radius:9px;transition:transform .14s ease,color .15s ease;}
.fila-fav.on{color:#FF4D6D;}
.fila-fav:active,.fila-cam:active{transform:scale(.85);}
.fila-cam svg:first-child{width:17px;height:17px;}
.fila-cam svg:last-child{width:13px;height:13px;transition:transform .2s ease;margin-left:-2px;}
.fila-cam[aria-expanded="true"]{color:var(--acc);}
.fila-cam[aria-expanded="true"] svg:last-child{transform:rotate(90deg);}
.fila-webcam{max-height:0;overflow:hidden;transition:max-height .28s cubic-bezier(.2,.85,.3,1);}
.fila-caja.cam-abierta .fila-webcam{max-height:260px;}
.fila-webcam .cam{border-radius:0;margin:0;border-top:1px solid var(--bd);}

/* --------------------------------------------------------------- favoritos */
.pop-b.on,.ficha-fav.on,.hero-fav.on{color:#FF4D6D;}
.ficha-fav.on{color:#FF4D6D;}
.hero-fav.on{color:#FF6B8A;}
.mini.fav{background:rgba(255,77,109,.14);color:#FF4D6D;}
.dark .mini.fav{color:#FF6B8A;}

/* La atribución, del tamaño de su texto y nada más. */
.atrib{width:max-content;max-width:62%;}

/* El badge de webcam de las listas. Se llamaba .mini.cam y heredaba de .cam,
   que es la TARJETA de webcam (width:100% y aspect-ratio 16/10): salía un
   recuadro azul gigante en cada fila. Nombre propio y problema resuelto. */
.mini-cam{background:var(--accbg);color:var(--acctx);padding:2px 5px;display:inline-flex;
  align-items:center;justify-content:center;flex:0 0 auto;width:auto;height:auto;
  aspect-ratio:auto;border-radius:6px;}
.mini-cam svg{width:13px;height:13px;}

/* ============================================================================
 * REGLAS DE ESCALA · "¿esto es mucho o es poco?"
 * ----------------------------------------------------------------------------
 * La barra de tramos de la Guía. Es lo único de la app que enseña números sin
 * un dato detrás: es la referencia, no la previsión.
 * ==========================================================================*/

.escala{padding:14px 14px 12px;}
.esc-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.esc-t{margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.02em;}
.esc-t span{font-size:12px;font-weight:600;color:var(--tx3);}
.esc-intro{margin:6px 0 12px;font-size:13px;line-height:1.55;color:var(--tx2);}
.esc-barra{display:flex;height:9px;border-radius:5px;overflow:hidden;gap:1.5px;}
.esc-barra span{flex:1;}
.esc-nums{display:flex;margin:5px 0 12px;font-size:9.5px;font-weight:700;
  color:var(--tx3);font-variant-numeric:tabular-nums;}
.esc-nums span{flex:1;}
.esc-nums span:first-child{margin-left:-2px;}
.esc-nums .fin{flex:0 0 auto;}
.esc-fila{display:grid;grid-template-columns:9px 1fr auto;gap:4px 8px;align-items:baseline;
  padding:8px 0;border-top:1px solid var(--bd);}
.esc-fila:first-child{border-top:none;padding-top:0;}
.esc-fila i{width:9px;height:9px;border-radius:3px;align-self:center;}
.esc-fila b{font-size:13.5px;font-weight:700;}
.esc-fila em{font-style:normal;font-size:11px;font-weight:700;color:var(--tx3);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.esc-fila p{grid-column:2/4;margin:0;font-size:12.5px;line-height:1.45;color:var(--tx2);}

/* Pastilla de color en línea, para nombrar un color dentro de una frase. */
.pastilla{display:inline-block;padding:1px 7px;border-radius:6px;color:#fff;
  font-size:11.5px;font-weight:700;vertical-align:1px;}

/* ------------------------------------------------------------------ ajustes */

.aj-t{margin:0 0 8px;font-size:14.5px;font-weight:700;}
.aj-n{margin:8px 0 0;font-size:11.5px;color:var(--tx3);line-height:1.45;}
.rowbtn span em{display:block;font-style:normal;font-size:11.5px;color:var(--tx3);
  font-weight:500;line-height:1.4;margin-top:2px;}
/* OJO: `:not(.toggle)`. Sin esa exclusión el `flex:1` también le tocaba al
   interruptor —que es otro <span> hijo directo— y lo estiraba a lo ancho de
   media fila. El de "Animaciones" salía además cuadrado porque su marcado lo
   metía DENTRO del span de texto, heredando el flex-direction:column. */
.rowbtn > span:not(.toggle){flex:1;min-width:0;font-weight:600;}

/* El gráfico de viento se puede tocar: lleva su propia explicación detrás. */
.graf-tocable{display:block;width:100%;padding:0;background:none;border:none;text-align:left;position:relative;}
.graf-ayuda{display:inline-flex;align-items:center;gap:4px;margin-top:2px;
  font-size:11px;font-weight:700;color:var(--acc);}
.graf-ayuda svg{width:13px;height:13px;}

/* ------------------------------------------------------------- webcams */

/* Acciones de una cámara: guardarla, situarla en el mapa, ir a su playa. */
.cam-acc{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.cam-fav,.cam-mapa{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;
  border:1px solid var(--bd);border-radius:9px;background:var(--surf2);color:var(--tx3);}
.cam-fav.on{color:#FF5A6E;border-color:rgba(255,90,110,.4);background:rgba(255,90,110,.10);}
.cam-mapa svg{width:17px;height:17px;}
.cam-fav:active,.cam-mapa:active{transform:scale(.9);}

/* Una cámara parada se enseña apagada y dicha, no disimulada. */
.cam-cd.parada .cam{filter:grayscale(.75) opacity(.62);}
.et-parada{position:absolute;top:9px;left:9px;background:rgba(20,26,32,.82);color:#F0C36A;
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:7px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}

/* ---------------------------------------------------------------- boya */
.boya-cd{padding:13px 14px 12px;}
.boya-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.boya-n{margin:0;font-size:15px;font-weight:700;letter-spacing:-.02em;}
.boya-vivo{font-size:10.5px;font-weight:700;color:#2E9E5B;white-space:nowrap;}
.boya-sub{margin:2px 0 11px;font-size:11.5px;color:var(--tx3);}
.boya-rej{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.boya-c{background:var(--surf2);border:1px solid var(--bd);border-radius:10px;
  padding:7px 8px;display:flex;flex-direction:column;gap:1px;}
.boya-c span{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);}
.boya-c b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;}
.boya-nota{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--tx2);}

/* Segundo nivel del panel de filtros: lo que casi nunca se toca, plegado. */
.filtros-mas{margin-top:16px;border-top:1px solid var(--bd);padding-top:4px;}
.filtros-mas summary{display:flex;align-items:center;justify-content:space-between;
  padding:11px 2px;font-size:14px;font-weight:600;color:var(--tx2);cursor:pointer;list-style:none;}
.filtros-mas summary::-webkit-details-marker{display:none;}
.filtros-mas summary svg{transition:transform .18s ease;}
.filtros-mas[open] summary svg{transform:rotate(90deg);}
.filtros-mas .lbl:first-child{margin-top:2px;}

/* Volver a los pesos de fábrica: dentro de la tarjeta de pesos, no flotando
   al pie de la hoja, donde parecía que reseteaba los ajustes enteros. */
.aj-reset{width:100%;margin-top:4px;justify-content:center;}

/* ---------------------------------------------------------------- asa de hoja
 * Elemento real y no un ::before, para poder agarrarlo. La zona sensible es
 * mucho mayor que la rayita que se ve: 44 px de alto, que es el mínimo con el
 * que un pulgar acierta a la primera. */
#sheetAsa{
  flex:0 0 auto;height:34px;display:grid;place-items:center;
  background:none;border:none;cursor:grab;touch-action:none;
}
#sheetAsa i{
  width:48px;height:5px;border-radius:3px;background:var(--bd2);
  transition:background .15s ease,width .15s ease;
}
#sheetAsa:active{cursor:grabbing;}
#sheetAsa:active i{background:var(--tx3);width:58px;}

/* ---------------------------------------------------- la cabecera TAMBIÉN es asa
 * Cerrar una hoja exigía acertar en una rayita de 48×5 px. Justo encima de ella,
 * en la ficha de una playa, hay una cabecera fija enorme —nombre, concello,
 * orientación, puntuación— que era zona muerta: el sitio más grande y más
 * evidente de la hoja no hacía nada.
 *
 * `touch-action:none` es lo que hace que el arrastre desde ahí sea un arrastre de
 * la hoja y no un desplazamiento de su contenido, que es lo que competía. Se
 * devuelve a `auto` en la tira de acciones, que se desplaza en horizontal, y los
 * botones siguen recibiendo su toque: el gesto sólo cierra si recorre camino
 * (ver ZONA_ASA en boot.js). */
.ficha-sticky,.hoja-t,.sitio-cab{touch-action:none;cursor:grab;}
.ficha-sticky .ficha-acc{touch-action:auto;}
.ficha-sticky button,.sitio-cab button{cursor:pointer;touch-action:auto;}
/* Un tirador tenue en la cabecera fija de la ficha, para que se vea que se agarra. */
.ficha-sticky::after{content:'';position:absolute;left:50%;bottom:3px;width:34px;height:3px;
  margin-left:-17px;border-radius:2px;background:var(--bd2);opacity:.55;}
#sheetScrim{transition:opacity .18s ease;}

/* ------------------------------------------------- guía: capítulos plegables
 * La guía enseña el índice, no el libro. Cerrada cabe entera en una pantalla
 * y se abre sólo lo que se quiere leer. */
.cap{background:var(--surf);border:1px solid var(--bd);border-radius:14px;
  margin-bottom:8px;overflow:hidden;box-shadow:var(--sh);}
.cap > summary{display:flex;align-items:center;gap:11px;padding:13px 13px;
  cursor:pointer;list-style:none;}
.cap > summary::-webkit-details-marker{display:none;}
.cap-i{flex:0 0 30px;height:30px;display:grid;place-items:center;border-radius:9px;
  background:var(--surf2);color:var(--tx2);}
.cap-i svg{width:17px;height:17px;}
.cap-t{flex:1;min-width:0;font-size:14.5px;font-weight:700;letter-spacing:-.02em;
  display:flex;flex-direction:column;gap:2px;}
.cap-t em{font-style:normal;font-size:11.5px;font-weight:500;color:var(--tx3);line-height:1.35;}
.cap > summary > svg{flex:0 0 auto;color:var(--tx3);transition:transform .18s ease;}
.cap[open] > summary > svg{transform:rotate(90deg);}
.cap[open] > summary{border-bottom:1px solid var(--bd);}
.cap-c{padding:12px 13px 13px;}
.cap-c > .nota-lbl:first-child{margin-top:0;}
.cap-c .cd{background:var(--surf2);}

/* Clave de colores de una escala: los nombres de los tramos, siempre a la
   vista. Es lo mínimo para traducir un número; el resto se despliega. */
.esc-clave{display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:2px;}
.esc-clave span{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;
  font-weight:700;color:var(--tx3);}
.esc-clave i{width:7px;height:7px;border-radius:2px;}
.esc-mas summary{display:flex;align-items:center;justify-content:space-between;
  padding:9px 0 2px;font-size:12px;font-weight:700;color:var(--acc);
  cursor:pointer;list-style:none;}
.esc-mas summary::-webkit-details-marker{display:none;}
.esc-mas summary svg{width:15px;height:15px;transition:transform .18s ease;}
.esc-mas[open] summary svg{transform:rotate(90deg);}
.esc-mas .esc-intro{margin-top:8px;}

/* ============================================================================
 * Pantalla · BOYAS
 * La única pantalla técnica de la app: números con su unidad y su hora. Tipo
 * tabular en todo lo que sea cifra, para que las columnas cuadren.
 * ==========================================================================*/

.boya-lectura{border-left:3px solid var(--acc);}
.boya-lectura.alerta{border-left-color:var(--warn);}
.bl-t{margin:0 0 5px;font-size:14.5px;font-weight:800;letter-spacing:-.02em;}
.bl-p{margin:0 0 9px;font-size:13px;line-height:1.55;color:var(--tx2);}

.boya-tj{padding:0;overflow:hidden;}
.boya-tj > summary{list-style:none;cursor:pointer;padding:13px 14px 12px;}
.boya-tj > summary::-webkit-details-marker{display:none;}
.boya-tj[open] > summary{border-bottom:1px solid var(--bd);}
.boya-tj .bt-cab > svg{flex:0 0 auto;color:var(--tx3);transition:transform .2s ease;align-self:center;}
.boya-tj[open] .bt-cab > svg{transform:rotate(90deg);}
.bt-id{flex:1;min-width:0;}
.bt-cuerpo{padding:12px 14px 11px;}
.bt-sub{margin:14px 0 8px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--tx3);display:flex;align-items:center;gap:5px;}
.bt-sub:first-child{margin-top:0;}
.bt-sub svg{width:14px;height:14px;}
.bt-sinserie{margin:0;font-size:11.5px;line-height:1.5;color:var(--tx3);
  background:var(--surf2);border-radius:9px;padding:9px 11px;display:flex;gap:7px;align-items:flex-start;}
.bt-sinserie svg{flex:0 0 auto;width:15px;height:15px;margin-top:1px;}

/* Gráfico de la serie propia de cada boya */
.bt-graf{margin-bottom:10px;}
.bg-cab{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px;}
.bg-cab span{font-size:11px;font-weight:600;color:var(--tx2);}
.bg-cab b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;}
.bt-graf svg{width:100%;height:54px;display:block;}
.bg-pie{display:flex;justify-content:space-between;font-size:9px;font-weight:700;color:var(--tx3);
  font-variant-numeric:tabular-nums;}
.bt-cam .cam{margin-bottom:5px;}
.bt-camn{margin:0;font-size:11px;line-height:1.45;color:var(--tx3);}
.boya-tj.parada{opacity:.72;}
.bt-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px;}
.bt-n{margin:0;font-size:16px;font-weight:800;letter-spacing:-.025em;}
.bt-z{margin:2px 0 0;font-size:11.5px;color:var(--tx3);}
.bt-estado{flex:0 0 auto;font-size:10px;font-weight:700;color:var(--tx3);
  background:var(--surf2);border:1px solid var(--bd);padding:3px 8px;border-radius:7px;white-space:nowrap;}
.bt-estado.viva{color:var(--ok);border-color:rgba(var(--okrgb),.35);background:rgba(var(--okrgb),.10);}
.bt-aviso{margin:0 0 11px;font-size:11.5px;line-height:1.45;color:var(--tx3);
  background:var(--surf2);border-radius:9px;padding:8px 10px;}

.bt-top{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:4px;}
.bt-d{background:var(--surf2);border:1px solid var(--bd);border-radius:11px;padding:9px 8px;
  display:flex;flex-direction:column;gap:2px;min-width:0;}
.bt-d span{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);}
.bt-d b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.05;letter-spacing:-.03em;}
.bt-d b i{font-style:normal;font-size:11px;font-weight:700;margin-left:1px;opacity:.75;}
.bt-d em{font-style:normal;font-size:10px;font-weight:600;color:var(--tx3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.bt-mas summary{display:flex;align-items:center;justify-content:space-between;
  padding:10px 0 6px;font-size:12px;font-weight:700;color:var(--acc);cursor:pointer;list-style:none;}
.bt-mas summary::-webkit-details-marker{display:none;}
.bt-mas summary svg{width:15px;height:15px;transition:transform .18s ease;}
.bt-mas[open] summary svg{transform:rotate(90deg);}

.bt-tabla{width:100%;border-collapse:collapse;}
.bt-tabla th{text-align:left;font-size:12.5px;font-weight:600;color:var(--tx2);
  padding:7px 0 2px;vertical-align:baseline;}
.bt-tabla td{text-align:right;font-size:13.5px;font-weight:700;
  font-variant-numeric:tabular-nums;padding:7px 0 2px;white-space:nowrap;}
.bt-tabla td i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--tx3);margin-left:2px;}
.bt-tabla tr.bt-q td{text-align:left;font-size:11px;font-weight:400;line-height:1.45;
  color:var(--tx3);padding:0 0 8px;border-bottom:1px solid var(--bd);white-space:normal;}
.bt-tabla tr.bt-q:last-child td{border-bottom:none;}

.est-tabla thead th{font-size:9px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tx3);font-weight:700;border-bottom:1px solid var(--bd);}
.est-tabla thead th:not(:first-child){text-align:right;}
.est-tabla tbody th{font-size:13px;font-weight:600;color:var(--tx);}
.est-tabla tbody th em{display:block;font-style:normal;font-size:10px;color:var(--tx3);font-weight:500;}
.est-tabla tbody tr{border-bottom:1px solid var(--bd);}
.est-tabla tbody tr:last-child{border-bottom:none;}

.bt-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--bd);}
.bt-hora{font-size:10px;color:var(--tx3);font-variant-numeric:tabular-nums;text-align:right;}

/* Con seis pestañas el texto ya no cabe holgado: se aprieta la tipografía en
   vez de dejar que los nombres se partan en dos líneas. */
@media (max-width:400px){
  .nb{font-size:9.5px;letter-spacing:-.01em;}
}

.cam-al-mapa{margin-bottom:12px;}

/* Cámara de tráfico: se dice lo que es. Mira a la carretera, no al agua. */
.et-trafico{position:absolute;top:9px;left:9px;display:inline-flex;align-items:center;gap:4px;
  background:rgba(20,26,32,.8);color:#DCE6EE;font-size:9.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:7px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.et-trafico svg{width:12px;height:12px;}

.est-tabla td b{font-size:11px;font-weight:700;}
.sol-si{color:var(--warn);}
.sol-med{color:var(--tx2);}
.sol-no{color:var(--tx3);}

/* ------------------------------------------------------------- puesta de sol */
.puesta-cd{padding:13px 14px 12px;}
.pu-cab{display:flex;align-items:flex-start;gap:11px;}
.pu-ico{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:var(--surf2);}
.pu-ico svg{width:19px;height:19px;}
.pu-t{margin:0;font-size:15px;font-weight:800;letter-spacing:-.02em;}
.pu-h{margin:2px 0 0;font-size:12px;color:var(--tx3);}
.pu-h b{color:var(--tx);font-variant-numeric:tabular-nums;}
.pu-d{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--tx2);}
.pu-brujula{display:flex;align-items:center;gap:12px;margin-top:10px;
  padding-top:11px;border-top:1px solid var(--bd);}
.pu-brujula svg{flex:0 0 auto;}
.pu-ley{margin:0;font-size:10.5px;line-height:1.9;color:var(--tx3);font-weight:600;}
.pu-ley i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:3px;
  vertical-align:-1px;}

/* Barra de nivel de marea en la respuesta del asistente: de un vistazo se ve
   si estamos cerca de la alta o de la baja, sin leer porcentajes. */
.asis-barra{position:relative;height:22px;border-radius:7px;background:var(--surf3);
  overflow:hidden;margin:9px 0 4px;}
.asis-barra i{position:absolute;inset:0 auto 0 0;background:var(--mar-medio);
  transition:width .3s ease;}
.asis-barra span,.asis-barra em{position:absolute;top:0;line-height:22px;font-size:9.5px;
  font-weight:700;font-style:normal;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tx3);mix-blend-mode:normal;}
.asis-barra span{left:7px;}
.asis-barra em{right:7px;}
.asis-tabla tr.destaca{background:rgba(var(--accrgb),.10);}
.asis-tabla tr.destaca td{color:var(--acctx);font-weight:700;}

/* ------------------------------------------------- previsión de agua */
.agua-prox{padding:13px 14px 12px;border-left:3px solid var(--acc);}
.agua-prox.baja{border-left-color:var(--warn);}
.ap-t{margin:0 0 12px;font-size:13.5px;line-height:1.5;font-weight:600;}
.ap-dias{display:flex;align-items:flex-end;gap:6px;}
.ap-d{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;}
.ap-d b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em;}
.ap-d i{width:100%;max-width:34px;border-radius:5px 5px 2px 2px;display:block;}
.ap-d span{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tx3);}
.ap-d em{font-style:normal;font-size:10px;font-weight:700;color:var(--tx3);font-variant-numeric:tabular-nums;}
.ap-d em.baja{color:var(--frio,#3E86D6);}
.ap-d em.sube{color:var(--warn2);}
.ap-n{margin:11px 0 0;font-size:11px;line-height:1.5;color:var(--tx3);}
.ap-n b{color:var(--tx2);text-transform:capitalize;}

/* Marca de "aquí se ve la puesta hoy" en las filas de la lista. Discreta:
   es un extra bonito, no un criterio de decisión. */
.mini-puesta{display:inline-flex;vertical-align:-2px;margin-left:5px;color:var(--warn2);opacity:.85;}
.mini-puesta svg{width:13px;height:13px;}

/* ============================================================================
 * ACABADO · los detalles que hacen que parezca hecha, no montada
 * ----------------------------------------------------------------------------
 * Tres reglas para no acabar con una app que se mueve sola:
 *   1. Todo dura menos de 400 ms. Por encima de eso una animación deja de ser
 *      respuesta y pasa a ser espera.
 *   2. Nada se mueve si el usuario no lo ha tocado, salvo la entrada de datos.
 *   3. Todo se apaga con `prefers-reduced-motion` y con el ajuste Transiciones.
 *      Una animación que no se puede quitar es un defecto de accesibilidad.
 * ==========================================================================*/

/* --- LA ENTRADA EN CASCADA DE LAS LISTAS, RETIRADA -------------------------
   Las filas entraban escalonadas con retardos de hasta 160 ms, y el héroe con
   420 ms de los suyos. Bonito la primera vez y un impuesto el resto: la lista se
   repinta al cambiar el orden, al marcar una favorita y cada vez que llega un
   dato, y en todas ellas la pantalla volvía a montarse delante de ti. Lo que se
   anima ahora es lo que el usuario toca, no lo que aparece. */

/* --- respuesta al dedo ----------------------------------------------------
   Todo lo pulsable se hunde un poco. Es lo que separa una web de una app: el
   elemento acusa el toque antes de que llegue la respuesta. */
.fila,.cam,.num-c,.tag,.pill,.mapa-b,.rowbtn,.chip,.tb-b,.boya-tj>summary,.cap>summary{
  transition:transform .13s cubic-bezier(.2,.7,.3,1), background .15s ease, color .15s ease,
             border-color .15s ease, box-shadow .18s ease, opacity .15s ease;
}
.fila:active,.cam:active,.num-c:active,.tag:active,.pill:active,.mapa-b:active,
.boya-tj>summary:active,.cap>summary:active{transform:scale(.975);}
.tb-b:active{transform:scale(.88);}

/* Elevación al pasar por encima, sólo donde hay ratón de verdad. En táctil
   `:hover` se queda pegado después de tocar y ensucia la lista entera. */
@media (hover:hover) and (pointer:fine){
  .fila:hover,.cd.tap:hover{box-shadow:var(--sh),0 6px 18px rgba(16,40,64,.09);}
  .dark .fila:hover,.dark .cd.tap:hover{box-shadow:var(--sh),0 6px 18px rgba(0,0,0,.4);}
  .cam:hover .cam-lupa{opacity:1;transform:scale(1.06);}
}

/* --- corazón: el latido al marcar favorita -------------------------------- */
.fila-fav.on svg,.hero-fav.on svg,.ficha-fav.on svg,.cam-fav.on svg{animation:late .42s cubic-bezier(.2,1.5,.4,1);}
@keyframes late{0%{transform:scale(1);}35%{transform:scale(1.32);}60%{transform:scale(.92);}100%{transform:scale(1);}}

/* --- barras, medidores y trazos: también retirados ------------------------
   Crecían desde cero y los gráficos se dibujaban solos en 1,1 s. El problema no
   era la animación, era CUÁNDO se disparaba: al montarse el elemento, o sea
   también al repintar. Mirando un gráfico de una boya y llegando una lectura
   nueva, el trazo se borraba y se volvía a dibujar delante de ti. */

/* --- pulso en el punto "en directo" --------------------------------------- */
.et-live{position:relative;}
.et-live::after{content:'';position:absolute;left:9px;top:50%;width:6px;height:6px;
  margin-top:-3px;border-radius:50%;background:#FF4D4D;animation:vive 1.8s ease-in-out infinite;}
@keyframes vive{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(1.35);}}

/* --- despliegues suaves --------------------------------------------------- */
.cap[open] .cap-c,.boya-tj[open] .bt-cuerpo,.esc-mas[open] .esc-tramos,
.filtros-mas[open] .filtros-mas-c,.hero-mas[open] .hero-mas-c{
  animation:abrirse .28s cubic-bezier(.2,.8,.25,1);}
@keyframes abrirse{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}

/* --- brillo al cargar una foto de héroe ----------------------------------- */
.hero.con-foto .hero-top{animation:revela .6s ease-out;}
@keyframes revela{from{filter:saturate(.4) brightness(.85);}to{filter:none;}}

/* ============================================================================
 * RESPETO POR QUIEN NO QUIERE MOVIMIENTO
 * Dos interruptores: el del sistema y el de Ajustes. Cualquiera de los dos
 * apaga TODO — no una parte, todo. Media animación es peor que ninguna.
 * ==========================================================================*/
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}
html.sin-animaciones *,html.sin-animaciones *::before,html.sin-animaciones *::after{
  animation:none !important;transition:none !important;
}

/* ------------------------------------------------------- claridad del agua */
.turb-cd{padding:13px 14px 12px;}
.turb-cd.vacia{opacity:.8;}
.tb-cab{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px;}
.tb-ico{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#fff;}
.tb-ico svg{width:18px;height:18px;}
.tb-t{margin:0;font-size:15.5px;font-weight:800;letter-spacing:-.02em;}
.tb-n{margin:2px 0 0;font-size:11.5px;color:var(--tx3);font-variant-numeric:tabular-nums;}
/* La escala completa siempre a la vista, con el tramo actual ensanchado: se ve
   dónde cae este número dentro de todo lo posible sin leer ni un umbral. */
.tb-escala{display:flex;gap:2px;height:7px;margin-bottom:10px;}
.tb-escala i{flex:1;border-radius:3px;transition:flex .3s ease;}
.tb-d{margin:0;font-size:13px;line-height:1.5;color:var(--tx2);}
.tb-f{margin:9px 0 0;font-size:10.5px;line-height:1.5;color:var(--tx3);}

/* ============================================================================
 * SOBRIEDAD · ajustes finales del sistema
 * ----------------------------------------------------------------------------
 * Lo que queda de la reforma: quitar el color que no informa, bajar el
 * contraste del cromo y dejar que la jerarquía la marquen el peso y el espacio.
 * ==========================================================================*/

/* La ventana recomendada, sobre foto, necesita su propio fondo translúcido. */
.hero.con-foto .hero-ventana{
  background:rgba(0,0,0,.34);border-color:rgba(255,255,255,.22);color:#fff;
}

/* El score sí lleva color: es un dato. Pero sobre foto necesita contraste. */
.hero.con-foto .hero-pt .n{text-shadow:0 1px 8px rgba(0,0,0,.5);}

/* --- radios: menos redondez en todo. Un instrumento tiene esquinas. ------ */
.cd,.rowbtn,.num-c,.tag,.mapa-b,.cam,.cam-cd,.boya-tj,.turb-cd,.puesta-cd,
.agua-prox,.boya-cd,.escala,.fila{border-radius:12px;}
.chip,.pill{border-radius:8px;}

/* --- el acento deja de gritar --------------------------------------------
   `.chip.on` llevaba fondo azul claro + borde azul + texto azul: tres señales
   para decir una cosa. Con el fondo y el peso basta, y así una fila de filtros
   activos no parece un semáforo. */
.chip.on,.pill.on{
  background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600;
}
.dark .chip.on,.dark .pill.on{color:#0E1419;}

/* --- avisos: franja lateral en vez de fondo teñido ------------------------
   Un bloque entero de color de fondo se lleva la atención de toda la pantalla
   por algo que suele ser una nota al pie. Una franja de 3 px dice lo mismo. */
.aviso{
  background:var(--surf2);border:1px solid var(--bd);
  border-left:3px solid var(--tx3);border-radius:0 10px 10px 0;
}
.aviso.warn{border-left-color:var(--warn);}
.aviso.bad{border-left-color:var(--bad);}
.aviso.info{border-left-color:var(--acc);}
.aviso svg{color:var(--tx3);}
.aviso.warn svg{color:var(--warn);}
.aviso.bad svg{color:var(--bad);}

/* --- las insignias, en tinta sobre papel y no al revés ------------------- */
.badge{
  background:transparent;border:1px solid currentColor;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;font-size:9.5px;padding:2px 7px;
}
.b-ok{color:var(--ok);} .b-warn{color:var(--warn);} .b-bad{color:var(--bad);}

/* --- separadores de sección: regla fina y rótulo pequeño ----------------- */
.lbl{
  display:flex;align-items:center;gap:8px;
  font-size:10px;letter-spacing:.16em;color:var(--tx3);margin:20px 2px 9px;
}
.lbl::after{
  content:'';flex:1;height:1px;background:var(--bd);
}

/* --- el medidor de la fila: barra fina, no bloque de color -------------- */
.medidor{height:3px;border-radius:2px;background:var(--surf3);overflow:hidden;}
.medidor i{display:block;height:100%;border-radius:2px;}

/* --- tarjetas: borde en vez de sombra ------------------------------------ */
.cd{box-shadow:none;border:1px solid var(--bd);}
.fila{box-shadow:none;border:1px solid var(--bd);}
.fila:active{background:var(--surf2);}

/* Cabecera de la lista: el rótulo y el criterio de orden en la misma línea.
   El selector de orden no vive en Filtros a propósito — filtrar quita playas,
   ordenar sólo las recoloca, y mezclarlos confunde las dos cosas. */
.lista-cab{display:flex;align-items:center;gap:10px;margin:20px 2px 9px;}
.lista-cab .lbl::after{display:none;}
.orden-tira{display:flex;gap:6px;flex:1;min-width:0;}
.orden-tira .pill{white-space:nowrap;flex:0 0 auto;}

/* --- el color como TEXTO usa siempre la variante tinta -------------------
   Relleno y letra no necesitan el mismo contraste. Donde el color va sobre
   fondo (barras, puntos, iconos) manda `--ok`; donde va como letra, `--ok-tx`. */
.fila-pt .n, .badge, .b-ok, .b-warn, .b-bad,
.ap-d em.sube, .ap-d em.baja, .sol-si, .bt-estado.viva, .boya-vivo,
.et-live, .bg-cab b, .esc-fila b{ font-weight:700; }
.b-ok{color:var(--ok-tx);} .b-warn{color:var(--warn-tx);} .b-bad{color:var(--bad-tx);}
.ap-d em.sube{color:var(--warn2-tx);}
.ap-d em.baja{color:var(--frio-tx,#3A5E75);}
.dark .ap-d em.baja{color:#93BAD3;}
.sol-si{color:var(--warn-tx);}
.bt-estado.viva,.boya-vivo{color:var(--ok-tx);}
.et-live{color:#fff;}
.uv-dato b{color:inherit;}

/* ------------------------------------------------------- buscador del mapa
 * Va sobre el mapa, no en una pantalla aparte: buscar un sitio es preguntar
 * dónde cae, y la respuesta es que el mapa se mueva. Se apoya justo debajo de
 * la fila de modos y sólo ocupa lo que necesita: con el campo vacío son cuatro
 * accesos rápidos, no una pantalla llena. */
.mapa-buscador{position:absolute;left:10px;right:10px;top:52px;z-index:6;display:none;}
.mapa-buscador.on{display:block;}
.mb-caja{display:flex;align-items:center;gap:8px;padding:0 10px;
  background:var(--topbar);border:1px solid var(--bd);border-radius:12px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.16);}
.mb-caja svg{width:17px;height:17px;flex:none;color:var(--tx3);}
.mb-caja input{flex:1;min-width:0;border:none;background:none;outline:none;
  font-size:16px;color:var(--tx);padding:11px 0;}
.mb-caja input::-webkit-search-cancel-button{display:none;}
.mb-res{margin-top:6px;max-height:min(46vh,380px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;border-radius:12px;}
.mb-res:empty{display:none;}
.mb-res .fila{background:var(--topbar);border:1px solid var(--bd);border-radius:12px;margin-bottom:5px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.mb-nada{margin:0;padding:12px 14px;font-size:12.5px;line-height:1.45;color:var(--tx2);
  background:var(--topbar);border:1px solid var(--bd);border-radius:12px;}
.mb-zonas{margin:0;padding:2px 0 0;flex-wrap:wrap;}

/* ---------------------------------------------------------------- radar */
/* El rótulo del radar. Obligatorio, no decorativo: sin la hora, una mancha de
   hace dos horas se lee como la lluvia de ahora. */
.radar-rotulo{
  position:absolute;left:8px;bottom:6px;z-index:3;
  display:flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;color:var(--tx2);
  background:var(--topbar);border:1px solid var(--bd);
  padding:4px 9px;border-radius:7px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  pointer-events:none;
}
.radar-rotulo:empty{display:none;}
.radar-rotulo em{font-style:normal;font-weight:600;color:var(--tx3);}
.rr-punto{width:7px;height:7px;border-radius:50%;background:var(--frio,#4E7C9B);
  box-shadow:0 0 0 3px rgba(78,124,155,.22);}
.rr-vacio{color:var(--tx3);font-weight:600;}

/* Un "?" que lleva su explicación dentro, para lo que no está en el glosario.
   Sustituye a los párrafos repetidos sensor por sensor en cada boya. */
.bt-tabla th .ayuda{margin-left:5px;vertical-align:1px;}

/* Filtros de webcams: QUÉ ver (segmentado) y EN QUÉ ORDEN (píldoras). Dos
   preguntas distintas, dos controles distintos. */
.cam-filtros{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.seg-vista button{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12.5px;}
.seg-vista em{font-style:normal;font-size:10px;font-weight:700;opacity:.55;}

/* ============================================================================
 * SECCIONES PLEGABLES DE LA FICHA
 * ----------------------------------------------------------------------------
 * Diez bloques seguidos hacían la ficha inscrolleable. Arriba queda el resumen
 * y esto envuelve el resto. `<details>` nativo: accesible, plegable sin JS y
 * con el mismo comportamiento en Safari de iOS y en Chrome de Android.
 * ==========================================================================*/
.sec{border-top:1px solid var(--bd);}
.sec:first-of-type{border-top:none;}
.sec > summary{
  display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;
  padding:14px 2px;font-size:14.5px;font-weight:600;color:var(--tx);
  -webkit-tap-highlight-color:transparent;
}
.sec > summary::-webkit-details-marker{display:none;}
.sec .sec-i{display:grid;place-items:center;width:22px;flex:0 0 22px;color:var(--tx3);}
.sec .sec-i svg{width:17px;height:17px;}
.sec .sec-t{flex:1;min-width:0;}
.sec > summary > svg:last-child{flex:0 0 auto;color:var(--tx3);transition:transform .2s ease;}
.sec[open] > summary > svg:last-child{transform:rotate(90deg);}
.sec[open] > summary{color:var(--tx);}
.sec-c{padding-bottom:14px;}
.sec-c > .lbl:first-child{margin-top:0;}

/* --- la marea, en el resumen y en una línea ----------------------------- */
.marea-resumen{
  display:block;width:100%;text-align:left;padding:11px 13px 12px;margin-bottom:10px;
}
.mr-txt{display:flex;align-items:center;gap:10px;}
.mr-ico{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;
  border-radius:8px;background:var(--surf2);color:var(--tx2);}
.mr-ico svg{width:17px;height:17px;}
.mr-t{margin:0;font-size:14px;font-weight:700;letter-spacing:-.01em;}
.mr-s{margin:1px 0 0;font-size:11.5px;color:var(--tx3);}
.mr-s b{color:var(--tx2);}
.mr-barra{height:4px;border-radius:2px;background:var(--surf3);overflow:hidden;margin-top:10px;}
.mr-barra i{display:block;height:100%;border-radius:2px;background:var(--mar-medio);
  transition:width .4s cubic-bezier(.2,.8,.25,1);}

.ficha-mapa-acc{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap;}
.marea-resumen.sin{opacity:.9;}
.marea-resumen.sin .mr-t{font-weight:600;}

/* Cabecera del gráfico: título, unidad y el valor actual, que es lo que se
   busca de verdad. Antes había que ir a leerlo al eje. */
.graf .g-t{flex:0 0 auto;}
.graf .g-u{font-weight:600;color:var(--tx3);text-transform:none;letter-spacing:0;flex:1;}
.graf .g-v{font-family:var(--f-datos);font-size:14px;font-weight:800;letter-spacing:-.02em;}
.graf svg{width:100%;height:auto;aspect-ratio:640/150;display:block;overflow:visible;}
.graf-viento svg{aspect-ratio:auto;height:150px;}

/* ============================================================================
 * BUSCAR
 * ==========================================================================*/
.buscar-caja{
  display:flex;align-items:center;gap:9px;
  background:var(--surf);border:1px solid var(--bd2);border-radius:11px;
  padding:0 11px;margin-bottom:14px;
  position:sticky;top:0;z-index:4;box-shadow:var(--sh);
}
.buscar-caja svg{flex:0 0 auto;color:var(--tx3);}
#campoBuscar{
  flex:1;min-width:0;border:none;background:none;outline:none;
  padding:12px 0;font-size:16px;color:var(--tx);font-family:inherit;
  /* 16 px exactos: por debajo de eso, Safari de iOS hace zoom al enfocar un
     campo y descoloca la pantalla entera. */
}
#campoBuscar::-webkit-search-cancel-button{display:none;}
.bq-x{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;
  border:none;background:var(--surf2);border-radius:50%;color:var(--tx3);font-size:16px;line-height:1;}
.bq-x svg{width:15px;height:15px;}

.fila.res{gap:11px;}
.res-i{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;
  border-radius:9px;background:var(--surf2);color:var(--tx2);}
.res-i svg{width:17px;height:17px;}

/* La tarjeta del sitio abierto */
.sitio{background:var(--surf);border:1px solid var(--bd2);border-radius:14px;
  padding:13px 14px 14px;margin-bottom:14px;}
.sitio-cab{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px;}
.sitio-cab > div:first-child{flex:1;min-width:0;}
.sitio-t{margin:0;font-size:18px;font-weight:800;letter-spacing:-.03em;}
.sitio-s{margin:2px 0 0;font-size:12px;color:var(--tx3);}
.sitio-n{margin:0 0 11px;font-size:13px;line-height:1.5;color:var(--tx2);}
.sitio-f{margin:9px 0 0;font-size:10.5px;color:var(--tx3);line-height:1.45;}
.sitio-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;}
.cam-mini{margin-top:7px;}
.cam-mini .et{font-size:11px;}

/* Cuatro clases no caben cómodas en un segmentado: se aprieta la tipografía y
   se deja que el contador baje de línea antes que desbordar. */
.seg-vista{flex-wrap:nowrap;}
.seg-vista button{flex-direction:column;gap:1px;padding:6px 2px;font-size:12px;line-height:1.15;}
.seg-vista em{font-size:9.5px;}
.cam-leyenda{margin:0;font-size:11px;line-height:1.45;color:var(--tx3);}