: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)}
.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}