:root{--fondo:#f4f7fb;--tinta:#10233a;--suave:#4a5d73;--azul:#0d2a4a;--acento:#0a66c2;--verde:#1f8a4c;--amarillo:#c79100;--rojo:#c0392b;--tarjeta:#fff;--borde:#d8e1ec}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:18px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:clip}
a{color:var(--acento)}[hidden]{display:none!important}
.cab{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;background:var(--azul);color:#fff;padding:10px 16px}
.es-pre .cab{top:22px}.es-pre body{padding-top:22px}
.marca{color:#fff;text-decoration:none;font-weight:800;font-size:1.3rem}.marca span{font-weight:400;opacity:.8;font-size:.95rem}
.cab-fecha{font-size:.9rem;opacity:.9;text-align:right}
main{max-width:760px;margin:0 auto;padding:12px 14px 24px}
h1{font-size:1.6rem;line-height:1.2;margin:.6em 0 .2em}h2{font-size:1.2rem;margin:.2em 0 .5em}h2 a{color:inherit}h3{font-size:1.05rem;margin:0 0 .2em}
.entradilla{color:var(--suave);margin-top:0}
.tira{margin:0 0 14px}.tira img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:10px;background:var(--borde)}.tira figcaption{margin-top:6px}.tira-titulo{margin:0;font-weight:700}.tira-fuente{margin:.1em 0 0;font-size:.9rem;color:var(--suave)}
/* tira dinámica (js/tira.js): hueco fijo para título y fuente, así el cambio de texto no mueve lo de debajo (CLS 0) */
#tira-fuente{min-height:3.1em}@media (max-width:599px){.tira-titulo{min-height:3.1em}#tira-fuente{min-height:4.65em}}
/* Sin parpadeo de la tira (24-10): oculta (mismo hueco, CLS 0) hasta que js/tira.js decide; si el JS no llega, se ve sola a los 2,5 s; si viene una más nueva, se espera hasta 8 s */
.tira-espera>*{visibility:hidden;animation:tira-ver 0s linear 2.5s forwards}.tira-espera.tira-cargando>*,.tira-js .tira-espera>*{animation-delay:8s}@keyframes tira-ver{to{visibility:visible}}
.migas{font-size:.9rem;color:var(--suave);margin-top:4px}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:14px;margin:14px 0;box-shadow:0 1px 2px #0001}
.dato-grande{display:flex;gap:14px;align-items:center;margin:.2em 0 .6em}.dato-grande .num{font-size:2.6rem;font-weight:800;line-height:1;min-width:3.2ch}
.dato-grande small{color:var(--suave)}
.aviso{background:#fff4d6;border-left:4px solid var(--amarillo);padding:8px 10px;border-radius:6px}
.fuente,.nota,.leyenda{font-size:.88rem;color:var(--suave)}
.tabla-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.95rem}td,th{border-bottom:1px solid var(--borde);padding:6px;text-align:left;vertical-align:top}
.dias{padding-left:1.1em}.dias li{margin:.3em 0}
.horas-luz{list-style:none;padding:0;margin:0}.horas-luz li{display:grid;grid-template-columns:4.6em 1fr 4.4em;align-items:center;gap:8px;padding:3px 0;font-variant-numeric:tabular-nums;font-size:.95rem}
.horas-luz .barra{height:14px;border-radius:7px;background:var(--amarillo)}.horas-luz .barata .barra{background:var(--verde)}.horas-luz .cara .barra{background:var(--rojo)}
.horas-luz li.ahora{outline:2px solid var(--acento);border-radius:6px;font-weight:700}.horas-luz .p{text-align:right}
.leyenda .barata{color:#14653a;font-weight:700}.leyenda .media{color:#7a5a00;font-weight:700}.leyenda .cara{color:#a3271b;font-weight:700}
.farmacias{list-style:none;padding:0;margin:0}.farmacia{border-top:1px solid var(--borde);padding:10px 0}.farmacia:first-child{border-top:0}
.farmacia p{margin:.15em 0}.horario{font-size:.9rem;color:var(--suave)}.farmacia h3::after{content:" · de guardia ahora";color:var(--verde);font-size:.85rem;visibility:hidden}.farmacia.activa h3::after{visibility:visible}
.farmacias .farmacia{border-left:5px solid transparent;padding-left:9px;margin-left:-14px}.farmacias .farmacia.activa{border-left-color:var(--verde);background:#eaf6ee}.farmacia.activa h3::after{color:#17693a}
.farmacia.mas-cerca{background:#eaf6ee;border-radius:10px;padding:10px}.dist{margin-left:.5em;font-weight:700;color:var(--verde)}
.estado-guardia{font-weight:700}
.fecha-luz{font-size:.95rem;padding:8px 10px;border-left:4px solid var(--borde);border-radius:6px;margin:.5em 0}.fecha-luz.aviso{border-left-color:var(--amarillo)}
.boton,button{display:inline-block;min-height:48px;padding:10px 16px;border-radius:10px;border:0;background:var(--acento);color:#fff;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
button.sec{background:#fff;color:var(--acento);border:2px solid var(--acento);margin-top:8px}
.ubicacion{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:14px;display:grid;gap:10px}
label{font-weight:600}select,input{width:100%;min-height:48px;font:inherit;padding:8px 10px;border:2px solid var(--borde);border-radius:10px;background:#fff;color:var(--tinta)}
.fila{display:flex;gap:8px}.fila input{flex:1}.cerca{margin-top:12px;display:grid;gap:8px}
.afiliado{background:#f7f2e8;border-radius:10px;padding:8px 12px;margin:12px 0}
.hueco-anuncio{min-height:0}.hueco-anuncio:has(ins){min-height:250px;margin:14px 0}
.pie{max-width:760px;margin:0 auto;padding:16px 14px 90px;font-size:.88rem;color:var(--suave);border-top:1px solid var(--borde)}
.ck{position:fixed;left:8px;right:8px;bottom:8px;max-width:640px;margin:0 auto;background:#fff;border:2px solid var(--azul);border-radius:12px;padding:12px;z-index:9999;color:var(--tinta);box-shadow:0 4px 20px #0003}
.ck-b{display:flex;gap:8px;margin-top:8px}.ck-b button{flex:1}#ck-no{background:#fff;color:var(--azul);border:2px solid var(--azul)}
/* B2: Aceptar y Rechazar con el mismo peso visual (mismo fondo, texto, borde y tamaño), en claro y en oscuro */
.ck .ck-b #ck-si,.ck .ck-b #ck-no{background:var(--azul);color:#fff;border:2px solid var(--azul)}
.franja-pre{position:fixed;top:0;left:0;right:0;background:#ffd400;color:#000;text-align:center;height:22px;line-height:18px;font:700 12px system-ui,sans-serif;padding:2px;z-index:10000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* W1: mientras el aviso de cookies está visible, hueco abajo para poder ver y pulsar todo lo que tapa; en móvil pequeño, aviso más compacto */
body:has(#ck:not([hidden])){padding-bottom:min(55vh,360px)}
@media (max-width:380px){.ck{padding:8px 10px;font-size:.84rem;line-height:1.4}.ck p{margin:0}.ck-b{margin-top:6px}.ck-b button{min-height:44px;padding:8px 10px}}
@media (prefers-color-scheme:dark){.leyenda .barata{color:#5fd08f}.leyenda .media{color:#f0c040}.leyenda .cara{color:#ff8a7a}.boton,button:not(.sec):not(#ck-no){color:#0b1522}.ck .ck-b #ck-si,.ck .ck-b #ck-no{background:var(--tinta);color:#0b1522;border-color:var(--tinta)}}
@media (prefers-color-scheme:dark){:root{--fondo:#0b1522;--tinta:#e8eef6;--suave:#a9b8c9;--tarjeta:#13202f;--borde:#253649;--acento:#5aa9ff}.aviso{background:#3a2f0b}.farmacia.mas-cerca{background:#123322}.farmacias .farmacia.activa{background:#123322}.farmacia.activa h3::after{color:#5fd08f}.afiliado{background:#2a2416}select,input{background:#0b1522}button.sec,#ck-no{background:transparent}.ck{background:#13202f}}
.sugerencias{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:6px}.sugerencias button{width:100%;text-align:left;margin:0}
/* Portada en tarjetas (20-10): componente común de AvilesIA en /componentes/tarjetas/ con los colores de Hoy */
:root{--tj-fondo:var(--tarjeta);--tj-fondo-cab:var(--tarjeta);--tj-tinta:var(--tinta);--tj-suave:var(--suave);--tj-borde:var(--borde);--tj-acento:var(--acento);--tj-margen-ancla:64px;--tj-relleno:9px}
.portada-h1{font-size:1.15rem;margin:.1em 0 .35em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enlaces-portada{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;font-size:.92rem;margin:4px 0 10px}
.enlaces-portada>a,.ubi-mini>summary{display:inline-flex;align-items:center;min-height:44px}
.ubi-mini>summary{cursor:pointer;color:var(--acento);text-decoration:underline;list-style:none}.ubi-mini>summary::-webkit-details-marker{display:none}
.ubi-mini[open]{flex-basis:100%}.ubi-mini .ubicacion{margin:4px 0 10px;font-size:1rem}
.tj-cuerpo h2{font-size:1rem;margin:.8em 0 .3em}.tj-cuerpo .horas-luz li{font-size:.85rem;padding:1px 0}.tj-cuerpo .dias{padding-left:1.1em}
.gas-lista small{color:var(--suave)}.gas-lista li{padding:8px 0}
/* Portada: aviso de cookies más compacto en móvil (mismo texto y mismo peso de los dos botones, B2) para que no tape las tarjetas a 390×844 */
@media (max-width:480px){.ck{left:6px;right:6px;bottom:6px;padding:8px 10px;font-size:.82rem;line-height:1.4}.ck p{margin:0}.ck-b{margin-top:6px}.ck-b button{min-height:44px;padding:8px 10px}}
/* Portada: la tira algo más baja en móvil (mismas reservas en em: CLS 0 al cambiar la tira) */
@media (max-width:599px){.tira{margin-bottom:8px}.tira figcaption{margin-top:4px}.tira-titulo{font-size:.92rem;line-height:1.45}.tira-fuente{font-size:.8rem}}
/* Portada en escritorio: tira a la izquierda; título, tarjetas y enlaces a la derecha, todo a la vista */
@media (min-width:1024px){main:has(> #tarjetas){max-width:1140px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:28px;align-items:start}
 main:has(> #tarjetas) > *{grid-column:2}main:has(> #tarjetas) > .tira{grid-column:1;grid-row:1 / span 6;margin-top:6px}
 main:has(> #tarjetas) > .hueco-anuncio{grid-column:1 / -1}}
/* Portada: 112 siempre a la vista (Seguridad B1, como en cef0ed1); 44 px por .enlaces-portada>a */
.enlaces-portada .tel-112{font-weight:700}
/* W1: selector de concejo en /<concejo>/farmacias/ (enlaces, sin JS) */
.otros-concejos{margin:.4em 0 .8em}.otros-concejos>summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--acento);font-weight:600}
.lista-concejos{list-style:none;padding:0;margin:6px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5em,1fr));gap:0 12px}
.lista-concejos a{display:flex;align-items:center;min-height:44px}.lista-concejos a[aria-current]{font-weight:800;color:var(--tinta)}
/* U2: «Urgencias: 112» por encima del banner de cookies a 390×844 también en PRE (franja de 22px) */
@media (max-width:480px){.ck{font-size:.78rem;line-height:1.32;padding:7px 10px}.ck-b{margin-top:5px}
 main > #tarjetas{margin-bottom:2px}.portada-h1{margin:0 0 .25em}.enlaces-portada{margin-top:0}}
/* Sin dos capas (24-10): valor, contexto y hora de las tarjetas vivas ocultos (mismo hueco, CLS 0) hasta que js/tarjetas-hoy.js los suelta. Respaldo solo CSS: 3 s sin JS, 11 s si el JS llegó (html.tj-js). <noscript> lo enseña todo */
.tj-espera :is([data-valor],[data-contexto],[data-hora]){visibility:hidden;animation:tj-ver 0s linear 3s forwards}.tj-js .tj-espera :is([data-valor],[data-contexto],[data-hora]){animation-delay:11s}@keyframes tj-ver{to{visibility:visible}}
/* Calidad 24-10 (1): /mar/ en vivo, mismo patrón (oculto en su hueco hasta que js/mar-pagina.js decide; sin JS, a los 3 s) */
.mar-espera :is([data-mar-vivo],[data-mar-fuente]),body:has(.mar-espera) [data-mar-fecha]{visibility:hidden;animation:tj-ver 0s linear 3s forwards}.tj-js .mar-espera :is([data-mar-vivo],[data-mar-fuente]),.tj-js body:has(.mar-espera) [data-mar-fecha]{animation-delay:11s}
.mar-fecha{margin:-.4em 0 .8em;color:var(--suave,#555);font-size:.95em}
/* 6 tarjetas en la primera pantalla a 375×800 (Javier 24-10 15:48): pie de la tira, título y tarjetas más compactos en móvil, sin quitar nada (mismas reservas en em: CLS 0) */
@media (max-width:599px){.tira{margin-bottom:6px}.tira figcaption{margin-top:3px}.tira-titulo{font-size:.84rem;line-height:1.3;min-height:2.6em}
 .tira-ia{font-size:.72rem;margin:0}.portada-h1{font-size:1rem;margin:0 0 .2em}}
/* «Inspirada en» encima de la tira, en letra pequeña (24-10): 2 líneas como mucho y hueco fijo (CLS 0 si js/tira.js cambia el texto) */
#tira-fuente.tira-arriba{min-height:0;height:2.6em;font-size:.72rem;line-height:1.3;margin:0 0 4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* Barcelona 24-10 (a, d): farmacias fuera de Asturias y oferta única de ubicación; [hidden] manda sobre display */
.enlaces-portada>a[hidden],.enlaces-portada>[hidden]{display:none!important}
.enlaces-portada .no-disp:not([hidden]){display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;min-height:44px;color:#555}
.ubi-mini>summary{font-weight:600}
.ubi-oferta:not([hidden]){display:flex;flex-wrap:nowrap;align-items:center;gap:2px;margin:-.2em 0 .1em;font-size:.85rem;white-space:nowrap}
.ubi-oferta button{min-height:40px;padding:0 8px;border:0;background:none;color:var(--acento);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
/* Aviso de ubicación en oscuro: la línea 51 (1,1,1) dejaba «Sí» y «Seguir con Avilés» en #0b1522 sobre fondo oscuro; esta (2,1,1) gana y usa el acento del tema */
#ubi-oferta.ubi-oferta button#ubi-si,#ubi-oferta.ubi-oferta button#ubi-no{color:var(--acento)}

/* Cabecera de la tira (Javier 24-10 16:13-16:15): «Inspirada en» en UNA línea con elipsis, letra pequeña y peso normal; «· Imagen IA» siempre visible al final.
   La franja blanca de «hoy.avilesia.es» va dentro del webp: se recortan por CSS solo ~6 px (de 576) del margen blanco de abajo, sin tocar viñetas ni texto. */
#tira-fuente.tira-arriba{display:flex;align-items:baseline;height:auto;min-height:0;max-height:none;-webkit-line-clamp:unset;font-size:.72rem;line-height:1.35;font-weight:400;margin:0 0 3px;white-space:nowrap;overflow:hidden}
#tira-fuente .tira-insp{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
#tira-fuente .tira-insp a{font-weight:400}
#tira-fuente .tira-ia{flex:0 0 auto;font-size:.66rem;opacity:.9;padding-left:.15em;font-weight:400}
.tira img{aspect-ratio:1024/570;object-fit:cover;object-position:50% 0}
/* Barra de arriba más estrecha (Javier 16:14): la mitad de padding vertical y la marca algo más pequeña; la fecha nunca baja de línea */
.cab{padding:5px 16px;gap:10px}.marca{font-size:1.12rem;line-height:1.2}.marca span{font-size:.85rem}.cab-fecha{font-size:.85rem;white-space:nowrap}
/* Botón «Instalar» (js/instalar.js, 24-10): cabe en la cabecera fina de 32 px (botones de 22 px) y la zona táctil llega a 44 px con ::after, sin crecer la cabecera.
   Va antes de la fecha con margin-left:auto: al aparecer no mueve ni la marca ni la fecha (CLS 0). Si no cabe en móviles estrechos, se recorta la fecha con «…». */
.marca,.cab-inst{flex-shrink:0}.cab-fecha{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cab-inst{position:relative;z-index:1;display:flex;align-items:center;gap:2px;margin-left:auto}
/* N1 (Calidad 24-10): texto blanco en los dos temas; más especificidad (1,2,1) que button:not(.sec):not(#ck-no) del tema oscuro (1,1,1) */
#cab-inst.cab-inst button.btn-instalar,#cab-inst.cab-inst button.btn-instalar-x{color:#fff}
.btn-instalar,.btn-instalar-x{position:relative;height:22px;min-height:0;min-width:0;line-height:1;margin:0;border-radius:11px;color:#fff;font:600 .78rem/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer}
.btn-instalar{padding:0 8px;background:#ffffff1f;border:1px solid #ffffff8c}.btn-instalar::after{content:"";position:absolute;top:-17px;bottom:-5px;left:0;right:0}
.btn-instalar-x{width:22px;padding:0;background:none;border:0;opacity:.85;font-size:.85rem}.btn-instalar-x::after{content:"";position:absolute;top:-17px;bottom:-5px;left:0;right:-10px}
.btn-instalar:hover{background:#ffffff33}.btn-instalar-x:hover{opacity:1}
.btn-instalar:focus-visible,.btn-instalar-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.inst-panel{position:fixed;z-index:60;top:calc(env(safe-area-inset-top,0px) + 40px);right:8px;width:min(340px,calc(100% - 16px));background:var(--tarjeta);color:var(--tinta);border:1px solid var(--borde);border-radius:12px;box-shadow:0 6px 24px #0003;padding:12px 44px 10px 14px;font-size:.95rem;line-height:1.45}
.es-pre .inst-panel{top:calc(env(safe-area-inset-top,0px) + 62px)}
.inst-titulo{margin:0 0 .3em;font-weight:700}.inst-pasos{margin:0;padding-left:1.2em}.inst-pasos li{margin:.2em 0}.inst-pie{margin:.5em 0 0;font-size:.88rem;color:var(--suave)}
.inst-panel-x{position:absolute;top:2px;right:2px;width:44px;height:44px;border:0;background:none;color:var(--tinta);font-size:1.1rem;cursor:pointer;border-radius:22px}
.inst-no{min-height:0;border:0;background:none;padding:0;color:var(--acento);text-decoration:underline;font:inherit;cursor:pointer}
.inst-panel-x:focus-visible,.inst-no:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
/* N1: panel con variables de tema; los botones con (1,2,1) para ganar a la regla de botones del tema oscuro */
#inst-panel.inst-panel a{color:var(--acento)}#inst-panel.inst-panel button.inst-panel-x{color:var(--tinta)}#inst-panel.inst-panel button.inst-no{color:var(--acento)}
.guia-inicio ol{padding-left:1.3em;margin:.2em 0 .4em}.guia-inicio li{margin:.3em 0}
/* SEO 26-10: texto solo para lectores de pantalla (descripción completa de la tira, aria-describedby) */
.solo-lector{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* SEO 1-11: páginas de farmacias de api/farmacias.js */
.farm-fecha{margin:4px 0 12px;font-size:.95em}.farm-fecha.aviso{padding:10px 12px;border-radius:10px}
.enlace-resumen{margin:8px 0}.enlace-resumen a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.compartir{margin:12px 0}.otros-concejos{margin:16px 0}.otros-concejos summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700}
.concejos-vecinos ul,.otros-bloques ul,.lista-concejos-hoy{padding-left:1.1em}.concejos-vecinos li,.otros-bloques li,.lista-concejos-hoy li{margin:6px 0}
.concejos-vecinos a,.otros-bloques a,.lista-concejos-hoy a{display:inline-flex;align-items:center;min-height:44px}
.texto-concejo p{line-height:1.55}
/* Destacado del día en el hueco de la tira (js/destacado.js, 01-11): compacto, más bajo que la tira; la tira queda plegada debajo */
.destacado-hueco{margin:0 0 10px}main:has(> #tarjetas) > .destacado-hueco{grid-column:1;grid-row:1 / span 6;margin-top:6px}
.destacado{display:grid;grid-template-columns:40% 1fr;gap:10px;align-items:start;border:1px solid var(--borde);border-radius:10px;padding:8px;background:var(--tarjeta)}
.destacado-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--borde)}
.destacado-cuerpo{min-width:0}.destacado-etq{margin:0 0 2px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--suave)}
.destacado-titulo{margin:0 0 4px;font-size:1rem;line-height:1.25}.destacado-titulo a{text-decoration:none}.destacado-titulo a:hover,.destacado-titulo a:focus-visible{text-decoration:underline}
.destacado-texto{margin:0 0 4px;font-size:.84rem;line-height:1.35}.destacado-mas{font-size:.84rem;font-weight:700}.destacado-fuente{margin:4px 0 0;font-size:.68rem;color:var(--suave)}
.destacado-ver-tira{display:inline-block;margin:4px 0 0;padding:4px 2px;border:0;background:none;color:inherit;font:inherit;font-size:.78rem;text-decoration:underline;cursor:pointer;min-height:24px}
.tira.tira-plegada{display:none}.destacado-hueco > .tira{margin-top:6px}
@media (max-width:599px){.destacado{grid-template-columns:34% 1fr;gap:8px;padding:6px}.destacado-titulo{font-size:.92rem}.destacado-texto{font-size:.78rem;line-height:1.3}.destacado-mas{font-size:.78rem}}