/* ═══════════════════════════════════════════════════════════════════════
   RIVO · SISTEMA VISUAL
   Un solo archivo manda sobre todas las hojas del sistema.

   Tres decisiones que lo sostienen:

   1. LA PROFUNDIDAD SE HACE CON COLOR, NO CON SOMBRA. Sobre fondo oscuro
      una sombra casi no se ve; lo que sí se lee es que una superficie esté
      un paso más clara. Por eso hay una escalera de 5 superficies y las
      sombras quedan solo para lo que flota de verdad (modales).
   2. EL CHROME SE CALLA. Menos bordes, menos decoración. La jerarquía la
      cargan el peso de la letra y el aire, no las líneas.
   3. EL COLOR SIGNIFICA. Azul = acción. Verde, ámbar y rojo = estado.
      Nada se pinta “porque se ve bonito”.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Superficies: cada paso es “un piso más arriba” ── */
  --s0:#0a0b0d;   /* el fondo de todo */
  --s1:#0f1115;   /* chrome: cabecera y barras */
  --s2:#14171c;   /* tarjetas */
  --s3:#1a1e24;   /* dentro de una tarjeta: campos, celdas */
  --s4:#222730;   /* algo levantado: hover, seleccionado */

  /* ── Líneas: casi invisibles a propósito ── */
  --l1:rgba(255,255,255,.055);
  --l2:rgba(255,255,255,.10);
  --l3:rgba(255,255,255,.16);

  /* ── Texto: tres niveles, no más ── */
  --t1:#e9ecf1;   /* lo que se lee */
  --t2:#98a3b3;   /* lo que acompaña */
  --t3:#68727f;   /* lo que casi no importa */

  /* ── Marca y estados ── */
  --brand:#3b82f6;
  --brand-hi:#5b9bff;
  --brand-soft:rgba(59,130,246,.13);
  --brand-line:rgba(59,130,246,.34);
  --ok:#3ecf8e;   --ok-soft:rgba(62,207,142,.11);   --ok-line:rgba(62,207,142,.26);
  --warn:#f0b44a; --warn-soft:rgba(240,180,74,.10); --warn-line:rgba(240,180,74,.26);
  --bad:#f2646a;  --bad-soft:rgba(242,100,106,.10); --bad-line:rgba(242,100,106,.26);
  --info:#60a5fa;
  --pur:#a78bfa;
  --wa:#25D366;

  /* ── Escala tipográfica: 7 pasos y ni uno más ── */
  --f0:10px;   /* microetiqueta, va en mayúsculas con tracking */
  --f1:11px;   /* apoyo */
  --f2:12px;   /* cuerpo secundario */
  --f3:13px;   /* cuerpo */
  --f4:15px;   /* título de tarjeta */
  --f5:20px;   /* título de pantalla */
  --f6:28px;   /* la cifra que importa */

  /* ── Radios: tres ── */
  --r1:8px;    /* chips, campos, botones */
  --r2:12px;   /* tarjetas */
  --r3:18px;   /* modales */
  --rf:999px;  /* píldoras */

  /* ── Espacio: múltiplos de 4 ── */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e7:32px;

  /* ── Movimiento: rápido y con salida suave ── */
  --ease:cubic-bezier(.2,.8,.25,1);
  --dur:.14s;

  /* ── Sombra: solo para lo que flota ── */
  --sh:0 18px 50px -14px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.055);
  --sh-sm:0 4px 14px -6px rgba(0,0,0,.6);

  /* ── Nombres viejos, apuntando a la escala nueva ──
     Así todas las hojas ya escritas heredan el sistema sin tocar su HTML. */
  --bg:var(--s0); --surf:var(--s1); --card:var(--s2); --card2:var(--s3); --card3:var(--s4);
  --line:var(--l1); --line2:var(--l2);
  --txt:var(--t1); --mut:var(--t2); --dim:var(--t3);
  --r:var(--r2);
}

*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--s0); color:var(--t1);
  font-family:'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,Arial,sans-serif;
  font-size:var(--f3); line-height:1.5;
  font-feature-settings:'cv05' 1,'ss01' 1,'tnum' 0;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer;font-size:inherit;letter-spacing:inherit}
a{color:inherit}

/* Toda cifra se alinea en columna: es de lo que más “se ve caro”. */
b,strong,.num,td,th,input[type=number]{font-variant-numeric:tabular-nums}

::selection{background:var(--brand-soft);color:var(--t1)}
::-webkit-scrollbar{height:10px;width:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:var(--rf);border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* El foco se ve. No por accesibilidad nada más: un sistema sin foco visible
   se siente barato en cuanto alguien usa el teclado. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ─────────────────────────── CHROME ─────────────────────────── */
header{
  padding:0 var(--e5); min-height:56px;
  border-bottom:1px solid var(--l1);
  display:flex; align-items:center; gap:var(--e3);
  background:color-mix(in srgb, var(--s1) 86%, transparent);
  backdrop-filter:saturate(160%) blur(16px);
  position:sticky; top:0; z-index:30; flex-wrap:wrap;
}
.logo{
  width:30px;height:30px;border-radius:var(--r1);background:var(--brand);
  display:grid;place-items:center;font-weight:600;font-size:var(--f2);color:#fff;flex:none;
  letter-spacing:-.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.htit{font-size:var(--f3);font-weight:600;line-height:1.2;letter-spacing:-.012em}
.hsub{font-size:var(--f1);color:var(--t3);letter-spacing:-.005em}
.hsp{flex:1}

.tool{
  background:transparent;border:1px solid var(--l2);color:var(--t2);
  padding:6px 11px;border-radius:var(--r1);font-size:var(--f2);font-weight:500;
  white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.tool:hover{background:var(--s3);border-color:var(--l3);color:var(--t1)}
.tool:active{background:var(--s2)}

.btnp{
  background:var(--brand);border:0;color:#fff;
  padding:7px 14px;border-radius:var(--r1);font-size:var(--f2);font-weight:600;
  white-space:nowrap;letter-spacing:-.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btnp:hover{background:var(--brand-hi)}
.btnp:active{transform:translateY(1px)}

.btng{
  background:var(--s3);border:1px solid var(--l2);color:var(--t2);
  padding:7px 14px;border-radius:var(--r1);font-size:var(--f2);font-weight:500;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btng:hover{background:var(--s4);color:var(--t1)}

.bar{
  display:flex;gap:6px;align-items:center;padding:10px var(--e5);
  border-bottom:1px solid var(--l1);flex-wrap:wrap;background:var(--s1);
}
.chip{
  background:transparent;border:1px solid var(--l2);color:var(--t2);
  padding:5px 12px;border-radius:var(--rf);font-size:var(--f2);font-weight:500;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.chip:hover{background:var(--s3);color:var(--t1)}
.chip.on{border-color:var(--brand-line);background:var(--brand-soft);color:var(--t1);font-weight:600}
.barsp{flex:1}
.nota{font-size:var(--f1);color:var(--t3)}

/* ─────────────────────────── INDICADORES ─────────────────────────── */
.kpis{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:var(--e3) var(--e5) 0}
.kpi{
  background:var(--s2);border:1px solid var(--l1);border-radius:var(--r1);
  height:32px;flex:none;display:flex;align-items:center;gap:7px;padding:0 12px;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.kpi:hover{background:var(--s3);border-color:var(--l2)}
.kpi b{font-size:var(--f4);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi span{font-size:var(--f1);color:var(--t3);white-space:nowrap;letter-spacing:-.005em}
.kpi.ok b{color:var(--ok)} .kpi.warn b{color:var(--warn)}
.kpi.bad b{color:var(--bad)} .kpi.acc b{color:var(--brand-hi)}

/* ─────────────────────────── SUPERFICIES ─────────────────────────── */
.wrap{padding:var(--e4) var(--e5) 48px}
.grid{display:grid;gap:var(--e3)}
.caja{
  background:var(--s2);border:1px solid var(--l1);border-radius:var(--r2);
  padding:var(--e5);
}
.caja h2{font-size:var(--f4);font-weight:600;letter-spacing:-.016em;margin-bottom:3px}
.caja .sub{font-size:var(--f2);color:var(--t3);margin-bottom:var(--e4);line-height:1.55;letter-spacing:-.004em}
.tit{
  font-size:var(--f0);color:var(--t3);text-transform:uppercase;
  letter-spacing:.09em;font-weight:600;margin-bottom:var(--e2);
}

/* ─────────────────────────── TABLAS ─────────────────────────── */
table.t{width:100%;border-collapse:collapse;font-size:var(--f2)}
table.t th{
  font-size:var(--f0);letter-spacing:.07em;text-transform:uppercase;color:var(--t3);
  text-align:left;padding:0 10px 9px;font-weight:600;
}
table.t td{padding:10px;border-top:1px solid var(--l1);letter-spacing:-.004em}
table.t td.r,table.t th.r{text-align:right}
table.t tbody tr{transition:background var(--dur) var(--ease)}
table.t tbody tr:hover td{background:var(--s3)}

.pill{
  font-size:var(--f0);font-weight:600;padding:3px 9px;border-radius:var(--rf);
  white-space:nowrap;display:inline-block;letter-spacing:.01em;
}
.pill.ok{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok-line)}
.pill.warn{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line)}
.pill.bad{background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad-line)}
.pill.info{background:var(--brand-soft);color:var(--brand-hi);border:1px solid var(--brand-line)}
.pill.dim{background:var(--s3);color:var(--t2);border:1px solid var(--l2)}

/* ─────────────────────────── CAMPOS ─────────────────────────── */
input[type=text],input[type=number],input[type=date],input[type=email],select,textarea{
  background:var(--s3);border:1px solid var(--l2);color:var(--t1);
  border-radius:var(--r1);padding:8px 11px;font-size:var(--f2);
  outline:none;width:100%;letter-spacing:-.004em;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--t3)}
input:hover,select:hover,textarea:hover{border-color:var(--l3)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);background:var(--s2)}
label.f{font-size:var(--f0);color:var(--t3);display:block;margin-bottom:5px;letter-spacing:.02em;font-weight:500}

/* ─────────────────────────── MODALES ─────────────────────────── */
.mod{
  position:fixed;inset:0;background:rgba(5,6,8,.72);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;z-index:60;padding:var(--e5);
}
.mod.on{display:flex;animation:velo .18s var(--ease)}
@keyframes velo{from{opacity:0}to{opacity:1}}
.modc{
  background:var(--s2);border:1px solid var(--l2);border-radius:var(--r3);
  width:min(560px,100%);max-height:86vh;overflow-y:auto;padding:var(--e6);
  box-shadow:var(--sh);
  animation:sube .22s var(--ease);
}
@keyframes sube{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modc h3{font-size:var(--f4);font-weight:600;letter-spacing:-.016em;margin-bottom:5px}
.hint{font-size:var(--f2);color:var(--t3);margin-bottom:var(--e4);line-height:1.55;letter-spacing:-.004em}
.modf{display:flex;gap:8px;justify-content:flex-end;margin-top:var(--e5);flex-wrap:wrap}

/* ─────────────────────────── VARIOS ─────────────────────────── */
.demo{
  position:fixed;left:50%;transform:translateX(-50%);bottom:14px;
  background:color-mix(in srgb, var(--s2) 92%, transparent);border:1px solid var(--l2);
  border-radius:var(--rf);padding:6px 15px;font-size:var(--f1);color:var(--t3);
  z-index:40;backdrop-filter:blur(10px);box-shadow:var(--sh-sm);letter-spacing:-.004em;
}
.vacio{font-size:var(--f2);color:var(--t3);padding:var(--e5);text-align:center;letter-spacing:-.004em}

/* La entrada de cada pantalla: un fundido de 200 ms. Suficiente para que se
   sienta cuidado, no tanto como para estorbar a quien trabaja aquí todo el día. */
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wrap,.tres,.dos,.cols{animation:entra .2s var(--ease)}