/* Canarias al detalle — hoja de estilos única de la web pública (diseño propio, sin framework). Sistema en DESIGN.md.
   «Atlas de Canarias»: océano + amarillo canario (los colores de la bandera) sobre papel; titulares y cifras en Big
   Shoulders (señalética cívica), texto en Public Sans. La firma es la silueta del archipiélago en las cabeceras;
   todo lo demás, sobrio: paneles planos con borde fino, sin sombras, y color solo con significado. */

@font-face { font-family: "Big Shoulders"; src: url("../fonts/BigShoulders-var.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/PublicSans-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/PublicSans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Marca */
  --oceano: #0a3a5c;          /* Atlántico profundo: cabecera, cabeceras de página, botones */
  --oceano-2: #12507a;        /* hover y superficies sobre océano */
  --oceano-claro: #e3edf4;    /* fondos suaves de la marca */
  --canario: #ffc81e;         /* amarillo canario: la firma (barras de título, sección activa, foco, resaltado) */
  --canario-claro: #fff3c4;
  /* Superficies y texto */
  --salitre: #f1f3f2;         /* fondo de página */
  --papel: #ffffff;
  --basalto: #1c2226;         /* texto */
  --ceniza: #4f5b63;          /* texto secundario */
  --ceniza-2: #6c7780;        /* notas y fuentes (AA sobre blanco y salitre) */
  --linea: #dbe1e3;
  --linea-2: #c3ccd0;
  /* Significado (solo para datos, nunca decoración) */
  --almagre: #b8321f;         /* alerta, terremotos, lo caro, lo que sube */
  --almagre-claro: #fbe6e2;
  --laurisilva: #23744a;      /* lo barato, lo que baja, lo abierto */
  --laurisilva-claro: #e0f1e7;
  --ambar: #8a5a00;
  --ambar-claro: #fff1cc;

  --radio: 4px;
  --radio-sm: 3px;
  --ancho: 1240px;
  --display: "Big Shoulders", "Arial Narrow", "Roboto Condensed", sans-serif;
  --texto: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Alias de nombres anteriores (vistas y JS que aún los usan) */
  --atlantico: var(--oceano); --atlantico-2: var(--oceano-2); --tinta: var(--basalto); --tinta-2: var(--ceniza);
  --tinta-3: var(--ceniza-2); --borde: var(--linea); --borde-2: var(--linea-2); --arena: var(--salitre);
  --turquesa: var(--oceano-2); --turquesa-claro: var(--oceano-claro); --lava: var(--almagre); --laurel: var(--laurisilva);
  --sombra: none;
  /* Los antiguos acentos por sección pasan a un solo color: el icono no necesita arcoíris */
  --c-cielo: var(--oceano-2); --c-gasoil: var(--oceano-2); --c-lava: var(--almagre); --c-ayuda: var(--oceano-2);
  --c-comer: var(--oceano-2); --c-agenda: var(--oceano-2); --c-cine: var(--oceano-2); --c-laurel: var(--laurisilva);
  --c-arena: var(--ambar); --c-servicio: var(--oceano-2); --c-datos: var(--oceano);

  /* Series de gráficas (paleta categórica validada, orden fijo) */
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100;
  --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #6250d6; --serie-8: #e34948;
  --grid: #e1e4e3; --eje: #c3c9c8; --tinta-grafica: #4f5b63;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; font-family: var(--texto); font-size: 16px; line-height: 1.55; color: var(--basalto); background: var(--salitre);
  -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums;
}
img { max-width: 100%; height: auto; }
a { color: var(--oceano-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--canario); outline-offset: 2px; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; }
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: .005em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: .98; }
h1, h2, h3 { text-wrap: balance; }
a, button, input, select, label, summary { touch-action: manipulation; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.05; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }
small, .peq { font-size: .86rem; }
.muted { color: var(--ceniza-2); }
.sec { color: var(--ceniza); }
.num { font-variant-numeric: tabular-nums; }
.cont { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.oculto, [hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 3000; background: var(--canario); color: var(--basalto); padding: 10px 14px; font-weight: 700; }
.fa-solid, .fa-brands { line-height: 1; }

/* ----------------------------------------------------------------- Cabecera */
.barra-top { background: #072b45; color: #bcd0de; font-size: .86rem; }
.barra-top .cont { display: flex; gap: 16px; align-items: center; justify-content: space-between; min-height: 36px; }
.barra-top a { color: #eef4f8; }
.barra-top .cuenta-enlaces { display: flex; gap: 14px; align-items: center; }
.mi-sitio { display: flex; align-items: center; gap: 8px; }
.mi-sitio button { background: none; border: 0; color: var(--canario); font: inherit; font-weight: 700; cursor: pointer; padding: 4px 0; }
.mi-sitio button:hover { text-decoration: underline; }
.campana { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.campana .globo { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--canario); color: var(--basalto); font-size: .72rem; font-weight: 800; display: inline-grid; place-items: center; }
.cabecera { background: var(--oceano); color: #fff; position: sticky; top: 0; z-index: 1000; border-bottom: 4px solid var(--canario); }
.cabecera .cont { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.logo { display: block; flex: 0 0 auto; }
.logo img { display: block; height: 42px; width: auto; }
.buscador { flex: 1; position: relative; max-width: 460px; }
.buscador input {
  width: 100%; padding: 10px 14px 10px 40px; border-radius: var(--radio); border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: .95rem; min-height: 42px;
}
.buscador input::placeholder { color: #adc2d2; }
.buscador input:focus { outline: 3px solid var(--canario); outline-offset: 0; background: rgba(255,255,255,.14); }
.buscador .fa-magnifying-glass { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #adc2d2; }
.sugerencias {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; color: var(--basalto); border-radius: var(--radio);
  border: 1px solid var(--linea-2); box-shadow: 0 16px 40px rgba(7, 43, 69, .28); max-height: 70vh; overflow: auto; z-index: 1100; padding: 6px;
}
.sugerencias .grupo { font-size: .78rem; font-weight: 700; color: var(--ceniza-2); padding: 8px 10px 4px; }
.sugerencias a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--radio-sm); color: var(--basalto); }
.sugerencias a:hover, .sugerencias a.activa { background: var(--salitre); text-decoration: none; }
.sugerencias a small { color: var(--ceniza-2); margin-left: auto; }
.menu-btn { display: none; background: none; border: 0; color: #fff; font-size: 1.5rem; cursor: pointer; margin-left: auto; min-width: 44px; min-height: 44px; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { color: #e2ecf3; padding: 8px 10px; font-weight: 600; font-size: .93rem; white-space: nowrap; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a.activo { color: #fff; text-decoration: none; border-bottom-color: var(--canario); }
.nav .fa-solid { color: var(--canario); margin-right: 6px; }
@media (min-width: 1081px) { .nav-secundaria { display: none; } }
.cabecera .buscador { min-width: 220px; }

/* Barra de secciones del ámbito */
.secciones { background: var(--papel); border-bottom: 1px solid var(--linea); position: sticky; top: 68px; z-index: 900; }
.secciones .cont { display: flex; align-items: stretch; gap: 10px; }
.ambito-sel { position: relative; flex: none; display: flex; align-items: center; padding: 6px 12px 6px 0; border-right: 1px solid var(--linea); }
.ambito-boton { display: flex; flex-direction: column; align-items: flex-start; gap: 0; background: var(--papel); border: 1px solid var(--linea-2); border-radius: var(--radio); padding: 5px 11px; cursor: pointer; font: inherit; text-align: left; max-width: 220px; min-height: 44px; }
.ambito-boton:hover, .ambito-boton[aria-expanded="true"] { border-color: var(--oceano); }
.ambito-viendo { font-size: .72rem; color: var(--ceniza-2); font-weight: 600; }
.ambito-nombre { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 800; color: var(--oceano); font-size: 1.15rem; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ambito-nombre .fa-solid { color: var(--oceano-2); font-size: .7em; }
.ambito-nombre .flecha { color: var(--ceniza-2); font-size: .6em; }
.ambito-menu { position: absolute; top: calc(100% + 4px); left: 0; width: 300px; background: var(--papel); border: 1px solid var(--linea-2); border-radius: var(--radio); box-shadow: 0 16px 40px rgba(7,43,69,.22); padding: 10px; z-index: 950; }
.ambito-titulo { margin: 2px 6px 8px; font-size: .8rem; color: var(--ceniza-2); font-weight: 700; }
.ambito-menu > a, .ambito-menu > button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px; border-radius: var(--radio-sm); color: var(--basalto); font: inherit; font-weight: 600; font-size: .93rem; background: none; border: 0; cursor: pointer; text-align: left; }
.ambito-menu > a .fa-solid, .ambito-menu > button .fa-solid { color: var(--oceano-2); width: 16px; text-align: center; }
.ambito-menu > a:hover, .ambito-menu > button:hover, .ambito-islas a:hover { background: var(--salitre); text-decoration: none; }
.ambito-menu .actual { background: var(--canario-claro); }
.ambito-menu > button { border-top: 1px solid var(--linea); border-radius: 0; margin-top: 4px; color: var(--oceano-2); }
.ambito-islas { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 4px 0; padding: 4px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.ambito-islas a { padding: 7px 9px; border-radius: var(--radio-sm); color: var(--ceniza); font-size: .9rem; font-weight: 600; }
/* Secciones: icono sobre texto; en pantallas estrechas, desplazamiento lateral con difuminado */
.secciones-lista { display: flex; gap: 0; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.secciones-lista::-webkit-scrollbar { display: none; }
.secciones-lista a { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 7px 6px; color: var(--ceniza); font-weight: 600; font-size: .78rem; white-space: nowrap; min-width: 62px; border-bottom: 4px solid transparent; }
.secciones-lista a .fa-solid { font-size: 1rem; color: var(--ceniza-2); }
.secciones-lista a:hover { text-decoration: none; color: var(--basalto); border-bottom-color: var(--linea-2); }
.secciones-lista a.activa { color: var(--oceano); border-bottom-color: var(--canario); font-weight: 700; }
.secciones-lista a.activa .fa-solid { color: var(--oceano); }
/* Tira con flechas (web.js): si quedan secciones a un lado, difuminado y botón con flecha por ese lado */
.tira { position: relative; flex: 1; min-width: 0; display: flex; }
.tira-flecha { position: absolute; top: 0; bottom: 4px; z-index: 2; display: none; align-items: center; width: 48px; padding: 0; border: 0; cursor: pointer; color: var(--oceano); }
.tira-flecha--der { right: 0; justify-content: flex-end; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--papel) 55%); }
.tira-flecha--izq { left: 0; justify-content: flex-start; background: linear-gradient(270deg, rgba(255, 255, 255, 0), var(--papel) 55%); }
.tira-flecha i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--papel); border: 1px solid var(--linea-2); font-size: .8rem; }
.tira-flecha:hover i { background: var(--oceano); border-color: var(--oceano); color: #fff; }
.tira.hay-der > .tira-flecha--der, .tira.hay-izq > .tira-flecha--izq { display: flex; }

/* Volver arriba: el Teide sobre el mar se llena de amarillo canario según lo bajado; al pulsarlo, «erupción» */
.subir { position: fixed; right: 16px; bottom: 16px; z-index: 1000; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: var(--oceano); color: #fff;
  box-shadow: 0 8px 22px rgba(7, 43, 69, .35); display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85);
  transition: opacity .25s, transform .35s cubic-bezier(.3, 1.5, .5, 1), visibility .25s; }
.subir.visible { opacity: 1; visibility: visible; transform: none; }
.subir svg { width: 40px; height: 40px; overflow: visible; }
.subir-relleno { fill: var(--canario); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(calc(var(--progreso, 0) / 100)); transition: transform .15s linear; }
.subir-monte { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.subir-mar { fill: none; stroke: #7fb3d5; stroke-width: 1.6; stroke-linecap: round; }
.subir-chispas { fill: var(--canario); opacity: 0; }
.subir-flecha { position: absolute; top: -5px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; display: grid; place-items: center; background: var(--canario); color: var(--oceano); font-size: .6rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .25s; }
.subir:hover .subir-flecha { transform: translateY(-3px); }
.subir:focus-visible { outline: 3px solid var(--canario); outline-offset: 3px; }
.subir.erupcion .subir-chispas { animation: subir-chispas .7s ease-out; }
.subir.erupcion svg { animation: subir-temblor .35s linear; }
@keyframes subir-chispas { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes subir-temblor { 25% { transform: translateX(-1px); } 50% { transform: translateX(1px); } 75% { transform: translateX(-1px); } }
@media (prefers-reduced-motion: reduce) { .subir, .subir * { transition: none !important; animation: none !important; } }
body:has(.aviso-cookies:not([hidden])) .subir { bottom: 110px; }

/* Botones duplicados según el ancho (p. ej. La Butaca Roja en la ficha de película) */
.solo-movil { display: none !important; }
.boton-lbr { width: 100%; margin-top: 10px; font-size: .85rem; padding: 8px 10px; text-align: center; }

/* Migas */
.migas { font-size: .86rem; color: var(--ceniza-2); padding-top: 14px; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.migas li + li::before { content: "/"; margin-right: 6px; color: var(--linea-2); }
.migas a { color: var(--ceniza); }

/* ----------------------------------------------------------------- Estructura */
main { padding-bottom: 56px; min-height: 60vh; }
.seccion { margin-top: 36px; }
.seccion > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
/* Firma de los bloques: barra amarilla junto al título */
.seccion > header h2 { margin: 0; display: flex; align-items: center; gap: 10px; border-left: 6px solid var(--canario); padding-left: 12px; }
.ver-mas { font-weight: 700; font-size: .93rem; white-space: nowrap; }
.rejilla { display: grid; gap: 16px; }
.r-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.r-auto-s { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.col-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.col-1-1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }

/* Paneles («tarjeta»): planos, borde fino, sin sombra */
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; min-width: 0; }
.tarjeta > h3:first-child, .tarjeta > header:first-child { margin-top: 0; }
.tarjeta-enlace { display: block; color: inherit; }
.tarjeta-enlace:hover { text-decoration: none; border-color: var(--oceano); }
.cab-tarjeta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.cab-tarjeta h3 { margin: 0; flex: 1; font-family: var(--display); font-weight: 800; font-size: 1.45rem; line-height: 1; }
.chip-icono { width: 32px; height: 32px; border-radius: var(--radio); display: inline-grid; place-items: center; color: var(--oceano); flex: 0 0 auto; font-size: .95rem; background: var(--oceano-claro); }
.c-lava.chip-icono { color: var(--almagre); background: var(--almagre-claro); }
.c-laurel.chip-icono { color: var(--laurisilva); background: var(--laurisilva-claro); }
.pie-tarjeta { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--linea); font-size: .84rem; color: var(--ceniza-2); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- Cabecera de página (hero) */
.hero { background: var(--oceano); color: #fff; position: relative; overflow: hidden; }
.hero .cont { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; padding-top: 36px; padding-bottom: 40px; position: relative; z-index: 1; align-items: center; }
.hero h1 { color: #fff; margin-bottom: 10px; }
.hero .antetitulo { color: var(--canario); font-weight: 600; font-size: .95rem; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.hero .intro { color: #d3e1eb; font-size: 1.04rem; max-width: 64ch; }
.hero .intro p { margin-bottom: .55em; }
.hero .escudo { float: right; width: 64px; height: 64px; object-fit: contain; margin: 0 0 8px 12px; background: #fff; border-radius: var(--radio); padding: 6px; }
.hero .contacto { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hero .contacto a { display: inline-flex; gap: 7px; align-items: center; color: #fff; padding: 8px 12px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radio); font-size: .88rem; font-weight: 600; min-height: 40px; }
.hero .contacto a:hover { border-color: var(--canario); text-decoration: none; }
.hero-compacto .cont { grid-template-columns: minmax(0, 1fr) 240px; padding-top: 28px; padding-bottom: 28px; gap: 24px; }
.hero-compacto h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.hero-compacto .silueta { max-height: 150px; }

/* La silueta del archipiélago, de la isla o del municipio (la firma de la web) */
.silueta { display: block; width: 100%; height: auto; overflow: visible; }
.silueta path { fill: #f3f7f9; stroke: var(--oceano); stroke-width: 1.2; stroke-linejoin: round; transition: fill .15s; }
.silueta .tenue path, .silueta path.tenue { fill: rgba(243, 247, 249, .28); }
.silueta a:hover path, .silueta a:focus-visible path { fill: var(--canario); }
.silueta a:focus-visible { outline: none; }
.silueta .actual path, .silueta path.actual { fill: var(--canario); }
/* En la vista de Canarias cada isla son sus municipios: el trazo del color del relleno borra las fronteras internas */
.silueta--islas path { stroke: #f3f7f9; stroke-width: 1.5; }
.silueta--islas a:hover path, .silueta--islas a:focus-visible path, .silueta--islas .actual path { stroke: var(--canario); }
.silueta text { fill: #cfe0eb; font-family: var(--display); font-weight: 700; font-size: 26px; pointer-events: none; }
.silueta .actual text, .silueta text.actual { fill: #fff; }
.silueta-pie { font-size: .8rem; color: #a9c0d0; margin-top: 6px; text-align: right; }

/* Cifras (sobre el océano y en claro) */
.cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0; margin-top: 22px; border-top: 1px solid rgba(255,255,255,.22); }
.cifra { padding: 12px 14px 10px 0; color: #fff; display: block; border-bottom: 1px solid rgba(255,255,255,.12); }
a.cifra:hover { text-decoration: none; }
a.cifra:hover .etiqueta { color: #fff; text-decoration: underline; }
.cifra .valor { font-family: var(--display); font-size: 2rem; font-weight: 800; display: block; line-height: 1; font-variant-numeric: tabular-nums; }
.cifra .etiqueta { font-size: .8rem; color: #b6cada; display: block; margin-top: 4px; }
.cifra .var { font-size: .78rem; font-weight: 700; }
.var-sube { color: #9fe0b7; } .var-baja { color: #ffb4a6; } .var-neutra { color: #b6cada; }
.cifras-claro { border-top: 4px solid var(--basalto); }
.cifras-claro .cifra { color: var(--basalto); border-bottom-color: var(--linea); }
.cifras-claro .cifra .etiqueta { color: var(--ceniza-2); }
.cifras-claro .var-sube { color: var(--laurisilva); } .cifras-claro .var-baja { color: var(--almagre); } .cifras-claro .var-neutra { color: var(--ceniza-2); }

/* ----------------------------------------------------------------- Componentes */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; min-height: 44px; border-radius: var(--radio); border: 0; background: var(--oceano); color: #fff; font: inherit; font-weight: 700; cursor: pointer; font-size: .95rem; }
.boton:hover { background: var(--oceano-2); text-decoration: none; color: #fff; }
.boton-amarillo { background: var(--canario); color: var(--basalto); }
.boton-amarillo:hover { background: #ffd54f; color: var(--basalto); }
.boton-claro { background: var(--papel); color: var(--oceano); border: 1px solid var(--linea-2); }
.boton-claro:hover { background: var(--salitre); color: var(--oceano); }
.boton-peq { padding: 6px 11px; min-height: 36px; font-size: .86rem; }
.etiqueta-p { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radio-sm); font-size: .78rem; font-weight: 700; background: var(--salitre); color: var(--ceniza); white-space: nowrap; }
.e-verde { background: var(--laurisilva-claro); color: #1b5e3b; } .e-rojo { background: var(--almagre-claro); color: #8f2414; } .e-ambar { background: var(--ambar-claro); color: #6b4700; }
.e-azul { background: var(--oceano-claro); color: var(--oceano); } .e-turquesa { background: var(--oceano-claro); color: var(--oceano); } .e-gris { background: #e8ecec; color: var(--ceniza); }
.pastillas { display: flex; flex-wrap: wrap; gap: 6px; }
.pastilla { padding: 7px 12px; min-height: 38px; border-radius: var(--radio); border: 1px solid var(--linea-2); background: var(--papel); color: var(--ceniza); font-size: .88rem; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.pastilla:hover { border-color: var(--oceano); color: var(--oceano); text-decoration: none; }
.pastilla.activa { background: var(--oceano); border-color: var(--oceano); color: #fff; box-shadow: inset 0 -3px 0 var(--canario); }
.pastilla .n { font-size: .76rem; opacity: .8; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 16px; }
.filtros select, .filtros input[type=search], .filtros input[type=date], .campo {
  padding: 9px 12px; min-height: 42px; border-radius: var(--radio); border: 1px solid var(--linea-2); background: var(--papel); font: inherit; font-size: .93rem; color: var(--basalto);
}
.aviso { border-radius: var(--radio); padding: 12px 14px; font-size: .92rem; display: flex; gap: 10px; align-items: flex-start; border: 1px solid; border-left-width: 4px; }
.aviso .fa-solid { margin-top: 3px; }
.aviso-info { background: var(--oceano-claro); border-color: #bcd2e2; color: var(--oceano); }
.aviso-ambar { background: var(--ambar-claro); border-color: #ecd38f; color: #5e3f00; }
.aviso-ok { background: var(--laurisilva-claro); border-color: #b5dcc4; color: #17502f; }
.aviso-error { background: var(--almagre-claro); border-color: #f0bdb4; color: #82200f; }
.fuente { font-size: .82rem; color: var(--ceniza-2); margin-top: 12px; }
.fuente a { color: var(--ceniza); text-decoration: underline; text-decoration-color: var(--linea-2); }
.vacio { text-align: center; padding: 32px 16px; color: var(--ceniza-2); }
.vacio .fa-solid { font-size: 1.8rem; display: block; margin-bottom: 8px; color: var(--linea-2); }

/* Listas */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { padding: 10px 0; border-bottom: 1px solid var(--linea); display: flex; gap: 12px; align-items: center; }
.lista > li:last-child { border-bottom: 0; }
.lista .principal { flex: 1; min-width: 0; }
.lista .principal a { font-weight: 700; color: var(--basalto); }
.lista .principal .peq { display: block; color: var(--ceniza-2); }
.lista .derecha { text-align: right; white-space: nowrap; }

/* Guaguas: número de línea con su color oficial (dato del operador), horas de salida y recorrido */
.linea-num { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 32px; padding: 2px 8px; border-radius: 3px; background: var(--oceano); color: #fff; font-family: 'Big Shoulders', sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1; font-variant-numeric: tabular-nums; text-decoration: none; flex-shrink: 0; }
a.linea-num:hover { text-decoration: none; filter: brightness(.92); }
.horas-guagua { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.horas-guagua span { padding: 6px 0; text-align: center; border: 1px solid var(--linea); border-radius: 3px; font-variant-numeric: tabular-nums; font-size: .92rem; }
@media (min-width: 900px) { .seccion > .lineas-guagua { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; } .seccion > .lineas-guagua > li:nth-last-child(2) { border-bottom: 0; } }
.recorrido-guagua > li { border-left: 3px solid var(--linea-2); padding-left: 12px; margin-left: 6px; }
.lista .num { font-family: 'Big Shoulders', sans-serif; font-weight: 800; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.recorte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tablas */
.tabla-env { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
table.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th { text-align: left; font-size: .8rem; font-weight: 700; color: var(--ceniza); padding: 10px 12px; border-bottom: 2px solid var(--basalto); background: var(--papel); white-space: nowrap; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td.n, .tabla th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tr:hover td { background: #f8faf9; }
.tabla .destacada td { background: var(--canario-claro); }

/* Paginación */
.paginacion { display: flex; gap: 6px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.paginacion a, .paginacion span { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea-2); font-weight: 700; color: var(--ceniza); font-size: .92rem; font-variant-numeric: tabular-nums; }
.paginacion a:hover { border-color: var(--oceano); color: var(--oceano); text-decoration: none; }
.paginacion .actual { background: var(--oceano); color: #fff; border-color: var(--oceano); }

/* ----------------------------------------------------------------- Mapas y gráficas */
.mapa { height: 420px; border-radius: var(--radio); border: 1px solid var(--linea); background: #dde8ee; z-index: 1; }
.mapa-alto { height: 560px; }
.mapa-bajo { height: 300px; }
.leaflet-container { font-family: inherit; }
.leaflet-popup-content { font-size: .9rem; line-height: 1.45; margin: 12px 14px; }
.leaflet-popup-content a { font-weight: 700; }
.leaflet-popup-content-wrapper { border-radius: var(--radio); }
.marcador { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.marcador-precio { background: var(--oceano); color: #fff; font-weight: 800; font-size: 11px; padding: 3px 7px; border-radius: var(--radio-sm); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); white-space: nowrap; }
.marcador-precio.barato { background: var(--laurisilva); } .marcador-precio.caro { background: var(--almagre); }
.leyenda-mapa { background: rgba(255,255,255,.96); padding: 8px 10px; border-radius: var(--radio); font-size: .8rem; border: 1px solid var(--linea); line-height: 1.6; }
.leyenda-mapa i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; border: 1px solid rgba(0,0,0,.2); }
.grafico { position: relative; height: 280px; }
.grafico-alto { height: 360px; }
.grafico-bajo { height: 200px; }
.grafico-titulo { font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.grafico-sub { font-size: .84rem; color: var(--ceniza-2); margin: 0 0 10px; }
.ver-tabla { font-size: .84rem; margin-top: 8px; }
.ver-tabla summary { cursor: pointer; color: var(--ceniza); font-weight: 600; }

/* Barra horizontal simple (rankings) */
.barra-h { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; font-size: .92rem; }
.barra-h .pista { height: 10px; background: #e8ecec; border-radius: 2px; overflow: hidden; }
.barra-h .relleno { height: 100%; background: var(--serie-1); border-radius: 0 2px 2px 0; }
.barra-h.destacada { font-weight: 800; }
.barra-h.destacada .relleno { background: var(--serie-2); }

/* ----------------------------------------------------------------- Bloques de sección */
/* Tiempo */
.tiempo-ahora { display: flex; gap: 16px; align-items: center; }
.tiempo-ahora .icono { font-size: 2.6rem; color: var(--oceano-2); width: 60px; text-align: center; }
.tiempo-ahora .temp { font-family: var(--display); font-size: 3.4rem; font-weight: 800; line-height: .9; font-variant-numeric: tabular-nums; }
.dias-tiempo { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 0; margin-top: 16px; border-top: 1px solid var(--linea); }
.dia-tiempo { text-align: center; padding: 10px 4px; font-size: .86rem; border-right: 1px solid var(--linea); }
.dia-tiempo:last-child { border-right: 0; }
.dia-tiempo .fa-solid { font-size: 1.35rem; color: var(--oceano-2); margin: 6px 0; display: block; }
.dia-tiempo .max { font-weight: 800; } .dia-tiempo .min { color: var(--ceniza-2); }
.horas-tiempo { display: flex; gap: 0; overflow-x: auto; padding-bottom: 6px; border-top: 1px solid var(--linea); }
.hora-tiempo { flex: 0 0 62px; text-align: center; font-size: .82rem; padding: 8px 2px; border-right: 1px solid var(--linea); }
.hora-tiempo .fa-solid { display: block; font-size: 1.1rem; color: var(--oceano-2); margin: 4px 0; }

/* Gasolineras */
.precio-grande { font-family: var(--display); font-size: 2.3rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.precio-celda { font-weight: 800; font-variant-numeric: tabular-nums; }
.precio-barato { color: var(--laurisilva); } .precio-caro { color: var(--almagre); }
.marca-g { width: 38px; height: 38px; border-radius: var(--radio); background: var(--salitre); border: 1px solid var(--linea); display: grid; place-items: center; font-weight: 800; font-size: .66rem; color: var(--ceniza); flex: 0 0 auto; text-align: center; line-height: 1; }

/* Terremotos: escala de magnitud en almagre */
.mag { display: inline-grid; place-items: center; min-width: 44px; height: 30px; border-radius: var(--radio-sm); font-weight: 800; font-size: .92rem; font-variant-numeric: tabular-nums; }
.mag-0 { background: #f8ebe8; color: #7d2a1c; } .mag-1 { background: #f2d2cb; color: #6e2214; } .mag-2 { background: #e5a294; color: #4f1408; }
.mag-3 { background: #c8432c; color: #fff; } .mag-4 { background: #7f1d0e; color: #fff; }
.aviso-sismo { font-size: .84rem; }

/* Ayudas */
.ayuda-item { display: block; padding: 14px 0; border-bottom: 1px solid var(--linea); color: inherit; }
.ayuda-item:last-child { border-bottom: 0; }
.ayuda-item:hover { text-decoration: none; }
.ayuda-item:hover .tit { text-decoration: underline; }
.ayuda-item .tit { font-weight: 700; color: var(--basalto); display: block; margin: 4px 0; }
.ayuda-item .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .84rem; color: var(--ceniza-2); align-items: center; }

/* Tarjetas con imagen (eventos, restaurantes, especies, películas) */
.tarjeta-img { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; color: inherit; min-width: 0; }
a.tarjeta-img:hover { text-decoration: none; border-color: var(--oceano); }
a.tarjeta-img:hover .tit { text-decoration: underline; }
.tarjeta-img .foto { aspect-ratio: 16 / 10; background: #e4eaea center / cover no-repeat; position: relative; display: grid; place-items: center; color: #aab7b8; font-size: 2rem; }
.tarjeta-img .foto img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.tarjeta-img .foto .sello { position: absolute; top: 10px; left: 10px; }
.tarjeta-img .cuerpo { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tarjeta-img .cuerpo .tit { font-weight: 700; color: var(--basalto); line-height: 1.3; }
.tarjeta-img .cuerpo .peq { color: var(--ceniza-2); }
.foto-vertical .foto { aspect-ratio: 2 / 3; }
.fecha-evento { position: absolute; bottom: 0; left: 0; background: var(--canario); padding: 4px 10px; font-weight: 800; color: var(--basalto); font-size: .84rem; }
.nota { display: inline-flex; gap: 4px; align-items: center; font-weight: 800; font-size: .88rem; color: var(--basalto); }
.nota .fa-star { color: #e0a800; }
.credito-foto { font-size: .74rem; color: var(--ceniza-2); }

/* Cines */
.cine-bloque { margin-bottom: 18px; }
.peli-fila { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); align-items: start; }
.peli-fila img, .peli-fila .sin-cartel { width: 56px; height: 84px; object-fit: cover; border-radius: var(--radio-sm); background: #e4eaea; display: grid; place-items: center; color: #aab7b8; }
.horas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.horas span { border: 1px solid var(--linea-2); border-radius: var(--radio-sm); padding: 2px 8px; font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Selector de día de la cartelera */
.dias { display: flex; align-items: stretch; gap: 8px; }
.dias__paso { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 56px; border: 1px solid var(--linea-2); border-radius: var(--radio); background: var(--papel); color: var(--oceano); font-weight: 700; font-size: .9rem; white-space: nowrap; }
a.dias__paso:hover { border-color: var(--oceano); text-decoration: none; }
.dias__paso[aria-disabled="true"] { color: var(--linea-2); }
.dias__lista { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.dias__dia { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; min-height: 56px; padding: 4px 8px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); color: var(--basalto); line-height: 1.1; }
.dias__dia:hover { border-color: var(--oceano); text-decoration: none; }
.dias__dia--pasado { background: transparent; color: var(--ceniza-2); border-style: dashed; }
.dias__dia[aria-current="date"] { background: var(--oceano); border-color: var(--oceano); color: #fff; box-shadow: inset 0 -4px 0 var(--canario); }
.dias__semana { font-size: .76rem; font-weight: 600; }
.dias__num { font-family: var(--display); font-weight: 800; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.aviso-pasado { margin: 10px 0 0; font-size: .9rem; color: var(--ambar); }

/* Cámaras */
.camara { background: #000; border-radius: var(--radio); overflow: hidden; position: relative; }
.camara img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #222; }
.camara .pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: .82rem; display: flex; justify-content: space-between; gap: 8px; }
.camara .vivo { position: absolute; top: 8px; left: 8px; background: var(--almagre); color: #fff; font-size: .74rem; font-weight: 800; padding: 2px 7px; border-radius: var(--radio-sm); }

/* Teléfonos */
.telefono { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.telefono:last-child { border-bottom: 0; }
.telefono .numero { margin-left: auto; font-family: var(--display); font-weight: 800; font-size: 1.4rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.telefono-112 { background: var(--almagre-claro); border: 1px solid #f0bdb4; border-left: 6px solid var(--almagre); border-radius: var(--radio); padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.telefono-112 .numero { font-family: var(--display); font-size: 2.6rem; font-weight: 900; color: var(--almagre); line-height: 1; }

/* Especies */
.meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; align-items: end; height: 70px; }
.meses .m { background: var(--serie-3); border-radius: 2px 2px 0 0; min-height: 2px; position: relative; }
.meses-etq { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; font-size: .7rem; color: var(--ceniza-2); text-align: center; margin-top: 4px; }
.grupo-chip { display: flex; gap: 10px; align-items: center; padding: 10px 12px; min-height: 48px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--basalto); }
.grupo-chip:hover { border-color: var(--laurisilva); text-decoration: none; }
.grupo-chip .fa-solid { color: var(--laurisilva); font-size: 1.1rem; width: 22px; text-align: center; }
.grupo-chip .n { margin-left: auto; font-weight: 800; color: var(--ceniza); font-size: .9rem; font-variant-numeric: tabular-nums; }

/* Municipios de una isla e islas */
.municipios-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 24px; border-top: 1px solid var(--linea); }
.municipios-lista a { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--linea); color: var(--basalto); font-weight: 600; font-size: .94rem; }
.municipios-lista a:hover { color: var(--oceano); text-decoration: none; background: var(--papel); }
.municipios-lista img { width: 26px; height: 26px; object-fit: contain; }
.islas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 24px; border-top: 4px solid var(--basalto); }
.islas-lista a { display: block; padding: 12px 2px; border-bottom: 1px solid var(--linea); color: var(--basalto); }
.islas-lista a:hover { color: var(--oceano); text-decoration: none; }
.islas-lista strong { display: block; font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.05; }

/* Formularios (auth) */
.form-caja { max-width: 440px; margin: 32px auto; }
.form-caja label { display: block; font-weight: 700; font-size: .9rem; margin: 12px 0 4px; }
.form-caja input[type=text], .form-caja input[type=email], .form-caja input[type=password], .form-caja input[type=date] { width: 100%; padding: 11px 13px; border: 1px solid var(--linea-2); border-radius: var(--radio); font: inherit; }
.form-caja .boton { width: 100%; justify-content: center; margin-top: 16px; }
.error-campo { color: var(--almagre); font-size: .84rem; }

/* Texto largo */
.texto-largo { max-width: 72ch; }
.texto-largo p { margin-bottom: 1em; }
.pagina-texto { padding-top: 20px; }
.entradilla { font-size: 1.1rem; color: var(--ceniza); }
.pagina-texto h2 { margin: 1.6em 0 .5em; }
.pagina-texto h3 { margin: 1.2em 0 .4em; font-size: 1.04rem; }
.pagina-texto ul { margin: 0 0 1em; padding-left: 1.2em; }
.pagina-texto li { margin-bottom: .35em; }
.pagina-texto .tabla-env { margin-bottom: 1em; }
.pagina-texto .tabla td { vertical-align: top; font-size: .9rem; }
.wiki { border-left: 3px solid var(--canario); padding-left: 14px; color: var(--ceniza); }

/* ----------------------------------------------------------------- Avisos (Mi cuenta → Avisos, llamadas en las secciones) */
.aviso-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 16px; background: var(--papel); border: 1px solid var(--linea); border-left: 6px solid var(--canario); border-radius: var(--radio); }
.aviso-cta .fa-bell { font-size: 1.3rem; color: var(--oceano); }
.aviso-cta p { margin: 0; flex: 1 1 280px; }
.aviso-cta strong { display: block; }
.avisos-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.aviso-tipo { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--papel); border: 1px solid var(--linea); border-top: 4px solid var(--oceano); border-radius: var(--radio); color: var(--basalto); }
.aviso-tipo:hover { border-top-color: var(--canario); text-decoration: none; }
.aviso-tipo h3 { font-family: var(--display); font-size: 1.6rem; font-weight: 800; margin: 0; display: flex; gap: 10px; align-items: center; }
.aviso-tipo h3 .fa-solid { font-size: .8em; color: var(--oceano); }
.aviso-tipo p { margin: 0; color: var(--ceniza); font-size: .94rem; }
.aviso-tipo .crear { margin-top: auto; font-weight: 700; color: var(--oceano-2); }
.mis-avisos { list-style: none; margin: 0; padding: 0; border-top: 4px solid var(--basalto); }
.mis-avisos > li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.mis-avisos .icono { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radio); background: var(--oceano-claro); color: var(--oceano); }
.mis-avisos .pausado { opacity: .6; }
.mis-avisos .nombre { font-weight: 700; color: var(--basalto); }
.mis-avisos .detalle { font-size: .9rem; color: var(--ceniza); margin: 2px 0 0; }
.mis-avisos .acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mis-avisos form { margin: 0; }
.notificaciones { list-style: none; margin: 0; padding: 0; }
.notificaciones li { padding: 12px 0 12px 14px; border-bottom: 1px solid var(--linea); border-left: 4px solid var(--linea); }
.notificaciones li.nueva { border-left-color: var(--canario); background: #fffdf3; }
.notificaciones li.importante { border-left-color: var(--almagre); }
.notificaciones .tit { font-weight: 700; color: var(--basalto); }
.notificaciones .texto { font-size: .9rem; color: var(--ceniza); margin: 2px 0 0; }
.notificaciones time { font-size: .8rem; color: var(--ceniza-2); }
.form-aviso fieldset { border: 0; border-top: 1px solid var(--linea); margin: 0; padding: 18px 0 6px; }
.form-aviso legend { float: left; width: 100%; font-family: var(--display); font-weight: 800; font-size: 1.45rem; line-height: 1; padding: 0; margin: 0 0 4px; }
.form-aviso legend + * { clear: both; }
.form-aviso label { display: block; font-weight: 700; font-size: .92rem; margin: 12px 0 4px; }
.form-aviso .ayuda { font-size: .86rem; color: var(--ceniza-2); margin: 4px 0 0; }
.form-aviso input[type=text], .form-aviso input[type=number], .form-aviso select { width: 100%; max-width: 420px; padding: 10px 12px; min-height: 44px; border: 1px solid var(--linea-2); border-radius: var(--radio); font: inherit; background: #fff; }
.form-aviso input[type=number] { max-width: 160px; }
.form-aviso .opciones { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.form-aviso .opciones label, .form-aviso .casilla { display: flex; gap: 8px; align-items: center; font-weight: 500; margin: 6px 0; min-height: 32px; }
.form-aviso .opciones input[type=checkbox], .form-aviso .opciones input[type=radio], .form-aviso .casilla input[type=checkbox], .form-aviso .casilla input[type=radio] { width: 18px; height: 18px; flex: none; accent-color: var(--oceano); }
.form-aviso .fila { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.form-aviso .fila > div { min-width: 140px; }
.seccion-estrecha { max-width: 760px; }
.cab-bloque { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cab-bloque h2 { margin: 0; }
.separado { margin-top: 16px; }
.aviso-lateral { align-self: start; }
.hero .intro:last-child { margin-bottom: 0; }
.form-aviso .grupo-titulo { font-weight: 700; margin: 16px 0 4px; }
.form-aviso .ayuda-arriba { margin-top: 0; }
.form-aviso .opciones-columna { flex-direction: column; gap: 0; }
.form-aviso .casilla-umbral { display: grid; grid-template-columns: 18px minmax(0, 210px) 96px auto; gap: 10px; align-items: center; }
@media (max-width: 600px) { .form-aviso .casilla-umbral { grid-template-columns: 18px minmax(0, 1fr) 80px; } .form-aviso .casilla-umbral > span { grid-column: 3; margin-top: -8px; font-size: .86rem; } .form-aviso .casilla-umbral input[type=number] { width: 80px; } }
.form-aviso .casilla-umbral label { margin: 0; font-weight: 500; }
.form-aviso .casilla-umbral input[type=number] { width: 96px; max-width: 96px; flex: none; margin: 0; }
.form-aviso select { color: var(--basalto); }
.form-aviso .botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); }
/* Campos que dependen de otra opción (sin JS) */
.form-aviso .si-precio, .form-aviso .si-bajada, .form-aviso .si-serie, .form-aviso .si-resumen, .form-aviso .si-semanal, .form-aviso .si-inmediato { display: none; }
.form-aviso:has(input[name=condicion][value=precio]:checked) .si-precio,
.form-aviso:has(input[name=condicion][value=bajada]:checked) .si-bajada,
.form-aviso:has(input[name=serie]:checked) .si-serie,
.form-aviso:has(#frecuencia option[value=diario]:checked) .si-resumen,
.form-aviso:has(#frecuencia option[value=semanal]:checked) .si-resumen { display: flex; }
.form-aviso:has(#frecuencia option[value=semanal]:checked) .si-semanal,
.form-aviso:has(input[name=condicion][value=precio]:checked) .si-precio,
.form-aviso:has(input[name=condicion][value=bajada]:checked) .si-bajada { display: block; }
.form-aviso:has(#frecuencia option[value=inmediato]:checked):has(input[name=canal][value=email]:checked) .si-inmediato { display: flex; }
.form-aviso .si-municipio { display: none; }
.form-aviso:has(#zona option[value^="M:"]:checked) .si-municipio { display: block; }

/* ----------------------------------------------------------------- Pie */
.pie { background: #072b45; color: #b4c8d7; margin-top: 48px; padding: 40px 0 22px; font-size: .92rem; border-top: 4px solid var(--canario); }
.pie a { color: #e8f0f5; }
.pie .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.pie h4 { color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.3rem; margin-bottom: 10px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 7px; }
.pie .legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 28px; padding-top: 16px; font-size: .82rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

/* Selector de municipio (diálogo) */
.dialogo { position: fixed; inset: 0; background: rgba(7,30,48,.6); z-index: 2000; display: grid; place-items: start center; padding: 70px 16px 16px; overscroll-behavior: contain; }
.dialogo .caja { background: var(--papel); border-radius: var(--radio); border-top: 6px solid var(--canario); width: 100%; max-width: 520px; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35); max-height: calc(100vh - 100px); display: flex; flex-direction: column; }
.dialogo h3 { font-family: var(--display); font-weight: 800; font-size: 1.6rem; }
.dialogo .caja input { width: 100%; padding: 11px 13px; border: 1px solid var(--linea-2); border-radius: var(--radio); font: inherit; margin: 10px 0; }
.dialogo .resultados { overflow: auto; }
.dialogo .resultados a { display: flex; justify-content: space-between; padding: 10px; border-radius: var(--radio-sm); color: var(--basalto); }
.dialogo .resultados a:hover { background: var(--salitre); text-decoration: none; }
.dialogo .cerrar { float: right; background: none; border: 0; font-size: 1.3rem; cursor: pointer; color: var(--ceniza-2); min-width: 44px; min-height: 44px; }

/* ----------------------------------------------------------------- Responsive */
@media (max-width: 1080px) {
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--oceano); flex-direction: column; padding: 10px 16px 16px; border-bottom: 4px solid var(--canario); }
  .nav.abierto { display: flex; }
  .nav a { padding: 12px 4px; }
  .menu-btn { display: block; }
  .r-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hero .cont, .col-2-1, .col-1-1 { grid-template-columns: 1fr; }
  .hero .cont { gap: 20px; }
  .hero-silueta { max-width: 520px; }
  .hero-compacto .cont { grid-template-columns: minmax(0, 1fr) 120px; }
  .r-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  /* Avisos («Avísame…»): en móvil, nada más empezar la página, bajo la cabecera */
  .cont:has(> .seccion-aviso) { display: flex; flex-direction: column; }
  .cont > .seccion-aviso { order: -1; margin-top: 16px; }
  .solo-movil { display: flex !important; }
  .solo-escritorio { display: none !important; }
  .subir { right: 12px; bottom: 12px; width: 50px; height: 50px; }
  .r-2, .r-3, .r-4 { grid-template-columns: 1fr; }
  .cabecera .cont { gap: 10px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .logo img { height: 36px; }
  .buscador { order: 3; flex-basis: 100%; max-width: none; }
  .secciones { top: 114px; }
  .ambito-boton { max-width: 140px; padding: 4px 8px; }
  .ambito-menu { width: calc(100vw - 32px); }
  .mapa { height: 340px; } .mapa-alto { height: 420px; }
  .barra-h { grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; }
  .pie .cols { grid-template-columns: 1fr; }
  .barra-top .ocultar-movil { display: none; }
  .barra-top .cont { gap: 10px; }
  .mi-sitio { min-width: 0; }
  .mi-sitio [data-mi-municipio] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; }
  .cuenta-enlaces { gap: 12px; flex: none; }
  .cuenta-enlaces .texto-movil { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabla th, .tabla td { padding: 8px 9px; }
  .hero-compacto .cont { grid-template-columns: 1fr; }
  .hero-compacto .silueta-caja { display: none; }
  .dias__paso span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dias__paso { padding: 0 12px; }
  .mis-avisos > li { grid-template-columns: 36px minmax(0, 1fr); }
  .mis-avisos .acciones { grid-column: 2; justify-content: flex-start; }
}
@media print {
  .cabecera, .barra-top, .secciones, .pie, .mapa, .silueta { display: none !important; }
  body { background: #fff; }
}

/* ----------------------------------------------------------------- Compatibilidad con las vistas de acceso heredadas (clases de Bootstrap) */
.container { max-width: var(--ancho); margin: 0 auto; padding: 32px 16px; }
.row { display: flex; justify-content: center; }
.row > [class*="col-"] { width: 100%; max-width: 460px; }
.fb-bloque { background: var(--papel); border: 1px solid var(--linea); border-top: 6px solid var(--canario); border-radius: var(--radio); padding: 24px; }
.form-label { display: block; font-weight: 700; font-size: .9rem; margin: 12px 0 4px; }
.form-control, .form-select { width: 100%; padding: 11px 13px; min-height: 44px; border: 1px solid var(--linea-2); border-radius: var(--radio); font: inherit; background: #fff; }
.form-check { display: flex; gap: 8px; align-items: center; margin: 12px 0; font-size: .92rem; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 11px 16px; min-height: 44px; border-radius: var(--radio); border: 0; font: inherit; font-weight: 700; cursor: pointer; background: var(--oceano); color: #fff; }
.btn:hover { background: var(--oceano-2); color: #fff; text-decoration: none; }
.w-100 { width: 100%; } .text-center { text-align: center; } .small { font-size: .88rem; } .mb-0 { margin-bottom: 0; } .mt-3 { margin-top: 14px; } .mb-3 { margin-bottom: 14px; }
.alert { border-radius: var(--radio); padding: 10px 14px; margin-bottom: 12px; font-size: .92rem; border-left: 4px solid; }
.alert-danger { background: var(--almagre-claro); color: #82200f; } .alert-success { background: var(--laurisilva-claro); color: #17502f; } .alert-info { background: var(--oceano-claro); color: var(--oceano); }
.invalid-feedback, .text-danger { color: var(--almagre); font-size: .84rem; }
.h4 { font-family: var(--display); font-size: 1.9rem; } .fw-800 { font-weight: 800; }

/* ----------------------------------------------------------------- Mareas */
.mareas h3 { margin-bottom: 6px; }
.marea-ahora { background: var(--oceano-claro); border-radius: var(--radio); padding: 9px 12px; margin: 10px 0; }
.marea-ahora .fa-solid { color: var(--oceano-2); margin-right: 4px; }
.marea-dias { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 18px; margin-top: 10px; }
.marea-dias .peq { margin: 0 0 4px; }
.marea-lista { list-style: none; margin: 0; padding: 0; }
.marea-lista li { display: grid; grid-template-columns: 16px 1fr auto auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--linea); font-size: .92rem; }
.marea-lista li:last-child { border-bottom: 0; }
.marea-lista .pleamar .fa-solid { color: var(--oceano-2); }
.marea-lista .bajamar .fa-solid { color: var(--ambar); }

/* ----------------------------------------------------------------- Senderos: cifras de ruta y fotos */
.ruta-cifras { margin-top: 12px; }
.ruta-cifras .valor .fa-solid { font-size: .7em; color: var(--laurisilva); }
.fotos-lugar { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.fotos-lugar figure { margin: 0; background: var(--papel); border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); }
.fotos-lugar img { display: block; width: 100%; height: 150px; object-fit: cover; }
.fotos-lugar figcaption { font-size: .76rem; color: var(--ceniza-2); padding: 6px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----------------------------------------------------------------- Cuenta y acceso social */
.social-acceso { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.boton-social { width: 100%; justify-content: center; }
.boton-social .fa-google { color: #db4437; }
.boton-social .fa-microsoft { color: #00a4ef; }
.boton-social .fa-amazon { color: #ff9900; }
.separador-o { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; color: var(--ceniza-2); font-size: .84rem; }
.separador-o::before, .separador-o::after { content: ""; flex: 1; border-top: 1px solid var(--linea); }
.form-cuenta label { display: block; font-weight: 700; font-size: .9rem; margin: 12px 0 4px; }
.form-cuenta .boton { margin-top: 12px; }
.form-cuenta .peq { margin: 6px 0 0; }
.casilla { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-size: .94rem; }
.casilla input { margin-top: 4px; }
.boton-peligro { background: var(--almagre); color: #fff; }
.boton-peligro:hover { background: #962716; color: #fff; }
.cuenta-pestanas { display: flex; gap: 0; border-bottom: 1px solid var(--linea); margin-bottom: 20px; }
.cuenta-pestanas a { padding: 10px 14px; font-weight: 700; color: var(--ceniza); border-bottom: 4px solid transparent; margin-bottom: -1px; }
.cuenta-pestanas a:hover { color: var(--basalto); text-decoration: none; }
.cuenta-pestanas a[aria-current="page"] { color: var(--oceano); border-bottom-color: var(--canario); }

/* Aviso de cookies propio (solo con Analytics y sin AdSense; con AdSense lo muestra la CMP de Google) */
.aviso-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2000; max-width: 640px; margin: 0 auto; background: #fff; color: var(--basalto); border: 1px solid var(--linea-2); border-top: 6px solid var(--canario); border-radius: var(--radio); box-shadow: 0 10px 30px rgba(7, 43, 69, .22); padding: 16px 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: .92rem; }
.aviso-cookies[hidden] { display: none; }
.aviso-cookies p { margin: 0; flex: 1 1 280px; }
.aviso-cookies .botones { display: flex; gap: 8px; }
.enlace-pie { background: none; border: 0; padding: 0; font: inherit; color: #e8f0f5; cursor: pointer; text-align: left; }
.enlace-pie:hover { text-decoration: underline; }