:root{
  --bg:#f1f3f7; --card:#fff; --tinta:#0d1b2a; --tinta2:#64748b; --tinta3:#94a3b8;
  --azul:#0a84ff; --verde:#16a34a; --rojo:#e11d48; --linea:#e6eaf2;
  --sombra:0 1px 2px rgba(13,27,42,.04), 0 8px 24px rgba(13,27,42,.06);
  --radio:20px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0b1119; --card:#141c27; --tinta:#f1f5f9; --tinta2:#94a3b8; --tinta3:#64748b;
         --linea:#1f2937; --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* overflow-x SOLO aqui y con 'clip', no 'hidden': 'hidden' convierte al elemento
   en contenedor de scroll y la rueda del raton deja de mover la pagina.
   'clip' recorta el desbordamiento lateral sin tocar el scroll vertical. */
html{overflow-x:clip}
html,body{margin:0;padding:0;background:var(--bg);color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  font-feature-settings:"tnum";
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
#app{max-width:520px;margin:0 auto;padding:0 16px}
img,svg{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.oculto{display:none !important}

/* ---------------------------------------------------------------- cabecera */
.cab{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 0 8px}
.cab h1{font-size:clamp(24px,7.4vw,30px);line-height:1.1;margin:0;letter-spacing:-.02em;font-weight:700}
.selmes{display:inline-flex;align-items:center;gap:6px;color:var(--tinta2);font-size:17px;margin-top:4px;padding:2px 0}
.selmes select{appearance:none;background:none;border:0;color:var(--tinta2);font:inherit;padding-right:2px}
.camp{position:relative;width:52px;height:52px;border-radius:50%;background:var(--card);
  box-shadow:var(--sombra);display:grid;place-items:center;flex:0 0 auto}
.camp .punto{position:absolute;top:9px;right:11px;width:10px;height:10px;border-radius:50%;
  background:var(--rojo);border:2px solid var(--card)}

/* ---------------------------------------------------------------- hero */
.hero{text-align:center;padding:18px 0 6px}
.hero .et{color:var(--tinta2);font-size:17px}
.hero .cifra{font-size:clamp(40px,15vw,60px);font-weight:800;letter-spacing:-.035em;line-height:1.05;
  margin:6px 0 16px;white-space:nowrap}
.barra{height:7px;border-radius:99px;background:var(--linea);overflow:hidden}
.barra i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#22c55e,#0ea5e9 60%,#0a84ff)}
.barra-pie{display:flex;justify-content:space-between;margin-top:8px;font-size:15px;color:var(--tinta2)}
.barra-pie b{color:var(--verde);font-weight:600}
.barra-pie b.neg{color:var(--rojo)}

/* ---------------------------------------------------------------- tarjetas */
/* minmax(0,1fr) y no 1fr: con 1fr las columnas no bajan del ancho de su texto
   y la fila desborda la pantalla, que era lo que permitia arrastrar y hacer zoom */
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0 8px}
.tj{background:var(--card);border-radius:var(--radio);padding:12px;box-shadow:var(--sombra);min-height:104px;
  display:flex;flex-direction:column;justify-content:space-between;min-width:0;overflow:hidden}
.tj .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px;flex:0 0 auto}
.tj .et{font-size:11.5px;color:var(--tinta2);line-height:1.25;overflow-wrap:anywhere}
.tj .v{font-size:clamp(15px,4.4vw,19px);font-weight:700;letter-spacing:-.02em;margin-top:2px;white-space:nowrap}
.tj .sub{font-size:11px;color:var(--tinta3);overflow-wrap:anywhere}

/* ---------------------------------------------------------------- seccion */
.seccion{display:flex;align-items:center;justify-content:space-between;margin:22px 0 6px}
.seccion h2{font-size:21px;font-weight:700;margin:0;letter-spacing:-.02em}
.seccion .der{color:var(--tinta2);font-size:15px;display:flex;gap:6px;align-items:center}

/* ---------------------------------------------------------------- donut */
.donut{width:100%;display:block;margin:4px 0 10px;touch-action:manipulation}
.donut .seg{cursor:pointer;transition:opacity .15s}
.donut .seg:active{opacity:.75}

/* ---------------------------------------------------------------- listas */
.lista{background:var(--card);border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden;margin-bottom:14px}
.fila{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--linea);width:100%;text-align:left}
.fila:last-child{border-bottom:0}
.fila:active{background:rgba(10,132,255,.06)}
.fila .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}
.fila .txt{flex:1;min-width:0}
.fila .t{font-size:15.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .s{font-size:13px;color:var(--tinta2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .imp{font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.fila .imp.pos{color:var(--verde)}
.dia{padding:16px 4px 6px;font-size:13px;font-weight:600;color:var(--tinta2);text-transform:capitalize}

/* ---------------------------------------------------------------- avisos */
.aviso{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#ff9f0a,#ff6b00);
  color:#fff;border-radius:var(--radio);padding:14px 16px;margin:14px 0;box-shadow:var(--sombra);width:100%;text-align:left}
.aviso .t{font-weight:700;font-size:15.5px}
.aviso .s{font-size:13px;opacity:.9}
.aviso .fl{margin-left:auto;font-size:20px;opacity:.9}
.vacio{text-align:center;color:var(--tinta2);padding:46px 20px}
.vacio h3{color:var(--tinta);margin:0 0 6px}
.vacio p{margin:0 0 18px;font-size:14.5px;line-height:1.5}

/* ---------------------------------------------------------------- botones */
.btn{background:var(--azul);color:#fff;border-radius:14px;padding:13px 18px;font-weight:600;font-size:15.5px;
  display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn.sec{background:var(--card);color:var(--tinta);box-shadow:var(--sombra)}
.btn.full{width:100%}
.btn:active{transform:scale(.985)}
.chip{background:var(--card);border:1px solid var(--linea);border-radius:99px;padding:8px 14px;font-size:14px;font-weight:500}
.chip.on{background:var(--azul);color:#fff;border-color:var(--azul)}

/* ---------------------------------------------------------------- nav */
.nav{position:fixed;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--card) 88%,transparent);
  backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--linea);
  padding:10px 0 calc(8px + env(safe-area-inset-bottom));z-index:20}
.nav .in{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.nav button{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--tinta3);font-size:11px;padding:4px 0}
.nav button.on{color:var(--azul)}

/* ---------------------------------------------------------------- hoja modal */
.hoja{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center}
.hoja .velo{position:absolute;inset:0;background:rgba(3,10,20,.45);animation:fade .2s}
.hoja .panel{position:relative;background:var(--bg);width:100%;max-width:520px;border-radius:24px 24px 0 0;
  max-height:92vh;overflow-y:auto;padding:8px 20px calc(28px + env(safe-area-inset-bottom));
  animation:sube .28s cubic-bezier(.32,.72,0,1)}
.asa{width:38px;height:5px;border-radius:99px;background:var(--tinta3);opacity:.4;margin:8px auto 12px}
@keyframes sube{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hoja h2{margin:6px 0 2px;font-size:24px;letter-spacing:-.02em}
.hoja .sub{color:var(--tinta2);font-size:14.5px;margin-bottom:14px}

.campo{width:100%;background:var(--card);border:1px solid var(--linea);border-radius:14px;
  padding:13px 14px;font:inherit;color:var(--tinta);margin-bottom:10px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:100px;background:#0d1b2a;color:#fff;
  padding:12px 18px;border-radius:14px;font-size:14.5px;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:90%}
@media (prefers-color-scheme:dark){.toast{background:#f1f5f9;color:#0b1119}}
.cargando{text-align:center;padding:60px;color:var(--tinta3)}

/* ---------------------------------------------------------------- pantalla de PIN */
.bloqueo{position:fixed;inset:0;z-index:80;background:var(--bg);display:grid;place-items:center;padding:24px}
.bloqueo-caja{width:100%;max-width:340px;text-align:center}
.bloqueo-ic{width:76px;height:76px;border-radius:50%;background:var(--card);box-shadow:var(--sombra);
  display:grid;place-items:center;margin:0 auto 18px}
.bloqueo h2{font-size:27px;margin:0 0 4px;letter-spacing:-.02em}
.bloqueo p{color:var(--tinta2);font-size:15px;margin:0 0 20px}
.pin-err{color:var(--rojo);font-size:14px;min-height:20px;margin-bottom:6px}