/* ---------------------------------------------------------------------------
 * Kuadre — capa de refinamiento visual.
 *
 * Va DESPUÉS de las demás hojas y sólo ajusta: no reescribe la identidad de
 * GI Group (navy #00365F, cyan #008DD4), la afina.
 *
 * El criterio no es «poner efectos». Esto es un sistema donde alguien emite
 * facturas ocho horas al día: la elegancia aquí es que los números se lean sin
 * esfuerzo, que el foco esté donde debe y que nada se mueva sin motivo. El
 * movimiento se usa para tres cosas y sólo tres: decir que algo LLEGÓ, decir
 * que algo CAMBIÓ, y acusar recibo de un gesto. Nunca para adornar.
 *
 * Por eso no se cargó GSAP: haría falta traer 70 KB de un tercero para animar
 * lo que el navegador ya hace en el hilo del compositor con transform y
 * opacity. Una librería de animación se justifica cuando hay líneas de tiempo
 * encadenadas o recorridos por scroll; aquí lo que hay que hacer es que una
 * tabla aparezca sin parpadear.
 * ------------------------------------------------------------------------- */

:root{
  /* Curvas. La de salida es la de iOS: arranca rápido y se posa. */
  --sal:cubic-bezier(.16,1,.3,1);
  --suave:cubic-bezier(.4,0,.2,1);

  /* Profundidad por capas, no por una sombra genérica. Sombra corta para el
     contacto y otra larga y muy tenue para separar del fondo: así el borde no
     se ve sucio. */
  --e1:0 1px 2px rgba(11,27,43,.05), 0 1px 3px rgba(11,27,43,.04);
  --e2:0 2px 4px rgba(11,27,43,.05), 0 8px 20px -6px rgba(11,27,43,.10);
  --e3:0 4px 8px rgba(11,27,43,.06), 0 18px 40px -12px rgba(11,27,43,.16);
}

/* ── Tipografía ─────────────────────────────────────────────────────────── */

/* Las cifras en tabla SIEMPRE tabulares: sin esto las columnas de bolívares
   bailan al cambiar un dígito y comparar dos filas obliga a entrecerrar los
   ojos. Es el ajuste que más se nota en un sistema contable. */
table, .num, .kpi-v, .fact-liq, .avance-texto, .legal,
input[inputmode="decimal"], input[type="number"]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1, "cv05" 1;
}

/* Títulos un punto más apretados: a tamaño grande, el interletrado por defecto
   se ve suelto. */
h1, h2, h3, .kpi-v{ letter-spacing:-.014em; }
h1{ letter-spacing:-.021em; }

body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ── Entrada de la página ───────────────────────────────────────────────── */

/* Un desplazamiento de 6 px, no de 20: el contenido debe ASENTARSE, no
   viajar. Lo segundo se nota y cansa a la décima navegación del día. */
.pagina{ animation:entrar .34s var(--sal) both; }
@keyframes entrar{
  from{ opacity:0; transform:translate3d(0,6px,0); }
  to  { opacity:1; transform:none; }
}

/* Escalonado con tope: pasado el sexto elemento todos entran juntos. Una
   cascada de veinte filas es una espera, no una animación. */
.escalona > *{ animation:entrar .38s var(--sal) both; }
.escalona > *:nth-child(1){ animation-delay:.02s }
.escalona > *:nth-child(2){ animation-delay:.05s }
.escalona > *:nth-child(3){ animation-delay:.08s }
.escalona > *:nth-child(4){ animation-delay:.11s }
.escalona > *:nth-child(5){ animation-delay:.14s }
.escalona > *:nth-child(n+6){ animation-delay:.16s }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */

.card{
  box-shadow:var(--e1);
  border-color:color-mix(in srgb, var(--line) 78%, transparent);
  transition:box-shadow .22s var(--suave), transform .22s var(--sal);
}
.card.pulsable:hover{ box-shadow:var(--e2); transform:translate3d(0,-2px,0); }
.card.pulsable:active{ transform:none; box-shadow:var(--e1); }

/* La cabecera de tarjeta, con un pelo de translucidez sobre el cuerpo. */
.card > header{
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(250,252,253,.55));
  backdrop-filter:saturate(1.2);
}

/* ── Botones ────────────────────────────────────────────────────────────── */

.btn{
  transition:background .16s var(--suave), border-color .16s var(--suave),
             box-shadow .16s var(--suave), transform .12s var(--sal);
}
/* El hundimiento al pulsar es el acuse de recibo más barato y el que más
   sensación de solidez da. 1 px basta. */
.btn:active{ transform:translate3d(0,1px,0); }
.btn.p{ box-shadow:0 1px 2px rgba(0,54,95,.18), 0 2px 8px -2px rgba(0,141,212,.28); }
.btn.p:hover{ box-shadow:0 2px 4px rgba(0,54,95,.20), 0 6px 16px -4px rgba(0,141,212,.36); }
.btn[disabled]{ opacity:.42; box-shadow:none; transform:none; cursor:not-allowed; }

/* ── Tablas ─────────────────────────────────────────────────────────────── */

table tbody tr{ transition:background .13s var(--suave); }
table tbody tr:hover{ background:color-mix(in srgb, var(--gi-blue-soft) 42%, transparent); }

/* La cabecera se queda pegada al desplazar: en un libro de ventas de doscientas
   filas, perder los rótulos es perder el sentido de las columnas. */
table thead th{
  position:sticky; top:0; z-index:2;
  background:color-mix(in srgb, var(--surface) 94%, var(--canvas));
  backdrop-filter:blur(6px);
  box-shadow:inset 0 -1px 0 var(--line);
}

/* ── Indicadores ────────────────────────────────────────────────────────── */

.kpi{ transition:transform .22s var(--sal), box-shadow .22s var(--suave); }
.kpi:hover{ transform:translate3d(0,-1px,0); box-shadow:var(--e2); }
.kpi-v{ font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* El indicador de riesgo respira, muy despacio. Es la única animación
   perpetua de la aplicación y existe porque «tiene deuda con el SENIAT» no
   debe poder pasarse por alto. */
.kpi.riesgo{ animation:latir 3.4s ease-in-out infinite; }
@keyframes latir{
  0%,100%{ box-shadow:0 0 0 0 rgba(180,35,24,.00) }
  50%    { box-shadow:0 0 0 4px rgba(180,35,24,.07) }
}

/* ── Menú lateral ───────────────────────────────────────────────────────── */

.nav a{
  border-radius:7px;
  transition:background .15s var(--suave), color .15s var(--suave),
             padding-left .18s var(--sal);
}
.nav a:hover{ padding-left:15px; }
.nav a.activo{
  background:linear-gradient(90deg, rgba(0,141,212,.20), rgba(0,141,212,.06));
  box-shadow:inset 2px 0 0 var(--gi-blue);
}
.nav .ic{ transition:transform .18s var(--sal); }
.nav a:hover .ic{ transform:scale(1.1); }

/* ── Cinta de «ver como» ────────────────────────────────────────────────── */

/* Ámbar, no rojo: no hay nada roto. Pero permanente y ancha, porque olvidar
   que se está mirando con ojos prestados lleva a reportar fallos que no son. */
.cinta-vercomo{
  display:flex; align-items:center; gap:11px;
  padding:9px 18px;
  background:linear-gradient(90deg, #FEF3E2, #FDF8F0);
  border-bottom:1px solid #F6DCB4;
  color:#7A4A08; font-size:13px;
  animation:bajar .3s var(--sal) both;
}
.cinta-vercomo b{ color:#5C3705 }
.cinta-vercomo .punto{
  width:8px; height:8px; border-radius:50%; background:#B45309; flex:none;
  animation:latir-punto 2s ease-in-out infinite;
}
.cinta-vercomo .btn{ margin-left:auto }
@keyframes bajar{ from{ opacity:0; transform:translate3d(0,-100%,0) } to{ opacity:1; transform:none } }
@keyframes latir-punto{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* ── Selector de rol ────────────────────────────────────────────────────── */

.sel-rol{
  padding:5px 10px; font-size:12.5px; font-weight:600;
  border-radius:99px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#DCEEF9;
  cursor:pointer;
  transition:background .16s var(--suave), border-color .16s var(--suave);
}
.sel-rol:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.34) }
.sel-rol option{ color:var(--ink); background:#fff }

/* ── Avisos ─────────────────────────────────────────────────────────────── */

.aviso, .toast{ animation:aparecer .28s var(--sal) both; }
@keyframes aparecer{
  from{ opacity:0; transform:translate3d(0,10px,0) scale(.98) }
  to  { opacity:1; transform:none }
}

/* ── Formularios ────────────────────────────────────────────────────────── */

input, select, textarea{
  transition:border-color .15s var(--suave), box-shadow .15s var(--suave),
             background .15s var(--suave);
}
input:focus, select:focus, textarea:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gi-blue) 16%, transparent);
}
/* Un campo inválido no se pinta en rojo mientras se escribe: sólo cuando ya
   se salió de él. Corregir a alguien a mitad de la palabra es hostil. */
input:not(:placeholder-shown):invalid:not(:focus){
  border-color:var(--danger);
  background:color-mix(in srgb, var(--danger-bg) 55%, transparent);
}

/* ── Estado de carga ────────────────────────────────────────────────────── */

/* Un pulso en vez de un giro: no promete un progreso que no se está midiendo. */
.center.muted{ animation:respirar 1.5s ease-in-out infinite; }
@keyframes respirar{ 0%,100%{ opacity:.55 } 50%{ opacity:.95 } }

/* ── Impresión ──────────────────────────────────────────────────────────── */

/* En papel no hay animación, ni sombra, ni cabecera pegada. */
@media print{
  .pagina, .escalona > *, .aviso, .cinta-vercomo{ animation:none !important }
  .card{ box-shadow:none !important }
  table thead th{ position:static; backdrop-filter:none }
}

/* ── Movimiento reducido ────────────────────────────────────────────────── */

/* Quien lo pide, lo pide en serio: se apaga TODO, incluido el latido del
   indicador de riesgo. La información sigue estando; el movimiento no. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .nav a:hover{ padding-left:13px }
}