/* ═══════════════════════════════════════════════════════════════════════════
   vida.css · Capa de diseño y movimiento — Mesa Técnica
   ───────────────────────────────────────────────────────────────────────────
   Dirección: instrumento de auditoría. La herramienta se siente viva porque
   RESPONDE, no porque se adorne. Cada acción tiene acuse de recibo visual.

   Paleta anclada en materiales de Guatemala:
     jade      · identidad y acta limpia   · el jade mesoamericano es de aquí
     obsidiana · las superficies
     maíz      · lo que hay que mirar
     cochinilla· lo que está mal           · el tinte rojo mesoamericano
     quetzal   · el dato, la referencia

   Tipografía: Archivo — grotesca hecha para formularios y documentos oficiales.

   Se carga DESPUÉS del <style> propio: redefine los tokens y agrega el
   movimiento sin tocar la estructura ni la lógica.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ───────────────────────────────────────────────────────────── */
:root{
  /* superficies: obsidiana con una insinuación de azul frío */
  --void:#06090F; --base:#0B111B; --raise:#101825; --alto:#16202F;
  --edge:#1A2434; --edge2:#26344A;

  /* texto */
  --txt:#E8EEF7; --dim:#9BADC5; --faint:#697C97;

  /* jade · identidad. También es el color del acta sin errores: en auditoría,
     limpio es el objetivo, así que la marca y el acierto comparten color. */
  --jade:#2FD9A8; --jade-hi:#6BF0C6; --jade-dim:#1B7A5E; --jade-bg:#08201A;

  /* quetzal · dato y referencia (se conservan los nombres --cyan* para no
     romper el CSS existente) */
  --cyan:#4FA3DE; --cyan-hi:#8CCCF5; --cyan-dim:#2B5F8E;

  /* semánticos */
  --ok:#2FD9A8;  --ok-bg:#08201A;  --ok-ed:#1B5A46;
  --warn:#F5B84E; --warn-bg:#241B0C; --warn-ed:#5E4519;
  --err:#FF6F86;  --err-bg:#26121A; --err-ed:#5E2634;
  --nv:#9BADC5;   --nv-bg:#121A26;  --nv-ed:#2A3A50;

  --r:16px; --r2:11px;

  --ui:'Archivo','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono','SF Mono',Consolas,monospace;

  --sombra:0 1px 2px rgba(0,0,0,.5);
  --sombra2:0 18px 48px rgba(0,0,0,.5);
  --brillo-jade:0 0 0 1px rgba(47,217,168,.35), 0 8px 30px -8px rgba(47,217,168,.35);

  /* curvas: una sola familia para que todo el producto se mueva igual */
  --sal:cubic-bezier(.22,1,.36,1);        /* salida suave, entra rápido y frena */
  --resorte:cubic-bezier(.34,1.56,.64,1); /* rebote corto, para acuses */
  --rap:140ms; --med:260ms; --len:520ms;
}

/* ── 2 · Base ─────────────────────────────────────────────────────────────── */
body{
  font-family:var(--ui);
  font-feature-settings:'tnum' 1,'cv05' 1;
  letter-spacing:-.005em;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(47,217,168,.055), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(79,163,222,.05), transparent 60%),
    var(--void);
  background-attachment:fixed;
}
h1{letter-spacing:-.02em}
/* los números se leen como en un instrumento: mismo ancho, sin bailar */
.trNum,.tcActas,.admCod,.paNo,.pulsoCifra{font-variant-numeric:tabular-nums}

/* ── 3 · Botones: acuse de recibo en cada toque ───────────────────────────── */
.b-primary,.b-ok,.b-ghost,.b-exp,.b-del,.filChip,.filLimpiar,.admMesaChip,.piVer{
  position:relative; overflow:hidden;
  transition:transform var(--rap) var(--sal),
             box-shadow var(--med) var(--sal),
             border-color var(--med) var(--sal),
             background var(--med) var(--sal),
             color var(--med) var(--sal);
  will-change:transform;
}
.b-primary:hover,.b-ok:hover,.b-exp:hover{transform:translateY(-2px)}
.b-ghost:hover,.filChip:hover,.admMesaChip:hover{transform:translateY(-1px)}
.b-primary:active,.b-ok:active,.b-ghost:active,.b-exp:active,.b-del:active,
.filChip:active,.admMesaChip:active{transform:translateY(0) scale(.975)}

.b-primary{box-shadow:0 6px 18px -8px rgba(79,163,222,.6)}
.b-primary:hover{box-shadow:0 12px 26px -8px rgba(79,163,222,.75)}
.b-ok{box-shadow:0 6px 18px -8px rgba(47,217,168,.55)}
.b-ok:hover{box-shadow:var(--brillo-jade)}

/* barrido de luz al pasar el mouse: el botón "se enciende" */
.b-primary::after,.b-ok::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform 620ms var(--sal);
}
.b-primary:hover::after,.b-ok:hover::after{transform:translateX(120%)}

/* onda desde el punto exacto del clic (la posiciona vida.js) */
.onda{
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.42),transparent 70%);
  transform:translate(-50%,-50%) scale(0); opacity:.9;
  animation:onda 560ms var(--sal) forwards;
}
@keyframes onda{ to{ transform:translate(-50%,-50%) scale(2.6); opacity:0 } }

/* foco visible y con el color de la marca (accesibilidad, no adorno) */
:focus-visible{
  outline:2px solid var(--jade); outline-offset:2px; border-radius:6px;
}

/* ── 4 · Paneles: reaccionan a la cercanía ───────────────────────────────── */
.panel{
  transition:border-color var(--med) var(--sal), box-shadow var(--med) var(--sal),
             transform var(--med) var(--sal);
}
.panel:hover{ border-color:var(--edge2); box-shadow:var(--sombra2) }

/* filo superior que se ilumina: marca cuál panel está activo */
.panel{position:relative}
.panel::before{
  content:''; position:absolute; left:18px; right:18px; top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--jade),transparent);
  opacity:0; transition:opacity var(--med) var(--sal);
}
.panel:hover::before{opacity:.55}

/* tarjetas del tablero */
.tabCard{transition:transform var(--rap) var(--sal),border-color var(--med) var(--sal),box-shadow var(--med) var(--sal)}
.tabCard:hover{transform:translateY(-3px) scale(1.012)}
.tabCard:active{transform:translateY(-1px) scale(.99)}
.tabCard.tabActiva{box-shadow:var(--brillo-jade)}
.tcFill{transition:width var(--len) var(--sal)}

/* filas del registro: la que se mira se separa del resto */
.admFila,.piActa,.rnFila{transition:background var(--rap) var(--sal),transform var(--rap) var(--sal)}
.admFila:hover,.piActa:hover{transform:translateX(3px)}

/* ── 5 · Entradas de contenido ────────────────────────────────────────────── */
@keyframes surge{
  from{opacity:0; transform:translateY(14px) scale(.985)}
  to  {opacity:1; transform:none}
}
.surge{animation:surge var(--len) var(--sal) both}

@keyframes deslizaDer{ from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:none} }

/* el modal entra con resorte corto, no aparece de golpe */
.rmOverlay{animation:velo 200ms var(--sal) both; backdrop-filter:blur(6px)}
@keyframes velo{from{opacity:0}to{opacity:1}}
.rmBox{animation:caja 380ms var(--resorte) both}
@keyframes caja{from{opacity:0;transform:translateY(22px) scale(.965)}to{opacity:1;transform:none}}

/* ── 6 · El pulso · elemento firma ────────────────────────────────────────
   Una línea viva de la sesión: cada acta revisada deja una marca del color de
   su resultado. Dice de un vistazo cuánto se lleva hecho y cómo va saliendo.  */
.pulso{
  display:flex; align-items:center; gap:16px;
  padding:11px 18px; margin-bottom:14px;
  background:linear-gradient(180deg,var(--raise),var(--base));
  border:1px solid var(--edge); border-radius:var(--r2);
  position:relative; overflow:hidden;
}
.pulso::after{ /* respiración: la herramienta está despierta */
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--jade); opacity:.85;
  animation:respira 2.6s ease-in-out infinite;
}
@keyframes respira{0%,100%{opacity:.25}50%{opacity:.9}}

.pulsoTit{
  font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap;
}
.pulsoPista{
  flex:1; display:flex; align-items:flex-end; gap:3px; height:30px; min-width:60px;
  overflow:hidden;
}
.pulsoMarca{
  width:4px; border-radius:2px; flex-shrink:0;
  animation:marcaEntra 420ms var(--resorte) both;
  transform-origin:bottom;
}
@keyframes marcaEntra{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
.pulsoMarca.m-ok  {height:14px; background:var(--jade)}
.pulsoMarca.m-corr{height:21px; background:var(--cyan)}
.pulsoMarca.m-err {height:29px; background:var(--err)}
.pulsoMarca:hover{filter:brightness(1.4)}

.pulsoCifras{display:flex; gap:15px; align-items:baseline}
.pulsoDato{display:flex; align-items:baseline; gap:5px}
.pulsoCifra{font-size:17px; font-weight:800; color:var(--txt); line-height:1; letter-spacing:-.02em}
.pulsoEtq{font-size:9.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em}
.pulsoDato.d-err .pulsoCifra{color:var(--err)}
.pulsoDato.d-ok  .pulsoCifra{color:var(--jade)}
.pulsoVacio{font-size:11.5px; color:var(--faint); font-style:italic}

/* ── 7 · Acuse de trabajo: lo que pasa al revisar, corregir o archivar ───── */
.acuse{
  position:fixed; right:22px; bottom:22px; z-index:400;
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; max-width:min(400px,92vw);
  background:linear-gradient(180deg,var(--alto),var(--raise));
  border:1px solid var(--edge2); border-left:3px solid var(--jade);
  border-radius:13px; box-shadow:var(--sombra2);
  animation:acuseEntra 480ms var(--resorte) both;
}
@keyframes acuseEntra{from{opacity:0;transform:translateX(30px) scale(.94)}to{opacity:1;transform:none}}
.acuse.saliendo{animation:acuseSale 260ms var(--sal) forwards}
@keyframes acuseSale{to{opacity:0;transform:translateX(30px) scale(.96)}}
.acuse.a-err{border-left-color:var(--err)}
.acuse.a-avi{border-left-color:var(--warn)}
.acuseIcono{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  background:var(--jade-bg); border:1px solid var(--ok-ed);
}
.acuse.a-err .acuseIcono{background:var(--err-bg);border-color:var(--err-ed)}
.acuse.a-avi .acuseIcono{background:var(--warn-bg);border-color:var(--warn-ed)}
.acuseTxt{font-size:13px;color:var(--txt);line-height:1.45}
.acuseTxt b{color:var(--jade-hi)}
.acuse.a-err .acuseTxt b{color:var(--err)}

/* marca de verificación que se dibuja sola */
.tick{width:18px;height:18px}
.tick path{
  stroke:var(--jade); stroke-width:2.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:26;
  animation:dibuja 520ms var(--sal) 120ms forwards;
}
@keyframes dibuja{to{stroke-dashoffset:0}}

/* ── 8 · Estados de trabajo ───────────────────────────────────────────────── */
/* barra de progreso indeterminada mientras se lee un acta */
.trabajando{position:relative}
.trabajando::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,transparent,var(--jade),transparent);
  animation:barrido 1.15s linear infinite;
}
@keyframes barrido{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* el archivo cargado late una vez al soltarlo */
@keyframes late{0%{transform:scale(1)}45%{transform:scale(1.025)}100%{transform:scale(1)}}
.late{animation:late 460ms var(--resorte)}

/* números que suben al aparecer los maneja vida.js; aquí solo el matiz */
.subiendo{color:var(--jade-hi)}

/* ── 9 · Detalles de superficie ───────────────────────────────────────────── */
input,select,textarea{transition:border-color var(--med) var(--sal),background var(--med) var(--sal),box-shadow var(--med) var(--sal)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(47,217,168,.12)}

/* barra de desplazamiento acorde al instrumento */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--edge2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--jade-dim);background-clip:content-box}

::selection{background:rgba(47,217,168,.28);color:var(--txt)}

/* ── 10 · Respeto por quien prefiere menos movimiento ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .b-primary:hover,.b-ok:hover,.tabCard:hover,.admFila:hover{transform:none}
}