/* ---------------------------------------------------------------------
   Paleta y tipografia de libertyfield.pe, leidas del sitio publico el
   04/11/2026 para que el portal y la web no parezcan dos empresas.

   Lo que se midio alli, tal cual:
     fondo        #08081A      texto principal  #F5F5F5
     mas oscuro   #02020A      texto secundario #7D7F8C
     tarjetas     #111223      acento (verde)   #00DE78
     tipografia   Exo 2, pesos 400/500/600/700
     radios       12px y 16px en botones y pildoras
     sobre el verde el texto va OSCURO (#08081A), no blanco
   --------------------------------------------------------------------- */
:root{
  --bg:#08081A; --header:#02020A;
  --surface:#111223; --surface-2:#181A2E; --head:#15172B;
  --border:#262840; --ink:#F5F5F5; --ink-dim:#D5D6DE;
  --muted:#7D7F8C; --muted-2:#63656F;
  --teal:#00DE78; --teal-text:#5FEFA8; --teal-ink:#08081A;
  --blue:#2AA7E9; --amber:#F7B84B; --violet:#8B7CF6; --danger:#FF6B6B;
  --r-lg:16px; --r-md:12px; --r-sm:10px; --r-xs:6px;
  --sans:'Exo 2',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; cursor:pointer}
a{color:var(--blue)}

/* ------------------------------------------------------------ entrar */
.puerta{
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; padding:24px 16px;
}
.tarjeta-entrar{
  width:100%; max-width:360px; display:flex; flex-direction:column; gap:8px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:30px 26px 26px;
}
.marca{margin:0; font-size:1.45rem; font-weight:700; letter-spacing:-.02em}
.marca span{display:block; font-size:.88rem; font-weight:500; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.sub{margin:2px 0 18px; color:var(--muted); font-size:.9rem}
.tarjeta-entrar label{font-size:.78rem; color:var(--muted); margin-top:10px; letter-spacing:.03em}
.tarjeta-entrar input{
  background:var(--bg); border:1px solid var(--border); color:var(--ink);
  border-radius:var(--r-sm); padding:11px 12px; font-size:.95rem; font-family:inherit;
}
.tarjeta-entrar input:focus{outline:none; border-color:var(--teal)}
#btnEntrar{
  margin-top:20px; background:var(--teal); color:var(--teal-ink); border:0;
  border-radius:var(--r-sm); padding:12px; font-weight:600; font-size:.95rem;
}
#btnEntrar:disabled{opacity:.5; cursor:default}
.enlace{background:none; border:0; color:var(--muted); font-size:.82rem; padding:10px 0 0; text-decoration:underline}
.aviso{
  margin:14px 0 0; padding:10px 12px; border-radius:var(--r-sm); font-size:.85rem;
  background:rgba(255,107,107,.10); border:1px solid rgba(255,107,107,.35); color:#FFC9C9;
}
.aviso.ok{background:rgba(0,222,120,.10); border-color:rgba(0,222,120,.35); color:var(--teal-text)}
.pie-puerta{color:var(--muted-2); font-size:.8rem; margin:0}

/* --------------------------------------------------------- cabecera */
.cabecera{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--header); border-bottom:1px solid var(--border);
  padding:11px 20px;
}
.marca-chica{font-weight:700; letter-spacing:-.01em; white-space:nowrap}
.menu{display:flex; gap:4px; flex:1; flex-wrap:wrap}
.menu button{
  background:none; border:1px solid transparent; color:var(--muted);
  border-radius:var(--r-sm); padding:7px 13px; font-size:.88rem; font-weight:500;
}
.menu button:hover{color:var(--ink)}
.menu button[aria-current="true"]{background:var(--surface-2); border-color:var(--border); color:var(--ink)}
.yo{display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--muted)}
#btnSalir{
  background:none; border:1px solid var(--border); color:var(--muted);
  border-radius:var(--r-sm); padding:6px 12px; font-size:.82rem;
}

/* ----------------------------------------------------------- lienzo */
.lienzo{max-width:1120px; margin:0 auto; padding:26px 20px 60px}
.cargando{color:var(--muted)}
h2.titulo{font-size:1.15rem; margin:0 0 4px; font-weight:600}
p.bajada{color:var(--muted); margin:0 0 20px; font-size:.88rem}

.rejilla{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tarjeta{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:16px 18px;
}
.tarjeta h3{margin:0 0 12px; font-size:.78rem; font-weight:600; color:var(--muted); letter-spacing:.07em; text-transform:uppercase}
.cifra{font-size:1.7rem; font-weight:700; letter-spacing:-.02em}
.cifra.verde{color:var(--teal-text)} .cifra.ambar{color:var(--amber)} .cifra.roja{color:var(--danger)}
.cifra-nota{color:var(--muted); font-size:.8rem; margin-top:2px}

dl.datos{margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 16px; font-size:.9rem}
dl.datos dt{color:var(--muted)}
dl.datos dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}

table{width:100%; border-collapse:collapse; font-size:.87rem}
thead th{
  background:var(--head); color:var(--muted); text-align:left; font-weight:600;
  padding:9px 12px; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase;
  position:sticky; top:52px;
}
tbody td{padding:9px 12px; border-top:1px solid var(--border)}
tbody tr:hover{background:var(--surface-2)}
td.num{text-align:right; font-variant-numeric:tabular-nums}
.marco-tabla{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden}

.chip{display:inline-block; padding:2px 9px; border-radius:999px; font-size:.74rem; font-weight:600}
.chip.verde{background:rgba(0,222,120,.14); color:var(--teal-text)}
.chip.ambar{background:rgba(247,184,75,.14); color:var(--amber)}
.chip.roja {background:rgba(255,107,107,.14); color:#FFC9C9}
.chip.gris {background:var(--surface-2); color:var(--muted)}

.vacio{color:var(--muted); padding:26px; text-align:center; font-size:.88rem}

.pie{
  border-top:1px solid var(--border); padding:16px 20px 30px;
  display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between;
  color:var(--muted-2); font-size:.78rem; max-width:1120px; margin:0 auto;
}

@media (max-width:620px){
  .lienzo{padding:20px 16px 50px}
  thead th{position:static}
  .cabecera{padding:10px 16px}
}