:root{
  --fondo:#faf7ef; --panel:#fff; --tinta:#1a1611; --suave:#57503f;
  --linea:#e4ddcc; --acento:#a98c4f; --alerta:#8b2f2f;
  --r:14px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:'Heebo',system-ui,-apple-system,Arial,sans-serif;
  padding:clamp(12px,3vw,28px);
}
.top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
h1{font-size:clamp(1.3rem,3vw,1.9rem);margin:0;font-weight:600}
.sello{font-size:.78rem;color:var(--suave)}
h2{font-size:.95rem;margin:0 0 12px;font-weight:600;color:var(--suave)}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:10px;margin-bottom:18px}
.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:14px 16px}
.tarjeta .k{font-size:.72rem;color:var(--suave);letter-spacing:.04em}
.tarjeta .v{font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.tarjeta .u{font-size:.8rem;color:var(--suave);margin-inline-start:4px;font-weight:400}

.panel{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:16px;margin-bottom:14px}
.grafico{overflow-x:auto}
svg{display:block;max-width:100%;height:auto}
.barra{fill:var(--acento)}
.barra:hover{fill:var(--tinta)}
.eje{stroke:var(--linea);stroke-width:1}
.etq{font-size:9px;fill:var(--suave)}

table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{text-align:start;padding:7px 8px;border-bottom:1px solid var(--linea)}
th{color:var(--suave);font-weight:500;font-size:.76rem}
td.num{font-variant-numeric:tabular-nums;text-align:end}
.pagada{color:#0b7a3b}
.pendiente{color:var(--alerta)}

.aviso{border-color:#e0c9c9;background:#fdf6f6}
.aviso h2{color:var(--alerta)}
.vacio{color:var(--suave);font-size:.86rem;padding:6px 0}

/* Pantalla de clave. La clave es la credencial entera, asi que se trata
   como una contraseña: type=password y sin autocompletar. */
.acceso{max-width:420px;margin:12vh auto;background:var(--panel);
  border:1px solid var(--linea);border-radius:var(--r);padding:24px}
.acceso p{color:var(--suave);font-size:.86rem;margin:0 0 14px}
.acceso form{display:flex;gap:8px}
.acceso input{flex:1;padding:10px 12px;border:1px solid var(--linea);
  border-radius:10px;font-family:inherit;font-size:.9rem;background:var(--fondo);color:var(--tinta)}
.acceso input:focus{outline:none;border-color:var(--acento)}
.acceso button{padding:10px 18px;border:none;border-radius:999px;
  background:var(--acento);color:#fff;font-family:inherit;font-size:.86rem;cursor:pointer}
.acceso button:hover{background:var(--tinta)}
.err{color:var(--alerta);font-size:.82rem;margin-top:10px;min-height:1em}
.salir{margin-inline-start:auto;background:none;border:none;color:var(--suave);
  font-family:inherit;font-size:.78rem;cursor:pointer;text-decoration:underline}
.salir:hover{color:var(--alerta)}