/* ZION · dashboard de solo lectura. Celular primero; oscuro/claro según el sistema. */
:root {
  --fondo: #f5f6f8; --superficie: #ffffff; --borde: #dfe3e8; --texto: #16191d; --sutil: #5d6672;
  --acento: #2f6fdb; --bueno: #1f8a4c; --medio: #b7791f; --malo: #c53030; --neutro: #6b7480;
  --amarillo-fondo: #fff6d6; --amarillo-borde: #e0b43c;
  --serie-a: #2f6fdb; --serie-b: #c2410c; --rejilla: rgba(0, 0, 0, .08);
  --radio: 10px; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1216; --superficie: #171b21; --borde: #2a3038; --texto: #e6e9ed; --sutil: #97a0ab;
    --acento: #6ea0ff; --bueno: #4ade80; --medio: #f0b429; --malo: #f87171; --neutro: #8a94a0;
    --amarillo-fondo: #3a3010; --amarillo-borde: #a07c18;
    --serie-a: #6ea0ff; --serie-b: #fb923c; --rejilla: rgba(255, 255, 255, .08);
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-wrap: anywhere;
}
a { color: var(--acento); }
h1 { font-size: 1.35rem; margin: .5rem 0 .75rem; }
h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
h3 { font-size: .95rem; margin: .75rem 0 .4rem; }
code, .mono { font-family: var(--mono); font-size: .85em; }
.sutil { color: var(--sutil); }
.pequeno { font-size: .82rem; }
.texto-bueno { color: var(--bueno); }
.texto-malo { color: var(--malo); }

/* Barra superior: la navegación se desplaza dentro de sí misma, nunca la página. */
.barra {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; padding-top: max(.5rem, env(safe-area-inset-top));
  background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.marca { font-weight: 800; letter-spacing: .12em; text-decoration: none; color: var(--texto); }
.nav { display: flex; gap: .25rem; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { white-space: nowrap; padding: .35rem .6rem; border-radius: 999px; text-decoration: none; color: var(--sutil); }
.nav a[aria-current="page"] { background: var(--acento); color: #fff; }
.salir button { background: none; border: 1px solid var(--borde); color: var(--sutil); border-radius: 8px; padding: .3rem .6rem; font: inherit; cursor: pointer; }

.contenido { max-width: 1200px; margin: 0 auto; padding: .75rem 1rem 2rem; }
.pie { text-align: center; color: var(--sutil); font-size: .8rem; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }

.rejilla { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .rejilla { grid-template-columns: 1fr 1fr; } }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; margin: 0 0 1rem; min-width: 0; }
.tarjeta-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.tarjeta-cab h2 { margin: 0; }

.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; margin: 0; }
.cifras div { min-width: 0; }
.cifras dt { color: var(--sutil); font-size: .78rem; }
.cifras dd { margin: 0; font-variant-numeric: tabular-nums; }
.cifras .grande { font-size: 1.4rem; font-weight: 700; }

.insignia { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; }
.insignia.buena { color: var(--bueno); } .insignia.mala { color: var(--malo); }
.insignia.media { color: var(--medio); } .insignia.neutra { color: var(--neutro); }

.limite { margin: .4rem 0; }
.limite-txt { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; }
.barra-consumo { height: 8px; border-radius: 999px; background: var(--borde); overflow: hidden; margin-top: .2rem; }
.relleno { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .4s ease; }
.relleno.buena { background: var(--bueno); } .relleno.media { background: var(--medio); }
.relleno.mala { background: var(--malo); } .relleno.neutra { background: var(--acento); }

.lienzo { position: relative; height: 260px; width: 100%; }
.lienzo.cuadrado { height: 340px; }
@media (min-width: 760px) { .lienzo { height: 340px; } .lienzo.cuadrado { height: 420px; } }

/* Tablas: scroll horizontal propio. */
.tabla { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); margin-bottom: 1rem; }
.tarjeta .tabla { border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: .85rem; }
th, td { padding: .45rem .6rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; overflow-wrap: normal; }
th { position: sticky; top: 0; background: var(--superficie); color: var(--sutil); font-weight: 600; white-space: nowrap; }
td { white-space: nowrap; }
td .sutil.pequeno, td.pequeno { white-space: normal; min-width: 8rem; }
tbody tr:last-child td { border-bottom: 0; }
.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.amarillo td { background: var(--amarillo-fondo); }
tr.amarillo td:first-child { box-shadow: inset 3px 0 0 var(--amarillo-borde); }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.chips a { padding: .25rem .65rem; border: 1px solid var(--borde); border-radius: 999px; text-decoration: none; color: var(--sutil); font-size: .85rem; }
.chips a[aria-current] { background: var(--acento); border-color: var(--acento); color: #fff; }

.filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
@media (min-width: 760px) { .filtros { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; } }
.filtros label, .formulario label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--sutil); min-width: 0; }
input, select { font: inherit; font-size: 16px; color: var(--texto); background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; padding: .5rem; width: 100%; min-width: 0; }
.acciones { display: flex; gap: .75rem; align-items: center; }
button.primario { font: inherit; font-weight: 600; background: var(--acento); color: #fff; border: 0; border-radius: 8px; padding: .55rem 1rem; cursor: pointer; }
.paginacion { display: flex; gap: 1rem; justify-content: center; align-items: center; margin: .5rem 0 1rem; }

.ab { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ab { grid-template-columns: 1fr 1fr; } }
.ab-lado { border: 1px solid var(--borde); border-radius: 8px; padding: .75rem; min-width: 0; }
.ab-lado h3 { margin-top: 0; }
.veredicto { margin: .75rem 0 .25rem; }

.login { max-width: 380px; margin: 8vh auto 0; }
.marca-grande { font-size: 2rem; letter-spacing: .2em; margin: 0; }
.formulario { display: flex; flex-direction: column; gap: .75rem; margin: 1rem 0; }
.error, .aviso { border-radius: 8px; padding: .75rem; margin: 1rem 0; border: 1px solid; }
.error { color: var(--malo); }
.aviso { color: var(--medio); }