@font-face{font-family:"Overpass";src:url(/fuentes/overpass-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--fondo:#f4f5f2;--panel:#fff;--tinta:#17181a;--suave:#5b6066;--linea:#dcdeda;--amarillo:#ffc629;--tecla:#fff;--si:#0b6b45;--si-f:#d9f2e4;--no:#b4231c;--no-f:#fde4e1;--duda:#7a5200;--duda-f:#fbeecb}
@media (prefers-color-scheme:dark){:root:not([data-tema=claro]){--fondo:#121416;--panel:#1b1e21;--tinta:#f1f2ef;--suave:#a4aaad;--linea:#30353a;--tecla:#23272b;--si:#72e0ae;--si-f:#123626;--no:#ffa59e;--no-f:#40191a;--duda:#f1ca76;--duda-f:#372a0f}}
:root[data-tema=oscuro]{--fondo:#121416;--panel:#1b1e21;--tinta:#f1f2ef;--suave:#a4aaad;--linea:#30353a;--tecla:#23272b;--si:#72e0ae;--si-f:#123626;--no:#ffa59e;--no-f:#40191a;--duda:#f1ca76;--duda-f:#372a0f}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 17px/1.5 "Overpass",ui-sans-serif,system-ui,sans-serif;min-height:100dvh}
.envoltura{max-width:560px;margin:0 auto;padding:16px 16px 48px}
a{color:inherit}
.marca{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.02em;text-decoration:none;line-height:1}
.marca svg{width:42px;height:28px;display:block}
header{margin-bottom:28px}
h1{font-size:clamp(32px,9vw,44px);line-height:1.04;font-weight:800;letter-spacing:-.035em;margin:0 0 20px;text-wrap:balance}
h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
p{margin:0 0 12px}.suave{color:var(--suave)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.icono{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.2em}

/* La placa */
.placa-grafica{--color:#fff;background:var(--color);color:#17181a;border:3px solid #17181a;border-radius:16px;padding:8px 14px 12px;text-align:center;box-shadow:inset 0 0 0 3px var(--color),inset 0 0 0 4px rgb(23 24 26 / .35);position:relative;max-width:360px;margin:0 auto 18px}
.placa-grafica[data-ciudad=bogota]{--color:var(--amarillo)}
.placa-grafica::before,.placa-grafica::after{content:"";position:absolute;top:13px;width:7px;height:7px;border-radius:50%;background:#17181a;opacity:.55}
.placa-grafica::before{left:15px}.placa-grafica::after{right:15px}
.placa-grafica small{display:block;font-size:12px;font-weight:800;letter-spacing:.2em}
.numeros{display:block;font-size:clamp(46px,14vw,64px);font-weight:800;line-height:1.08;letter-spacing:.015em;font-variant-numeric:tabular-nums;white-space:nowrap}
.numeros .tenue{opacity:.28}
#slot{display:inline-block;min-width:.62em;border-radius:8px;background:rgb(23 24 26 / .1)}
#slot.lleno{background:#17181a;color:var(--color);padding:0 .08em}

/* Teclado */
.teclado{border:0;padding:0;margin:0}
.teclado legend{font-weight:700;padding:0;margin-bottom:10px;width:100%;text-align:center}
.teclas{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.teclas button{min-height:56px;font:800 24px/1 "Overpass",sans-serif;background:var(--tecla);color:var(--tinta);border:1.5px solid var(--linea);border-radius:12px;cursor:pointer;touch-action:manipulation;transition:transform .12s ease,background-color .12s ease}
.teclas button:active{transform:scale(.96)}
.teclas button[aria-pressed=true]{background:var(--amarillo);color:#17181a;border-color:#17181a}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}

/* Veredicto */
#resultado{margin-top:18px}
.veredicto{display:flex;gap:12px;align-items:flex-start;border-radius:16px;padding:16px;font-size:clamp(26px,7.5vw,32px);line-height:1.08;font-weight:800;letter-spacing:-.03em}
.veredicto .icono{width:1em;height:1em;margin-top:.02em}
.veredicto small{display:block;font-size:16px;font-weight:500;letter-spacing:0;margin-top:6px;line-height:1.35}
.veredicto.secundario{font-size:18px;letter-spacing:-.01em;margin-top:8px;padding:12px 16px;line-height:1.2}
.veredicto.secundario small{font-size:15px;margin-top:3px}
.si{background:var(--si-f);color:var(--si)}.no{background:var(--no-f);color:var(--no)}.duda{background:var(--duda-f);color:var(--duda)}
@media (prefers-reduced-motion:no-preference){.aparece{animation:aparece .22s cubic-bezier(.16,1,.3,1)}@keyframes aparece{from{opacity:0;transform:translateY(6px)}}}

/* Semana */
.bloque{margin-top:32px}
.semana{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:0;margin:0}
.dia{background:var(--panel);border:1px solid var(--linea);border-radius:12px;padding:8px 1px 7px;text-align:center;font-size:12px;line-height:1.15;min-height:82px;display:flex;flex-direction:column;align-items:center;gap:3px}
.dia b{font-size:20px;font-weight:800;line-height:1}
.dia .estado{font-weight:700;font-size:11.5px;margin-top:auto}
.dia .icono{width:20px;height:20px;margin-top:auto}
.dia.si,.dia.no{border-color:transparent}
.dia.hoy{outline:2px solid var(--tinta);outline-offset:-2px}

/* Calendario */
.aviso-cal{background:var(--panel);border:1px solid var(--linea);border-radius:16px;padding:18px}
.boton{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800;padding:14px;border-radius:12px;background:var(--amarillo);color:#17181a;text-decoration:none;margin-top:10px;border:1.5px solid #17181a;transition:transform .12s ease}
.boton:active{transform:scale(.985)}
.boton.sec{background:transparent;color:var(--tinta);border-color:var(--linea)}

/* Detalles */
details{border-top:1px solid var(--linea);padding:13px 0}
details:last-of-type{border-bottom:1px solid var(--linea)}
summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
summary::-webkit-details-marker{display:none}
summary .icono{transition:transform .15s ease}details[open] summary .icono{transform:rotate(180deg)}
details>div{padding-top:10px}details ul{padding-left:20px;margin:0}details li{margin-bottom:4px}
.fuentes{font-size:15px;color:var(--suave);margin-top:18px}

/* Inicio */
.ciudades{display:grid;gap:14px}
.ciudad{display:grid;grid-template-columns:128px 1fr auto;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--linea);border-radius:16px;padding:14px;text-decoration:none;transition:transform .12s ease}
.ciudad:active{transform:scale(.985)}
.ciudad .placa-grafica{margin:0;padding:3px 4px 4px;border-width:2px;border-radius:9px;box-shadow:none;width:128px}
.ciudad .placa-grafica::before,.ciudad .placa-grafica::after{display:none}
.ciudad .placa-grafica small{font-size:8.5px}
.ciudad .numeros{font-size:24px}
.ciudad strong{display:block;font-size:20px;letter-spacing:-.02em;line-height:1.15}
.ciudad span.hoy{display:block;font-size:14px;color:var(--suave);line-height:1.3;margin-top:2px}
@media (max-width:400px){.ciudad{grid-template-columns:96px 1fr auto;gap:10px;padding:12px}.ciudad .placa-grafica{width:96px}.ciudad .numeros{font-size:18px}.ciudad .placa-grafica small{font-size:7px}}

footer{margin-top:32px;font-size:14px;color:var(--suave);line-height:1.45}
[hidden]{display:none!important}

/* Calculadoras */
.intro{margin:-6px 0 22px;font-size:18px;line-height:1.4;color:var(--suave)}
.form{display:grid;gap:18px;background:var(--panel);border:1px solid var(--linea);border-radius:16px;padding:18px}
.campo{display:grid;gap:6px;min-width:0;border:0;padding:0;margin:0}
.campo>label,.campo>legend{font-weight:700;padding:0;line-height:1.3}
.campo small,.pista{display:block;font-size:15px;color:var(--suave);font-weight:400;line-height:1.35}
.campo legend{margin-bottom:6px}
.campo input[type=number],.campo input[type=date],.campo input[inputmode]{width:100%;max-width:100%;min-width:0;min-height:52px;padding:10px 14px;font:700 20px/1.2 "Overpass",sans-serif;color:var(--tinta);background:var(--fondo);border:1.5px solid var(--linea);border-radius:12px;-webkit-appearance:none;appearance:none}
.campo input:focus-visible,.opciones input:focus-visible+span,.marcar input:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.opciones{display:grid;gap:8px}
.opciones.dos{grid-template-columns:1fr 1fr}
.opciones label{cursor:pointer;display:block}
.opciones input{position:absolute;opacity:0;width:1px;height:1px}
.opciones span{display:flex;align-items:center;min-height:52px;padding:10px 14px;background:var(--tecla);border:1.5px solid var(--linea);border-radius:12px;font-weight:700;line-height:1.2;transition:background-color .12s ease}
.opciones input:checked+span{background:var(--amarillo);color:#17181a;border-color:#17181a}
.marcar{display:flex;gap:10px;align-items:flex-start;font-weight:600;line-height:1.3;cursor:pointer}
.marcar input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:#17181a}
.res{margin-top:18px;background:var(--amarillo);color:#17181a;border:3px solid #17181a;border-radius:16px;padding:18px}
.res-etiqueta{font-weight:800;font-size:17px;margin:0}
.res-monto{font-size:clamp(46px,14vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:2px 0 6px;font-variant-numeric:tabular-nums}
.res-detalle{margin:0;font-size:16px;line-height:1.4}
.filas{list-style:none;padding:0;margin:14px 0 0;display:grid}
.filas:empty{display:none}
.filas li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1.5px solid rgb(23 24 26 / .25);font-weight:600;line-height:1.3}
.filas b{font-variant-numeric:tabular-nums;white-space:nowrap}
.filas small{display:block;font-size:14px;font-weight:400;margin-top:2px}
.res-avisos p{margin:12px 0 0;font-size:15px;line-height:1.4}
.res-avisos:empty{display:none}
.prosa p,.prosa ul{margin:0 0 12px}.prosa ul{padding-left:20px}.prosa li{margin-bottom:5px}.prosa a{text-underline-offset:2px}
.tabla{width:100%;border-collapse:collapse;font-size:16px;margin-bottom:12px}
.tabla th,.tabla td{text-align:left;padding:9px 8px 9px 0;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla th{font-weight:800}
.dato-grande{font-size:clamp(56px,18vw,84px);font-weight:800;letter-spacing:-.04em;line-height:1;margin:0 0 6px;font-variant-numeric:tabular-nums}

/* Inicio: secciones y otras herramientas */
.grupo{margin-top:34px}
.grupo>h2{font-size:24px}
.herramientas{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.herramienta{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel);border:1px solid var(--linea);border-radius:16px;padding:14px 16px;text-decoration:none;transition:transform .12s ease;min-height:64px}
.herramienta:active{transform:scale(.985)}
.herramienta strong{display:block;font-size:18px;letter-spacing:-.015em;line-height:1.2}
.herramienta small{display:block;font-size:15px;color:var(--suave);line-height:1.3;margin-top:3px}
.pie-enlaces{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px;font-weight:600}

/* Gasolina */
.precios{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.precio{background:var(--panel);border:1px solid var(--linea);border-radius:16px;padding:14px}
.precio span{display:block;font-size:15px;font-weight:700;line-height:1.2}
.precio b{display:block;font-size:clamp(28px,8.5vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums}
.precio:first-child{background:var(--amarillo);color:#17181a;border-color:#17181a}

/* Aviso de cookies */
.aviso-cookies{position:fixed;left:12px;right:12px;bottom:12px;z-index:10;max-width:536px;margin:0 auto;background:var(--panel);color:var(--tinta);border:1.5px solid var(--tinta);border-radius:16px;padding:14px;font-size:15px;line-height:1.35}
.aviso-cookies p{margin:0 0 10px}
.aviso-cookies div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.aviso-cookies button{min-height:44px;border-radius:12px;font:800 16px/1 "Overpass",sans-serif;cursor:pointer;border:1.5px solid var(--tinta);color:var(--tinta);background:transparent}
.aviso-cookies .si-c{background:var(--amarillo);color:#17181a;border-color:#17181a}
.enlace{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}