/* ===========================================================================
   NEWLOG · MERIDIANO
   Hoja de diseño del sistema.

   Identidad: azul marino corporativo sobre grafito frío, con verde petróleo
   como única señal de actividad. Sobriedad antes que efecto: en una
   herramienta que mueve dinero, el diseño tiene que transmitir formalidad, y
   eso se consigue quitando, no añadiendo.

   Del violeta se volvió porque un morado, por profundo que sea, lee a
   producto de consumo. Del naranja anterior se había vuelto porque era lo que
   hacía que cualquier retoque siguiera pareciendo "el mismo portal de antes".

   Cómo está armado, para quien lo mantenga después:

     1 · PALETA        todo el color vive en variables --n-*, declaradas dos
                       veces (claro y oscuro). Ningún componente escribe un
                       color a mano.
     2 · PUENTE        las variables viejas de app.css (--bg, --surface…) se
                       reasignan a las nuevas, así el sistema entero cambia de
                       tema sin tocar sus 1,200 reglas una por una.
     3 · MOVIMIENTO    animaciones, transiciones y su freno de accesibilidad.
     4 · BASE          tipografía, foco, barras de desplazamiento, la aurora.
     5 · ARMAZÓN       barra lateral, barra superior, pie, barra del móvil.
     6 · SUPERFICIES   tarjetas, cabeceras, vacíos, avisos, cifras.
     7 · CONTROLES     botones, chips, enlaces.
     8 · FORMULARIOS
     9 · TABLAS
    10 · ESTADOS
    11 · MODALES, PESTAÑAS Y AVISOS
    12 · PANEL DE BIENVENIDA
    13 · NEWI
    14 · CHAT INTERNO
    15 · INTERRUPTOR DE TEMA Y ARRASTRE
    16 · MÓVIL

   El prefijo body.ui-modern suma un punto de especificidad sobre los bloques
   ".ui-modern X" de app.css, que es lo que permite reemplazarlos sin llenar
   el archivo de !important. Los tokens viven en :root, que es <html>.
   =========================================================================== */

/* ===========================================================================
   1 · PALETA

   Azul marino corporativo. Nada de violeta, ni siquiera en los grises: un
   neutro con una gota de lavanda arrastra a informal todo lo que se apoye
   encima, aunque el color de marca sea serio.

   Los tres colores del sistema y para qué sirve cada uno:

     AZUL MARINO   la marca. Botón principal, módulo activo, enlaces, el
                   relleno de las iniciales. Es el único color que "manda".
     PETRÓLEO      dónde estás. Foco del campo, borde al pasar el ratón, la
                   barra que se enciende al costado de una fila. Nunca se usa
                   para decorar: si aparece, es que algo está activo.
     GRAFITO FRÍO  todo lo demás. Fondos, líneas, texto secundario.

   Verde, ámbar y granate quedan reservados para el estado del expediente.
   Si un color no significa nada, no está.
   =========================================================================== */
:root{
  /* --- superficies · claro -------------------------------------------------
     Gris azulado de papel técnico. El panel es blanco puro para que la tabla
     y el formulario sean lo más luminoso de la pantalla. */
  --n-fondo:#edf0f4;
  --n-panel:#ffffff;
  --n-panel-2:#f4f6f9;
  --n-panel-3:#e7ebf1;
  /* La barra lateral y el panel de bienvenida son OSCUROS en los dos temas.
     Es la marca llevada a su extremo profundo, y lo que evita que el modo
     claro parezca un documento de Word. */
  --n-lateral:#0e1b2a;
  --n-oscuro:#12222f;
  --n-velo:rgba(237,240,244,.86);

  /* --- texto ---------------------------------------------------------------- */
  --n-tinta:#0c1620;
  --n-tinta-2:#3a4756;
  --n-tinta-3:#5b6a7a;
  /* Tinta para lo que va SOBRE superficie oscura, en los dos temas. */
  --n-sobre-oscuro:#e6edf5;
  --n-sobre-oscuro-2:#9fb2c6;
  --n-sobre-oscuro-3:#8296ab;   /* rótulos y apuntes tenues sobre el marino */

  /* --- trazos ---------------------------------------------------------------- */
  --n-linea:#dfe4ec;
  --n-linea-2:#c3ccd8;

  /* --- marca · azul marino ---------------------------------------------------
     7.8 de contraste sobre blanco Y sobre él en blanco: el mismo tono sirve de
     texto, de relleno y de borde. Un solo valor, sin variantes que se
     desalineen con el tiempo. */
  --n-acento:#14548c;
  --n-acento-2:#0f3f6b;        /* el más oscuro: enlaces y estados pulsados */
  --n-acento-suave:#e7eef6;
  --n-acento-solido:#14548c;   /* relleno con texto blanco encima */
  --n-acento-pulsado:#0b3152;  /* el mismo relleno, un paso más oscuro */
  --n-acento-tinta:#ffffff;
  --n-acento-halo:rgba(20,84,140,.14);

  /* --- segundo color · verde petróleo -----------------------------------------
     Como TEXTO sobre fondo claro hace falta el oscuro: el vivo da 4.9 y sirve
     de trazo, pero no llega a 4.5 en cuerpos pequeños de gris sobre gris. */
  --n-aqua:#0d5c63;
  --n-aqua-vivo:#0e7d86;       /* trazo, foco y realce */
  --n-aqua-suave:#e3f0f1;
  --n-aqua-halo:rgba(14,125,134,.16);
  /* El petróleo oscuro no se ve sobre el marino de la barra lateral ni sobre
     el panel de bienvenida, que son oscuros en los DOS temas. Para eso va
     este claro, que vale igual en claro y en oscuro. */
  --n-aqua-claro:#57d3d6;
  --n-aqua-chip:#7fe0e2;
  --n-aqua-chip-fondo:rgba(63,191,196,.16);

  /* --- superficies oscuras de cabecera ----------------------------------------
     El panel de bienvenida, la cabecera de NEWI y la del chat comparten fondo:
     así los tres se leen como la misma pieza y no como tres cajas negras. */
  --n-hero-a:#123049;
  --n-hero-b:#08131f;
  --n-hero-tinta:#08131f;      /* texto sobre el botón blanco del panel */

  /* --- estados ---------------------------------------------------------------- */
  --n-ok:#15704f;        --n-ok-suave:#e3f2ec;
  --n-aviso:#96590d;     --n-aviso-suave:#fdf1de;
  --n-mal:#a8202f;       --n-mal-suave:#fbe7e9;
  /* El granate de RELLENO, con blanco encima. En oscuro el rojo del texto se
     aclara tanto que el blanco encima deja de leerse; este no. */
  --n-mal-solido:#a8202f;
  --n-info:#1e5b96;      --n-info-suave:#e8eff7;

  /* --- relieve -----------------------------------------------------------------
     Un hilo de un píxel y casi nada de sombra. La sombra grande y difusa es lo
     que hace que un panel se lea como tarjeta de plantilla; el borde nítido es
     lo que lo hace leer como herramienta. */
  --n-sombra:0 1px 1px rgba(12,22,32,.04);
  --n-sombra-2:0 1px 2px rgba(12,22,32,.07), 0 10px 26px -20px rgba(12,22,32,.42);
  --n-sombra-3:0 24px 64px -34px rgba(12,22,32,.5);

  /* --- geometría ----------------------------------------------------------------
     8 px. El radio grande es amable y lee a aplicación de consumo; el radio
     corto lee a instrumento. Es el cambio de forma que más se nota, porque
     afecta a toda tarjeta, botón, campo, modal y tabla del sistema. */
  --n-r:8px;
  --n-r-2:6px;
  --n-r-3:4px;

  /* --- tiempos ---------------------------------------------------------------
     Un solo juego de duraciones y curvas para todo el sistema. Cambiar esto
     cambia el ritmo del portal entero. */
  --n-rapido:.14s;
  --n-medio:.26s;
  --n-lento:.45s;
  --n-curva:cubic-bezier(.32,.72,.28,1);
  --n-rebote:cubic-bezier(.34,1.4,.5,1);

  /* Tipografía del sistema, a propósito.
     Se valoró traer una fuente de Google, pero este portal ya tuvo que dejar
     de usar CDNs externos porque la red de la oficina los bloquea (por eso
     Chart.js y pdf-lib se sirven desde el propio servidor). Una fuente que a
     veces carga y a veces no es peor que ninguna. */
  --n-texto:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --n-mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,"Liberation Mono",monospace;

  color-scheme:light;
}

:root[data-theme="dark"]{
  /* Azul de medianoche, no negro. Un negro puro se ve barato y cansa la vista
     en una jornada entera delante de la pantalla. */
  --n-fondo:#070d14;
  --n-panel:#0e1723;
  --n-panel-2:#14202e;
  --n-panel-3:#1c2a3a;
  --n-lateral:#070e17;
  --n-oscuro:#0e1723;
  --n-velo:rgba(7,13,20,.82);

  --n-tinta:#e9eff6;
  --n-tinta-2:#a3b3c4;
  --n-tinta-3:#8496a9;
  --n-sobre-oscuro:#e9eff6;
  --n-sobre-oscuro-2:#a3b3c4;
  --n-sobre-oscuro-3:#8496a9;

  --n-linea:#1a2635;
  --n-linea-2:#293849;

  /* El marino desaparece sobre fondo oscuro: sube a azul acero. El relleno se
     queda un paso por debajo para que el blanco encima siga dando 5.2. */
  --n-acento:#4d9fe0;
  --n-acento-2:#8cc4ee;
  --n-acento-suave:rgba(77,159,224,.16);
  --n-acento-solido:#2670b0;
  --n-acento-pulsado:#1b5687;
  --n-acento-tinta:#ffffff;
  --n-acento-halo:rgba(77,159,224,.3);

  --n-aqua:#3fbfc4;
  --n-aqua-vivo:#57d3d6;
  --n-aqua-suave:rgba(63,191,196,.14);
  --n-aqua-halo:rgba(63,191,196,.22);
  --n-aqua-claro:#57d3d6;
  --n-aqua-chip:#7fe0e2;
  --n-aqua-chip-fondo:rgba(63,191,196,.16);

  --n-hero-a:#122c44;
  --n-hero-b:#070e17;
  --n-hero-tinta:#070e17;

  --n-ok:#35c48b;        --n-ok-suave:rgba(53,196,139,.15);
  --n-aviso:#e0a53a;     --n-aviso-suave:rgba(224,165,58,.15);
  --n-mal:#f0717f;       --n-mal-suave:rgba(240,113,127,.16);
  --n-mal-solido:#b02a3a;
  --n-info:#6aa9e8;      --n-info-suave:rgba(106,169,232,.16);

  --n-sombra:0 1px 2px rgba(0,0,0,.55);
  --n-sombra-2:0 1px 2px rgba(0,0,0,.55), 0 20px 44px -30px rgba(0,0,0,.95);
  --n-sombra-3:0 30px 80px -34px rgba(0,0,0,1);

  color-scheme:dark;
}

/* ===========================================================================
   2 · PUENTE CON LAS VARIABLES ANTIGUAS
   =========================================================================== */
:root,
body.ui-modern{
  --bg:var(--n-fondo);
  --surface:var(--n-panel);
  --ink:var(--n-tinta);
  --muted:var(--n-tinta-3);
  --slate:var(--n-tinta-2);
  --line:var(--n-linea);
  --line-strong:var(--n-linea-2);
  --graphite:var(--n-lateral);
  --graphite-2:var(--n-lateral);
  /* app.css llama "orange" al color de marca. Ahora es violeta: se reasigna
     el nombre en vez de renombrar trescientas reglas. */
  --orange:var(--n-acento);
  --orange-600:var(--n-acento-2);
  --orange-50:var(--n-acento-suave);
  --orange-100:var(--n-acento-suave);
  --green:var(--n-ok);      --green-bg:var(--n-ok-suave);
  --red:var(--n-mal);       --red-bg:var(--n-mal-suave);
  --blue:var(--n-info);     --blue-bg:var(--n-info-suave);
  --radius:var(--n-r);
  --radius-sm:var(--n-r-2);
  --shadow:var(--n-sombra);
  --shadow-lg:var(--n-sombra-2);
}

/* ===========================================================================
   3 · MOVIMIENTO

   Reglas que me impuse, porque esto es una herramienta de trabajo y no una
   web de presentación:
     · Nada dura más de medio segundo.
     · Nada se repite en bucle salvo dos cosas que lo justifican: el punto de
       "sistema operativo" y el flotar de NEWI.
     · Lo que entra, entra UNA vez. Al navegar no vuelve a bailar todo.
     · Con "reducir movimiento" activado en el sistema, se apaga entero.
   =========================================================================== */
@keyframes nova-entra{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}
@keyframes nova-entra-lateral{
  from{ opacity:0; transform:translateX(-10px); }
  to  { opacity:1; transform:none; }
}
@keyframes nova-latido{
  0%,100%{ box-shadow:0 0 0 0 var(--n-aqua-halo); }
  60%    { box-shadow:0 0 0 7px transparent; }
}
@keyframes nova-barrido{
  from{ transform:translateX(-120%); }
  to  { transform:translateX(220%); }
}
@keyframes nova-surge{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to  { opacity:1; transform:none; }
}

/* La entrada escalonada. El índice lo pone el JavaScript en --i; si no llega,
   todo entra a la vez, que también está bien. */
body.ui-modern [data-nova-entra]{
  animation:nova-entra var(--n-lento) var(--n-curva) both;
  animation-delay:calc(var(--i, 0) * 45ms);
}
body.ui-modern [data-nova-fila]{
  animation:nova-entra-lateral .34s var(--n-curva) both;
  animation-delay:calc(var(--i, 0) * 22ms);
}

/* El cambio de tema se cruza en vez de saltar. La clase la pone y la quita el
   JavaScript: dejar esta transición siempre activa haría que cada hover de
   tabla arrastrase un tercio de segundo. */
:root.tema-cambiando *,
:root.tema-cambiando *::before,
:root.tema-cambiando *::after{
  transition:background-color .32s ease, border-color .32s ease,
             color .32s ease, fill .32s ease, box-shadow .32s ease !important;
}

@media (prefers-reduced-motion:reduce){
  body.ui-modern *,
  body.ui-modern *::before,
  body.ui-modern *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===========================================================================
   4 · BASE
   =========================================================================== */
body.ui-modern{
  background:var(--n-fondo);
  color:var(--n-tinta);
  font-family:var(--n-texto);
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* El fondo, en claro, es papel liso y nada más.
   Aquí había una "aurora": tres manchas de color moviéndose en bucle detrás de
   todo. Se ha quitado. Una mancha de color que respira detrás de una tabla de
   importes es exactamente lo que hace que un sistema se lea como una demo; y
   además era la única animación del portal que no paraba nunca.
   En oscuro se deja un solo velo azul, quieto, para que el negro no sea plano. */
body.ui-modern::before{
  content:"";
  position:fixed; inset:0;
  z-index:0; pointer-events:none;
  background:radial-gradient(120% 70% at 50% -20%, rgba(77,159,224,.10), transparent 62%);
  opacity:1;
}
:root[data-theme="light"] body.ui-modern::before{ display:none; }
/* Y una retícula técnica muy tenue, solo en oscuro. */
body.ui-modern::after{
  content:"";
  position:fixed; inset:0;
  z-index:0; pointer-events:none; opacity:.32;
  background-image:
    linear-gradient(var(--n-linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--n-linea) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
}
/* La retícula solo en oscuro: en claro se veía como un papel cuadriculado. */
:root[data-theme="light"] body.ui-modern::after{ display:none; }
body.ui-modern .app-shell{ position:relative; z-index:1; }

body.ui-modern h1,body.ui-modern h2,body.ui-modern h3,
body.ui-modern h4,body.ui-modern h5{
  font-family:var(--n-texto); letter-spacing:-.018em; color:var(--n-tinta);
}

/* Cifras y códigos en monoespaciada de ancho fijo: es lo que permite comparar
   una columna de importes de un vistazo. */
body.ui-modern .data-table td.amount,
body.ui-modern .data-table .amount,
body.ui-modern .metric-value,
body.ui-modern .stat-value,
body.ui-modern .kpi-value,
body.ui-modern .money,
body.ui-modern .request-code,
body.ui-modern .code-chip,
body.ui-modern .mono{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
body.ui-modern .request-code,
body.ui-modern .code-chip,
body.ui-modern .mono{ font-family:var(--n-mono); letter-spacing:-.01em; }

body.ui-modern ::selection{ background:var(--n-acento-halo); color:var(--n-tinta); }

/* Un solo anillo de foco en todo el sistema, en aguamarina. */
body.ui-modern :focus-visible{
  outline:2px solid var(--n-aqua-vivo);
  outline-offset:2px;
  border-radius:var(--n-r-3);
}

body.ui-modern *{ scrollbar-color:var(--n-linea-2) transparent; scrollbar-width:thin; }
body.ui-modern ::-webkit-scrollbar{ width:10px; height:10px; }
body.ui-modern ::-webkit-scrollbar-track{ background:transparent; }
body.ui-modern ::-webkit-scrollbar-thumb{
  background:var(--n-linea-2); border-radius:99px;
  border:3px solid transparent; background-clip:content-box;
  transition:background var(--n-rapido) ease;
}
body.ui-modern ::-webkit-scrollbar-thumb:hover{
  background:var(--n-acento); background-clip:content-box;
}

/* ===========================================================================
   5 · ARMAZÓN
   =========================================================================== */
/* Marino liso. Tenía dos resplandores de color en las esquinas; un fondo que
   brilla por su cuenta compite con la lista de módulos, que es lo único que
   ahí importa. */
body.ui-modern .sidebar{
  background:var(--n-lateral);
  border-right:1px solid rgba(255,255,255,.07);
  color:var(--n-sobre-oscuro-2);
  box-shadow:none;
}
body.ui-modern .sidebar-brand{ border-bottom:1px solid rgba(255,255,255,.07); }
body.ui-modern .sidebar-brand strong,
body.ui-modern .sidebar-product strong{ color:#fff; }
body.ui-modern .sidebar-brand small,
body.ui-modern .sidebar-product small{ color:var(--n-sobre-oscuro-3); }
/* El logotipo de NEWSON viene en blanco y la barra es oscura en los dos temas:
   nunca hay que invertirlo. */
:root[data-theme="light"] img.sidebar-brand-logo,
:root[data-theme="dark"]  img.sidebar-brand-logo{ filter:none; }

body.ui-modern .sidebar .nav-section{
  color:var(--n-sobre-oscuro-3);                     /* 5.6 de contraste sobre el índigo */
  font-family:var(--n-mono);
  font-size:9.5px; letter-spacing:.2em; font-weight:600;
}
body.ui-modern .sidebar .nav-link{
  color:var(--n-sobre-oscuro-2);
  border:1px solid transparent;
  border-radius:var(--n-r-2);
  position:relative; overflow:hidden;
  transition:color var(--n-rapido) ease, background var(--n-rapido) ease,
             transform var(--n-rapido) var(--n-curva);
}
body.ui-modern .sidebar .nav-link svg,
body.ui-modern .sidebar .nav-link .ico{
  color:var(--n-sobre-oscuro-3);
  transition:color var(--n-rapido) ease, transform var(--n-medio) var(--n-rebote);
}
body.ui-modern .sidebar .nav-link:hover{
  background:rgba(255,255,255,.05); color:#fff; transform:translateX(2px);
}
body.ui-modern .sidebar .nav-link:hover svg{ transform:scale(1.12); }
body.ui-modern .sidebar .nav-link.active{
  background:linear-gradient(90deg, var(--n-acento-halo), transparent 80%);
  border-color:color-mix(in srgb, var(--n-acento) 38%, transparent);
  color:#fff;
  box-shadow:inset 3px 0 0 var(--n-acento);
}
/* El icono del módulo activo lleva fondo de marca: el glifo va oscuro encima,
   o se pierde dentro de su propia caja. */
body.ui-modern .sidebar .nav-link.active svg,
body.ui-modern .sidebar .nav-link.active .ico{ color:var(--n-acento-tinta); }
/* Un destello único que recorre el módulo activo al entrar. Una vez, al
   cargar, y nunca más: es un acento de bienvenida, no un efecto. */
body.ui-modern .sidebar .nav-link.active::after{
  content:""; position:absolute; inset:0 auto 0 0; width:30%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
  content:none;
}
/* El contador del módulo va sobre la barra marino: un relleno de marca sobre
   marino es marino sobre marino. Un velo blanco lo separa sin gritar. */
body.ui-modern .nav-count{
  background:rgba(255,255,255,.14); color:#fff;
  font-family:var(--n-mono); font-weight:600;
}
body.ui-modern .nav-soon{
  background:var(--n-aqua-chip-fondo); color:var(--n-aqua-chip);
  border:1px solid color-mix(in srgb, var(--n-aqua-claro) 34%, transparent);
  font-family:var(--n-mono); font-size:8.5px; letter-spacing:.14em;
}
body.ui-modern .sidebar-profile{
  /* Fondo OPACO, no translúcido: la lista de módulos se desplaza por debajo y
     con transparencia se veía el último módulo asomando detrás del nombre. */
  background:color-mix(in srgb, var(--n-lateral) 90%, #ffffff);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--n-r-2);
  transition:background var(--n-rapido) ease;
}
body.ui-modern .sidebar-profile:hover{ background:color-mix(in srgb, var(--n-lateral) 84%, #ffffff); }
body.ui-modern .sidebar-profile strong{ color:#fff; }
/* La ficha aclara el marino para despegarse de la barra, así que su cargo
   necesita la tinta clara, no la tenue: sobre ese gris azulado la tenue se
   queda en 3.7 y la norma pide 4.5. */
body.ui-modern .sidebar-profile small{ color:var(--n-sobre-oscuro-2); }
body.ui-modern .sidebar-collapse,
body.ui-modern .mobile-close{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--n-sobre-oscuro-2);
  transition:all var(--n-rapido) ease;
}
body.ui-modern .sidebar-collapse:hover,
body.ui-modern .mobile-close:hover{
  color:#fff; border-color:var(--n-aqua-claro); box-shadow:0 0 0 3px var(--n-aqua-halo);
}
body.ui-modern .sidebar-scrim{ background:rgba(6,6,15,.6); backdrop-filter:blur(4px); }

/* --- barra superior -------------------------------------------------------- */
body.ui-modern .topbar{
  background:var(--n-velo);
  backdrop-filter:blur(18px) saturate(120%);
  border-bottom:1px solid var(--n-linea);
  position:sticky; top:0; z-index:50;
}
/* Aquí iba una línea degradada de color cruzando bajo la barra superior. Es de
   los adornos que más delatan una plantilla: no marca nada, solo decora. El
   borde de un píxel ya separa la barra del contenido. */
body.ui-modern .topbar::after{ content:none; }
/* El titular de la pantalla. 23 px, no 27: el título no es el protagonista de
   una herramienta: lo son la tabla y las cifras. Bajarlo es lo que hace que la
   pantalla se lea ordenada en vez de gritada. */
body.ui-modern .topbar h1{
  font-size:23px; font-weight:650; letter-spacing:-.02em;
  animation:nova-entra .4s var(--n-curva) both;
}
body.ui-modern .topbar-eyebrow{
  color:var(--n-aqua); font-family:var(--n-mono);
  font-size:9.5px; letter-spacing:.22em; font-weight:600; text-transform:uppercase;
}
body.ui-modern .topbar-live{
  background:var(--n-panel); border:1px solid var(--n-linea);
  color:var(--n-tinta-2); border-radius:999px;
  font-family:var(--n-mono); font-size:10.5px; letter-spacing:.05em;
}
/* Uno de los dos únicos bucles del sistema, y está justificado: dice que el
   portal está vivo. */
body.ui-modern .topbar-live i{
  background:var(--n-aqua-vivo);
  animation:nova-latido 2.6s ease-out infinite;
}
body.ui-modern .top-icon{
  background:var(--n-panel); border:1px solid var(--n-linea-2);
  color:var(--n-tinta-2); border-radius:var(--n-r-2);
  transition:all var(--n-rapido) var(--n-curva);
}
body.ui-modern .top-icon:hover{
  border-color:var(--n-aqua-vivo); color:var(--n-aqua);
  box-shadow:0 0 0 3px var(--n-aqua-halo); transform:translateY(-1px);
}
/* El globo de avisos: granate de relleno, no el rojo de texto. */
body.ui-modern .top-icon b{
  background:var(--n-mal-solido); color:#fff; font-family:var(--n-mono); font-weight:600;
}
body.ui-modern .top-user{ color:var(--n-tinta); transition:opacity var(--n-rapido) ease; }
body.ui-modern .top-user:hover{ opacity:.78; }
body.ui-modern .top-user strong{ color:var(--n-tinta); }
body.ui-modern .top-user small{ color:var(--n-tinta-3); }

/* Las iniciales: blanco sobre el marino da 7.8. Sin degradado: dos colores
   dentro de un círculo de 32 px no se aprecian, solo ensucian. */
body.ui-modern .avatar,
body.ui-modern .top-user .avatar,
body.ui-modern .sidebar-profile .avatar,
body.ui-modern .avatar.avatar-sm,
body.ui-modern .avatar.avatar-lg,
body.ui-modern .avatar.avatar-xl{
  background:var(--n-acento-solido);
  background-image:none;
  /* La tinta de las iniciales sale del token, no de un blanco fijo: hay
     paletas (la negra) en las que el relleno de marca es casi blanco y unas
     iniciales blancas encima desaparecen. */
  color:var(--n-acento-tinta); border:0; font-weight:700; letter-spacing:.02em;
}

body.ui-modern .app-footer{
  border-top:1px solid var(--n-linea); color:var(--n-tinta-3); margin-top:26px;
  font-family:var(--n-mono); font-size:10px; letter-spacing:.06em;
}

/* La barra del móvil: estas tres reglas apuntaban a .mobile-nav y el elemento
   se llama .mobile-bottom-nav, así que no se aplicaban. Llevaban así desde que
   se escribió la hoja. */
body.ui-modern .mobile-bottom-nav{
  background:var(--n-velo); border-top:1px solid var(--n-linea);
  backdrop-filter:blur(22px) saturate(160%);
}
body.ui-modern .mobile-bottom-nav a{ color:var(--n-tinta-3); transition:color var(--n-rapido) ease; }
body.ui-modern .mobile-bottom-nav a.active{ color:var(--n-acento-2); }

/* ===========================================================================
   6 · SUPERFICIES
   =========================================================================== */
body.ui-modern .surface-card,
body.ui-modern .card,
body.ui-modern .panel,
body.ui-modern .pro-chart-card,
body.ui-modern .report-chart-card,
body.ui-modern .report-link-card,
body.ui-modern .filter-field-card,
body.ui-modern .settings-panel,
body.ui-modern .metric-card,
body.ui-modern .stat-card{
  position:relative;
  background:var(--n-panel);
  border:1px solid var(--n-linea);
  border-radius:var(--n-r);
  box-shadow:var(--n-sombra);
  color:var(--n-tinta);
  overflow:hidden;
  transition:transform var(--n-medio) var(--n-curva),
             box-shadow var(--n-medio) var(--n-curva),
             border-color var(--n-medio) ease;
}
/* El filo de color va SOLO en la fila de indicadores, no en toda tarjeta del
   sistema. Repetido en cada panel dejaba de ser un acento y pasaba a ser un
   adorno; aquí marca la fila que resume el estado de la operación. */
body.ui-modern .metric-card::before,
body.ui-modern .stat-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--n-acento);
  opacity:0;
  transition:opacity var(--n-medio) ease;
}
body.ui-modern .metric-card:hover,
body.ui-modern .stat-card:hover,
body.ui-modern .report-link-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--n-sombra-2);
  border-color:color-mix(in srgb, var(--n-acento) 30%, var(--n-linea));
}
body.ui-modern .metric-card:hover::before,
body.ui-modern .stat-card:hover::before{ opacity:1; }
/* El levantamiento al pasar por encima, más contenido: 3 px saltaba. */
body.ui-modern .metric-card:hover,
body.ui-modern .stat-card:hover,
body.ui-modern .report-link-card:hover{ transform:translateY(-2px); }

body.ui-modern .card-header{
  border-bottom:1px solid var(--n-linea);
  background:linear-gradient(180deg, var(--n-panel-2), transparent);
}
body.ui-modern .card-header h2,body.ui-modern .card-header h3{ color:var(--n-tinta); }
body.ui-modern .card-header p,body.ui-modern .card-header small{ color:var(--n-tinta-3); }

body.ui-modern .section-kicker{
  color:var(--n-aqua); font-family:var(--n-mono);
  font-size:9.5px; font-weight:600; letter-spacing:.22em;
}
body.ui-modern .page-header h1,
body.ui-modern .page-header h2{ color:var(--n-tinta); }
body.ui-modern .page-header p{ color:var(--n-tinta-2); }

/* Los números, que es a lo que la gente entra.
   24 px: es lo máximo que deja entrar "S/ 87,857.41" de una sola línea. */
body.ui-modern .metric-card strong,
body.ui-modern .stat-card strong,
body.ui-modern .metric-value,
body.ui-modern .stat-value,
body.ui-modern .kpi-value,
body.ui-modern .executive-metrics article strong{
  font-family:var(--n-mono);
  font-size:23px; font-weight:600; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--n-tinta);
  white-space:nowrap;
}
body.ui-modern .metric-card span:first-child,
body.ui-modern .stat-card span:first-child,
body.ui-modern .executive-metrics article > span:first-child{
  font-family:var(--n-mono); font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--n-tinta-3);
}

body.ui-modern .empty-state{
  background:var(--n-panel-2); border:1px dashed var(--n-linea-2);
  border-radius:var(--n-r); color:var(--n-tinta-3);
}
body.ui-modern .empty-state strong{ color:var(--n-tinta); }

body.ui-modern .info-banner,
body.ui-modern .strong-info{
  background:var(--n-info-suave);
  border:1px solid color-mix(in srgb, var(--n-info) 28%, transparent);
  color:var(--n-tinta-2); border-radius:var(--n-r-2);
}
body.ui-modern .alert{
  border-radius:var(--n-r-2); border:1px solid var(--n-linea);
  background:var(--n-panel-2); color:var(--n-tinta-2);
  animation:nova-surge .34s var(--n-curva) both;
}
body.ui-modern .alert-error,body.ui-modern .alert.danger{
  background:var(--n-mal-suave); color:var(--n-mal);
  border-color:color-mix(in srgb, var(--n-mal) 32%, transparent);
}
body.ui-modern .alert-success,body.ui-modern .alert.success{
  background:var(--n-ok-suave); color:var(--n-ok);
  border-color:color-mix(in srgb, var(--n-ok) 32%, transparent);
}

/* ===========================================================================
   7 · CONTROLES
   =========================================================================== */
body.ui-modern .btn{
  border-radius:var(--n-r-2);
  font-weight:600; font-size:13.5px; letter-spacing:-.01em;
  position:relative; overflow:hidden;
  transition:transform var(--n-rapido) var(--n-curva),
             box-shadow var(--n-medio) ease,
             background var(--n-medio) ease,
             border-color var(--n-medio) ease,
             color var(--n-medio) ease;
}
body.ui-modern .btn:active{ transform:translateY(1px) scale(.985); }

body.ui-modern .btn-primary{
  background:linear-gradient(135deg, var(--n-acento), var(--n-acento-solido));
  background-size:140% 140%;
  border-color:transparent;
  color:var(--n-acento-tinta);
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 10px 26px -14px var(--n-acento-halo);
}
body.ui-modern .btn-primary:hover{
  background-position:100% 0;
  box-shadow:0 2px 5px rgba(0,0,0,.2), 0 16px 34px -12px var(--n-acento-halo);
  transform:translateY(-1px);
}
/* El botón principal, plano y firme: sin degradado ni brillo cruzando. Un
   color sólido bien elegido envejece mejor que cualquier efecto. */
body.ui-modern .btn-primary{
  background:var(--n-acento-solido); background-image:none;
}
body.ui-modern .btn-primary:hover{
  background:var(--n-acento-pulsado); background-image:none;
  box-shadow:0 1px 2px rgba(12,22,32,.16);
}
/* Y sin sombra de color debajo: un botón que flota lee a maqueta. */
body.ui-modern .btn-primary{ box-shadow:0 1px 1px rgba(12,22,32,.12); }

body.ui-modern .btn-secondary{
  background:var(--n-panel); border-color:var(--n-linea-2); color:var(--n-tinta);
}
body.ui-modern .btn-secondary:hover{
  border-color:var(--n-aqua-vivo); color:var(--n-aqua);
  box-shadow:0 0 0 3px var(--n-aqua-halo); transform:translateY(-1px);
}
body.ui-modern .btn-dark{
  background:var(--n-tinta); border-color:var(--n-tinta); color:var(--n-panel);
}
body.ui-modern .btn-dark:hover{ transform:translateY(-1px); box-shadow:var(--n-sombra-2); }
body.ui-modern .btn-danger{
  background:var(--n-mal-solido); border-color:var(--n-mal-solido); color:#fff;
}
body.ui-modern .btn-ghost,body.ui-modern .btn-plain{
  background:transparent; border-color:transparent; color:var(--n-tinta-2);
}
body.ui-modern .btn-ghost:hover,body.ui-modern .btn-plain:hover{
  background:var(--n-panel-2); color:var(--n-tinta);
}
body.ui-modern .btn:disabled,body.ui-modern .btn[disabled]{
  opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none;
}

body.ui-modern .icon-button,
body.ui-modern .btn-icon-soft,
body.ui-modern .document-action{
  background:var(--n-panel-2); border:1px solid var(--n-linea);
  color:var(--n-tinta-2); border-radius:var(--n-r-2);
  transition:all var(--n-rapido) var(--n-curva);
}
body.ui-modern .icon-button:hover,
body.ui-modern .btn-icon-soft:hover,
body.ui-modern .document-action:hover{
  border-color:var(--n-acento); color:var(--n-acento-2);
  background:var(--n-acento-suave); transform:translateY(-1px);
}
body.ui-modern .text-link{
  color:var(--n-acento-2); font-weight:600;
  transition:color var(--n-rapido) ease;
}
body.ui-modern .text-link:hover{ color:var(--n-aqua); }
body.ui-modern .count-chip{
  background:var(--n-panel-2); border:1px solid var(--n-linea);
  color:var(--n-tinta-2); font-family:var(--n-mono); border-radius:999px;
}

/* ===========================================================================
   8 · FORMULARIOS
   =========================================================================== */
body.ui-modern .field>span{
  font-family:var(--n-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--n-tinta-3); font-weight:600;
}
body.ui-modern .field input,
body.ui-modern .field select,
body.ui-modern .field textarea,
body.ui-modern .comment-card textarea,
body.ui-modern input[type="text"],
body.ui-modern input[type="search"],
body.ui-modern input[type="number"],
body.ui-modern input[type="date"],
body.ui-modern input[type="email"],
body.ui-modern input[type="password"],
body.ui-modern select,
body.ui-modern textarea{
  background:var(--n-panel);
  border:1px solid var(--n-linea-2);
  border-radius:var(--n-r-2);
  color:var(--n-tinta);
  font-family:var(--n-texto);
  transition:border-color var(--n-rapido) ease, box-shadow var(--n-rapido) ease,
             background var(--n-rapido) ease;
}
body.ui-modern .field input:hover,
body.ui-modern .field select:hover,
body.ui-modern .field textarea:hover{ border-color:var(--n-tinta-3); }
body.ui-modern .field input:focus,
body.ui-modern .field select:focus,
body.ui-modern .field textarea:focus,
body.ui-modern input:focus,body.ui-modern select:focus,body.ui-modern textarea:focus{
  border-color:var(--n-aqua-vivo);
  box-shadow:0 0 0 3px var(--n-aqua-halo);
  outline:0;
}
body.ui-modern ::placeholder{ color:var(--n-tinta-3); opacity:1; }
body.ui-modern .field-hint{ color:var(--n-tinta-3); font-size:11.5px; }
body.ui-modern .field input[readonly],
body.ui-modern .field input:disabled,
body.ui-modern .field select:disabled,
body.ui-modern .field textarea:disabled{
  background:var(--n-panel-2); color:var(--n-tinta-3); cursor:not-allowed;
}
body.ui-modern .toggle-line,
body.ui-modern .filter-check,
body.ui-modern .filter-check-v2,
body.ui-modern .supplier-switch{
  background:var(--n-panel-2); border:1px solid var(--n-linea);
  border-radius:var(--n-r-2); color:var(--n-tinta-2);
  transition:border-color var(--n-rapido) ease, background var(--n-rapido) ease;
}
body.ui-modern .toggle-line:hover,
body.ui-modern .filter-check:hover{ border-color:var(--n-acento); }
body.ui-modern .file-upload-label{
  background:var(--n-panel-2); border:1px dashed var(--n-linea-2);
  color:var(--n-tinta-2); border-radius:var(--n-r-2);
  transition:all var(--n-rapido) ease;
}
body.ui-modern .file-upload-label:hover{
  border-color:var(--n-aqua-vivo); color:var(--n-aqua); background:var(--n-aqua-suave);
}
body.ui-modern .uploaded-file{
  background:var(--n-panel-2); border:1px solid var(--n-linea); border-radius:var(--n-r-2);
  animation:nova-surge .3s var(--n-curva) both;
}
body.ui-modern .search-control{
  background:var(--n-panel); border:1px solid var(--n-linea-2);
  border-radius:var(--n-r-2); color:var(--n-tinta);
}
body.ui-modern .type-option{
  background:var(--n-panel); border:1px solid var(--n-linea-2);
  border-radius:var(--n-r-2); color:var(--n-tinta-2);
  transition:all var(--n-medio) var(--n-curva);
}
body.ui-modern .type-option:hover{ border-color:var(--n-acento); transform:translateY(-2px); }
body.ui-modern .type-option.selected,
body.ui-modern .type-option:has(input:checked){
  border-color:var(--n-acento); background:var(--n-acento-suave); color:var(--n-acento-2);
  box-shadow:0 0 0 3px var(--n-acento-halo);
}
body.ui-modern .type-option-icon{
  background:var(--n-panel-2); color:var(--n-tinta-2); border-radius:var(--n-r-3);
}
body.ui-modern .step-number{
  background:var(--n-acento-solido);
  color:var(--n-acento-tinta); font-family:var(--n-mono);
}

/* ===========================================================================
   9 · TABLAS
   =========================================================================== */
body.ui-modern .responsive-table-wrap{
  border-radius:var(--n-r); border:1px solid var(--n-linea); background:var(--n-panel);
}
body.ui-modern .data-table thead th{
  background:var(--n-panel-2);
  color:var(--n-tinta-3);
  font-family:var(--n-mono); font-size:9px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  border-bottom:1px solid var(--n-linea-2);
}
body.ui-modern .data-table td{
  border-top:1px solid var(--n-linea); color:var(--n-tinta-2);
}
body.ui-modern .data-table tbody tr{
  transition:background var(--n-rapido) ease, box-shadow var(--n-rapido) ease;
}
body.ui-modern .data-table tbody tr:hover{
  background:var(--n-panel-2);
  box-shadow:inset 2px 0 0 var(--n-aqua-vivo);
}
body.ui-modern .data-table td strong,
body.ui-modern .data-table td b{ color:var(--n-tinta); }
body.ui-modern .data-table td.cod,
body.ui-modern .data-table td strong{ font-family:var(--n-mono); letter-spacing:-.01em; }
body.ui-modern .table-subtext{ color:var(--n-tinta-3); }
body.ui-modern .table-toolbar{ border-bottom:1px solid var(--n-linea); }

/* ===========================================================================
   10 · ESTADOS
   =========================================================================== */
body.ui-modern .pill,
body.ui-modern .badge,
body.ui-modern .status-pill,
body.ui-modern .status-badge,
body.ui-modern .type-pill,
body.ui-modern .chip{
  border-radius:999px; font-weight:600;
  font-family:var(--n-mono); font-size:9.5px; letter-spacing:.08em;
  border:1px solid transparent; box-shadow:none;
}
body.ui-modern .success,body.ui-modern .pill.success,body.ui-modern .badge.success{
  background:var(--n-ok-suave); color:var(--n-ok);
  border-color:color-mix(in srgb, var(--n-ok) 30%, transparent);
}
body.ui-modern .danger,body.ui-modern .pill.danger,body.ui-modern .badge.danger{
  background:var(--n-mal-suave); color:var(--n-mal);
  border-color:color-mix(in srgb, var(--n-mal) 30%, transparent);
}
body.ui-modern .warning,body.ui-modern .pill.warning{
  background:var(--n-aviso-suave); color:var(--n-aviso);
  border-color:color-mix(in srgb, var(--n-aviso) 30%, transparent);
}
body.ui-modern .mini{ color:var(--n-tinta-3); }
body.ui-modern .payment-urgency.overdue,
body.ui-modern .payment-urgency.urgent{
  background:var(--n-mal-suave); color:var(--n-mal);
  border-color:color-mix(in srgb, var(--n-mal) 32%, transparent);
}
body.ui-modern .payment-urgency.warning{
  background:var(--n-aviso-suave); color:var(--n-aviso);
  border-color:color-mix(in srgb, var(--n-aviso) 32%, transparent);
}
body.ui-modern .payment-urgency.normal{
  background:var(--n-panel-2); color:var(--n-tinta-2); border-color:var(--n-linea);
}
body.ui-modern .second-payment-flag{
  background:var(--n-info-suave); color:var(--n-info);
  border:1px solid color-mix(in srgb, var(--n-info) 30%, transparent);
}

/* Tarjeta de pagos vencidos de reportería: tinte, no rojo macizo, o el texto
   del tema queda ilegible encima. */
body.ui-modern .danger-kpi,
body.ui-modern article.danger-kpi,
body.ui-modern .report-kpis article.danger-kpi{
  background:var(--n-mal-suave); background-image:none;
  border:1px solid color-mix(in srgb, var(--n-mal) 34%, transparent);
}
body.ui-modern .report-kpis article.danger-kpi span,
body.ui-modern .report-kpis article.danger-kpi small,
body.ui-modern .report-kpis article.danger-kpi strong,
body.ui-modern .danger-kpi span,
body.ui-modern .danger-kpi small,
body.ui-modern .danger-kpi strong{ color:var(--n-mal); }

body.ui-modern .notification-item{
  border-bottom:1px solid var(--n-linea); color:var(--n-tinta-2);
  transition:background var(--n-rapido) ease;
}
body.ui-modern .notification-item:hover{ background:var(--n-panel-2); }
body.ui-modern .notification-item.unread{
  background:var(--n-acento-suave); background-image:none;
  border-left:2px solid var(--n-acento);
}
body.ui-modern .notification-item strong{ color:var(--n-tinta); }
body.ui-modern .notification-item small{ color:var(--n-tinta-3); }

/* ===========================================================================
   11 · MODALES, PESTAÑAS Y AVISOS
   =========================================================================== */
body.ui-modern .modal-backdrop{
  background:rgba(6,6,15,.6); backdrop-filter:blur(6px);
  transition:opacity var(--n-medio) ease;
}
body.ui-modern .modal-dialog{
  background:var(--n-panel); border:1px solid var(--n-linea);
  border-radius:var(--n-r); box-shadow:var(--n-sombra-3); color:var(--n-tinta);
  animation:nova-surge var(--n-medio) var(--n-curva) both;
}
body.ui-modern .modal-dialog h2,body.ui-modern .modal-dialog h3{ color:var(--n-tinta); }
body.ui-modern .modal-dialog p,body.ui-modern .modal-dialog small{ color:var(--n-tinta-2); }
body.ui-modern .modal-close{
  background:var(--n-panel-2); border:1px solid var(--n-linea);
  color:var(--n-tinta-2); border-radius:var(--n-r-2);
  transition:all var(--n-medio) var(--n-curva);
}
body.ui-modern .modal-close:hover{
  color:var(--n-mal); border-color:var(--n-mal); transform:rotate(90deg);
}
body.ui-modern .modal-icon{
  background:linear-gradient(140deg, var(--n-acento-suave), var(--n-aqua-suave));
  color:var(--n-acento-2); border-radius:var(--n-r-2);
}
body.ui-modern .modal-actions{ border-top:1px solid var(--n-linea); }

body.ui-modern .tabs-nav{ border-bottom:1px solid var(--n-linea); gap:2px; }
body.ui-modern .tabs-nav a,
body.ui-modern .tabs-nav button,
body.ui-modern .settings-tab{
  color:var(--n-tinta-3); font-weight:600;
  border:0; background:transparent; border-radius:0;
  border-bottom:2px solid transparent;
  transition:color var(--n-rapido) ease, border-color var(--n-medio) var(--n-curva);
}
body.ui-modern .tabs-nav a:hover,body.ui-modern .settings-tab:hover{ color:var(--n-tinta); }
body.ui-modern .tabs-nav a.active,
body.ui-modern .settings-tab.active{
  color:var(--n-acento-2); border-bottom-color:var(--n-acento); background:transparent;
}

body.ui-modern .toast{
  background:var(--n-panel); border:1px solid var(--n-linea);
  color:var(--n-tinta); border-radius:var(--n-r-2); box-shadow:var(--n-sombra-2);
  animation:nova-surge .3s var(--n-rebote) both;
}
body.ui-modern .loading-card{
  background:var(--n-panel); border:1px solid var(--n-linea);
  color:var(--n-tinta); border-radius:var(--n-r);
}
body.ui-modern .loading-layer{ background:var(--n-velo); backdrop-filter:blur(4px); }
body.ui-modern .spinner{ border-color:var(--n-linea); border-top-color:var(--n-acento); }

/* ===========================================================================
   12 · PANEL DE BIENVENIDA
   Oscuro en los dos temas: es la firma de la marca.
   =========================================================================== */
body.ui-modern .executive-hero,
body.ui-modern .hero-panel{
  position:relative; overflow:hidden;
  background:
    radial-gradient(760px 380px at 88% -12%, rgba(255,255,255,.07), transparent 62%),
    linear-gradient(140deg,var(--n-hero-a) 0%,var(--n-hero-b) 66%);
  border:1px solid rgba(255,255,255,.09);
  animation:nova-entra var(--n-lento) var(--n-curva) both;
}
body.ui-modern .executive-hero::after,
body.ui-modern .hero-panel::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.34;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(78% 78% at 50% 18%, #000, transparent 78%);
}
/* Dentro del panel oscuro el texto es claro SIEMPRE, no la tinta del tema. */
body.ui-modern .executive-hero,
body.ui-modern .executive-hero *,
body.ui-modern .hero-panel,
body.ui-modern .hero-panel *{ color:var(--n-sobre-oscuro); }
body.ui-modern .executive-hero h1,body.ui-modern .executive-hero h2,
body.ui-modern .executive-hero strong,body.ui-modern .hero-panel strong{ color:#fff; }
body.ui-modern .executive-hero p,body.ui-modern .executive-hero small{ color:var(--n-sobre-oscuro-3); }
body.ui-modern .executive-hero .section-kicker,
body.ui-modern .hero-brand{ color:var(--n-aqua-claro); }
/* Dentro del panel oscuro el botón principal es BLANCO. Es el contraste más
   alto que existe ahí dentro y no necesita ningún efecto para destacar. */
body.ui-modern .executive-hero .btn-primary{
  background:#ffffff; background-image:none;
  color:var(--n-hero-tinta); border-color:transparent;
  box-shadow:none;
}
body.ui-modern .executive-hero .btn-primary:hover{
  background:#e9eff6; background-image:none; color:var(--n-hero-tinta);
  box-shadow:none;
}
body.ui-modern .btn-ghost-light{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff;
}
body.ui-modern .btn-ghost-light:hover{ background:rgba(255,255,255,.18); }

/* El disco del índice de cierre vive dentro del panel oscuro: su centro tiene
   que ser oscuro en los dos temas, o en claro sale un círculo blanco encima. */
body.ui-modern .executive-score .score-ring,
body.ui-modern .executive-hero .score-ring{
  background:conic-gradient(var(--n-aqua-claro) calc(var(--score,0)*1%), rgba(255,255,255,.13) 0);
  border:0;
}
body.ui-modern .executive-score .score-ring::after,
body.ui-modern .executive-hero .score-ring::after,
body.ui-modern .hero-panel .score-ring::after{ background:var(--n-hero-b); }
body.ui-modern .executive-score{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}

/* Cabecera oscura del panel de reportería: mismo trato. */
body.ui-modern .report-dashboard-head,
body.ui-modern .report-dashboard-head *{ color:var(--n-sobre-oscuro); }
body.ui-modern .report-dashboard-head h2{ color:#fff; }
body.ui-modern .report-dashboard-head .section-kicker{ color:var(--n-aqua-claro); }

body.ui-modern .chart-stage,body.ui-modern .pro-chart-card{ color:var(--n-tinta-2); }

/* ===========================================================================
   13 · NEWI
   Sin caja: la ilustración sola, con su sombra.
   =========================================================================== */
body.ui-modern .newi-launcher-wrap{ width:122px; height:132px; right:10px; bottom:96px; }
body.ui-modern .ai-launcher{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  width:122px !important; height:132px !important;
  border-radius:0 !important;
  padding:0; overflow:visible;
}
body.ui-modern .ai-launcher::before,
body.ui-modern .ai-launcher::after{ display:none !important; }
body.ui-modern .newi-orbit{ display:none !important; }
body.ui-modern .newi-robot-stage{
  left:0 !important; top:0 !important;
  width:122px !important; height:112px !important;
  transition:transform .18s ease-out; will-change:transform;
}
body.ui-modern .newi-robot-img{
  animation:newi-float 3.4s ease-in-out infinite;
  filter:drop-shadow(0 14px 24px rgba(11,7,24,.42));
}
:root[data-theme="dark"] body.ui-modern .newi-robot-img{
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.75)) drop-shadow(0 0 18px var(--n-acento-halo));
}
body.ui-modern .newi-presence{
  right:16px; bottom:30px;
  background:var(--n-aqua-vivo);
  box-shadow:0 0 0 3px var(--n-fondo), 0 0 14px var(--n-aqua-vivo);
}
body.ui-modern .newi-launcher-name{
  bottom:-2px; padding:3px 12px; border-radius:999px;
  background:var(--n-oscuro); border:1px solid rgba(255,255,255,.13);
  box-shadow:var(--n-sombra-2);
}
body.ui-modern .newi-launcher-name b{
  color:var(--n-sobre-oscuro); font-family:var(--n-mono);
  font-size:10px; letter-spacing:.22em;
}
body.ui-modern .newi-launcher-name small{ display:none; }
body.ui-modern .newi-launcher-hint{
  background:var(--n-panel); border:1px solid var(--n-linea);
  color:var(--n-tinta); border-radius:var(--n-r-2); box-shadow:var(--n-sombra-2);
}
body.ui-modern .newi-launcher-hint strong{ color:var(--n-tinta); }
body.ui-modern .newi-launcher-hint small{ color:var(--n-tinta-3); }

body.ui-modern .ai-assistant{
  background:var(--n-panel); border:1px solid var(--n-linea);
  box-shadow:var(--n-sombra-3); border-radius:var(--n-r);
}
body.ui-modern .ai-assistant-header{
  background:linear-gradient(135deg,var(--n-hero-a),var(--n-hero-b));
  border-bottom:1px solid rgba(255,255,255,.09);
  color:var(--n-sobre-oscuro);
}
body.ui-modern .ai-assistant-header strong{ color:#fff; }
body.ui-modern .ai-assistant-header small{ color:var(--n-sobre-oscuro-3); }
body.ui-modern .ai-assistant-logo{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:none !important;
}
body.ui-modern .ai-online-status{
  background:var(--n-aqua-chip-fondo); color:var(--n-aqua-chip);
  border:1px solid rgba(45,212,191,.3);
}
body.ui-modern .ai-icon-button{ color:var(--n-sobre-oscuro-3); transition:color var(--n-rapido) ease; }
body.ui-modern .ai-icon-button:hover{ color:#fff; }
body.ui-modern .ai-assistant-notice{
  background:var(--n-panel-2); color:var(--n-tinta-2);
  border-bottom:1px solid var(--n-linea);
}
body.ui-modern .ai-capabilities span{
  background:var(--n-panel-2); border:1px solid var(--n-linea); color:var(--n-tinta-2);
}
body.ui-modern .ai-messages{ background:var(--n-fondo); }
body.ui-modern .ai-empty strong{ color:var(--n-tinta); }
body.ui-modern .ai-empty p{ color:var(--n-tinta-3); }
body.ui-modern .ai-empty button{
  background:var(--n-panel); border:1px solid var(--n-linea-2);
  color:var(--n-tinta-2); border-radius:var(--n-r-2);
  transition:all var(--n-rapido) var(--n-curva);
}
body.ui-modern .ai-empty button:hover{
  border-color:var(--n-acento); color:var(--n-acento-2); transform:translateY(-2px);
}
body.ui-modern .ai-compose{ background:var(--n-panel); border-top:1px solid var(--n-linea); }
body.ui-modern .ai-compose textarea{
  background:var(--n-panel-2); border:1px solid var(--n-linea-2); color:var(--n-tinta);
}
body.ui-modern .ai-compose small{ color:var(--n-tinta-3); }
body.ui-modern .ai-web-toggle{ color:var(--n-tinta-2); }
body.ui-modern .ai-web-toggle small{ color:var(--n-tinta-3); }
body.ui-modern .ai-message{ animation:nova-surge .3s var(--n-curva) both; }
body.ui-modern .ai-message.assistant .ai-bubble,
body.ui-modern .ai-report{
  background:var(--n-panel); border:1px solid var(--n-linea); color:var(--n-tinta);
}
body.ui-modern .ai-message.user .ai-bubble{
  background:var(--n-acento); color:var(--n-acento-tinta);
}

/* La tarjeta de descarga de los informes de NEWI. */
.newi-descarga{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin-top:12px; padding:12px 14px;
  border:1px solid var(--n-linea-2); border-radius:var(--n-r-2);
  background:var(--n-panel-2);
  position:relative; overflow:hidden;
  animation:nova-surge .34s var(--n-curva) both;
}
.newi-descarga::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--n-acento), var(--n-aqua-vivo));
}
.newi-descarga-info{ display:grid; gap:2px; min-width:0; }
.newi-descarga-info strong{
  font-size:12.5px; color:var(--n-tinta); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.newi-descarga-info small{
  font-family:var(--n-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--n-tinta-3);
}
.newi-descarga-acciones{ display:flex; gap:8px; flex:0 0 auto; }
.newi-descarga-acciones .btn{ min-height:32px; padding:0 14px; font-size:12px; }

/* ===========================================================================
   14 · CHAT INTERNO
   =========================================================================== */
body.ui-modern .internal-chat{
  background:var(--n-panel); border:1px solid var(--n-linea);
  box-shadow:var(--n-sombra-3); border-radius:var(--n-r);
}
body.ui-modern .chat-window-header{
  background:linear-gradient(135deg,var(--n-hero-a),var(--n-hero-b));
  color:var(--n-sobre-oscuro);
  border-bottom:1px solid rgba(255,255,255,.09);
}
body.ui-modern .chat-window-title strong{ color:#fff; }
body.ui-modern .chat-window-title small{ color:var(--n-sobre-oscuro-3); }
body.ui-modern .chat-icon-button{ color:var(--n-sobre-oscuro-3); transition:all var(--n-rapido) ease; }
body.ui-modern .chat-icon-button:hover{ background:rgba(255,255,255,.09); color:#fff; }
body.ui-modern .chat-logo{ background:var(--n-acento-solido); color:var(--n-acento-tinta); }
body.ui-modern .chat-conversation-item{
  border-bottom:1px solid var(--n-linea); color:var(--n-tinta-2);
  transition:background var(--n-rapido) ease;
}
body.ui-modern .chat-conversation-item:hover{ background:var(--n-panel-2); }
body.ui-modern .chat-messages{ background:var(--n-fondo); }
body.ui-modern .chat-message-bubble{
  background:var(--n-panel); border:1px solid var(--n-linea); color:var(--n-tinta);
}
body.ui-modern .chat-message-row.mine .chat-message-bubble{
  background:var(--n-acento); border-color:var(--n-acento); color:var(--n-acento-tinta);
}
body.ui-modern .chat-compose-form,
body.ui-modern .chat-send-row{ background:var(--n-panel); border-top:1px solid var(--n-linea); }
body.ui-modern .chat-launcher{
  /* Color plano y tinta del token: hay paletas —la naranja— en las que el
     relleno es vivo y lo que se lee encima es tinta oscura, no blanco. */
  background:var(--n-acento-solido);
  color:var(--n-acento-tinta); box-shadow:0 10px 30px -12px var(--n-acento-halo);
  transition:transform var(--n-medio) var(--n-rebote), box-shadow var(--n-medio) ease;
}
body.ui-modern .chat-launcher:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 16px 38px -12px var(--n-acento-halo);
}
body.ui-modern .chat-empty strong{ color:var(--n-tinta); }
body.ui-modern .chat-empty p{ color:var(--n-tinta-3); }
body.ui-modern .chat-search{
  background:var(--n-panel-2); border:1px solid var(--n-linea); border-radius:var(--n-r-2);
}
body.ui-modern .chat-search input{ background:transparent; border:0; color:var(--n-tinta); }
body.ui-modern .chat-loading small{ color:var(--n-tinta-3); }
body.ui-modern .chat-back-button{ color:var(--n-tinta-2); }
body.ui-modern .chat-back-button:hover{ background:var(--n-panel-2); color:var(--n-tinta); }

/* ===========================================================================
   15 · INTERRUPTOR DE TEMA Y ARRASTRE
   =========================================================================== */
.theme-toggle{ position:relative; overflow:hidden; }
.theme-toggle .theme-sun,
.theme-toggle .theme-moon{
  position:absolute; inset:0; display:grid; place-items:center;
  transition:opacity var(--n-medio) ease, transform var(--n-lento) var(--n-rebote);
}
.theme-toggle .theme-sun::before{
  content:""; width:13px; height:13px; border-radius:50%;
  background:currentColor;
  box-shadow:0 -8px 0 -4.5px currentColor, 0 8px 0 -4.5px currentColor,
             -8px 0 0 -4.5px currentColor, 8px 0 0 -4.5px currentColor,
             -6px -6px 0 -5px currentColor, 6px 6px 0 -5px currentColor,
             -6px 6px 0 -5px currentColor, 6px -6px 0 -5px currentColor;
}
.theme-toggle .theme-moon::before{
  content:""; width:15px; height:15px; border-radius:50%;
  box-shadow:inset -4.5px 2.5px 0 0 currentColor;
}
/* En claro se ofrece la luna (lo que vas a activar); en oscuro, el sol. */
:root[data-theme="light"] .theme-toggle .theme-sun{ opacity:0; transform:rotate(-80deg) scale(.5); }
:root[data-theme="light"] .theme-toggle .theme-moon{ opacity:1; transform:none; }
:root[data-theme="dark"]  .theme-toggle .theme-sun{ opacity:1; transform:none; }
:root[data-theme="dark"]  .theme-toggle .theme-moon{ opacity:0; transform:rotate(80deg) scale(.5); }

/* Aviso de arrastre de NEWI y del chat. */
.drag-tip{
  position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%);
  display:block; white-space:nowrap;
  padding:6px 11px; border-radius:999px;
  background:var(--n-oscuro); color:var(--n-sobre-oscuro);
  border:1px solid rgba(255,255,255,.13);
  font-size:11px; font-weight:600; line-height:1.2;
  box-shadow:var(--n-sombra-2); pointer-events:none;
  opacity:0; transition:opacity .3s ease; z-index:4;
}
.drag-tip.show{ opacity:1; }
.internal-chat .drag-tip{ left:18px; top:52px; bottom:auto; transform:none; }
.newi-launcher-wrap.show-hint .drag-tip,
.newi-launcher-wrap.is-dragging .drag-tip{ opacity:0 !important; }

.drag-reset{ display:none; }
.newi-launcher-wrap[data-dragged="1"] > .drag-reset,
.internal-chat[data-dragged="1"] .drag-reset{ display:grid; }
.drag-reset-newi{
  position:absolute; top:4px; right:2px; z-index:120;
  width:24px; height:24px; border-radius:50%;
  border:1px solid rgba(255,255,255,.7); background:var(--n-oscuro); color:#fff;
  place-items:center; cursor:pointer; padding:0;
  box-shadow:var(--n-sombra-2);
  opacity:0; transform:scale(.85);
  transition:opacity var(--n-rapido) ease, transform var(--n-medio) var(--n-rebote);
}
.newi-launcher-wrap:hover > .drag-reset-newi,
.drag-reset-newi:focus-visible{ opacity:1; transform:scale(1); }
.drag-reset-newi:hover{ background:var(--n-acento); }
.newi-launcher-wrap.is-dragging > .drag-reset-newi{ opacity:0 !important; }

/* ===========================================================================
   16 · MÓVIL
   =========================================================================== */
@media (max-width:980px){
  body.ui-modern .topbar h1{ font-size:21px; }
  /* Entre 641 y 980 px el botón del chat sube y NEWI le quedaba encima. */
  body.ui-modern .newi-launcher-wrap{
    width:104px; height:112px; right:8px;
    bottom:calc(var(--mobile-nav-height,72px) + 112px + env(safe-area-inset-bottom));
  }
  body.ui-modern .ai-launcher{ width:104px !important; height:112px !important; }
  body.ui-modern .newi-robot-stage{ width:104px !important; height:96px !important; }
}
@media (max-width:640px){
  body.ui-modern .page-container{ padding-left:14px; padding-right:14px; }
  body.ui-modern .surface-card,body.ui-modern .modal-dialog{ border-radius:14px; }
  /* En un móvil la retícula y la aurora animada cuestan batería y aportan
     poco: la retícula se va y la aurora se queda quieta. */
  body.ui-modern::after{ display:none; }
  body.ui-modern::before{ animation:none; opacity:.7; }

  body.ui-modern .newi-launcher-wrap{
    width:88px; height:94px; right:6px;
    bottom:calc(var(--mobile-nav-height,72px) + 104px + env(safe-area-inset-bottom));
  }
  body.ui-modern .ai-launcher{ width:88px !important; height:94px !important; }
  body.ui-modern .newi-robot-stage{ width:88px !important; height:88px !important; }
  body.ui-modern .newi-launcher-name{ display:none; }
  body.ui-modern .newi-presence{ right:8px; bottom:8px; }

  /* En reportería los botones de exportar no caben en una fila de 390 px. */
  body.ui-modern .page-header-actions,
  body.ui-modern .report-export-actions,
  body.ui-modern .table-toolbar{ flex-wrap:wrap; gap:8px; width:100%; }
  body.ui-modern .page-header-actions > .btn,
  body.ui-modern .report-export-actions > .btn{ flex:1 1 160px; min-width:0; }
  body.ui-modern .btn{ white-space:normal; text-align:center; line-height:1.25; }
  body.ui-modern .top-user small{ display:none; }
}

/* Todo lo que cuelga de la barra lateral vive sobre índigo oscuro en los dos
   temas: la tinta apagada del tema claro (que es oscura) no sirve ahí. */
body.ui-modern .sidebar small,
body.ui-modern .sidebar .sidebar-profile small,
body.ui-modern .sidebar-profile > span small,
body.ui-modern .sidebar .nav-link small,
/* La ficha del usuario usa <span> sin clase dentro de otro <span>: sin este
   selector heredaba la tinta apagada del tema, que en claro es oscura. */
body.ui-modern .sidebar-profile,
body.ui-modern .sidebar-profile *{ color:var(--n-sobre-oscuro-2); }
body.ui-modern .sidebar-profile .avatar,
body.ui-modern .top-user .avatar{ color:var(--n-acento-tinta); }
body.ui-modern .sidebar-profile strong,
body.ui-modern .sidebar-profile b{ color:#fff; }
body.ui-modern .sidebar-profile .avatar{ color:var(--n-acento-tinta); }
body.ui-modern .sidebar strong,
body.ui-modern .sidebar-profile strong{ color:#fff; }

/* ===========================================================================
   17 · COMPONENTES PROPIOS DEL SISTEMA

   Hasta la 7.0.0 el portal cargaba CINCO hojas: app.css, responsive.css y
   además ui-2026.css y ui-futura.css, que eran dos diseños anteriores
   COMPLETOS. Aunque esta hoja fuera la última y ganara el color, la
   geometría, los radios, las sombras y los degradados de aquellas dos
   seguían mandando por debajo. Por eso cada rediseño acababa "pareciéndose
   al anterior": la base no se estaba reemplazando, solo se pintaba encima.

   En esta versión esas dos hojas YA NO SE CARGAN. Pero dentro llevaban
   componentes que no existen en ninguna otra parte, así que se separaron:
   216 reglas que solo retocaban el diseño viejo se descartaron, y las 172
   que definen componentes propios están aquí abajo.

   Lo rescatado: la ficha del proveedor con pestañas, el panel de decisión,
   la caja del tipo de cambio, la celda de observados, el aviso de segundo
   pago, la pantalla "en desarrollo", el resumen de confirmación, el bloqueo
   de envío, las opciones del ZIP, el banco de borradores y el arrastre.

   Los colores ya venían en variables --n-*, así que todo esto adoptó la
   paleta nueva sin tocar una línea. Lo único que hizo falta es traducir las
   medidas y las variables de aquellas hojas, que es el bloque siguiente.
   =========================================================================== */

/* Puente con las variables de las hojas retiradas. */
:root,
body.ui-modern{
  --fx-ink:var(--n-tinta);
  --fx-ink-soft:var(--n-tinta-2);
  --fx-muted:var(--n-tinta-3);
  --fx-line:var(--n-linea);
  --fx-line-soft:var(--n-linea);
  --fx-surface:var(--n-panel);
  --fx-surface-2:var(--n-panel-2);
  --fx-canvas:var(--n-fondo);
  --fx-accent:var(--n-acento);
  --fx-accent-2:var(--n-acento-2);
  --fx-accent-soft:var(--n-acento-suave);
  --fx-accent-ring:var(--n-acento-halo);
  --fx-green:var(--n-ok);    --fx-green-soft:var(--n-ok-suave);
  --fx-red:var(--n-mal);     --fx-red-soft:var(--n-mal-suave);
  --fx-blue:var(--n-info);   --fx-blue-soft:var(--n-info-suave);
  --fx-amber:var(--n-aviso); --fx-amber-soft:var(--n-aviso-suave);
  --fx-sh-1:var(--n-sombra);
  --fx-sh-2:var(--n-sombra-2);
  --fx-sh-3:var(--n-sombra-3);
  --fx-r-sm:var(--n-r-3); --fx-r:var(--n-r-2); --fx-r-lg:var(--n-r); --fx-r-xl:var(--n-r);
  --nl-ink:var(--n-tinta);
  --nl-muted:var(--n-tinta-3);
  --nl-line:var(--n-linea);
  --nl-accent:var(--n-acento);
  --nl-radius:var(--n-r-2);
}

/* ---- de ui-2026.css ---- */
.alert-warning{background:var(--n-acento-suave,#fff7ed); color:var(--n-acento-2,#9a3412); border:1px solid var(--n-acento,#fed7aa);}
.attention-box{display:grid; gap:6px;
  padding:16px; border-radius:14px;
  border:1px solid var(--nl-line); background:var(--n-panel,#f8fafc); color:var(--nl-ink);}
.attention-box strong{font-size:14px;}
.attention-box span,
.attention-box small{font-size:12px; color:var(--nl-muted); line-height:1.5;}
/* EL AVISO DE BORRADOR VA EN LA COLUMNA DEL FORMULARIO, NO DE BORDE A BORDE.
   Lo puse ocupando las dos columnas, y en Nueva solicitud eso abría un hueco de
   casi 500 px: el resumen del costado está anclado a las filas 1 a 5 de la
   segunda columna, así que un elemento que quiera ocupar LAS DOS no cabe en
   ninguna de esas cinco filas y la rejilla lo baja hasta la sexta. Las cinco
   filas de arriba se quedaban vacías, y el aviso —y todo el formulario detrás—
   aparecían medio metro más abajo.
   En la columna del formulario entra en la fila 1, que es su sitio: el aviso
   habla de lo que escribiste en el formulario, no del resumen. */
.draft-restore-banner{grid-column:1;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:4px;
  border:1px solid var(--n-acento,#fed7aa); border-radius:var(--nl-radius);
  background:linear-gradient(180deg,var(--n-acento-suave,#fff8f1),var(--n-panel,#fff));}
.draft-restore-banner strong{display:block; font-size:13.5px; color:var(--n-acento-2,#9a3412);}
.draft-restore-banner span{display:block; font-size:12px; color:var(--nl-muted); line-height:1.5; margin-top:2px;}
.draft-restore-actions{display:flex; gap:8px; flex-wrap:wrap;}
.empty-diagnosis{list-style:none; margin:14px auto 0; padding:12px 14px; max-width:560px;
  text-align:left; border:1px solid var(--nl-line); border-radius:12px;
  background:var(--n-panel,#f8fafc); display:grid; gap:6px;}
.empty-diagnosis li{font-size:11.5px; line-height:1.5; color:var(--nl-muted);}
.empty-diagnosis li::before{content:"• "; color:var(--nl-accent); font-weight:800;}

/* ---- de ui-2026.css · @media (max-width:768px) ---- */
@media (max-width:768px){
  .draft-restore-banner{flex-direction:column; align-items:stretch;}
  .draft-restore-actions .btn{flex:1 1 auto; justify-content:center;}
}

/* ---- de ui-futura.css ---- */
.nav-soon{margin-left:auto;
  font-size:8.5px; font-weight:900; letter-spacing:.1em;
  padding:3px 7px; border-radius:999px;
  background:color-mix(in srgb, var(--n-acento,rgba(249,115,22,.18)) 18%, transparent); color:var(--n-acento,#ffb27a);
  border:1px solid color-mix(in srgb, var(--n-acento,rgba(249,115,22,.28)) 28%, transparent);}
.second-payment-flag{display:inline-block; margin-top:5px;
  padding:3px 8px; border-radius:999px;
  background:var(--fx-blue-soft); color:var(--n-info,#1d4ed8);
  border:1px solid var(--n-info-suave,#c7d8ff);
  font-size:9.5px; font-weight:900; letter-spacing:.06em; white-space:nowrap;}
.newi-robot-img{display:block; width:100%; height:100%; object-fit:contain;
  
  animation:newi-float 3.4s ease-in-out infinite;
  filter:drop-shadow(0 8px 14px rgba(6,14,30,.32));
  user-select:none; -webkit-user-drag:none; pointer-events:none;}
.ai-launcher:hover .newi-robot-img{animation-duration:2.2s;}
.drag-reset{display:none;}
.newi-launcher-wrap[data-dragged="1"] > .drag-reset,
.internal-chat[data-dragged="1"] .drag-reset{display:grid;}
.drag-reset-newi{position:absolute; top:-4px; right:-4px; z-index:120;
  width:24px; height:24px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--n-linea,rgba(255,255,255,.7)) 70%, transparent); background:var(--n-oscuro,#15191f); color:#fff;
  place-items:center; cursor:pointer; padding:0;
  box-shadow:0 4px 12px rgba(6,14,30,.3);
  opacity:0; transition:opacity .18s ease, transform .18s ease;
  transform:scale(.85);}
.newi-launcher-wrap:hover > .drag-reset-newi,
.drag-reset-newi:focus-visible{opacity:1; transform:scale(1);}
.drag-reset-newi:hover{background:var(--orange,var(--n-acento,#f97316));}
.newi-launcher-wrap.is-dragging > .drag-reset-newi{opacity:0!important;}
.drag-tip{position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%);
  display:block; white-space:nowrap;
  padding:6px 11px; border-radius:999px;
  background:var(--n-oscuro,#15191f); color:#fff; font-size:11px; font-weight:800; line-height:1.2;
  box-shadow:0 10px 26px rgba(6,14,30,.34); pointer-events:none;
  opacity:0; transition:opacity .3s ease; z-index:4;}
.drag-tip.show{opacity:1;}
.internal-chat .drag-tip{left:18px; top:52px; bottom:auto; transform:none;}
.newi-launcher-wrap.show-hint .drag-tip,
.newi-launcher-wrap.is-dragging .drag-tip{opacity:0!important;}
.supplier-dialog{width:min(100%,980px); padding:0;}
.supplier-dialog .modal-close{top:18px; right:18px; z-index:3;}
.supplier-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  
  padding:24px 68px 20px 28px; background:linear-gradient(135deg,var(--n-oscuro,#15191f),var(--n-oscuro,#232b36)); color:#fff;
  flex:0 0 auto;}
.supplier-avatar{display:grid; place-items:center; width:56px; height:56px; border-radius:16px;
  background:linear-gradient(135deg,var(--n-acento,#f97316),var(--n-acento,#fb923c)); color:#fff;
  font-weight:900; font-size:18px; letter-spacing:.02em; flex:0 0 auto;}
.supplier-head-text{min-width:200px; flex:1 1 280px;}
.supplier-head-text .section-kicker{color:var(--n-acento,#f9a86a);}
.supplier-head-text h2{margin:4px 0 3px; font-size:20px; line-height:1.25; color:var(--n-tinta,#fff); padding-right:30px;}
.supplier-head-text p{margin:0; font-size:12.5px; color:var(--n-tinta-3,#aab3c0);}
.supplier-head-badges{display:flex; gap:7px; flex-wrap:wrap;}
.supplier-head-badges .status-badge{background:color-mix(in srgb, var(--n-panel-2,rgba(255,255,255,.12)) 12%, transparent); color:var(--n-tinta,#e8edf5); border:0;}
.supplier-head-badges .status-badge.success{background:color-mix(in srgb, var(--n-ok,rgba(34,197,94,.22)) 22%, transparent); color:var(--n-ok,#8ef0b4);}
.supplier-head-badges .status-badge.info{background:color-mix(in srgb, var(--n-acento,rgba(249,115,22,.24)) 24%, transparent); color:var(--n-acento,#ffc79a);}
.supplier-tabs{display:flex; gap:4px; padding:10px 16px 0; background:var(--n-panel,#f6f8fb);
  border-bottom:1px solid var(--fx-line,var(--n-linea,#e4e8ef)); overflow-x:auto; flex:0 0 auto;}
.supplier-tabs button{display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:11px 14px; border:0; background:transparent; cursor:pointer;
  font-size:12.5px; font-weight:800; color:var(--n-tinta-3,#6b7688);
  border-bottom:2.5px solid transparent; border-radius:8px 8px 0 0;}
.supplier-tabs button:hover{color:var(--n-tinta,#1d2939); background:color-mix(in srgb, var(--n-acento,rgba(249,115,22,.07)) 7%, transparent);}
.supplier-tabs button.active{color:var(--n-acento-2,#c2410c); border-bottom-color:var(--n-acento,#f97316); background:var(--n-panel,#fff);}
.supplier-tabs button span{display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:var(--n-panel-2,#e7ebf1); color:var(--n-tinta-2,#475467); font-size:10px; font-weight:900;}
.supplier-tabs button.active span{background:var(--n-acento-suave,#ffedd5); color:var(--n-acento-2,#c2410c);}
.supplier-body{padding:22px 28px 24px; overflow:auto; min-height:0; flex:1 1 auto;}
.supplier-panel{display:none;}
.supplier-panel.active{display:block; animation:supplierFade .18s ease;}
.supplier-form{display:block;}
.supplier-readonly{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;
  margin-top:18px; padding:16px; border-radius:14px; background:var(--n-panel,#f7f9fc); border:1px solid var(--n-linea,#e7ebf1);}
.supplier-readonly span{display:block; font-size:9.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--n-tinta-3,#98a2b3);}
.supplier-readonly strong{display:block; margin-top:4px; font-size:15px; color:var(--n-tinta,#101828);}
.supplier-switch{display:flex; align-items:flex-start; gap:12px; padding:15px 16px; margin-bottom:12px;
  border:1px solid var(--n-linea,#e7ebf1); border-radius:14px; background:var(--n-panel,#fff); cursor:pointer;}
.supplier-switch:hover{border-color:var(--n-acento,#fdba74); background:var(--n-panel,#fffaf6);}
.supplier-switch input{margin-top:2px; width:18px; height:18px; accent-color:var(--n-acento,#f97316); flex:0 0 auto;}
.supplier-switch strong{display:block; font-size:13.5px; color:var(--n-tinta,#101828);}
.supplier-switch small{display:block; margin-top:3px; font-size:12px; color:var(--n-tinta-3,#667085); line-height:1.5;}
.supplier-emails{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px;}
.supplier-emails span{display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px;
  background:var(--n-ok-suave,#eafaf0); color:var(--n-ok,#1a7a44); font-size:11.5px; font-weight:700;}
.supplier-empty-note{display:flex; align-items:flex-start; gap:9px; margin:0 0 14px;
  padding:14px 16px; border-radius:14px; background:var(--n-acento-suave,#fff7ed); border:1px dashed var(--n-acento,#fdba74);
  color:var(--n-acento-2,#9a3412); font-size:12.5px; line-height:1.55;}
.supplier-accounts{display:grid; gap:10px; margin-bottom:18px;}
.supplier-account{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border:1px solid var(--n-linea,#e7ebf1); border-radius:14px; background:var(--n-panel,#fff);}
.supplier-account.off{opacity:.62; background:var(--n-panel,#f8fafc);}
.supplier-account strong{display:block; font-size:13.5px; color:var(--n-tinta,#101828);}
.supplier-account span{display:block; margin-top:2px; font-size:13px; color:var(--n-tinta-2,#344054); font-variant-numeric:tabular-nums;}
.supplier-account small{display:block; margin-top:2px; font-size:11.5px; color:var(--n-tinta-3,#98a2b3);}
.supplier-subform{display:grid; gap:12px; padding:18px; border-radius:14px;
  background:var(--n-panel,#f7f9fc); border:1px solid var(--n-linea,#e7ebf1);}
.supplier-subform .section-kicker{color:var(--n-acento-2,#c2410c);}
.supplier-docs{display:grid; gap:10px; margin-bottom:18px;}
.supplier-doc{display:flex; align-items:center; gap:13px;
  padding:13px 15px; border:1px solid var(--n-linea,#e7ebf1); border-radius:14px; background:var(--n-panel,#fff);}
.supplier-doc-icon{display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--n-acento-suave,#fff7ed); color:var(--n-acento-2,#c2410c); flex:0 0 auto;}
.supplier-doc>div:nth-child(2){flex:1 1 auto; min-width:0;}
.supplier-doc strong{display:block; font-size:13.5px; color:var(--n-tinta,#101828);}
.supplier-doc small{display:block; margin-top:3px; font-size:11.5px; color:var(--n-tinta-3,#98a2b3); word-break:break-word;}
.supplier-doc-actions{display:flex; align-items:center; gap:6px; flex:0 0 auto;}
.supplier-doc-actions .btn-icon-soft.danger{color:var(--n-mal,#b42318);}
.supplier-doc-actions .btn-icon-soft.danger:hover{background:var(--n-mal-suave,#fee4e2);}
.supplier-actions[hidden]{display:none!important;}
.supplier-actions{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--n-linea,#e7ebf1);}
.supplier-actions .btn{min-width:140px; justify-content:center;}
/* LA ÚLTIMA OBSERVACIÓN ES UNA FRASE, NO UN CÓDIGO.
   app.css pone white-space:nowrap en TODO <strong> que cuelgue de una celda de
   esta tabla —lo necesitan el código del expediente y el monto, que no deben
   partirse—, y esa regla se llevaba por delante la observación: una línea
   recta de 620 px dentro de una celda de 290 que se metía debajo del estado.
   Y desde la 7.1.0 iba además en la letra monoespaciada de los códigos, que
   es un 25 % más ancha, así que lo que ya sobresalía sobresalía más.
   Aquí se envuelve, va en la letra de leer y se corta a dos renglones para
   que la fila no se dispare. El texto entero queda en el título emergente. */
.observed-cell{max-width:380px; min-width:260px;}
body.ui-modern #requestsTable td.observed-cell > strong{
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; line-clamp:3; overflow:hidden;
  white-space:normal; overflow-wrap:anywhere;
  font-family:inherit; letter-spacing:normal;
  font-size:12.5px; font-weight:700; line-height:1.4;
  color:var(--n-acento-2);
}
.observed-cell strong{display:block; font-size:12.5px; font-weight:700; color:var(--n-acento-2,#7c2d12); line-height:1.4;}
.observed-cell small{display:block; margin-top:4px; color:var(--n-tinta-3,#98a2b3); font-size:11px;}
.observed-cell small b{color:var(--n-mal,#b42318);}
.observed-state{display:inline-block; margin-top:5px; padding:2px 7px; border-radius:999px;
  font-size:9px; font-weight:900; letter-spacing:.05em;}
.observed-state.pendiente{background:var(--n-mal-suave,#fee4e2); color:var(--n-mal,#b42318);}
.observed-state.resuelto{background:var(--n-ok-suave,#eafaf0); color:var(--n-ok,#1a7a44);}
.requests-data-table .second-payment-flag{white-space:normal; line-height:1.3;}
.modal-lead{font-size:13.5px; line-height:1.6; color:var(--fx-ink-soft); margin:0 0 12px;}
.modal-note{font-size:12px; line-height:1.55; color:var(--fx-muted);
  padding:11px 13px; border-radius:12px;
  background:var(--fx-surface-2); border:1px solid var(--fx-line-soft);
  margin:0 0 12px;}
.confirm-summary{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px; margin:0 0 14px;}
.confirm-summary > div{padding:11px 13px; border-radius:13px;
  background:var(--fx-surface-2); border:1px solid var(--fx-line-soft);
  display:grid; gap:3px; min-width:0;}
.confirm-summary span{font-size:9.5px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fx-muted);}
.confirm-summary strong{font-size:14px; line-height:1.3; letter-spacing:-.01em; color:var(--fx-ink);
  overflow-wrap:anywhere;}
.decision-panel{display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px; align-items:center;
  padding:18px 20px; margin-bottom:16px;
  border-radius:var(--fx-r-lg);
  border:1px solid var(--fx-line);
  background:linear-gradient(180deg,var(--n-panel,#fff),var(--n-panel,#fbfcff));
  box-shadow:var(--fx-sh-1);
  position:relative; overflow:hidden;}
.decision-panel::before{content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg,var(--fx-accent),var(--fx-accent-2));}
.decision-panel-danger{background:linear-gradient(180deg,var(--n-panel,#fff8f9),var(--n-panel,#fff)); border-color:var(--n-mal-suave,#f9d3da);}
.decision-panel-danger::before{background:linear-gradient(180deg,var(--n-mal,#fb7185),var(--n-mal,#be123c));}
.decision-panel-icon{width:52px; height:52px; border-radius:17px; display:grid; place-items:center;
  background:var(--fx-red-soft); color:var(--n-mal,#be123c);
  box-shadow:inset 0 0 0 1px rgba(190,18,60,.12);}
.decision-panel-body{min-width:0; display:grid; gap:4px;}
.decision-panel-kicker{font-size:9.5px; font-weight:900; letter-spacing:.14em; color:var(--n-mal,#be123c);}
.decision-panel-body h3{margin:0; font-size:15.5px; letter-spacing:-.01em;}
.decision-panel-body p{margin:0; font-size:12.5px; line-height:1.55; color:var(--fx-ink-soft);}
.decision-panel-note{color:var(--fx-muted) !important; font-size:11.5px !important;}
.decision-panel-actions{display:flex; gap:9px; flex-wrap:wrap;}
.zip-options-head{display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:10px;}
.zip-options-tools{display:flex; gap:7px;}
.alert-warning{background:var(--fx-amber-soft); border-color:var(--n-acento,#fde3ba); color:var(--n-acento-2,#92400e);}
.attention-box{border-radius:var(--fx-r); border-color:var(--fx-line); background:var(--fx-surface-2);}
.empty-diagnosis{border-radius:14px; border-color:var(--fx-line); background:var(--fx-surface-2);}
.coming-soon{--cs-grad-a:#f97316; --cs-grad-b:#2563eb;
  --cs-paper-a:#ffffff; --cs-paper-b:#f3f6fc;
  --cs-line:#94a3b8; --cs-accent:#f97316;
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:34px; align-items:center;
  padding:44px 44px 48px;
  border-radius:var(--fx-r-xl);
  border:1px solid var(--fx-line);
  background:
    radial-gradient(700px 320px at 88% -10%, color-mix(in srgb, var(--n-acento,rgba(249,115,22,.1)) 10%, transparent), transparent 60%),
    linear-gradient(180deg,var(--n-panel,#fff),var(--n-panel,#fbfcff));
  box-shadow:var(--fx-sh-2);}
.coming-soon-art{display:grid; place-items:center;}
.coming-soon-art svg{width:100%; max-width:330px; height:auto;}
.coming-soon-gear{transform-origin:0 0; animation:fxSpin 9s linear infinite;}
.coming-soon-body{display:grid; gap:13px; min-width:0;}
.coming-soon-tag{justify-self:start; display:inline-flex; align-items:center; gap:8px;
  padding:6px 13px; border-radius:999px;
  background:var(--fx-accent-soft); color:var(--n-acento-2,#9a3412);
  border:1px solid var(--n-acento,#fed7aa);
  font-size:10px; font-weight:900; letter-spacing:.13em;}
.coming-soon-tag > i{width:7px; height:7px; border-radius:50%; background:var(--fx-accent);
  box-shadow:0 0 0 0 rgba(249,115,22,.6); animation:fxBlip 1.9s ease-out infinite;}
.coming-soon-body h2{margin:0; font-size:29px; line-height:1.15; letter-spacing:-.03em;}
.coming-soon-body > p{margin:0; font-size:14px; line-height:1.65; color:var(--fx-ink-soft); max-width:56ch;}
.coming-soon-list{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:9px;}
.coming-soon-list li{display:flex; align-items:center; gap:11px;
  padding:11px 14px; border-radius:13px;
  background:var(--fx-surface-2); border:1px solid var(--fx-line-soft);
  font-size:13px; color:var(--fx-ink-soft);}
.coming-soon-list li svg{color:var(--fx-accent);}
.coming-soon-note{margin:2px 0 0; font-size:12px; color:var(--fx-muted);}
.coming-soon-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
.submit-blocked{align-items:flex-start; gap:12px;}
.submit-blocked > svg{flex:0 0 auto; margin-top:1px; opacity:.85;}
.submit-blocked strong{display:block; margin-bottom:6px; font-size:13.5px;}
.submit-blocked-list{margin:0 0 8px; padding-left:20px; display:grid; gap:3px;}
.submit-blocked-list li{font-size:12.5px; font-weight:650;}
.submit-blocked span{display:block; font-size:12.5px;}
.submit-blocked a{text-decoration:underline;}
.exchange-rate-box[hidden]{display:none!important}
.exchange-rate-box{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 18px;
  padding:10px 16px;border-radius:14px;border:1px solid color-mix(in srgb, var(--n-acento,rgba(249,115,22,.28)) 28%, transparent);
  background:color-mix(in srgb, var(--n-acento,rgba(249,115,22,.06)) 6%, transparent);margin-top:2px}
.exchange-rate-label{font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--n-acento-2,#9a3412);display:flex;align-items:center;gap:6px;white-space:nowrap}
.exchange-rate-value{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.exchange-rate-value strong{font-size:1.3rem;font-weight:800;color:var(--n-acento-2,#7c2d12);font-variant-numeric:tabular-nums;line-height:1}
.exchange-rate-value small{color:var(--n-acento-2,#9a3412);opacity:.85;white-space:nowrap}
.exchange-rate-box input[type=number]{padding:7px 12px;border-radius:10px;border:1px solid color-mix(in srgb, var(--n-acento,rgba(249,115,22,.4)) 40%, transparent);
  font-size:1.05rem;font-variant-numeric:tabular-nums;max-width:170px}
.exchange-rate-box .field-hint{color:var(--n-acento-2,#7c2d12);opacity:.85;margin:0;flex:1 1 240px;text-align:right;line-height:1.35}
.request-exchange-rate{display:block;margin-top:4px;font-size:.78rem;color:var(--n-tinta-3,#6b7280);font-variant-numeric:tabular-nums}
.request-exchange-rate b{color:var(--n-tinta-2,#374151)}
.exchange-rate-panel{margin-bottom:16px}
.exchange-rate-today{font-size:1rem;margin:6px 0 10px}
.exchange-rate-today strong{font-size:1.4rem;font-weight:800;color:var(--n-acento-2,#7c2d12);font-variant-numeric:tabular-nums}
.exchange-rate-today small{color:var(--n-tinta-3,#6b7280);margin-left:8px}
.exchange-rate-today.missing{color:var(--n-mal,#b91c1c)}
.link-button{background:none;border:0;padding:0 0 0 6px;color:var(--n-acento-2,#c2410c);font-weight:700;font-size:.78rem;
  cursor:pointer;display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.link-button:hover{text-decoration:underline}

/* ---- de ui-futura.css · @media (prefers-reduced-motion:reduce) ---- */
@media (prefers-reduced-motion:reduce){
  .newi-robot-img{animation:none;}
  .drag-tip{transition:none;}
}

/* ---- de ui-futura.css · @media (min-width:981px) ---- */
@media (min-width:981px){
  .newi-launcher-wrap.is-dragging,
.internal-chat.is-dragging{transition:none!important;
    user-select:none;
    z-index:500;}
  .newi-launcher-wrap.is-dragging{cursor:grabbing;}
  .newi-launcher-wrap.is-dragging .newi-launcher-hint{opacity:0!important;}
  .newi-launcher-wrap.is-dragging .newi-robot-img{animation:none;}
  .internal-chat.is-dragging .chat-window-header{cursor:grabbing!important;}
}

/* ---- de ui-futura.css · @media (max-width:720px) ---- */
@media (max-width:720px){
  .supplier-head{padding:20px;}
  .supplier-body{padding:18px;}
  .supplier-tabs{padding:8px 10px 0;}
  .supplier-tabs button{padding:10px; font-size:11.5px;}
  .supplier-account{flex-direction:column; align-items:flex-start;}
  .supplier-actions .btn{flex:1 1 100%;}
  .exchange-rate-box{gap:6px 12px}
  .exchange-rate-box .field-hint{flex:1 1 100%;text-align:left}
}

/* ---- de ui-futura.css · @media (max-width:900px) ---- */
@media (max-width:900px){
  .decision-panel{grid-template-columns:auto minmax(0,1fr);}
  .decision-panel-actions{grid-column:1 / -1;}
  .decision-panel-actions .btn{flex:1 1 auto; justify-content:center;}
  .coming-soon{grid-template-columns:1fr; padding:30px 22px 34px; gap:22px; text-align:center;}
  .coming-soon-tag{justify-self:center;}
  .coming-soon-body > p{margin-inline:auto;}
  .coming-soon-list li{text-align:left;}
  .coming-soon-actions{justify-content:center;}
  .coming-soon-art svg{max-width:240px;}
}

/* --- Maquetación que vivía en las hojas retiradas ------------------------
   Estas reglas apuntan a clases que SÍ existen en app.css, así que el
   rescate automático las descartó por considerarlas decorativas. No lo eran:
   sin ellas el componente se desarma. Van escritas a mano y explicadas. */

/* La ficha del usuario al pie del menú: avatar · (nombre sobre cargo) · salir.
   Sin esto el nombre y el cargo salían en la misma línea, encima del botón. */
body.ui-modern .sidebar-profile{
  display:flex; align-items:center; gap:11px;
  padding:11px 12px; position:relative;
}
body.ui-modern .sidebar-profile > div:not(.avatar){
  display:grid; gap:1px; min-width:0; flex:1 1 auto;
}
body.ui-modern .sidebar-profile strong{
  font-size:12.5px; font-weight:600; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.ui-modern .sidebar-profile > div:not(.avatar) > span{
  font-size:10.5px; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.ui-modern .sidebar-profile .avatar{
  width:34px; height:34px; flex:0 0 auto; border-radius:11px;
  display:grid; place-items:center; font-size:11.5px;
}
body.ui-modern .sidebar-profile > a{
  flex:0 0 auto; display:grid; place-items:center;
  width:32px; height:32px; border-radius:var(--n-r-3);
  color:var(--n-sobre-oscuro-3); transition:all var(--n-rapido) ease;
}
body.ui-modern .sidebar-profile > a:hover{ background:rgba(255,255,255,.09); color:#fff; }
body.ui-modern .sidebar-profile .profile-presence{
  position:absolute; left:34px; bottom:12px;
  width:9px; height:9px; border-radius:50%;
  background:var(--n-aqua-claro);
  box-shadow:0 0 0 2px var(--n-lateral);
}

/* El posicionamiento del arrastre. Vivía en ui-futura.css sobre clases que SÍ
   existen en app.css, así que el rescate lo descartó por decorativo. No lo es:
   sin esto NEWI y el chat se pueden agarrar pero no se mueven de sitio. */
@media (min-width:981px){
  body.ui-modern .newi-launcher-wrap[data-dragged="1"],
  body.ui-modern .internal-chat[data-dragged="1"]{
    right:auto !important; bottom:auto !important;
    left:var(--drag-x) !important; top:var(--drag-y) !important;
  }
  /* Al arrastrar no puede haber transiciones: la pieza tiene que ir pegada al
     puntero, no persiguiéndolo. */
  body.ui-modern .newi-launcher-wrap.is-dragging,
  body.ui-modern .internal-chat.is-dragging{
    transition:none !important; user-select:none; z-index:500;
  }
  body.ui-modern .newi-launcher-wrap.is-dragging{ cursor:grabbing; }
  body.ui-modern .newi-launcher-wrap.is-dragging .newi-launcher-hint{ opacity:0 !important; }
  body.ui-modern .newi-launcher-wrap.is-dragging .newi-robot-img{ animation:none; }
  body.ui-modern .newi-launcher-wrap[data-draggable="1"]{ touch-action:none; }
  body.ui-modern .newi-launcher-wrap[data-draggable="1"] .ai-launcher{ cursor:grab; }

  /* El chat se agarra por su cabecera, salvo los botones. */
  body.ui-modern .internal-chat[data-draggable="1"] .chat-window-header{
    cursor:grab; touch-action:none;
  }
  body.ui-modern .internal-chat[data-draggable="1"] .chat-window-header button{ cursor:pointer; }
  body.ui-modern .internal-chat.is-dragging .chat-window-header{ cursor:grabbing !important; }
  /* Dos puntitos: la señal de "esto se agarra". */
  body.ui-modern .internal-chat[data-draggable="1"] .chat-window-title::before{
    content:""; flex:0 0 auto; width:4px; height:22px; margin-right:2px; border-radius:3px;
    background:
      radial-gradient(circle at 50% 22%,rgba(255,255,255,.5) 1.6px,transparent 1.7px),
      radial-gradient(circle at 50% 50%,rgba(255,255,255,.5) 1.6px,transparent 1.7px),
      radial-gradient(circle at 50% 78%,rgba(255,255,255,.5) 1.6px,transparent 1.7px);
  }
}

/* ===========================================================================
   18 · RITMO

   Lo que separa una pantalla "con buenos colores" de una pantalla diseñada no
   es el color: es que todo caiga en la misma retícula. Un solo paso de
   espaciado, una sola escala de texto y los mismos márgenes en todas partes.

   Paso base: 4 px. Todo lo que se ve es múltiplo de 4.
   =========================================================================== */
:root{
  --n-e1:4px;  --n-e2:8px;  --n-e3:12px; --n-e4:16px;
  --n-e5:20px; --n-e6:24px; --n-e7:32px; --n-e8:44px;
}

/* --- escala de texto ------------------------------------------------------
   Seis tamaños y ni uno más. Con más, cada pantalla acaba inventando el suyo
   y el conjunto se descuadra. */
body.ui-modern{ font-size:14px; line-height:1.55; }
body.ui-modern h1{ font-size:23px; line-height:1.2; font-weight:650; }
body.ui-modern h2{ font-size:18px; line-height:1.3; font-weight:650; }
body.ui-modern h3{ font-size:16px; line-height:1.35; }
body.ui-modern h4{ font-size:14px; line-height:1.4; }
body.ui-modern small,
body.ui-modern .field-hint,
body.ui-modern .table-subtext{ font-size:12px; line-height:1.45; }

/* --- aire dentro de los contenedores --------------------------------------
   El mismo relleno en toda tarjeta, cabecera y pie. Antes cada componente
   traía el suyo de la hoja en la que hubiera nacido. */
body.ui-modern .card-header{ padding:var(--n-e5) var(--n-e6); }
body.ui-modern .surface-card > .card-body,
body.ui-modern .surface-card > form,
body.ui-modern .settings-panel{ padding:var(--n-e6); }
body.ui-modern .metric-card,
body.ui-modern .stat-card,
body.ui-modern .executive-metrics article{ padding:var(--n-e5); }
body.ui-modern .modal-actions{ padding:var(--n-e4) var(--n-e6); gap:var(--n-e2); }
body.ui-modern .page-container{ padding-block:var(--n-e6) var(--n-e8); }
body.ui-modern .page-header{ margin-bottom:var(--n-e5); }

/* --- la fila de indicadores -----------------------------------------------
   Etiqueta arriba, cifra grande, apunte abajo. Siempre en ese orden y
   siempre con la misma separación, para que las cinco tarjetas se lean como
   una sola pieza y no como cinco cajas parecidas. */
body.ui-modern .executive-metrics article,
body.ui-modern .metric-card{
  display:flex; flex-direction:column; gap:var(--n-e2);
}
body.ui-modern .executive-metrics article strong,
body.ui-modern .metric-card strong{ margin:var(--n-e1) 0 0; }
body.ui-modern .executive-metrics article small,
body.ui-modern .metric-card small{ margin-top:auto; color:var(--n-tinta-3); }

/* --- tablas --------------------------------------------------------------- */
body.ui-modern .data-table th,
body.ui-modern .data-table td{ padding:var(--n-e3) var(--n-e4); }
body.ui-modern .data-table thead th{ padding-block:var(--n-e2); }

/* --- formularios ----------------------------------------------------------
   Altura de control única. Un formulario con campos de tres alturas
   distintas se ve improvisado aunque los colores sean perfectos. */
body.ui-modern .field input,
body.ui-modern .field select,
body.ui-modern .search-control,
body.ui-modern .btn{ min-height:40px; }
body.ui-modern .btn-small{ min-height:32px; padding:0 var(--n-e3); font-size:12.5px; }
body.ui-modern .field{ gap:var(--n-e1); }
body.ui-modern .field input,
body.ui-modern .field select,
body.ui-modern .field textarea{ padding:var(--n-e2) var(--n-e3); }

/* --- el rótulo de sección --------------------------------------------------
   Va pegado a su título, no flotando. Un rótulo a más de 4 px de lo que
   rotula deja de leerse como su etiqueta. */
body.ui-modern .section-kicker{ display:block; margin-bottom:var(--n-e1); }

/* --- separación entre bloques de página ------------------------------------ */
body.ui-modern .page-container > * + *{ margin-top:var(--n-e6); }
/* ...pero NO a lo que está fuera del flujo. Un velo o un cajón con
   position:fixed e inset:0 y sin alto propio se coloca "rellenando" la
   ventana MENOS sus márgenes: ese margen de 24 px lo empujaba hacia abajo y
   dejaba una franja sin cubrir en la parte de arriba de la pantalla. Es lo
   que se veía al abrir Filtros. */
body.ui-modern .page-container > .modal,
body.ui-modern .page-container > .modal-backdrop,
body.ui-modern .page-container > .filter-drawer,
body.ui-modern .page-container > .filter-drawer-backdrop,
body.ui-modern .page-container > .drawer,
body.ui-modern .page-container > .toast-stack,
body.ui-modern .page-container > .loading-layer{ margin-top:0; }

/* El último módulo del menú quedaba tapado por la ficha del usuario: hace
   falta reservarle aire al final de la lista. (Otra regla de maquetación que
   vivía en las hojas retiradas.) */
body.ui-modern .sidebar-nav{ padding-bottom:var(--n-e5); }
/* Y el pie de página, que quedaba debajo de NEWI y no se leía la versión. */
body.ui-modern .app-footer{ padding-right:150px; }
@media (max-width:768px){ body.ui-modern .app-footer{ padding-right:var(--n-e4); } }

/* ===========================================================================
   19 · PANTALLA DE ACCESO

   El panel izquierdo es oscuro SIEMPRE. Sus textos no pueden salir de los
   tokens de tinta, que en el tema claro son casi negros: van con la tinta de
   "sobre oscuro", igual que la barra lateral y el panel de bienvenida.
   La pantalla se sirve fija en claro (data-theme="light" en login.php): no
   hay interruptor de tema antes de entrar, y una portada que cambie sola
   según el sistema operativo del visitante no aporta nada.
   =========================================================================== */
body.login-redesign .login-brand-panel{
  background:
    radial-gradient(760px 420px at 82% -8%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(150deg, var(--n-hero-a) 0%, var(--n-hero-b) 68%);
}
body.login-redesign .login-security-badge{ color:var(--n-sobre-oscuro-2); }
body.login-redesign .login-kicker{ color:var(--n-aqua-claro); }
body.login-redesign .login-kicker i{
  background:linear-gradient(90deg, var(--n-aqua-claro), transparent);
}
body.login-redesign .login-copy h1{ color:#ffffff; }
body.login-redesign .login-copy h1 em{ color:var(--n-aqua-claro); }
body.login-redesign .login-copy > p{ color:var(--n-sobre-oscuro-2); }
body.login-redesign .login-value-grid article > span{
  color:var(--n-aqua-claro); background:rgba(255,255,255,.07);
  border-radius:var(--n-r-3);
}
body.login-redesign .login-value-grid strong{ color:#ffffff; }
body.login-redesign .login-value-grid small{ color:var(--n-sobre-oscuro-2); }
body.login-redesign .login-brand-footer{ color:var(--n-sobre-oscuro-2); }
body.login-redesign .login-brand-footer span i{ background:var(--n-aqua-claro); box-shadow:none; }

/* El lado derecho, el del formulario, sí es papel: tokens normales. */
body.login-redesign .login-form-heading .form-kicker{
  border-color:var(--n-linea-2); background:var(--n-panel-2);
  color:var(--n-tinta-3); font-family:var(--n-mono); letter-spacing:.18em;
}
body.login-redesign .login-trust-note strong{ color:var(--n-tinta-2); }
body.login-redesign .login-trust-note small{ color:var(--n-tinta-3); }
body.login-redesign .login-form-footer{ color:var(--n-tinta-3); }
body.login-redesign .login-submit{
  background:var(--n-acento-solido); color:var(--n-acento-tinta);
}
/* Al pasar por encima se OSCURECE el mismo color, en vez de saltar al tono
   claro de la marca: así el blanco de encima nunca pierde legibilidad. */
body.login-redesign .login-submit:hover{ background:var(--n-acento-pulsado); }

/* El campo enfocado salía con DOS anillos: el del recuadro (borde + halo) y,
   dentro, el del propio input. Manda el del recuadro. */
body.login-redesign .login-input-wrap input:focus-visible,
body.login-redesign .login-input-wrap input:focus{ outline:none; }

/* Dos adornos que en esta pantalla se leen como suciedad y no como diseño:
   el disco de 520 px detrás del formulario, que sale como una mancha gris, y
   los dos puntos que orbitan por el panel oscuro. Los aros finos se quedan. */
body.login-redesign .login-form-glow{ display:none; }
body.login-redesign .login-orbit::after{ content:none; }

/* --- correcciones de la barra lateral vistas en pantalla -------------------
   Tres cosas que solo se ven mirando la barra de cerca, y que en una
   herramienta seria cantan: */

/* 1 · Los dos círculos decorativos del fondo. Un aro y un resplandor que
      cruzan por detrás de la lista de módulos y se leen como una mancha. */
body.ui-modern .sidebar::before,
body.ui-modern .sidebar::after{ content:none; }

/* 2 · El punto que marca "este módulo tiene expedientes" era del color de
      marca, y el marino sobre marino no se ve. Va en petróleo claro, que es
      el color que en todo el sistema significa "aquí hay algo". */
body.ui-modern .sidebar .nav-link em{
  background:var(--n-aqua-claro); box-shadow:0 0 0 3px rgba(87,211,214,.12);
}

/* 3 · El globo de mensajes sin leer se pintaba igualmente cuando no había
      ninguno: salía un círculo gris al lado de Mensajería. El atributo
      hidden del HTML estaba perdiendo contra el display del componente. */
body.ui-modern .nav-count[hidden]{ display:none !important; }

/* Y aire al final de la lista, para que el último módulo no acabe medio
   tapado por la ficha del usuario. */
body.ui-modern .sidebar-nav{ padding-bottom:var(--n-e7); }

/* --- la barra de estado del indicador --------------------------------------
   Venía como un subrayado de 3 px en el borde inferior, que se lee como una
   línea suelta debajo de la tarjeta. Arriba y de 2 px se lee como la pestaña
   de color de una ficha, que es lo que es: rojo si hay que mirarlo. */
body.ui-modern .metric-card::after,
body.ui-modern .stat-card::after,
body.ui-modern .executive-metrics article::after{
  top:0; bottom:auto; height:2px;
}
/* Con esa pestaña ya no hace falta el filo que aparecía al pasar el ratón:
   dos barras en la misma tarjeta es una de más. */
body.ui-modern .metric-card::before,
body.ui-modern .stat-card::before{ content:none; }

/* Y las cinco tarjetas de la fila, iguales entre sí: mismo borde y misma
   sombra. La primera venía con el borde del color de marca y una sombra el
   doble de grande, de cuando era "la tarjeta destacada". Cinco cajas que se
   parecen pero no son iguales es justo lo que hace que una fila se lea
   desordenada; lo que las diferencia es la pestaña de color de arriba, que
   además significa algo. */
body.ui-modern .executive-metrics article,
body.ui-modern .executive-metrics article:first-child{
  background:var(--n-panel);
  border:1px solid var(--n-linea);
  border-radius:var(--n-r);
  box-shadow:var(--n-sombra);
}

/* ===========================================================================
   20 · MÓDULO DE ADMINISTRACIÓN Y PANTALLA DE APARIENCIA
   =========================================================================== */
body.ui-modern .admin-tabs{ margin-bottom:var(--n-e5); }

body.ui-modern .apariencia-rejilla{ display:grid; gap:var(--n-e3); }
body.ui-modern .apariencia-rejilla-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
body.ui-modern .apariencia-rejilla-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

body.ui-modern .apariencia-opcion{
  display:grid; align-content:start; gap:var(--n-e2);
  padding:var(--n-e4); cursor:pointer; margin:0;
}
body.ui-modern .apariencia-opcion strong{ font-size:13.5px; display:flex; align-items:center; gap:var(--n-e2); }
body.ui-modern .apariencia-opcion small{ font-size:11.5px; line-height:1.45; color:var(--n-tinta-3); }
body.ui-modern .apariencia-opcion.selected small{ color:var(--n-tinta-2); }

/* La muestra del material: un trozo de superficie de verdad, no un icono. */
body.ui-modern .apariencia-muestra{
  display:block; height:54px; border-radius:var(--n-r-2);
  box-shadow:inset 0 0 0 1px var(--n-linea);
}
body.ui-modern .apariencia-muestra-solido{
  background:linear-gradient(180deg, var(--n-panel), var(--n-panel-2));
}
body.ui-modern .apariencia-muestra-cristal{
  background:linear-gradient(135deg, var(--n-acento-halo), var(--n-aqua-halo));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.85);
}

/* La etiqueta "DE FÁBRICA". Al principio reusaba la de "PRONTO" del menú, y
   esa está pensada para leerse sobre el azul marino de la barra lateral: sobre
   una tarjeta blanca daba 1.3 de contraste. */
body.ui-modern .apariencia-insignia{
  display:inline-flex; align-items:center; padding:2px 7px; border-radius:999px;
  background:var(--n-acento-suave); color:var(--n-acento-2);
  border:1px solid color-mix(in srgb, var(--n-acento) 26%, transparent);
  font-family:var(--n-mono); font-size:8.5px; letter-spacing:.14em; font-weight:600;
}

body.ui-modern .apariencia-chips{ display:flex; gap:5px; }
body.ui-modern .apariencia-chips i{
  width:16px; height:16px; border-radius:var(--n-r-3); display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}

/* Los dos campos del color de la empresa viven dentro de una tarjeta de
   opción, y esas tarjetas esconden sus inputs (es como se oculta el redondel
   del radio). Aquí hay que devolverlos a la vida. */
body.ui-modern .apariencia-color{ display:flex; gap:var(--n-e2); align-items:center; margin-top:var(--n-e1); }
body.ui-modern .apariencia-color input{ position:static; opacity:1; }
body.ui-modern .apariencia-color input[type="color"]{
  width:38px; height:32px; padding:2px; cursor:pointer;
  border:1px solid var(--n-linea-2); border-radius:var(--n-r-3);
  background:var(--n-panel);
}
body.ui-modern .apariencia-color input[type="text"]{
  width:96px; min-height:32px; padding:0 var(--n-e2);
  border:1px solid var(--n-linea-2); border-radius:var(--n-r-3);
  background:var(--n-panel); color:var(--n-tinta);
  font-family:var(--n-mono); font-size:12px; letter-spacing:.04em;
}

body.ui-modern .apariencia-pie{
  padding:0 var(--n-e6) var(--n-e5); margin:0; color:var(--n-tinta-3);
}
body.ui-modern .apariencia-aviso{ color:var(--n-aviso); font-weight:600; }

body.ui-modern .apariencia-bloque{ display:grid; gap:var(--n-e5); }
body.ui-modern .apariencia-permisos{ display:grid; gap:var(--n-e3); padding:var(--n-e4); }
body.ui-modern .apariencia-permisos label{
  display:flex; gap:var(--n-e3); align-items:flex-start; cursor:pointer;
}
body.ui-modern .apariencia-permisos input[type="checkbox"]{
  width:17px; height:17px; margin-top:2px; flex:0 0 auto;
  accent-color:var(--n-acento); cursor:pointer;
}
body.ui-modern .apariencia-permisos span{ display:grid; gap:2px; }
body.ui-modern .apariencia-permisos strong{ font-size:13px; }
body.ui-modern .apariencia-permisos small{ font-size:11.5px; color:var(--n-tinta-3); line-height:1.45; }

body.ui-modern .apariencia-previa{
  display:grid; grid-template-columns:230px minmax(0,1fr); gap:var(--n-e5); align-items:start;
}
body.ui-modern .apariencia-previa .metric-card{ margin:0; }
body.ui-modern .apariencia-previa-piezas{ display:grid; gap:var(--n-e3); min-width:0; }
body.ui-modern .apariencia-previa-fila{ display:flex; gap:var(--n-e3); flex-wrap:wrap; align-items:center; }
/* En la vista previa los botones están apagados a propósito, pero tienen que
   verse con su color de verdad o la muestra no sirve de nada. */
body.ui-modern .apariencia-previa-fila .btn:disabled{ opacity:1; cursor:default; }

body.ui-modern .apariencia-barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--n-e4); padding:var(--n-e4) var(--n-e5);
}
body.ui-modern .apariencia-barra small{ color:var(--n-tinta-3); }
body.ui-modern .apariencia-barra-botones{ display:flex; gap:var(--n-e3); flex:0 0 auto; }

@media (max-width:900px){
  body.ui-modern .apariencia-rejilla-2,
  body.ui-modern .apariencia-rejilla-3{ grid-template-columns:minmax(0,1fr); }
  body.ui-modern .apariencia-previa{ grid-template-columns:minmax(0,1fr); }
  body.ui-modern .apariencia-barra{ flex-direction:column; align-items:stretch; }
  body.ui-modern .apariencia-barra-botones .btn{ flex:1 1 auto; }
}

/* --- las dos únicas animaciones en bucle de la pantalla de acceso ----------
   Dos aros giraban sin parar 24 y 18 segundos por vuelta. El punto que los
   recorría ya se quitó (se leía como suciedad), así que lo único que quedaba
   girando era un aro de un píxel al 4 % de opacidad: invisible, y con su capa
   de composición encendida para siempre. Los aros se quedan, quietos. */
body.login-redesign .login-orbit{ animation:none; }

/* ===========================================================================
   21 · ALTAS Y EDICIONES EN MODAL

   Mantenedores y Usuarios tenían el formulario pegado al costado derecho: la
   lista se quedaba con media pantalla y los campos con la otra media, en una
   sola columna y con el botón de guardar fuera de la vista. Ahora el alta sale
   en un modal centrado, con los campos repartidos en dos columnas: todo a la
   vista de una vez, que es como se rellena un formulario sin equivocarse.
   =========================================================================== */

/* La lista ocupa ya el ancho entero: no hay panel al costado. */
body.ui-modern .master-layout,
body.ui-modern .admin-grid{ grid-template-columns:minmax(0,1fr); }

body.ui-modern .master-modal .modal-dialog-form{
  width:min(860px, calc(100vw - 32px));
  max-width:860px;
  padding:0;
  overflow:hidden;
  display:flex; flex-direction:column; max-height:min(90vh, 900px);
}
body.ui-modern .master-modal .modal-head{
  padding:var(--n-e6) var(--n-e7) var(--n-e4);
  border-bottom:1px solid var(--n-linea);
  background:linear-gradient(180deg, var(--n-panel-2), transparent);
}
body.ui-modern .master-modal .modal-head h2{ margin:var(--n-e1) 0 0; }
body.ui-modern .master-modal .modal-head p{ margin:var(--n-e1) 0 0; color:var(--n-tinta-3); font-size:12.5px; }
body.ui-modern .master-modal .modal-body{ overflow:auto; padding-bottom:var(--n-e2); }

/* Los campos, en dos columnas. Lo que necesita ancho entero —el texto largo,
   las casillas, el botón— lo pide expresamente. */
body.ui-modern .master-modal .form-stack{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--n-e4) var(--n-e5);
  padding:var(--n-e6) var(--n-e7) var(--n-e7);
  align-items:start;
}
body.ui-modern .master-modal .form-stack > .field-hint,
body.ui-modern .master-modal .form-stack > .toggle-line,
body.ui-modern .master-modal .form-stack > .info-banner,
body.ui-modern .master-modal .form-stack > .form-grid,
body.ui-modern .master-modal .form-stack > .signature-field,
body.ui-modern .master-modal .form-stack > .btn,
body.ui-modern .master-modal .form-stack > button,
body.ui-modern .master-modal .form-stack > .field:has(textarea){ grid-column:1 / -1; }
body.ui-modern .master-modal .form-stack textarea{ min-height:84px; }
body.ui-modern .master-modal .form-stack .btn-block{ width:100%; }
/* El botón de guardar, siempre al final y despegado del último campo. */
body.ui-modern .master-modal .form-stack > button[type="submit"],
body.ui-modern .master-modal .form-stack > .btn-primary{ margin-top:var(--n-e2); }

body.ui-modern .master-solo-lectura{ margin-bottom:var(--n-e4); }

@media (max-width:760px){
  body.ui-modern .master-modal .form-stack{
    grid-template-columns:minmax(0,1fr);
    padding:var(--n-e5);
  }
  body.ui-modern .master-modal .modal-head{ padding:var(--n-e5) var(--n-e5) var(--n-e3); }
}

/* ===========================================================================
   22 · LA BARRA DE HERRAMIENTAS DE LA TABLA

   Estaba repartida en tres bloques separados a partes iguales, así que el
   botón de Filtros quedaba flotando solo en mitad de la barra, con un hueco a
   cada lado. Buscar y filtrar son la misma tarea: van juntos, a la izquierda.
   La leyenda del corte —que es una explicación, no un control— se va al
   extremo derecho.
   =========================================================================== */
body.ui-modern .table-toolbar{
  display:flex; align-items:center; gap:var(--n-e3);
  justify-content:flex-start; flex-wrap:wrap;
}
body.ui-modern .table-toolbar .search-control{ flex:1 1 260px; max-width:420px; min-width:0; }
body.ui-modern .table-toolbar .table-toolbar-actions{ flex:0 0 auto; gap:var(--n-e2); }
/* La leyenda se empuja hasta el borde y no compite por el espacio. */
body.ui-modern .table-toolbar .cutoff-legend{ margin-left:auto; flex:0 0 auto; }

/* El botón de Filtros, pegado al buscador y con su contador dentro. */
body.ui-modern .filter-drawer-trigger{ gap:var(--n-e2); }
body.ui-modern .filter-drawer-trigger span{
  display:inline-grid; place-items:center; min-width:19px; height:19px;
  padding:0 5px; border-radius:999px;
  background:var(--n-acento-solido); color:var(--n-acento-tinta);
  font-family:var(--n-mono); font-size:10.5px; font-weight:600;
}

@media (max-width:900px){
  body.ui-modern .table-toolbar{ flex-direction:column; align-items:stretch; }
  body.ui-modern .table-toolbar .search-control{ max-width:none; }
  body.ui-modern .table-toolbar .cutoff-legend{ margin-left:0; }
  body.ui-modern .table-toolbar .table-toolbar-actions .btn{ flex:1 1 auto; justify-content:center; }
}


/* ===========================================================================
   23 · LO QUE TODAVÍA NO ESTÁ

   Finanzas pide el TXT de pago masivo antes de que el TXT exista. En vez de
   esconder el botón hasta entonces, el botón está y dice la verdad: se abre
   una pantalla que explica qué va a hacer y qué falta para poder hacerlo. Un
   botón que no responde se siente como una avería; uno que contesta, no.

   La figura se dibuja con los mismos tokens que el resto del portal, así que
   acompaña a las dieciséis paletas y a los dos temas sin un solo color
   escrito a mano. El hueco donde encaja el engranaje es una MÁSCARA de SVG,
   no un círculo pintado del color del panel: así también vale cuando el
   material es cristal y el modal es translúcido.

   Los engranajes giran SOLO mientras el modal está abierto —la regla cuelga
   de .modal.show— y se paran con "reducir movimiento".
   =========================================================================== */
body.ui-modern .trabajo-modal{ text-align:center; }
body.ui-modern .trabajo-modal h2{
  margin:var(--n-e4) 0 var(--n-e2); font-size:22px; letter-spacing:-.01em;
}
body.ui-modern .trabajo-modal > p{ margin:0 auto; max-width:40ch; }
body.ui-modern .trabajo-modal .trabajo-lema{
  color:var(--n-acento); font-weight:600; margin-bottom:var(--n-e3);
}
body.ui-modern .trabajo-modal .modal-actions{
  justify-content:center; margin-top:var(--n-e5); padding-top:var(--n-e4);
}

body.ui-modern .trabajo-figura{ margin:0; }
body.ui-modern .trabajo-figura > svg{
  display:block; margin:0 auto; width:min(224px,66%); height:auto;
}

/* El apunte de abajo: alineado a la izquierda, porque es texto que se lee, no
   un rótulo que se mira. */
body.ui-modern .trabajo-modal .trabajo-nota{
  display:flex; align-items:flex-start; gap:var(--n-e2);
  max-width:none; margin-top:var(--n-e4); text-align:left;
  padding:var(--n-e3) var(--n-e4);
  background:var(--n-panel-2); border:1px solid var(--n-linea);
  border-radius:var(--n-r-2); color:var(--n-tinta-2);
  font-size:13.5px; line-height:1.55;
}
body.ui-modern .trabajo-modal .trabajo-nota > svg{ color:var(--n-acento); margin-top:2px; }
body.ui-modern .trabajo-modal .trabajo-nota b{ color:var(--n-tinta); font-weight:600; }

/* --- la figura ------------------------------------------------------------ */
body.ui-modern .t-hoja{ fill:var(--n-panel); stroke:var(--n-linea-2); stroke-width:1.8; }
body.ui-modern .t-hoja-2{ fill:var(--n-panel-2); stroke:var(--n-linea); stroke-width:1.6; }
body.ui-modern .t-chip{ fill:var(--n-acento-suave); }
body.ui-modern .t-chip-texto{
  fill:currentColor; color:var(--n-tinta);
  font-family:var(--n-mono); font-size:11px; font-weight:700; letter-spacing:.1em;
}
/* Las filas de recuadros no son decoración: son las columnas de ancho fijo de
   un TXT bancario, que es exactamente lo que el botón va a producir. */
body.ui-modern .t-cols rect{ fill:var(--n-linea-2); }
body.ui-modern .t-cols .t-clave{ fill:var(--n-acento); opacity:.3; }
body.ui-modern .t-diente,body.ui-modern .t-diente-2{
  fill:color-mix(in srgb, var(--n-acento) 12%, transparent);
  stroke:var(--n-acento); stroke-width:2.2;
}
body.ui-modern .t-diente-2{ stroke-width:1.9; opacity:.55; }
body.ui-modern .t-eje{ fill:none; stroke:var(--n-acento); stroke-width:2.2; }

@keyframes n-engrana{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
body.ui-modern .modal.show .t-diente{
  transform-box:fill-box; transform-origin:center;
  animation:n-engrana 16s linear infinite;
}
body.ui-modern .modal.show .t-diente-2{
  transform-box:fill-box; transform-origin:center;
  animation:n-engrana 11s linear infinite reverse;
}

@media (max-width:520px){
  body.ui-modern .trabajo-figura > svg{ width:min(190px,72%); }
  body.ui-modern .trabajo-modal .trabajo-nota{ padding:var(--n-e3); }
}

/* ===========================================================================
   24 · REPORTERÍA: UN SOLO CAMINO

   Había dos botones de exportar, uno al lado del otro, y obligaban a decidir
   el formato ANTES de mirar el reporte: Excel por un lado, PDF por otro, cada
   uno llevándose lo mismo. Ahora el camino es uno solo —filtra, elige las
   columnas, mira el resultado— y el formato se pregunta al final, que es
   cuando el usuario ya sabe para qué lo quiere.

   Los dos disparadores de siempre siguen existiendo, ocultos, y la pantalla
   de exportar los pulsa. Ni el motor de PDF ni la descarga de Excel se
   tocaron: lo que cambió es cuándo se pregunta, no cómo se genera.
   =========================================================================== */
.report-disparador{ display:none; }

body.ui-modern .reporte-exportar{ width:min(560px,calc(100vw - 32px)); }
body.ui-modern .reporte-exportar h2{ margin:var(--n-e3) 0 var(--n-e2); }

/* Lo que se lleva, antes de llevárselo. */
body.ui-modern .exportar-resumen{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:1px; margin:var(--n-e4) 0;
  background:var(--n-linea); border:1px solid var(--n-linea);
  border-radius:var(--n-r-2); overflow:hidden;
}
body.ui-modern .exportar-resumen > div{
  display:grid; gap:3px; padding:var(--n-e3); background:var(--n-panel-2);
}
body.ui-modern .exportar-resumen span{
  font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--n-tinta-3);
}
body.ui-modern .exportar-resumen strong{ font-size:13px; color:var(--n-tinta); }

/* Las tres salidas. Una fila en escritorio, una columna en el móvil. */
body.ui-modern .exportar-formatos{ display:grid; gap:var(--n-e2); }
body.ui-modern .exportar-formato{ position:relative; display:block; }
body.ui-modern .exportar-formato input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer;
}
body.ui-modern .exportar-formato > span{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  column-gap:var(--n-e3); row-gap:2px;
  padding:var(--n-e3) var(--n-e4); text-align:left;
  border:1px solid var(--n-linea-2); border-radius:var(--n-r-2);
  background:var(--n-panel); transition:all var(--n-medio) var(--n-curva);
}
body.ui-modern .exportar-formato i{
  grid-row:1 / span 2; display:grid; place-items:center;
  width:42px; height:42px; border-radius:var(--n-r-3, 12px);
  background:var(--n-acento-suave); color:var(--n-acento);
}
body.ui-modern .exportar-formato b{ font-size:14px; color:var(--n-tinta); }
body.ui-modern .exportar-formato small{ font-size:12px; color:var(--n-tinta-2); line-height:1.45; }
body.ui-modern .exportar-formato input:hover + span{ border-color:var(--n-acento); }
body.ui-modern .exportar-formato input:checked + span{
  border-color:var(--n-acento); background:var(--n-acento-suave);
  box-shadow:0 0 0 1px var(--n-acento) inset;
}
body.ui-modern .exportar-formato input:focus-visible + span{
  outline:2px solid var(--n-aqua-vivo); outline-offset:2px;
}

/* Marcar todas · limpiar · las de siempre. */
body.ui-modern .report-picker-tools{
  display:flex; flex-wrap:wrap; gap:var(--n-e2); margin:var(--n-e3) 0;
}

/* El aviso de cómo salen nombrados los comprobantes en el ZIP. */
body.ui-modern .zip-nombres{
  display:flex; align-items:flex-start; gap:var(--n-e3);
  margin:var(--n-e3) 0 0; padding:var(--n-e3) var(--n-e4);
  border:1px solid var(--n-linea); border-radius:var(--n-r-2);
  background:var(--n-panel-2); font-size:12.5px; line-height:1.55;
}
body.ui-modern .zip-nombres > svg{ color:var(--n-acento); margin-top:2px; }
body.ui-modern .zip-nombres strong{ display:block; color:var(--n-tinta); font-size:13px; margin-bottom:3px; }
body.ui-modern .zip-nombres span{ color:var(--n-tinta-2); }
body.ui-modern .zip-nombres b{ color:var(--n-tinta); font-weight:600; }
body.ui-modern .zip-nombres code{
  font-family:var(--n-mono); font-size:11.5px;
  padding:1px 5px; border-radius:6px;
  background:var(--n-panel-3); color:var(--n-tinta);
}

@media (max-width:620px){
  body.ui-modern .exportar-formato > span{ padding:var(--n-e3); }
  body.ui-modern .zip-nombres{ flex-direction:column; gap:var(--n-e2); }
}

/* ===========================================================================
   25 · APARIENCIA, LA DE CADA PERSONA

   Hasta ahora la apariencia era una decisión de empresa y punto. Ahora hay dos
   pantallas gemelas: la de Administración, que fija lo de todos, y la de cada
   persona, que solo se afecta a sí misma. Comparten casi todos los estilos —la
   rejilla de opciones, las muestras de color, la vista previa—; aquí van las
   cuatro piezas que son propias de esta pareja.
   =========================================================================== */
body.ui-modern .apariencia-rejilla-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* "Esto lo fija la empresa": se explica en vez de dejar un hueco donde antes
   había un control. Un hueco se lee como un fallo; una frase, no. */
body.ui-modern .apariencia-fijada{
  display:flex; align-items:flex-start; gap:var(--n-e3);
  padding:var(--n-e4); margin-bottom:var(--n-e5);
  border:1px solid var(--n-linea); border-radius:var(--n-r-2);
  background:var(--n-panel-2);
}
body.ui-modern .apariencia-fijada > svg{ color:var(--n-acento); margin-top:1px; flex:0 0 auto; }
body.ui-modern .apariencia-fijada > div{ display:grid; gap:3px; }
body.ui-modern .apariencia-fijada strong{ font-size:13.5px; color:var(--n-tinta); }
body.ui-modern .apariencia-fijada span{ font-size:12.5px; color:var(--n-tinta-2); line-height:1.55; }
body.ui-modern .apariencia-fijada b{ color:var(--n-tinta); font-weight:600; }

/* Forzar borra lo que eligió cada persona y no se puede deshacer. Va aparte de
   los dos interruptores y con el borde de aviso, porque no es lo mismo cambiar
   un permiso que pisarle la elección a quince personas. */
body.ui-modern .apariencia-forzar{
  display:flex; align-items:flex-start; gap:var(--n-e3);
  margin-top:var(--n-e3); padding:var(--n-e4); cursor:pointer;
  border:1px solid var(--n-mal); border-radius:var(--n-r-2);
  background:var(--n-mal-suave);
}
body.ui-modern .apariencia-forzar input[type="checkbox"]{
  width:17px; height:17px; margin-top:2px; flex:0 0 auto;
  accent-color:var(--n-mal); cursor:pointer;
}
body.ui-modern .apariencia-forzar span{ display:grid; gap:3px; }
body.ui-modern .apariencia-forzar strong{ font-size:13px; color:var(--n-mal); }
body.ui-modern .apariencia-forzar small{ font-size:11.5px; color:var(--n-tinta-2); line-height:1.5; }
body.ui-modern .apariencia-forzar b{ color:var(--n-tinta); font-weight:600; }

/* El atajo que queda en Mi perfil, donde antes estaba el selector entero. */
body.ui-modern .profile-apariencia .card-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--n-e4); flex-wrap:wrap; border-bottom:0;
}

@media (max-width:900px){
  body.ui-modern .apariencia-rejilla-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  body.ui-modern .apariencia-rejilla-4{ grid-template-columns:minmax(0,1fr); }
  body.ui-modern .apariencia-fijada{ flex-direction:column; gap:var(--n-e2); }
}

/* Los rótulos cortos en mayúsculas no se parten por la mitad.
   La hoja tiene overflow-wrap:anywhere para todo texto —hace falta para los
   nombres de proveedor largos, que si no desbordan la celda—, pero en una
   etiqueta de dos palabras produce "INC. DETRACCI / ÓN" en tres renglones.
   Estas son cortas y caben enteras: que busquen el hueco o bajen de línea,
   pero sin cortar la palabra. */
body.ui-modern .detraction-flag,
body.ui-modern .second-payment-flag,
body.ui-modern .observed-state,
body.ui-modern .apariencia-insignia,
body.ui-modern .status-badge,
body.ui-modern .nav-soon{ overflow-wrap:normal; word-break:normal; }

/* ===========================================================================
   26 · MEMORIA DE FILTROS
   Un distintivo discreto junto al botón de Filtros: avisa de que lo que se ve
   viene filtrado por lo que la persona eligió antes, no porque la bandeja esté
   vacía. Sin él, volver a una bandeja recordada parece una pérdida de datos.
   =========================================================================== */
body.ui-modern .filtros-memoria{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  border:1px dashed var(--n-linea-2);
  background:var(--n-panel-2); color:var(--n-tinta-2);
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  overflow-wrap:normal; word-break:normal; white-space:nowrap; cursor:default;
}
body.ui-modern .filtros-memoria svg{ opacity:.75; flex:none; }
@media (max-width:560px){ body.ui-modern .filtros-memoria{ display:none; } }

/* ===========================================================================
   27 · MODAL DEL TXT DE PAGOS
   Una fila por expediente: a quién se paga, cuánto va al archivo, y de qué
   color está. El color no viaja solo —cada estado lleva además su palabra
   escrita—, para que se entienda también sin distinguir verde de rojo.
   =========================================================================== */
body.ui-modern .txt-modal{ max-width:1080px; }
body.ui-modern .txt-leyenda{
  display:flex; flex-wrap:wrap; gap:var(--n-e2);
  margin:var(--n-e3) 0 var(--n-e2);
}
body.ui-modern .txt-estado{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-size:.74rem; font-weight:700; letter-spacing:.02em;
  border:1px solid transparent; white-space:nowrap;
  overflow-wrap:normal; word-break:normal;
}
body.ui-modern .txt-estado i{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
body.ui-modern .txt-estado.pagado   { background:var(--n-ok-suave);    color:var(--n-ok);    border-color:color-mix(in srgb, var(--n-ok) 30%, transparent); }
body.ui-modern .txt-estado.parcial  { background:var(--n-aviso-suave); color:var(--n-aviso); border-color:color-mix(in srgb, var(--n-aviso) 30%, transparent); }
body.ui-modern .txt-estado.sin_pagar{ background:var(--n-mal-suave);   color:var(--n-mal);   border-color:color-mix(in srgb, var(--n-mal) 30%, transparent); }

body.ui-modern .txt-lista{
  display:flex; flex-direction:column; gap:8px;
  max-height:46vh; overflow:auto; padding:2px;
  margin-bottom:var(--n-e3);
}
body.ui-modern .txt-fila{
  display:grid; align-items:center; gap:var(--n-e2);
  grid-template-columns:auto minmax(0,1.5fr) minmax(0,1.5fr) auto;
  padding:10px 14px; border-radius:var(--n-r);
  border:1px solid var(--n-linea);
  border-left:4px solid var(--n-linea-2);
  background:var(--n-panel);
  transition:border-color .15s ease, background .15s ease;
}
body.ui-modern .txt-fila.pagado   { border-left-color:var(--n-ok);    background:color-mix(in srgb, var(--n-ok) 5%, var(--n-panel)); }
body.ui-modern .txt-fila.parcial  { border-left-color:var(--n-aviso); background:color-mix(in srgb, var(--n-aviso) 6%, var(--n-panel)); }
body.ui-modern .txt-fila.sin_pagar{ border-left-color:var(--n-mal);   background:color-mix(in srgb, var(--n-mal) 5%, var(--n-panel)); }

body.ui-modern .txt-marca{ display:flex; align-items:center; cursor:pointer; }
body.ui-modern .txt-marca input{ width:17px; height:17px; accent-color:var(--n-acento); cursor:pointer; }
body.ui-modern .txt-marca i{ display:none; }

body.ui-modern .txt-quien{ display:flex; flex-direction:column; gap:1px; min-width:0; }
body.ui-modern .txt-quien strong{ font-family:var(--n-mono); font-size:.86rem; letter-spacing:.01em; }
body.ui-modern .txt-quien small{ color:var(--n-tinta-2); font-size:.78rem; }
body.ui-modern .txt-quien .txt-cuenta{ color:var(--n-tinta-3); font-family:var(--n-mono); font-size:.72rem; }
body.ui-modern .txt-sin-cuenta{ color:var(--n-mal); font-weight:700; font-family:var(--n-texto); }

body.ui-modern .txt-montos{ display:flex; flex-direction:column; gap:3px; min-width:0; }
body.ui-modern .txt-total{ color:var(--n-tinta-3); font-size:.76rem; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
body.ui-modern .txt-total b{ color:var(--n-tinta-2); font-weight:600; }
body.ui-modern .txt-pagar{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:.76rem; color:var(--n-tinta-3); }
body.ui-modern .txt-pagar b{ font-size:.95rem; color:var(--n-tinta); font-weight:700; }
body.ui-modern .txt-lapiz{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; padding:0; border-radius:8px; cursor:pointer;
  border:1px solid var(--n-linea); background:var(--n-panel-2); color:var(--n-tinta-2);
}
body.ui-modern .txt-lapiz:hover{ border-color:var(--n-acento); color:var(--n-acento); }
body.ui-modern .txt-anotado{
  font-style:normal; font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px;
  /* En tinta neutra, no en el color de marca: el naranja sobre su propio fondo
     claro se queda en 4.1 y la norma pide 4.5. Aquí no hace falta color. */
  background:var(--n-panel-3); color:var(--n-tinta-2);
  overflow-wrap:normal; word-break:normal;
}
/* Mismo motivo, en el recuento de seleccionados de los dos modales de Finanzas:
   el color de marca de algunas paletas no llega al mínimo sobre panel claro. */
body.ui-modern .manual-select-all strong{ color:var(--n-tinta); }
/* La barra de selección del TXT (8.2.6): el «Seleccionar todos» va en su
   propia etiqueta para que el botón «Desmarcar todos» no la active. */
body.ui-modern .txt-seleccion .txt-seleccion-todos{ display:flex; align-items:center; gap:10px; cursor:pointer; }
body.ui-modern .txt-seleccion .btn-sm{ padding:6px 11px; font-size:.75rem; }
body.ui-modern .txt-seleccion .btn-sm:disabled{ opacity:.5; cursor:default; }
/* [hidden] contra display:flex lo gana display:flex, así que el editor y el
   importe se esconden a mano: si no, cada fila enseñaría los dos a la vez. */
body.ui-modern .txt-pagar[hidden],
body.ui-modern .txt-editor[hidden]{ display:none; }
body.ui-modern .txt-editor{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
body.ui-modern .txt-editor label{ display:flex; flex-direction:column; gap:2px; }
body.ui-modern .txt-editor label span{ font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--n-tinta-3); }
body.ui-modern .txt-editor input{
  width:118px; padding:5px 8px; border-radius:9px;
  border:1px solid var(--n-linea-2); background:var(--n-panel); color:var(--n-tinta);
  font-family:var(--n-mono); font-size:.88rem;
}
body.ui-modern .txt-editor input:focus{ outline:2px solid var(--n-acento-halo); border-color:var(--n-acento); }
body.ui-modern .txt-editor .btn-sm{ padding:6px 11px; font-size:.75rem; align-self:flex-end; }
body.ui-modern .txt-editor small{ flex-basis:100%; color:var(--n-tinta-3); font-size:.7rem; }

body.ui-modern .txt-estado-celda{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right; }
body.ui-modern .txt-estado-celda small{ color:var(--n-tinta-3); font-size:.72rem; white-space:nowrap; }

body.ui-modern .txt-resumen{
  display:flex; justify-content:space-between; align-items:center; gap:var(--n-e2); flex-wrap:wrap;
  padding:11px 15px; border-radius:var(--n-r);
  background:var(--n-panel-2); border:1px solid var(--n-linea);
  font-size:.86rem; color:var(--n-tinta-2);
}
body.ui-modern .txt-resumen b{ color:var(--n-tinta); font-family:var(--n-mono); }
body.ui-modern .txt-resumen-vacio{ color:var(--n-tinta-3); }
body.ui-modern .txt-resumen-aviso{ color:var(--n-mal); font-weight:600; }

/* El TXT del BCP (8.2.5): cuenta de cargo, opciones del archivo y el aviso de
   lo que salió o de por qué no salió. */
body.ui-modern .txt-bcp{
  display:flex; flex-direction:column; gap:10px;
  margin-top:var(--n-e3); padding:12px 15px;
  border:1px solid var(--n-linea); border-radius:var(--n-r);
  background:var(--n-panel); font-size:.84rem; color:var(--n-tinta-2);
}
body.ui-modern .txt-bcp-cargo,
body.ui-modern .txt-bcp-opciones{ display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; }
body.ui-modern .txt-bcp-rotulo{
  font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--n-tinta-3);
}
body.ui-modern .txt-bcp-cargo b{ color:var(--n-tinta); font-family:var(--n-mono); font-weight:600; font-size:.8rem; }
body.ui-modern .txt-bcp-cargo b.txt-bcp-falta{ color:var(--n-mal); font-family:var(--n-texto); }
body.ui-modern .txt-bcp .btn-sm{ padding:6px 11px; font-size:.75rem; }
body.ui-modern .txt-bcp-form[hidden]{ display:none; }
body.ui-modern .txt-bcp-form{
  display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,150px) minmax(0,1fr); gap:8px 12px; align-items:end;
  padding:10px 12px; border-radius:var(--n-r); background:var(--n-panel-2); border:1px solid var(--n-linea);
}
body.ui-modern .txt-bcp-form .field{ margin:0; }
body.ui-modern .txt-bcp-form-acciones{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.ui-modern .txt-bcp-form-acciones small{ color:var(--n-tinta-3); font-size:.74rem; }
body.ui-modern .txt-bcp-opciones label{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--n-tinta); }
body.ui-modern .txt-bcp-opciones input[type="radio"],
body.ui-modern .txt-bcp-opciones input[type="checkbox"]{ accent-color:var(--n-acento); width:15px; height:15px; }
body.ui-modern .txt-bcp-opciones em{ font-style:normal; color:var(--n-tinta-3); font-family:var(--n-mono); font-size:.78rem; }
body.ui-modern .txt-bcp-fecha span{ color:var(--n-tinta-3); font-size:.78rem; }
body.ui-modern .txt-bcp-fecha input{
  padding:5px 8px; border:1px solid var(--n-linea-2); border-radius:8px;
  background:var(--n-panel); color:var(--n-tinta); font:inherit; font-size:.8rem;
}
body.ui-modern .txt-bcp-nota{ margin:0; color:var(--n-tinta-3); font-size:.76rem; line-height:1.5; }
body.ui-modern .txt-bcp-resultado[hidden]{ display:none; }
body.ui-modern .txt-bcp-resultado{
  padding:10px 13px; border-radius:var(--n-r); font-size:.82rem; line-height:1.5;
  border:1px solid var(--n-linea); background:var(--n-panel-2); color:var(--n-tinta-2);
}
body.ui-modern .txt-bcp-resultado b{ color:var(--n-tinta); }
body.ui-modern .txt-bcp-resultado.mal{ background:var(--n-mal-suave); border-color:color-mix(in srgb, var(--n-mal) 30%, transparent); color:var(--n-tinta); }
body.ui-modern .txt-bcp-resultado.mal b{ color:var(--n-mal); }
body.ui-modern .txt-bcp-resultado.bien{ background:var(--n-ok-suave); border-color:color-mix(in srgb, var(--n-ok) 30%, transparent); color:var(--n-tinta); }
body.ui-modern .txt-bcp-resultado.bien b{ color:var(--n-ok); }
body.ui-modern .txt-bcp-resultado ul{ margin:6px 0 0; padding-left:18px; }
body.ui-modern .txt-bcp-resultado li b{ font-family:var(--n-mono); color:var(--n-tinta); }
@media (max-width:820px){
  body.ui-modern .txt-bcp-form{ grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); }
}

@media (max-width:820px){
  body.ui-modern .txt-fila{ grid-template-columns:auto minmax(0,1fr); }
  body.ui-modern .txt-montos{ grid-column:2; }
  body.ui-modern .txt-estado-celda{ grid-column:2; align-items:flex-start; text-align:left; }
}

/* ===========================================================================
   28 · BARRA DE AVANCE DEL CARTEL DE ESPERA
   Para los trabajos que se pueden contar —armar el PDF unificado—. Un giro sin
   fin no dice si faltan dos segundos o treinta; esto sí, y de paso enseña por
   qué documento va.
   =========================================================================== */
body.ui-modern .loading-progress{
  display:flex; flex-direction:column; gap:5px;
  margin-top:10px; min-width:230px;
}
body.ui-modern .loading-progress[hidden]{ display:none; }
body.ui-modern .loading-progress-track{
  display:block; height:6px; border-radius:999px; overflow:hidden;
  background:var(--n-panel-3);
}
body.ui-modern .loading-progress-track i{
  display:block; height:100%; width:0;
  border-radius:999px; background:var(--n-acento-solido);
  transition:width .2s ease;
}
body.ui-modern .loading-progress b{
  font-family:var(--n-mono); font-size:.72rem; font-weight:600;
  color:var(--n-tinta-3); letter-spacing:.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ===========================================================================
   29 · COTIZACIONES · EL CUADRO COMPARATIVO
   Una columna por cotización y una fila por atributo, como el LOG-F-020 que
   Logística llena hoy en Excel. La primera columna se queda fija al desplazar
   en horizontal: sin eso, con seis cotizaciones se pierde de vista qué fila se
   está mirando.
   =========================================================================== */
/* La barra de la lista. El recuadro redondeado (.search-control) envuelve solo
   la lupa y el campo; el estado y los botones van fuera, a su lado. Metidos
   todos dentro, la caja se desbordaba y los botones salían por debajo. */
body.ui-modern .cot-busca{ display:flex; align-items:center; gap:var(--n-e2); flex-wrap:wrap; width:100%; }
body.ui-modern .cot-busca-campo{
  display:flex; align-items:center; gap:8px;
  flex:1 1 300px; min-width:0; max-width:460px;
  height:42px; padding:0 14px; cursor:text;
}
body.ui-modern .cot-busca-campo svg{ flex:none; color:var(--n-tinta-3); }
body.ui-modern .cot-busca-campo input[type="search"]{
  flex:1; min-width:0; height:100%;
  border:0; background:transparent; color:var(--n-tinta);
  font-size:.88rem; outline:none; padding:0;
}
body.ui-modern .cot-busca-estado{
  height:42px; padding:0 34px 0 12px; min-width:186px;
  border-radius:var(--n-r-2); border:1px solid var(--n-linea-2);
  background:var(--n-panel); color:var(--n-tinta); font-size:.86rem;
}
body.ui-modern .cot-busca .btn{ height:42px; }
body.ui-modern .cot-busca .filtros-memoria{ margin-left:auto; }
@media (max-width:720px){
  body.ui-modern .cot-busca-campo{ flex-basis:100%; max-width:none; }
  body.ui-modern .cot-busca-estado{ flex:1 1 150px; min-width:0; }
}
body.ui-modern .cot-me-toca{ background:color-mix(in srgb, var(--n-aviso) 7%, transparent); }
body.ui-modern .cot-activo{
  display:inline-block; margin-top:3px; padding:1px 7px; border-radius:999px;
  background:var(--n-panel-3); color:var(--n-tinta-2);
  font-size:.62rem; font-weight:700; letter-spacing:.06em;
  overflow-wrap:normal; word-break:normal;
}
body.ui-modern .cot-aviso,body.ui-modern .cot-observado{ display:flex; gap:var(--n-e3); align-items:flex-start; margin-bottom:var(--n-e3); }
body.ui-modern .cot-observado{ border-color:color-mix(in srgb, var(--n-mal) 40%, transparent); background:var(--n-mal-suave); }
body.ui-modern .cot-observado strong{ color:var(--n-mal); }

body.ui-modern .cot-herramientas{ display:flex; gap:var(--n-e2); flex-wrap:wrap; }
body.ui-modern .cot-sugeridas{ margin-bottom:var(--n-e3); }
body.ui-modern .cot-sugeridas summary{ cursor:pointer; font-weight:650; font-size:.85rem; color:var(--n-tinta-2); }
body.ui-modern .cot-sugeridas-cuerpo{ display:grid; gap:var(--n-e3); margin-top:var(--n-e2); }
body.ui-modern .cot-sugeridas-cuerpo>div{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
body.ui-modern .cot-sugeridas-cuerpo strong{ font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--n-tinta-3); min-width:150px; }
body.ui-modern .cot-chip{
  padding:4px 10px; border-radius:999px; cursor:pointer;
  border:1px dashed var(--n-linea-2); background:var(--n-panel-2); color:var(--n-tinta-2);
  font-size:.74rem; font-weight:600; overflow-wrap:normal; word-break:normal;
}
body.ui-modern .cot-chip:hover{ border-style:solid; border-color:var(--n-acento); color:var(--n-acento); }

/* Solo se desplaza en HORIZONTAL. Antes también en vertical, y con la
   cabecera pegada arriba la primera fila quedaba escondida debajo: parecía
   que la tabla estaba cortada. Ahora crece hacia abajo y la página entera es
   la que se desplaza, que es lo que uno espera. */
body.ui-modern .cot-wrap{ overflow-x:auto; overflow-y:visible; }
body.ui-modern .cot-tabla{ min-width:100%; border-collapse:separate; border-spacing:0; }
body.ui-modern .cot-tabla th,body.ui-modern .cot-tabla td{ border-bottom:1px solid var(--n-linea); padding:8px 10px; vertical-align:middle; }
body.ui-modern .cot-tabla thead th{ background:var(--n-panel-2); border-bottom:1px solid var(--n-linea-2); }
body.ui-modern .cot-tabla .cot-eje{
  position:sticky; left:0; z-index:2; background:var(--n-panel-2);
  text-align:left; font-weight:650; font-size:.78rem; color:var(--n-tinta-2);
  min-width:170px; max-width:230px;
  border-right:1px solid var(--n-linea-2);
}
body.ui-modern .cot-tabla thead .cot-eje{ z-index:3; text-transform:uppercase; letter-spacing:.04em; }
body.ui-modern .cot-col-cab{ display:flex; align-items:center; gap:6px; justify-content:center; }
body.ui-modern .cot-col-cab b{ font-family:var(--n-mono); font-size:.8rem; }
body.ui-modern .cot-elegida{
  font-style:normal; padding:2px 7px; border-radius:999px;
  background:var(--n-ok-suave); color:var(--n-ok);
  font-size:.6rem; font-weight:700; letter-spacing:.05em;
  overflow-wrap:normal; word-break:normal;
}
body.ui-modern .cot-tabla td{ text-align:center; }
body.ui-modern .cot-tabla td input{
  width:100%; min-width:110px; padding:6px 8px; border-radius:8px;
  border:1px solid var(--n-linea); background:var(--n-panel); color:var(--n-tinta);
  font-size:.82rem; text-align:center;
}

/* ------------------------------------------------- la primera celda de la fila
   Rótulo a la izquierda y los mandos a la derecha, SIEMPRE en una línea. Antes
   el botón de quitar caía debajo del nombre y esa fila salía del doble de alto
   que las demás. Los mandos solo se ven al pasar por encima o al enfocar: la
   tabla se lee limpia y aparecen cuando hacen falta. */
/* Todas las filas, la misma altura. La añadida lleva un campo distinto y en
   consulta el precio con IGV sale como texto, así que sin esto salían tres
   píxeles más bajas y la tabla se veía descuadrada. */
body.ui-modern .cot-tabla tbody tr{ height:52px; }
body.ui-modern .cot-tabla [data-cot-igv]{ display:inline-flex; align-items:center; min-height:31px; }
body.ui-modern .cot-eje-fila{ display:flex; align-items:center; gap:6px; min-height:31px; }
body.ui-modern .cot-eje-texto{ flex:1; min-width:0; }
body.ui-modern .cot-rotulo{
  flex:1; min-width:0; width:100%; padding:6px 8px; border-radius:8px;
  border:1px solid var(--n-linea); background:var(--n-panel); color:var(--n-tinta);
  font-size:.82rem; font-weight:650; text-align:left;
}
body.ui-modern .cot-rotulo:focus{ outline:2px solid var(--n-acento-halo); border-color:var(--n-acento); }
body.ui-modern .cot-eje-mandos{
  display:flex; align-items:center; gap:2px; flex:none;
  opacity:0; transition:opacity .14s ease;
}
body.ui-modern .cot-eje:hover .cot-eje-mandos,
body.ui-modern .cot-eje-fila:focus-within .cot-eje-mandos{ opacity:1; }
body.ui-modern .cot-mando{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; padding:0; border-radius:5px; cursor:pointer;
  border:1px solid transparent; background:transparent; color:var(--n-tinta-3);
  font-size:.62rem; line-height:1;
}
body.ui-modern .cot-mando:hover{ background:var(--n-panel-3); color:var(--n-tinta); border-color:var(--n-linea-2); }
body.ui-modern .cot-mando:disabled{ opacity:.25; cursor:default; }
body.ui-modern .cot-mando:disabled:hover{ background:transparent; color:var(--n-tinta-3); border-color:transparent; }
body.ui-modern .cot-mando-quitar{ font-size:.9rem; }
body.ui-modern .cot-mando-quitar:hover{ background:var(--n-mal-suave); color:var(--n-mal); border-color:color-mix(in srgb, var(--n-mal) 35%, transparent); }
/* La fila que se acaba de mover se señala un instante: si no, con la tabla
   larga no se ve adónde fue. */
body.ui-modern .cot-movida > .cot-eje,
body.ui-modern .cot-movida > td{ animation:cotMovida .7s ease; }
@keyframes cotMovida{ from{ background:var(--n-acento-suave); } to{ background:inherit; } }
body.ui-modern .cot-tabla td input:focus,body.ui-modern .cot-rotulo:focus{ outline:2px solid var(--n-acento-halo); border-color:var(--n-acento); }
body.ui-modern .cot-tabla [data-cot-igv]{ font-family:var(--n-mono); font-size:.84rem; color:var(--n-tinta); }
body.ui-modern .cot-tabla tfoot td,body.ui-modern .cot-tabla tfoot th{ background:var(--n-panel-2); }
body.ui-modern .cot-col-cab .cot-mando{ opacity:0; }
body.ui-modern .cot-tabla thead th:hover .cot-mando{ opacity:1; }
body.ui-modern .cot-pista{ margin-top:var(--n-e2); }

/* Los PDF de las cotizaciones: una tarjeta por cotización. Antes era una fila
   con el campo de archivo crudo del navegador y un botón Guardar; se veía como
   un formulario de 1998 y no se podía quitar un archivo mal subido. */
body.ui-modern .cot-pdf-lista{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:var(--n-e3); }
body.ui-modern .cot-pdf{
  display:grid; gap:var(--n-e2); padding:13px 15px;
  border:1px solid var(--n-linea); border-radius:var(--n-r); background:var(--n-panel-2);
}
body.ui-modern .cot-pdf-vacio{ border-style:dashed; }
body.ui-modern .cot-pdf-cab{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.ui-modern .cot-pdf-cab strong{ font-family:var(--n-mono); font-size:.82rem; }
body.ui-modern .cot-pdf-prov{ font-size:.8rem; color:var(--n-tinta-2); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.ui-modern .cot-pdf-ok{
  font-style:normal; display:inline-flex; align-items:center; gap:3px; flex:none;
  padding:2px 7px; border-radius:999px; background:var(--n-ok-suave); color:var(--n-ok);
  font-size:.6rem; font-weight:700; letter-spacing:.04em;
}

/* La ficha del archivo ya cargado. */
body.ui-modern .cot-pdf-ficha{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; }
body.ui-modern .cot-pdf-tipo{ display:grid; place-items:center; flex:none; }
body.ui-modern .icono-archivo{ display:block; }
/* La hoja es blanca por dentro. En tema oscuro eso deslumbra, así que se baja
   un punto: sigue leyéndose como papel, sin quemar. */
:root[data-theme="dark"] body.ui-modern .icono-archivo{ opacity:.92; }
body.ui-modern .cot-pdf-datos{ min-width:0; display:grid; gap:1px; }
body.ui-modern .cot-pdf-datos b{ font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.ui-modern .cot-pdf-datos small{ font-size:.74rem; color:var(--n-tinta-2); }
body.ui-modern .cot-pdf-mandos{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
body.ui-modern .cot-pdf-mandos .btn{ flex:none; }
body.ui-modern .cot-pdf-quitar{ display:inline-flex; margin:0; }
/* Un <label> no es un botón: sin esto no se alinea con los de al lado. */
body.ui-modern .cot-pdf-cambiar{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; margin:0; }

/* La zona de subida, cuando todavía no hay archivo. */
body.ui-modern .cot-pdf-zona{
  display:flex; align-items:center; gap:11px; cursor:pointer; margin:0;
  padding:13px 15px; border:1px dashed var(--n-linea-2); border-radius:var(--n-r);
  background:var(--n-panel); transition:border-color .14s ease, background .14s ease;
}
body.ui-modern .cot-pdf-zona:hover{ border-color:var(--n-acento); background:var(--n-acento-suave); }
body.ui-modern .cot-pdf-zona:focus-within{ outline:2px solid var(--n-acento-halo); border-color:var(--n-acento); }
body.ui-modern .cot-pdf-zona-icono{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--n-panel-3); color:var(--n-tinta-2); flex:none; }
body.ui-modern .cot-pdf-zona-texto{ display:grid; gap:1px; }
body.ui-modern .cot-pdf-zona-texto b{ font-size:.86rem; }
body.ui-modern .cot-pdf-zona-texto small{ font-size:.74rem; color:var(--n-tinta-3); }
body.ui-modern .cot-pdf-falta{ display:flex; align-items:center; gap:6px; margin:0; font-size:.84rem; color:var(--n-tinta-3); }

body.ui-modern .cot-elegir{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--n-e2); margin-bottom:var(--n-e3); }
body.ui-modern .cot-opcion{ display:flex; flex-direction:column; gap:2px; text-align:left; }
body.ui-modern .cot-opcion b{ font-family:var(--n-mono); color:var(--n-acento); }
body.ui-modern .cot-acciones{ justify-content:flex-end; }
body.ui-modern .cot-decision{ border-color:color-mix(in srgb, var(--n-aviso) 40%, transparent); }

body.ui-modern .cot-firmas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--n-e3); }
body.ui-modern .cot-firma{
  display:flex; flex-direction:column; gap:3px;
  padding:14px; border-radius:var(--n-r);
  border:1px dashed var(--n-linea-2); background:var(--n-panel-2);
}
body.ui-modern .cot-firma.hecha{ border-style:solid; border-color:color-mix(in srgb, var(--n-ok) 40%, transparent); background:color-mix(in srgb, var(--n-ok) 6%, var(--n-panel-2)); }
body.ui-modern .cot-firma small{ color:var(--n-tinta-3); }
body.ui-modern .cot-formato{
  display:flex; gap:var(--n-e3); justify-content:flex-end;
  margin:var(--n-e3) 0 var(--n-e6); padding-right:4px;
  font-family:var(--n-mono); font-size:.7rem; color:var(--n-tinta-3);
}
body.ui-modern .cot-formato span{ padding:2px 9px; border:1px solid var(--n-linea); border-radius:6px; background:var(--n-panel-2); }

@media (max-width:760px){
  body.ui-modern .cot-tabla .cot-eje{ min-width:130px; }
  body.ui-modern .cot-sugeridas-cuerpo strong{ min-width:100%; }
}

/* La cotización relacionada con un expediente: una ficha en la pestaña de
   documentos, con el botón de consulta que abre solo ESE cuadro. */
body.ui-modern .cot-relacion-cuerpo{ display:flex; align-items:center; justify-content:space-between; gap:var(--n-e3); flex-wrap:wrap; }
body.ui-modern .cot-relacion-ficha{ display:flex; flex-direction:column; gap:2px; min-width:0; }
body.ui-modern .cot-relacion-ficha strong{ font-family:var(--n-mono); font-size:.9rem; }
body.ui-modern .cot-relacion-ficha small{ color:var(--n-tinta-3); }
body.ui-modern .cot-relacion-acciones{ display:flex; align-items:center; gap:var(--n-e2); }
body.ui-modern .cot-relacion-form{ display:flex; align-items:flex-end; gap:var(--n-e2); flex-wrap:wrap; }
body.ui-modern .cot-relacion-form .field{ min-width:230px; }

/* ===========================================================================
   30 · CUENTAS DE BANCO DEL PROVEEDOR
   Cada cuenta se puede corregir en su sitio: el lápiz abre el formulario ya
   relleno, debajo de la propia fila. Antes solo se podía agregar, así que una
   cuenta mal escrita había que desactivarla y volver a crearla.
   =========================================================================== */
body.ui-modern .supplier-account{ align-items:flex-start; flex-wrap:wrap; }
body.ui-modern .cuenta-ficha{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 220px; }
body.ui-modern .cuenta-ficha span{ font-family:var(--n-mono); font-size:.86rem; color:var(--n-tinta); }
body.ui-modern .cuenta-ficha small{ color:var(--n-tinta-3); font-size:.74rem; }
/* El CCI corto se señala aquí y no el día del pago: con otra cosa que no sean
   20 dígitos, el banco rechaza el archivo entero.
   Va con el mismo peso que la regla de arriba (.cuenta-ficha small) o pierde
   contra ella y el aviso sale en gris, que es justo lo que no se quiere. */
body.ui-modern .cuenta-ficha small.cuenta-aviso{ color:var(--n-mal); font-weight:650; }
body.ui-modern .cuenta-mandos{ display:flex; align-items:center; gap:var(--n-e2); flex:none; }
body.ui-modern .cuenta-editar{ position:relative; }
body.ui-modern .cuenta-editar>summary{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer; list-style:none;
  padding:5px 11px; border-radius:999px;
  border:1px solid var(--n-linea-2); background:var(--n-panel);
  color:var(--n-tinta-2); font-size:.76rem; font-weight:650;
  overflow-wrap:normal; word-break:normal; white-space:nowrap;
}
body.ui-modern .cuenta-editar>summary::-webkit-details-marker{ display:none; }
body.ui-modern .cuenta-editar>summary:hover{ border-color:var(--n-acento); color:var(--n-acento); }
body.ui-modern .cuenta-editar[open]>summary{ background:var(--n-acento-suave); border-color:var(--n-acento); color:var(--n-acento-2); }
body.ui-modern .cuenta-form{
  margin-top:var(--n-e2); padding:var(--n-e3);
  border:1px solid var(--n-linea-2); border-radius:var(--n-r);
  background:var(--n-panel-2);
}
/* El formulario ocupa el ancho de la fila entera, no el del botón. */
body.ui-modern .supplier-account:has(.cuenta-editar[open]) .cuenta-mandos{ flex:1 1 100%; flex-direction:column; align-items:stretch; }
body.ui-modern .supplier-account:has(.cuenta-editar[open]) .cuenta-editar>summary{ align-self:flex-start; }

/* ===========================================================================
   31 · LA COTIZACIÓN QUE SE RECOMIENDA
   El ejecutor marca cuál recomienda, y quien revisa y quien aprueba tienen que
   verlo sin buscarlo: sale en la cabecera de la columna, en un aviso arriba del
   formulario de firma, y señalada entre los botones de aprobar.
   =========================================================================== */
body.ui-modern .cot-sugerida-marca{
  font-style:normal; padding:2px 7px; border-radius:999px;
  background:var(--n-acento-suave); color:var(--n-acento);
  font-size:.6rem; font-weight:700; letter-spacing:.05em;
  overflow-wrap:normal; word-break:normal; white-space:nowrap;
}
body.ui-modern .cot-opcion strong .cot-sugerida-marca{ margin-left:6px; font-size:.55rem; padding:1px 6px; }
body.ui-modern .cot-recomendar{ margin-bottom:6px; }
/* En consulta los botones no se pueden tocar, pero el marcado sigue viéndose. */
body.ui-modern .cot-opcion-fija{ cursor:default; }
body.ui-modern .cot-opcion-fija:hover{ border-color:var(--n-linea); }
body.ui-modern .cot-opcion-rec{ border-color:color-mix(in srgb, var(--n-acento) 45%, var(--n-linea)); }
body.ui-modern .cot-pista-campo{ display:block; margin:4px 0 var(--n-e3); color:var(--n-tinta-3); font-size:.76rem; }

/* El aviso que ven el revisor y el aprobador, arriba del formulario. */
body.ui-modern .cot-recomendacion-aviso{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  padding:11px 14px; margin-bottom:var(--n-e3);
  border:1px solid color-mix(in srgb, var(--n-acento) 30%, var(--n-linea));
  border-left:3px solid var(--n-acento);
  border-radius:var(--n-r); background:var(--n-acento-suave);
}
body.ui-modern .cot-rec-quien{
  font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--n-tinta-2);
}
body.ui-modern .cot-recomendacion-aviso strong{ font-family:var(--n-mono); font-size:.9rem; color:var(--n-tinta); }
body.ui-modern .cot-rec-prov{ font-size:.84rem; color:var(--n-tinta-2); }
body.ui-modern .cot-recomendacion-aviso > b{ font-family:var(--n-mono); font-size:.88rem; color:var(--n-acento); }
body.ui-modern .cot-recomendacion-aviso em{ font-size:.84rem; color:var(--n-tinta-3); }
body.ui-modern .cot-recomendacion-aviso p{
  flex:1 0 100%; margin:2px 0 0; font-size:.86rem; line-height:1.5; color:var(--n-tinta);
}

/* Cuando un botón queda marcado, su fondo pasa a --n-acento-suave. El precio y
   el proveedor iban en color de marca, y marca sobre marca teñida no se lee:
   medido, caía a 3.7–4.4 en nueve de las dieciocho paletas. Sobre esa superficie
   va tinta neutra, que es lo único que aguanta las dieciocho. */
body.ui-modern .cot-opcion small{ color:var(--n-tinta-2); }
body.ui-modern .cot-opcion:has(input:checked) small{ color:var(--n-tinta); }
body.ui-modern .cot-opcion:has(input:checked) b{ color:var(--n-tinta); }
/* La misma razón para el distintivo: el pill se queda teñido, la letra no. */
body.ui-modern .cot-sugerida-marca{ color:var(--n-tinta); }

/* La barra de guardar y el estado «elegido pero sin guardar». */
body.ui-modern .cot-pdf-barra{
  display:flex; align-items:center; justify-content:space-between; gap:var(--n-e3); flex-wrap:wrap;
  padding:12px 16px; border-top:1px solid var(--n-linea); background:var(--n-panel-2);
  border-radius:0 0 var(--n-r) var(--n-r);
}
body.ui-modern .cot-pdf-barra small{ color:var(--n-tinta-2); }
body.ui-modern .cot-pdf-barra-botones{ display:flex; gap:var(--n-e2); flex-wrap:wrap; }
body.ui-modern .cot-pdf-encola{ border-color:var(--n-acento); background:var(--n-acento-suave); border-style:solid; }
body.ui-modern .cot-pdf-pend{
  font-style:normal; flex:none; padding:2px 7px; border-radius:999px;
  background:var(--n-aviso-suave); color:var(--n-tinta);
  font-size:.6rem; font-weight:700; letter-spacing:.04em;
}
/* La zona de subida es un <button>, no un <label>: hay que quitarle el aspecto
   de botón del navegador para que siga leyéndose como una zona para soltar. */
body.ui-modern button.cot-pdf-zona{ width:100%; text-align:left; font:inherit; color:inherit; }

/* ============================================================
   32 · EL AVISO DE MANDAR UN LEGAJO SIN DOCUMENTOS (Anticipo)
   ------------------------------------------------------------
   El circulo del modal en ambar: ni verde (esto no es un exito)
   ni rojo (no es un error, es una decision que se asume). Va con
   body.ui-modern porque la regla base de .modal-icon ya usa ese
   prefijo y sin el pierde por especificidad.
   La tinta es --n-tinta, NO --n-aviso: texto del color de marca
   sobre fondo tenido del mismo color no llega al contraste en
   buena parte de las paletas. El color se queda en el icono y en
   el borde, donde no hay que leer nada.
   ============================================================ */
body.ui-modern .modal-icon.aviso{
  background:var(--n-aviso-suave);
  color:var(--n-aviso);
  border-radius:var(--n-r-2);
}
.doc-aviso-lista{ display:grid; gap:14px; margin:4px 0 14px; }
.doc-aviso-fila{
  border:1px solid var(--n-linea); border-radius:var(--n-r-2);
  padding:13px 15px 4px; background:var(--n-panel-2);
}
.doc-aviso-fila>header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:9px;
}
.doc-aviso-fila>header strong{ font-size:14px; color:var(--n-tinta); }
.doc-aviso-falta{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--n-aviso-suave); color:var(--n-tinta);
  border:1px solid color-mix(in srgb, var(--n-aviso) 40%, transparent);
  border-radius:999px; padding:3px 11px 3px 8px;
  font-size:11px; font-weight:800; letter-spacing:.02em; white-space:nowrap;
}
.doc-aviso-falta svg{ color:var(--n-aviso); }
.doc-aviso-fila .field{ margin:0; }
.doc-aviso-fila textarea{ resize:vertical; min-height:52px; }

/* El motivo ya guardado, dentro de la ficha del legajo. Lo tiene que ver
   quien revisa y quien firma, no solo quien lo escribio. */
.doc-excusa{
  display:flex; gap:11px; align-items:flex-start;
  margin:0 0 14px; padding:12px 14px;
  background:var(--n-aviso-suave);
  border:1px solid color-mix(in srgb, var(--n-aviso) 35%, transparent);
  border-left:3px solid var(--n-aviso);
  border-radius:var(--n-r-2);
}
.doc-excusa>svg{ color:var(--n-aviso); flex:0 0 auto; margin-top:1px; }
.doc-excusa strong{ display:block; font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--n-tinta); }
.doc-excusa p{ margin:3px 0 0; font-size:14px; color:var(--n-tinta); }
/* Tinta PLENA, no --n-tinta-3: la linea de quien y cuando cae sobre el fondo
   ambar y con la tinta apagada se queda en 4.36-4.48 en siete paletas
   oscuras -medido-. La jerarquia la da el tamano, no el gris. */
.doc-excusa small{ display:block; margin-top:5px; font-size:11.5px; font-weight:600; color:var(--n-tinta); opacity:.85; }

/* El aviso de arriba, encima de las pestanas: el que firma entra por Resumen y
   el listado de legajos esta en Documentos. Si el aviso vive solo alla, firma
   sin haberlo leido. Ambar, no rojo: no es un error, es una decision asumida. */
.doc-excusa-aviso{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--n-aviso-suave);
  border:1px solid color-mix(in srgb, var(--n-aviso) 40%, transparent);
  border-left:4px solid var(--n-aviso);
  color:var(--n-tinta);
}
.doc-excusa-aviso>svg{ color:var(--n-aviso); flex:0 0 auto; margin-top:1px; }
.doc-excusa-aviso strong{ display:block; color:var(--n-tinta); }
.doc-excusa-aviso-lista{ margin:7px 0 6px; padding-left:19px; display:grid; gap:7px; }
.doc-excusa-aviso-lista li{ font-size:13.5px; color:var(--n-tinta); }
.doc-excusa-aviso-lista small{ display:block; color:var(--n-tinta); opacity:.85; font-weight:600; font-size:11.5px; margin-top:2px; }
.doc-excusa-aviso>div>small{ display:block; color:var(--n-tinta); opacity:.9; font-size:12px; }

/* El tercer estado del legajo: ni completo (seria mentira) ni "falta" (ya no
   bloquea). Ambar, el mismo color del aviso del motivo, para que se lean como
   la misma cosa. La tinta es --n-tinta, no --n-aviso: sobre fondo ambar el
   color de marca no llega al contraste en buena parte de las paletas. */
body.ui-modern .completion-mini.excusado,
.completion-mini.excusado{
  color:var(--n-tinta);
  background:var(--n-aviso-suave);
  border:1px solid color-mix(in srgb, var(--n-aviso) 40%, transparent);
}

/* ============================================================
   33 · SUSCRIPCIONES · vigencia y renovacion
   ------------------------------------------------------------
   Tres tonos: neutro (queda tiempo), ambar (urge, 7 dias o
   menos) y rojo (ya vencio). La tinta es siempre --n-tinta
   sobre los fondos tenidos: el color de marca sobre su propio
   tinte no llega al contraste en buena parte de las paletas.
   ============================================================ */
.sus-lista{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.sus-fila{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 14px; border:1px solid var(--n-linea); border-radius:var(--n-r-2);
  background:var(--n-panel-2);
}
.sus-fila a{ display:grid; gap:2px; min-width:0; }
.sus-fila strong{ font-size:14px; color:var(--n-tinta); }
.sus-fila small{ font-size:11.5px; color:var(--n-tinta-3); }
.sus-fila.urge{ border-left:3px solid var(--n-aviso); background:var(--n-aviso-suave); }
.sus-fila.urge small{ color:var(--n-tinta); opacity:.85; }
.sus-fila.vencida{ border-left:3px solid var(--n-mal); background:var(--n-mal-suave); }
.sus-fila.vencida small{ color:var(--n-tinta); opacity:.85; }

.sus-plazo{
  flex:0 0 auto; font-size:11px; font-weight:800; white-space:nowrap;
  padding:5px 11px; border-radius:999px;
  color:var(--n-tinta); background:var(--n-panel);
  border:1px solid var(--n-linea);
}
.sus-fila.urge .sus-plazo, .sus-plazo.urge{
  background:var(--n-aviso-suave); border-color:color-mix(in srgb, var(--n-aviso) 45%, transparent);
}
.sus-fila.vencida .sus-plazo, .sus-plazo.vencida{
  background:var(--n-mal-suave); border-color:color-mix(in srgb, var(--n-mal) 45%, transparent);
}

/* La vigencia dentro de la ficha del legajo. */
.sus-vigencia{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; color:var(--n-tinta);
  background:var(--n-panel-2); border:1px solid var(--n-linea);
  border-radius:999px; padding:5px 11px;
}
.sus-vigencia svg{ color:var(--n-tinta-3); }
.sus-vigencia.urge{ background:var(--n-aviso-suave); border-color:color-mix(in srgb, var(--n-aviso) 45%, transparent); }
.sus-vigencia.urge svg{ color:var(--n-aviso); }
.sus-vigencia.vencida{ background:var(--n-mal-suave); border-color:color-mix(in srgb, var(--n-mal) 45%, transparent); }
.sus-vigencia.vencida svg{ color:var(--n-mal); }

/* La marca de "entra manana a la 1 p.m." en la bandeja de Contabilidad.
   Discreta: es informacion, no una alarma. Tinta plena sobre el tinte, que
   el color de marca sobre su propio fondo no llega al contraste. */
.espera-corte{
  display:inline-flex; align-items:center; gap:5px; margin-top:4px;
  font-size:10.5px; font-weight:700; letter-spacing:.01em;
  color:var(--n-tinta); background:var(--n-aviso-suave);
  border:1px solid color-mix(in srgb, var(--n-aviso) 35%, transparent);
  border-radius:999px; padding:3px 9px;
}
.espera-corte svg{ color:var(--n-aviso); }

/* ============================================================
   34 · REPORTERIA · micro-pestañas de los filtros
   ------------------------------------------------------------
   Antes salian a la vez los 11 filtros, los 7 tipos de pago y
   las 27 columnas: cuarenta y cinco controles de golpe. Ahora
   se ve UNO de los tres grupos, y las pestañas llevan el
   contador de lo que hay puesto dentro, para saber que NO esta
   vacio sin tener que abrirlo.
   ============================================================ */
.rep-tabs{
  display:flex; gap:4px; flex-wrap:wrap;
  padding:4px; margin:0 0 16px;
  background:var(--n-panel-2); border:1px solid var(--n-linea);
  border-radius:var(--n-r-2);
}
.rep-tab{
  flex:1 1 auto; min-width:118px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:0; background:transparent; cursor:pointer;
  padding:9px 14px; border-radius:calc(var(--n-r-2) - 4px);
  font-size:12.5px; font-weight:700; color:var(--n-tinta-3);
  transition:background .14s ease, color .14s ease;
}
.rep-tab:hover{ color:var(--n-tinta); background:var(--n-panel); }
.rep-tab.is-on{
  background:var(--n-panel); color:var(--n-tinta);
  box-shadow:0 1px 3px rgba(0,0,0,.07);
}
.rep-badge{
  min-width:19px; padding:1px 6px; border-radius:999px;
  font-size:10.5px; font-weight:800; line-height:1.55;
  background:var(--n-acento-suave); color:var(--n-tinta);
}
/* El contador de la pestaña activa NO va en blanco sobre --n-acento: el
   color de marca es un tono medio en buena parte de las paletas y el blanco
   encima se queda en 3.5 de contraste -medido en 17 de las 108 pantallas-.
   Se queda con la misma tinta que el resto; lo que distingue la pestaña
   activa es su fondo, que ya se ve de sobra. */
.rep-tab.is-on .rep-badge{
  background:var(--n-acento-suave); color:var(--n-tinta);
  border:1px solid color-mix(in srgb, var(--n-acento) 40%, transparent);
}

.rep-panel{ display:none; }
.rep-panel.is-on{ display:block; animation:repAparece .16s ease; }
@keyframes repAparece{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }

/* Dentro de la pestaña, el bloque de columnas ya no necesita su marco. */
.rep-panel .report-columns-details{ border:0; padding:0; background:transparent; }
.rep-ayuda{ margin:0 0 12px; font-size:12px; color:var(--n-tinta-3); }
.rep-panel .report-type-strip{ border:0; padding:0; background:transparent; }

@media (max-width:640px){
  .rep-tab{ min-width:0; flex:1 1 0; padding:9px 8px; font-size:11.5px; }
}

/* ============================================================
   35 · LA BARRA DE BUSQUEDA EN EL MOVIL
   ------------------------------------------------------------
   Se veia como una caja enorme medio vacia con el campo flotando
   dentro: la barra heredaba align-items:center de la version de
   escritorio, asi que al apilarse en columna no se estiraba, y
   los botones de al lado abrian un hueco.
   Y la letra del campo era de 15px: por DEBAJO de 16 el navegador
   del movil hace zoom solo al tocarlo, y la pantalla se va de
   sitio. Con 16 no pasa. Se nota sobre todo en iPhone.
   ============================================================ */
@media (max-width:640px){
  body.ui-modern .table-toolbar{
    flex-direction:column; align-items:stretch;
    padding:12px; gap:10px;
  }
  /* El selector lleva .table-toolbar A PROPOSITO: la regla de escritorio es
     "body.ui-modern .table-toolbar .search-control", y sin esa clase la mia
     pierde por especificidad y el flex-basis de 260px sigue mandando. */
  body.ui-modern .table-toolbar .search-control,
  body.ui-modern .search-control{
    /* flex:0 0 auto ES EL ARREGLO DE VERDAD. La regla de escritorio dice
       flex:1 1 260px, y esos 260px son el ANCHO mientras la barra va en
       horizontal; al apilarse en columna en el movil pasan a ser el ALTO, y
       el buscador salia como una caja de 260px con el campo flotando en
       medio. flex-basis manda sobre height en un elemento flexible, asi que
       poner height solo no bastaba. */
    flex:0 0 auto;
    width:100%; min-width:0; max-width:none;
    height:46px; min-height:46px;
    border-radius:12px;
  }
  /* El campo llevaba SU PROPIO borde dentro del borde de la caja: el
     borde de body.ui-modern input[type=search] le gana por especificidad
     al border:0 de app.css. Se veia un recuadro dentro de otro. */
  body.ui-modern .table-toolbar .search-control input,
  body.ui-modern .search-control input{
    border:0; background:transparent; box-shadow:none;
    height:auto; min-height:0; padding:0;
    border-radius:0;
  }
  body.ui-modern .search-control input{
    font-size:16px;          /* no menos: por debajo, el movil hace zoom al enfocar */
    line-height:1.2;
  }
  body.ui-modern .search-control svg{ flex:0 0 auto; }
  body.ui-modern .table-toolbar-actions{
    width:100%; display:flex; gap:8px;
  }
  body.ui-modern .table-toolbar-actions .btn{
    flex:1 1 0; justify-content:center; min-width:0;
    padding-left:12px; padding-right:12px;
  }
  /* El cajon de filtros y sus pestañas, tambien a lo ancho. */
  body.ui-modern .rep-tabs{ gap:3px; padding:3px; }
}

/* El campo del buscador NUNCA lleva borde propio: el borde es el de la caja
   que lo envuelve. Vale para movil y para escritorio; en escritorio pasaba
   igual, solo que con la caja mas ancha se notaba menos. */
body.ui-modern .search-control input,
body.ui-modern .search-box input{
  border:0; background:transparent; box-shadow:none;
  border-radius:0; min-height:0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   36 · LA BANDEJA POR PÁGINAS
   Pie de la tabla: cuántos hay, los botones de página y el «por página».
   En móvil se apila y los botones crecen para poder tocarlos con el pulgar.
   ═══════════════════════════════════════════════════════════════════════════ */
body.ui-modern .table-pie{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 18px; border-top:1px solid var(--n-linea);
}
/* El ayudante flotante vive en la esquina de abajo a la derecha y mide unos
   130 px. Sin este hueco se comía el selector de «por página», que es justo lo
   que queda en esa esquina. Se reserva solo en pantalla ancha: en el móvil el
   pie se apila y el ayudante queda por debajo. */
@media (min-width:761px){
  body.ui-modern .table-pie{ padding-right:146px; }
}
body.ui-modern .table-pie-cuenta{ font-size:12.5px; color:var(--n-tinta-2); }
body.ui-modern .table-pie-cuenta b{ color:var(--n-tinta); }
body.ui-modern .pager{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
/* DOS COSAS QUE SE APRENDIERON AQUI A GOLPES:
   · La tinta es --n-tinta, la principal, y NO --n-tinta-2: con la secundaria,
     en la paleta turquesa oscura el numero se quedaba en 1.87 de contraste.
   · Y los nombres de los colores son los del sistema (--n-panel, --n-linea).
     Me invente --n-superficie y --n-borde, que NO EXISTEN; una variable que no
     existe no da error, simplemente no pinta nada, y el boton se quedaba sin
     fondo: tinta oscura sobre pagina oscura, 1.02 de contraste. Antes de usar
     un color, comprobar que el nombre esta en el sistema. */
body.ui-modern .pager-num,
body.ui-modern .pager-paso{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 9px; border-radius:9px;
  border:1px solid var(--n-linea); background:var(--n-panel-2);
  color:var(--n-tinta); font-size:13px; font-weight:600; text-decoration:none;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
body.ui-modern .pager-num:hover,
body.ui-modern .pager-paso:hover{ background:var(--n-acento-suave); color:var(--n-tinta); border-color:var(--n-acento); }
/* La página actual: fondo tenue y tinta normal. En blanco sobre el color de
   marca el contraste se caía por debajo de 4.5 en buena parte de las paletas. */
body.ui-modern .pager-num.is-on{
  background:var(--n-acento-suave); border-color:var(--n-acento); color:var(--n-tinta); cursor:default;
}
body.ui-modern .pager-paso.is-off{ opacity:.38; pointer-events:none; }
body.ui-modern .pager-hueco{ padding:0 2px; color:var(--n-tinta-3); font-size:13px; }
body.ui-modern .table-pie-tamano{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--n-tinta-2); }
body.ui-modern .table-pie-tamano select{
  height:34px; padding:0 8px; border-radius:9px; border:1px solid var(--n-linea);
  background:var(--n-panel); color:var(--n-tinta); font-size:13px;
}
/* La X que quita la búsqueda, dentro de la propia barra. */
body.ui-modern .search-control .search-limpiar{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-right:6px; border-radius:50%;
  color:var(--n-tinta-3); text-decoration:none; font-size:19px; line-height:1;
}
body.ui-modern .search-control .search-limpiar:hover{ background:var(--n-panel-2); color:var(--n-tinta); }
@media (max-width:760px){
  body.ui-modern .table-pie{ flex-direction:column; align-items:stretch; gap:10px; }
  body.ui-modern .pager{ justify-content:center; }
  body.ui-modern .pager-num, body.ui-modern .pager-paso{ min-width:40px; height:40px; }
  body.ui-modern .table-pie-tamano{ justify-content:center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   37 · EL BUSCADOR DE PROVEEDOR Y LOS SÍMBOLOS DE LA RUTA DE APROBACIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El panel de proveedores ──────────────────────────────────────────────
   Vive pegado al <body> y colocado con JS, no dentro del campo: si colgara
   del formulario, la tarjeta del legajo lo recortaría por abajo. */
body.ui-modern .prov-panel{
  position:absolute; z-index:900; overflow:auto; overscroll-behavior:contain;
  background:var(--n-panel); border:1px solid var(--n-linea-2); border-radius:14px;
  box-shadow:0 18px 44px rgba(18,25,38,.16), 0 2px 6px rgba(18,25,38,.06);
  padding:6px;
}
body.ui-modern .prov-op{
  display:grid; gap:1px; padding:9px 11px; border-radius:10px; cursor:pointer;
  scroll-margin:6px;
}
body.ui-modern .prov-op strong{ font-size:12.5px; font-weight:650; color:var(--n-tinta); line-height:1.3; }
body.ui-modern .prov-op small{ font-size:11px; color:var(--n-tinta-3); letter-spacing:.02em; }
/* Lo que coincide con lo escrito va marcado, para que se vea POR QUÉ salió. */
body.ui-modern .prov-op b{ color:var(--n-acento); font-weight:800; }
body.ui-modern .prov-op:hover{ background:var(--n-panel-2); }
/* El resaltado del teclado usa el acento suave con tinta normal: el acento a
   pelo con texto encima se queda corto de contraste en varias paletas. */
body.ui-modern .prov-op.is-on{ background:var(--n-acento-suave); }
body.ui-modern .prov-op.is-on small{ color:var(--n-tinta-2); }
body.ui-modern .prov-vacio{
  margin:0; padding:12px 12px 13px; display:grid; gap:3px;
  font-size:11.5px; line-height:1.5; color:var(--n-tinta-2);
}
body.ui-modern .prov-vacio b{ font-size:12.5px; color:var(--n-tinta); }
body.ui-modern .prov-mas{
  margin:4px 2px 2px; padding:7px 10px 2px; border-top:1px solid var(--n-linea);
  font-size:10.5px; color:var(--n-tinta-3);
}

/* ── Los símbolos de quién firma la OC ────────────────────────────────────
   Eran las iniciales sobre un cuadro casi negro; como la tinta en tema claro
   también es oscura, se veía un cuadrado negro y nada dentro. */
body.ui-modern .approver-avatar{
  width:45px; height:45px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--n-acento-suave); color:var(--n-acento);
  border:1px solid color-mix(in srgb, var(--n-acento) 26%, transparent);
}
body.ui-modern .approver-avatar svg{ width:23px; height:23px; }
/* Gerencia se distingue del resto: es la firma de más arriba. */
body.ui-modern .approver-avatar.general_management{
  background:var(--n-panel-2); color:var(--n-tinta);
  border-color:var(--n-linea-2);
}
body.ui-modern .approver-option:has(input:checked) .approver-avatar{
  background:var(--n-acento); color:var(--n-acento-tinta);
  border-color:transparent;
}
@media (max-width:760px){
  body.ui-modern .approver-avatar{ width:40px; height:40px; border-radius:12px; }
  body.ui-modern .approver-avatar svg{ width:20px; height:20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   38 · ÓRDENES DE COMPRA
   La OC se arma a la izquierda (datos, proveedor, ítems con su prorrateo) y a
   la derecha queda fija la vista previa: las líneas que va a imprimir la OC y
   sus totales, recalculados mientras se escribe. En pantallas estrechas la
   vista previa baja debajo de los ítems.
   Solo colores del sistema: --n-panel, --n-linea, --n-tinta… (ver la nota de
   la sección 36 sobre los nombres que NO existen).
   ═══════════════════════════════════════════════════════════════════════════ */
body.ui-modern .oc-form fieldset{ border:0; margin:0; padding:0; min-width:0; }
body.ui-modern .oc-rejilla{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,380px); gap:18px; align-items:start;
}
body.ui-modern .oc-principal{ display:grid; gap:18px; min-width:0; }
body.ui-modern .oc-lateral{ position:sticky; top:84px; min-width:0; }
body.ui-modern .oc-bloque .card-header{ align-items:flex-start; flex-wrap:wrap; gap:10px; }
body.ui-modern .oc-nota{ margin:0; padding:0 22px 18px; font-size:12px; color:var(--n-tinta-2); }

/* El número de la OC, arriba a la derecha de «Datos de la OC». */
body.ui-modern .oc-numero-caja{
  display:grid; justify-items:end; gap:2px; text-align:right;
  padding:8px 12px; border:1px solid var(--n-linea); border-radius:12px; background:var(--n-panel-2);
}
body.ui-modern .oc-numero-caja small{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--n-tinta-3); }
body.ui-modern .oc-numero-caja strong{ font-family:var(--n-mono, ui-monospace, monospace); font-size:19px; letter-spacing:.04em; color:var(--n-tinta); white-space:nowrap; }
body.ui-modern .oc-numero-caja em{ font-style:normal; font-size:10.5px; color:var(--n-tinta-3); }

/* .form-grid sola NO es una rejilla en este diseño (solo .form-grid.two lo
   es): por eso cada rejilla de la OC dice aquí su display y su separación. */
body.ui-modern .oc-cabecera,
body.ui-modern .oc-proveedor,
body.ui-modern .oc-item-campos{ display:grid; gap:14px 16px; align-items:start; }
body.ui-modern .oc-cabecera{ grid-template-columns:repeat(4,minmax(0,1fr)); }
body.ui-modern .oc-proveedor{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* ── Los ítems ────────────────────────────────────────────────────────────── */
body.ui-modern .oc-items{ display:grid; gap:14px; padding:0 18px 4px; }
body.ui-modern .oc-item{
  border:1px solid var(--n-linea); border-radius:14px; background:var(--n-panel);
  padding:12px 14px 14px; display:grid; gap:12px;
  transition:border-color .15s ease;
}
body.ui-modern .oc-item.is-mal{ border-color:color-mix(in srgb, var(--n-mal) 55%, var(--n-linea)); }
body.ui-modern .oc-item > header{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
body.ui-modern .oc-item-num{ font-size:12px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--n-tinta-2); }
body.ui-modern .oc-item-num b{ color:var(--n-tinta); }
body.ui-modern .oc-item-campos{ grid-template-columns:minmax(0,1fr) 200px; gap:12px; }
body.ui-modern .oc-item-campos .span-2{ grid-column:1 / -1; }
body.ui-modern .oc-item .field > span small{
  font-family:var(--n-texto); font-size:11px; font-weight:500; letter-spacing:0; text-transform:none;
  color:var(--n-tinta-3); margin-left:6px;
}
body.ui-modern .oc-cuenta-nombre{ display:block; min-height:16px; margin-top:4px; font-size:11.5px; color:var(--n-tinta-2); line-height:1.35; }
body.ui-modern .oc-cuenta-nombre.is-mal{ color:var(--n-mal); }
body.ui-modern .oc-cuenta-nombre a{ color:inherit; font-weight:650; }
body.ui-modern .oc-base{ display:block; min-height:16px; margin-top:4px; font-size:11.5px; color:var(--n-tinta-3); font-variant-numeric:tabular-nums; }
body.ui-modern .oc-items-pie{ padding:12px 18px 18px; }

/* ── El prorrateo: tres modos en un control segmentado ───────────────────── */
body.ui-modern .oc-prorrateo{
  display:grid; gap:10px; padding:12px; border-radius:12px;
  background:var(--n-panel-2); border:1px solid var(--n-linea);
}
body.ui-modern .oc-prorrateo-et{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--n-tinta-3); }
body.ui-modern .oc-segmento{
  display:inline-flex; gap:3px; max-width:100%;
  padding:3px; border-radius:11px; background:var(--n-panel); border:1px solid var(--n-linea); justify-self:start;
}
/* Cada opción mide lo que su texto: con tres columnas iguales, «Administrativo»
   no cabía en un tercio del móvil y se montaba sobre «Ventas». */
body.ui-modern .oc-segmento label{ position:relative; cursor:pointer; flex:1 1 auto; }
body.ui-modern .oc-segmento input{ position:absolute; opacity:0; pointer-events:none; }
body.ui-modern .oc-segmento span{
  display:block; padding:7px 14px; border-radius:8px; text-align:center; white-space:nowrap;
  font-size:12.5px; font-weight:600; color:var(--n-tinta-2);
  transition:background .12s ease, color .12s ease;
}
body.ui-modern .oc-segmento label:hover span{ color:var(--n-tinta); }
/* Elegido: acento suave con tinta normal (el acento a pelo con texto encima
   se queda corto de contraste en varias paletas). */
body.ui-modern .oc-segmento input:checked + span{ background:var(--n-acento-suave); color:var(--n-tinta); box-shadow:inset 0 0 0 1px var(--n-acento); }
body.ui-modern .oc-segmento input:focus-visible + span{ outline:2px solid var(--n-acento); outline-offset:1px; }
body.ui-modern [data-oc-panel][hidden]{ display:none !important; }
body.ui-modern .oc-modo-admin small,
body.ui-modern .oc-modo-sales small{ font-size:11.5px; color:var(--n-tinta-3); }
body.ui-modern .oc-reparto{ list-style:none; margin:0 0 6px; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
body.ui-modern .oc-reparto li{
  padding:4px 9px; border-radius:999px; border:1px solid var(--n-linea); background:var(--n-panel);
  font-size:11.5px; color:var(--n-tinta-2);
}
body.ui-modern .oc-reparto li b{ color:var(--n-tinta); font-variant-numeric:tabular-nums; }
body.ui-modern .oc-falta{ color:var(--n-mal) !important; font-weight:600; }
/* Ventas: una o varias especialidades, cada una una casilla. La marcada se
   rellena con el acento suave y enseña a la derecha la parte que le toca. */
body.ui-modern .oc-ventas-ayuda{ display:block; margin-bottom:8px; font-size:11.5px; color:var(--n-tinta-3); }
body.ui-modern .oc-ventas-lista{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
body.ui-modern .oc-ventas-op{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px;
  min-height:42px; padding:8px 12px; border-radius:10px; cursor:pointer;
  background:var(--n-panel); border:1px solid var(--n-linea);
  transition:background .12s ease, border-color .12s ease;
}
body.ui-modern .oc-ventas-op:hover{ border-color:var(--n-linea-2); }
body.ui-modern .oc-ventas-op input{ width:17px; height:17px; margin:0; accent-color:var(--n-acento); cursor:pointer; }
body.ui-modern .oc-ventas-op span{ font-size:12.5px; color:var(--n-tinta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.ui-modern .oc-ventas-op em{ font-style:normal; font-size:12px; font-weight:700; color:var(--n-tinta); font-variant-numeric:tabular-nums; }
body.ui-modern .oc-ventas-op.is-on{ background:var(--n-acento-suave); border-color:var(--n-acento); }
body.ui-modern .oc-ventas-op:has(input:focus-visible){ outline:2px solid var(--n-acento); outline-offset:1px; }
body.ui-modern [data-reparto-suma]{ font-size:12.5px; font-weight:650; color:var(--n-tinta-2); font-variant-numeric:tabular-nums; }
body.ui-modern [data-reparto-suma].is-ok{ color:var(--n-ok); }
body.ui-modern [data-reparto-suma].is-mal{ color:var(--n-mal); }

/* ── La vista previa ─────────────────────────────────────────────────────── */
body.ui-modern .oc-resumen .card-body{ display:grid; gap:12px; }
body.ui-modern .oc-lineas{ width:100%; border-collapse:collapse; font-size:12px; }
body.ui-modern .oc-lineas th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--n-tinta-3); padding:0 6px 6px; border-bottom:1px solid var(--n-linea);
}
body.ui-modern .oc-lineas td{ padding:6px; border-bottom:1px solid var(--n-linea); color:var(--n-tinta); vertical-align:top; }
body.ui-modern .oc-lineas .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
body.ui-modern .oc-lineas .oc-l-item td{
  background:var(--n-panel-2); font-size:11.5px; color:var(--n-tinta-2); padding-top:7px; padding-bottom:7px;
}
body.ui-modern .oc-lineas .oc-l-item b{ color:var(--n-tinta); }
body.ui-modern .oc-lineas .oc-l-item span{ color:var(--n-tinta-3); }
body.ui-modern .oc-lineas .oc-l-item em{ float:right; font-style:normal; font-variant-numeric:tabular-nums; color:var(--n-tinta-2); margin-left:8px; }
body.ui-modern .oc-vacio{ text-align:center; color:var(--n-tinta-3) !important; padding:18px 6px !important; }
body.ui-modern .oc-lineas-cuenta{ margin:-4px 0 0; font-size:11px; color:var(--n-tinta-3); }
body.ui-modern .oc-totales{ margin:0; display:grid; gap:6px; }
body.ui-modern .oc-totales div{ display:flex; justify-content:space-between; gap:10px; font-size:13px; }
body.ui-modern .oc-totales dt{ color:var(--n-tinta-2); }
body.ui-modern .oc-totales dd{ margin:0; font-variant-numeric:tabular-nums; color:var(--n-tinta); font-weight:600; }
body.ui-modern .oc-totales .oc-total{ padding-top:8px; margin-top:2px; border-top:1px solid var(--n-linea-2); font-size:16px; }
body.ui-modern .oc-totales .oc-total dt{ color:var(--n-tinta); font-weight:700; }
body.ui-modern .oc-totales .oc-total dd{ font-weight:800; }
body.ui-modern .oc-cuadre{ margin:0; font-size:12px; line-height:1.5; color:var(--n-tinta-2); }
body.ui-modern .oc-cuadre:empty{ display:none; }
body.ui-modern .oc-cuadre.is-ok{ color:var(--n-ok); }
body.ui-modern .oc-cuadre.is-mal{ color:var(--n-mal); padding:9px 11px; border-radius:10px; background:var(--n-mal-suave); }
body.ui-modern .oc-cuadre.is-mal b{ color:var(--n-mal); }
body.ui-modern .oc-botones{ display:grid; gap:8px; }

/* La OC que ya está en un expediente, o la anulada. */
body.ui-modern .oc-aviso{
  display:flex; gap:12px; align-items:flex-start; margin:0 0 18px;
  padding:13px 16px; border-radius:14px; border:1px solid var(--n-linea-2); background:var(--n-panel-2); color:var(--n-tinta);
}
body.ui-modern .oc-aviso > svg{ flex:0 0 auto; margin-top:2px; color:var(--n-acento); }
body.ui-modern .oc-aviso div{ display:grid; gap:3px; font-size:13px; }
body.ui-modern .oc-aviso span{ color:var(--n-tinta-2); line-height:1.5; }
body.ui-modern .oc-aviso a{ color:var(--n-tinta); font-weight:650; }
body.ui-modern .oc-anulada{ color:var(--n-mal); }
body.ui-modern .oc-form[data-solo-ver] .oc-item-quitar{ display:none; }

/* ── La lista ─────────────────────────────────────────────────────────────── */
body.ui-modern .oc-arranque{ margin-bottom:18px; }
body.ui-modern .oc-arranque-form{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; padding:16px 18px; }
body.ui-modern .oc-arranque-form > div{ flex:1 1 320px; display:grid; gap:4px; }
body.ui-modern .oc-arranque-form strong{ font-size:14px; color:var(--n-tinta); }
body.ui-modern .oc-arranque-form small{ font-size:12px; color:var(--n-tinta-2); line-height:1.5; }
body.ui-modern .oc-arranque-campo{ width:130px; margin:0; }
body.ui-modern .oc-siguiente{ font-family:var(--n-mono, ui-monospace, monospace); letter-spacing:.03em; }
body.ui-modern .oc-num{ font-family:var(--n-mono, ui-monospace, monospace); letter-spacing:.03em; }
body.ui-modern .oc-tabla .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
body.ui-modern .oc-acciones > div{ display:flex; gap:6px; justify-content:flex-end; }
/* «Emitida» no es ni bueno ni malo: está lista para usarse. El tono del acento,
   con tinta normal encima (el acento a pelo como texto se queda corto). */
body.ui-modern .status-badge.oc-emitida{
  background:var(--n-acento-suave); color:var(--n-tinta);
  border-color:color-mix(in srgb, var(--n-acento) 35%, transparent);
}
body.ui-modern .oc-anios{ display:flex; gap:4px; margin:0; }
body.ui-modern .oc-anios a{ min-width:0; height:34px; padding:0 12px; display:inline-flex; align-items:center; border-radius:9px; font-size:12.5px; }

/* ── El aviso bajo el N.° de OC del legajo (expediente) ──────────────────── */
body.ui-modern .oc-legajo-estado{
  display:block; margin-top:5px; font-size:11.5px; line-height:1.45; color:var(--n-tinta-2);
}
body.ui-modern .oc-legajo-estado.is-ok{ color:var(--n-ok); }
body.ui-modern .oc-legajo-estado.is-mal{ color:var(--n-mal); }
body.ui-modern .oc-legajo-estado.is-aviso{ color:var(--n-aviso); }
body.ui-modern .oc-legajo-estado.is-busca{ color:var(--n-tinta-3); }

/* ── Mantenedores: el reparto administrativo de las OC ───────────────────── */
body.ui-modern .master-reparto{ margin-top:18px; }
body.ui-modern .master-reparto-intro{ margin:0; padding:14px 18px 12px; font-size:12.5px; color:var(--n-tinta-2); max-width:760px; line-height:1.5; }
body.ui-modern .master-reparto-aviso{ margin:0 18px 12px; }
body.ui-modern .master-reparto-form fieldset{ border:0; margin:0; padding:0; min-width:0; }
body.ui-modern .master-reparto-lista{ display:grid; gap:6px; padding:0 18px; max-width:620px; }
body.ui-modern .master-reparto-cab,
body.ui-modern .master-reparto-fila{ display:grid; grid-template-columns:minmax(0,1fr) 110px 130px; gap:10px; align-items:center; }
body.ui-modern .master-reparto-cab{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--n-tinta-3); padding:0 2px 2px; }
body.ui-modern .master-reparto-fila{ padding:6px 8px 6px 12px; border:1px solid var(--n-linea); border-radius:10px; background:var(--n-panel); }
body.ui-modern .master-reparto-fila span{ font-size:13px; color:var(--n-tinta); }
body.ui-modern .master-reparto-fila input{ height:36px; min-height:36px; text-align:right; font-variant-numeric:tabular-nums; }
body.ui-modern .master-reparto-pie{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 18px 18px; max-width:620px; }

@media (max-width:1180px){
  body.ui-modern .oc-rejilla{ grid-template-columns:minmax(0,1fr); }
  body.ui-modern .oc-lateral{ position:static; }
}
@media (max-width:760px){
  body.ui-modern .oc-cabecera{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.ui-modern .oc-proveedor,
  body.ui-modern .oc-item-campos{ grid-template-columns:minmax(0,1fr); }
  body.ui-modern .oc-items{ padding:0 12px 4px; }
  body.ui-modern .oc-segmento{ display:flex; justify-self:stretch; }
  body.ui-modern .oc-segmento span{ padding:9px 10px; }
  body.ui-modern .oc-numero-caja{ justify-items:start; text-align:left; }
  body.ui-modern .oc-ventas-lista{ grid-template-columns:minmax(0,1fr); }
  body.ui-modern .master-reparto-fila input{ font-size:16px; }   /* sin zoom solo al tocar en el móvil */
  body.ui-modern .oc-arranque-campo{ width:100%; }
  body.ui-modern .master-reparto-cab,
  body.ui-modern .master-reparto-fila{ grid-template-columns:minmax(0,1fr) 84px 84px; }
}
@media (max-width:480px){
  body.ui-modern .oc-cabecera{ grid-template-columns:minmax(0,1fr); }
}