:root{
  --m:#5E2BA3; --m2:#7B46C4; --mt:#F3EDFB; --papel:#fff; --fondo:#F6F4F9;
  --t:#1E1626; --t2:#5A5065; --t3:#8A8194; --b:#E4DFEC;
  --ver:#1B7F4B; --vert:#E6F4EC; --roj:#C0392B; --rojt:#FCEEEC; --amb:#8A5C05; --ambt:#FCF3DE;
  --r:14px; --sombra:0 1px 2px rgba(30,22,38,.06),0 4px 14px rgba(30,22,38,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--t);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom)}
/* ── cabecera fija: en el teléfono es lo único que se ve siempre ── */
.cab{position:sticky;top:0;z-index:5;background:var(--m);color:#fff;
  padding:calc(12px + env(safe-area-inset-top)) 14px 12px}
.cab h1{margin:0;font-size:19px;letter-spacing:-.2px;display:flex;align-items:center;gap:8px}
.cab .sub{margin:3px 0 0;opacity:.85;font-size:13px}
/* el logo va absoluto para no meterse en la fila de los periodos; el título le deja sitio */
.cab .logo{position:absolute;top:calc(10px + env(safe-area-inset-top));right:14px;
  width:40px;height:40px;border-radius:11px;object-fit:cover}
.cab h1,.cab .sub{padding-right:52px}
.pestanas{display:flex;gap:7px;margin-top:11px}
.pestanas button{flex:1 1 0;min-height:42px;border:0;border-radius:11px;background:rgba(255,255,255,.14);
  color:#fff;font:700 15px/1 inherit;cursor:pointer}
.pestanas button.on{background:#fff;color:var(--m)}
.periodos{display:flex;gap:7px;margin-top:11px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.periodos::-webkit-scrollbar{display:none}
.periodos button{flex:0 0 auto;min-height:44px;padding:0 16px;border:0;border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff;font:600 14px/1 inherit;cursor:pointer}
.periodos button.on{background:#fff;color:var(--m)}
main{padding:14px 12px 28px;max-width:760px;margin:0 auto}
h2{font-size:14px;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);margin:22px 4px 9px}
h2:first-child{margin-top:4px}
/* ── las dos cifras grandes, una por país ── */
.grandes{display:grid;gap:11px;grid-template-columns:1fr}
@media(min-width:620px){.grandes{grid-template-columns:1fr 1fr}}
.pais{background:var(--papel);border:1px solid var(--b);border-radius:var(--r);padding:15px;box-shadow:var(--sombra)}
.pais .rot{font-size:13px;font-weight:700;color:var(--t2);display:flex;align-items:center;gap:6px}
.pais .cifra{font-size:34px;font-weight:800;letter-spacing:-1px;margin:5px 0 0;line-height:1.05}
.pais .pie{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--b)}
.pais .pie div{font-size:13px;color:var(--t2)}
.pais .pie b{display:block;font-size:17px;color:var(--t);font-weight:700}
/* ── tarjetas por fuente ── */
.fuente{background:var(--papel);border:1px solid var(--b);border-radius:var(--r);padding:13px 14px;margin-bottom:10px;box-shadow:var(--sombra)}
.fuente .tit{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700;font-size:15px}
.fuente .tit .sello{font-size:11px;font-weight:700;background:var(--mt);color:var(--m);padding:3px 9px;border-radius:999px;white-space:nowrap}
.fuente .nums{font-size:12.5px;color:var(--t2);margin-top:4px;font-variant-numeric:tabular-nums}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}
.tres div{background:var(--fondo);border-radius:10px;padding:9px 10px}
.tres span{display:block;font-size:11.5px;color:var(--t2);margin-bottom:2px}
.tres b{font-size:16px;font-weight:700;letter-spacing:-.3px}
.tres .ver b{color:var(--ver)} .tres .amb b{color:var(--amb)}
/* ── publicidad ── */
.vigencia{display:flex;align-items:center;gap:10px;margin:14px 4px 10px;font-size:13px;color:var(--t2)}
.vigencia input{min-height:42px;padding:0 10px;border:1.5px solid var(--b);border-radius:10px;
  background:var(--papel);font:15px/1 inherit;color:var(--t)}
.anu{border-top:1px solid var(--b);padding:10px 0 4px;margin-top:8px}
.anu:first-of-type{border-top:0;margin-top:4px}
.anu-tit{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.anu-tit .p{font-weight:700;font-size:14px}
.anu-tit .id{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}
.anu-cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
@media(min-width:560px){.anu-cifras{grid-template-columns:repeat(4,1fr)}}
.anu-cifras>div{background:var(--fondo);border-radius:10px;padding:8px 10px}
.anu-cifras span{display:block;font-size:11.5px;color:var(--t2)}
.anu-cifras b{font-size:16px;font-weight:700;letter-spacing:-.3px}
.anu-cifras .ver b{color:var(--ver)} .anu-cifras .roj b{color:var(--roj)}
.campo{display:flex;gap:6px;margin-top:3px}
.campo input{min-width:0;flex:1 1 auto;min-height:38px;padding:0 8px;border:1.5px solid var(--b);
  border-radius:9px;background:var(--papel);font:16px/1 inherit;color:var(--t)}
.campo input.mal{border-color:var(--roj)}
.campo select{min-height:38px;border:1.5px solid var(--b);border-radius:9px;background:var(--papel);
  font:15px/1 inherit;color:var(--t);padding:0 4px}
.campo.agregar{margin-top:9px}
.campo.agregar button{min-height:38px;padding:0 14px;border:0;border-radius:9px;background:var(--m);
  color:#fff;font:700 14px/1 inherit;cursor:pointer}
/* ── día por día ── */
.dia{background:var(--papel);border:1px solid var(--b);border-radius:var(--r);margin-bottom:9px;overflow:hidden;box-shadow:var(--sombra)}
.dia .enc{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:11px 14px;background:var(--mt)}
.dia .enc .f{font-weight:700;font-size:15px;text-transform:capitalize}
.dia .enc .t{font-size:13px;color:var(--m);font-weight:700;text-align:right}
.lin{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--b);font-size:14px}
.lin .q{font-weight:700;white-space:nowrap}
.lin .d{font-size:12px;color:var(--t2);white-space:nowrap}
.vacio{color:var(--t3);text-align:center;padding:26px 10px;font-size:14px}
.cargando{color:var(--t3);text-align:center;padding:40px 10px}
.aviso{background:var(--ambt);color:var(--amb);border-radius:10px;padding:10px 12px;font-size:13px;margin:10px 4px}
.aviso.roj{background:var(--rojt);color:var(--roj)}
.pie-pag{text-align:center;color:var(--t3);font-size:12px;padding:18px 10px 4px}
.pie-pag button{background:none;border:0;color:var(--t3);text-decoration:underline;font:inherit;cursor:pointer;min-height:44px}
/* ── entrar ── */
.entrar{min-height:100dvh;display:grid;place-items:center;padding:22px}
.entrar form{background:var(--papel);border:1px solid var(--b);border-radius:18px;padding:26px 22px;width:100%;max-width:380px;box-shadow:var(--sombra)}
.entrar h1{margin:0 0 4px;font-size:22px;color:var(--m)}
.entrar p{margin:0 0 18px;color:var(--t2);font-size:14px}
.entrar input{width:100%;min-height:52px;font:17px/1 inherit;padding:0 14px;border:1.5px solid var(--b);border-radius:12px;background:var(--fondo)}
.entrar input:focus{outline:2px solid var(--m);border-color:var(--m)}
.entrar button{width:100%;min-height:52px;margin-top:12px;border:0;border-radius:12px;background:var(--m);color:#fff;font:700 16px/1 inherit;cursor:pointer}
.entrar .mal{color:var(--roj);font-size:14px;margin-top:11px;text-align:center}