/* ═══════════════════════════════════════════════════════════════════════════
   nucleo.css
   ───────────────────────────────────────────────────────────────────────────
   Estilos GLOBALES —no de una vista— que estaban dentro de Frontend/nucleo/app.js:
   el toast, la animación de "Enviado a Tesorería", la barra de carga y el globo
   de código del panel de concentración. Se movieron sin cambiar una línea.

   ⚠ No van en styles-extra.css, y el motivo es la cascada. Esta hoja va ÚLTIMA
   en el <head>, igual que las nueve por apartado, porque el <style> inyectado
   llegaba en tiempo de ejecución: después de todos los <link>, incluido
   estilo-corporativo.css. En styles-extra.css (que va segundo) el toast
   perdería empates que hoy gana.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── la animación de "Enviado a Tesorería" ─────────────────────────── */

.tesoreria-anim{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;background:rgba(4,8,13,.55);backdrop-filter:blur(4px);animation:taFade .25s ease}
.tesoreria-anim.ta-out{animation:taFadeOut .4s ease forwards}
.tesoreria-anim .ta-box{background:var(--navy-2,#0f1722);border:1px solid var(--border-2,#2f4156);border-radius:16px;padding:30px 40px;text-align:center;animation:taPop .35s cubic-bezier(.2,.9,.3,1.3)}
.tesoreria-anim .ta-check{width:74px;height:74px;display:block;margin:0 auto 14px}
.tesoreria-anim .ta-circle{stroke:var(--green,#5fd6a0);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:taCircle .5s ease forwards}
.tesoreria-anim .ta-mark{stroke:var(--green,#5fd6a0);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:taMark .35s .42s ease forwards}
.tesoreria-anim .ta-title{font-size:18px;font-weight:650;color:var(--text,#f1f5f9)}
.tesoreria-anim .ta-sub{font-size:13px;color:var(--text-2,#9db0c6);margin-top:5px}
@keyframes taFade{from{opacity:0}to{opacity:1}}
@keyframes taFadeOut{to{opacity:0}}
@keyframes taPop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes taCircle{to{stroke-dashoffset:0}}
@keyframes taMark{to{stroke-dashoffset:0}}

/* ── loadAnim ────────────────────────────────────────────────────── */
@keyframes loadAnim{0%{width:0%}50%{width:70%}100%{width:100%}}

/* ── infoConcentracionOverlay code ───────────────────────────────── */
#infoConcentracionOverlay code{font-family:var(--mono);background:var(--navy-3);color:var(--text);padding:1px 5px;border-radius:4px;font-size:12px}

/* ── toastCss ────────────────────────────────────────────────────────── */
@keyframes toastSlideIn  { 0%{opacity:0;transform:translateX(120%) scale(.95)} 60%{opacity:1;transform:translateX(-3%) scale(1.01)} 100%{opacity:1;transform:translateX(0) scale(1)} }
@keyframes toastSlideOut { from{opacity:1;transform:translateX(0) scale(1)} to{opacity:0;transform:translateX(40%) scale(.95)} }
@keyframes toastBar      { from{width:100%} to{width:0%} }
.toast{
  pointer-events:auto;min-width:300px;max-width:420px;position:relative;
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(24,35,56,.98),rgba(14,23,38,.98));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 36px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);
  color:var(--text,#f1f5f9);font-size:13px;line-height:1.5;
  overflow:hidden;
  animation:toastSlideIn .38s cubic-bezier(.2,.9,.3,1.2);
}
.toast.out{animation:toastSlideOut .22s ease forwards}
.toast-ico{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.toast-msg{flex:1;color:var(--text,#f1f5f9);font-weight:500;font-size:13px;padding-right:2px;word-break:break-word}
.toast-x{
  cursor:pointer;color:var(--text-3,#64748b);font-size:15px;
  flex-shrink:0;padding:4px 6px;border-radius:6px;
  transition:all .12s ease;opacity:.55;line-height:1;
}
.toast-x:hover{background:rgba(255,255,255,.08);color:var(--text,#f1f5f9);opacity:1}
.toast-progress{position:absolute;left:0;top:0;height:2px;opacity:.9}
/* ⚠ El ✓/✕/i del icono era un literal (#4ade80/#f87171/#60a5fa) pensado para
   el fondo oscuro del toast. Desde que tema-claro.css le da al `.toast` una
   superficie clara (ver ese archivo), ese mismo círculo tintado queda casi
   blanco y el glifo —del mismo tono que su propio tinte— cae a ~1,5:1: el
   defecto exacto del globo de Solicitudes, acá en el componente que se ve en
   cada acción. Con los tokens (que ya siguen al tema) queda en ~5:1 en los
   dos. La barra de progreso es decorativa —no hay texto encima— y se deja
   con los mismos literales de siempre. */
.toast-success .toast-ico    { background:rgba(34,197,94,.16);color:var(--green) }
.toast-success .toast-progress{ background:linear-gradient(90deg,#22c55e 0%,#4ade80 100%) }
.toast-error   .toast-ico    { background:rgba(239,68,68,.16);color:var(--red-txt, var(--red)) }
.toast-error   .toast-progress{ background:linear-gradient(90deg,#ef4444 0%,#f87171 100%) }
.toast-info    .toast-ico    { background:rgba(59,130,246,.16);color:var(--blue-txt, var(--blue)) }
.toast-info    .toast-progress{ background:linear-gradient(90deg,#3b82f6 0%,#60a5fa 100%) }

/* ════════════════════════════════════════════════════════════════════════════
   EL CHIP DE SOLO LECTURA (09-09-2026)

   Una vista que le esconde sus controles a un rol de solo lectura queda con
   MENOS de lo que la persona vio antes, o de lo que ve su compañero al lado. Sin
   una línea que lo diga, eso no se lee como "no tenés permiso": se lee como una
   pantalla a medio cargar, y la persona recarga, y después pregunta.

   ⚠ Vive ACÁ y no en la hoja de cada apartado a propósito: son SEIS vistas las
     que lo usan, y seis copias del mismo chip es exactamente cómo terminan
     diciendo cosas distintas. El lenguaje también es el que la aplicación ya
     enseñó — "Mes cerrado (solo lectura)" de Deuda Financiera y "Semana cerrada
     (solo lectura)" de los gastos— así que quien lo ve ya sabe qué significa.

   ⚠ El acento va en la LETRA y en la LÍNEA, y el fondo es la superficie neutra.
     Es la regla que este proyecto aprendió cuatro veces: un tinte del propio
     acento debajo de su propio texto mueve los dos juntos y el contraste entre
     ellos no crece nunca. Con `--navy-3` de fondo el texto mide contra un token
     que el tema ya invierte.
   ════════════════════════════════════════════════════════════════════════════ */
.mx-chip-lectura {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 6px;
  background: var(--navy-3);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  white-space: nowrap; vertical-align: middle;
}
.mx-chip-lectura svg { flex: none; width: 12px; height: 12px }
