/* ===========================================================================
   NEWLOG · DISEÑO v2 · «MODERNO CON DEGRADADOS»
   Hoja opcional que se pone ENCIMA del diseño v1 (ui-nova.css).

   La dirección la eligió el cliente entre tres: fondos con degradado suave,
   paneles translúcidos tipo vidrio y esquinas muy redondeadas. Y con dos
   condiciones que mandan sobre cualquier efecto: que se lea "serio y
   profesional" (por eso nada de morado, nada de neón, nada que se mueva por
   su cuenta) y que una tabla de importes se lea igual de limpia que antes.

   CÓMO SE ENCIENDE
   Todo cuelga de :root[data-diseno="v2"]. Sin ese atributo en el <html>, el
   archivo se carga y no pinta nada: v1 queda exactamente como está. Se carga
   DESPUÉS de temas.css y cristal.css, así que hereda la paleta y el tema
   elegidos y no hace falta tocarlos.

   DE DÓNDE SALE EL COLOR
   Ningún color de marca está escrito a mano: todo sale de las variables --n-*
   de la paleta activa (las dieciocho de temas.css y la personalizada). Los
   degradados se mezclan con color-mix(), así que la paleta naranja tiñe el
   fondo de naranja NEWSON, la marino de azul, la grafito de gris... Lo único
   escrito a mano son blancos y negros con transparencia (brillos y sombras).

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

     1 · TOKENS        las variables --v2-*: vidrio, bordes de luz, sombras,
                       degradado de marca, radios. Se declaran dos veces
                       (claro y oscuro). También se redefinen --n-r* y
                       --n-sombra*, con lo que cientos de reglas de v1 que ya
                       los usan se redondean y se suavizan solas.
     2 · FONDO         la malla de degradados fija detrás de la aplicación.
     3 · ARMAZÓN       barra lateral flotante de vidrio, barra superior de
                       vidrio, pie y barra inferior del móvil.
     4 · SUPERFICIES   tarjetas de vidrio, cabeceras, indicadores (KPI),
                       panel de bienvenida, vacíos y avisos.
     5 · CONTROLES     botones en píldora, botón principal con degradado,
                       iconos, chips, enlaces y anillo de foco.
     6 · FORMULARIOS   campos de 14 px de radio, opciones de tipo,
                       aprobadores, ítems y secciones del alta.
     7 · TABLAS        superficie MÁS OPACA que la tarjeta: las cifras se leen
                       sobre casi blanco (o casi negro), nunca sobre la malla.
     8 · ESTADOS       insignias y píldoras.
     9 · PESTAÑAS, MODALES, CAJÓN DE FILTROS, MENÚS Y AVISOS FLOTANTES
    10 · PÁGINAS       detalle del expediente, reportería, administración,
                       órdenes de compra, cotizaciones, perfil.
    11 · NEWI Y CHAT
    12 · PANTALLA DE ACCESO
    13 · MÓVIL         390 px: barra inferior flotante, tarjetas apiladas.
    14 · SIN DESENFOQUE, SIN TRANSPARENCIA Y SIN MOVIMIENTO
                       los navegadores sin backdrop-filter, quien pide
                       "reducir transparencia" y quien pide "reducir
                       movimiento" reciben superficies opacas y cero
                       animación.

   QUÉ LLEVA DESENFOQUE Y QUÉ NO
   backdrop-filter cuesta: el navegador tiene que volver a pintar lo que hay
   detrás en cada fotograma. Por eso va SOLO en contenedores grandes y
   contados: barra lateral, barra superior, tarjetas de primer nivel, los cinco
   indicadores, modales, cajón de filtros y barra del móvil. Nunca en filas,
   campos, botones ni insignias: una bandeja de Finanzas puede tener cientos de
   filas y cada una con desenfoque tumbaría el desplazamiento. Lo que va dentro
   de una tarjeta es translúcido sin desenfoque (ya está sobre vidrio).

   ESPECIFICIDAD
   El prefijo :root[data-diseno="v2"] body.ui-modern pesa (0,3,1): gana a las
   reglas "body.ui-modern .x" de ui-nova.css y a las ".ui-modern .x" de
   app.css sin llenar el archivo de !important. Solo lleva !important lo que
   en v1 o en cristal.css ya lo lleva.
   =========================================================================== */


/* ===========================================================================
   1 · TOKENS
   =========================================================================== */
:root[data-diseno="v2"]{
  /* --- geometría --------------------------------------------------------------
     Muy redondeado, pero con escala: el radio baja a medida que la pieza
     es más pequeña, o un campo de 40 px con 22 de radio parecería una
     cápsula y una tarjeta con 14, una caja. */
  --n-r:18px;                 /* piezas grandes dentro de tarjetas (v1: 8) */
  --n-r-2:14px;               /* campos y controles (v1: 6) */
  --n-r-3:10px;               /* piezas pequeñas (v1: 4) */
  --v2-r-panel:26px;          /* barra lateral, bienvenida, modales, cajón */
  --v2-r-tarjeta:24px;        /* tarjetas e indicadores */
  --v2-r-bloque:18px;         /* bloques dentro de una tarjeta */
  --v2-r-campo:14px;          /* campos, selectores, buscador */
  --v2-r-chip:12px;           /* iconos en caja */

  /* --- vidrio · claro ----------------------------------------------------------
     El panel de la paleta con transparencia. Los porcentajes están medidos:
     con 72 % el texto más tenue (--n-tinta-3) sigue por encima de 4.5 de
     contraste incluso donde la malla es más intensa. */
  --v2-superficie:linear-gradient(180deg,
      color-mix(in srgb, var(--n-panel) 82%, transparent) 0%,
      color-mix(in srgb, var(--n-panel) 70%, transparent) 100%);
  --v2-vidrio:color-mix(in srgb, var(--n-panel) 72%, transparent);
  --v2-vidrio-denso:color-mix(in srgb, var(--n-panel) 88%, transparent);
  --v2-vidrio-tenue:color-mix(in srgb, var(--n-panel) 54%, transparent);
  --v2-vidrio-modal:color-mix(in srgb, var(--n-panel) 90%, transparent);
  /* Tablas y listas largas: casi opaco. Las cifras no se leen sobre malla. */
  --v2-vidrio-tabla:color-mix(in srgb, var(--n-panel) 94%, transparent);
  /* Piezas dentro de una tarjeta (sin desenfoque propio). */
  --v2-pieza:color-mix(in srgb, var(--n-panel) 76%, transparent);
  --v2-pieza-2:color-mix(in srgb, var(--n-panel-2) 72%, transparent);
  --v2-campo:color-mix(in srgb, var(--n-panel) 90%, transparent);

  --v2-desenfoque:blur(22px) saturate(175%);
  --v2-desenfoque-fuerte:blur(30px) saturate(180%);

  /* --- bordes de luz --------------------------------------------------------
     El filo de un vidrio es claro, no gris. Pero blanco puro sobre una página
     clara no se ve, así que se mezcla un poco de la línea de la paleta. */
  --v2-filo:color-mix(in srgb, #ffffff 58%, var(--n-linea));
  --v2-separador:color-mix(in srgb, var(--n-linea) 78%, transparent);
  --v2-borde-campo:color-mix(in srgb, var(--n-linea-2) 88%, transparent);
  --v2-brillo:inset 0 1px 0 rgba(255,255,255,.9);
  --v2-brillo-suave:inset 0 1px 0 rgba(255,255,255,.6);

  /* --- sombras en capas ------------------------------------------------------
     Una cercana y nítida (apoya la pieza) y otra lejana y difusa (la
     levanta). Neutras, sin color: una sombra teñida lee a maqueta. */
  --v2-sombra-1:0 1px 2px rgba(16,24,40,.05), 0 4px 14px -8px rgba(16,24,40,.12);
  --v2-sombra-2:0 1px 2px rgba(16,24,40,.04), 0 12px 30px -14px rgba(16,24,40,.16), 0 30px 60px -42px rgba(16,24,40,.24);
  --v2-sombra-3:0 2px 6px rgba(16,24,40,.06), 0 34px 80px -30px rgba(16,24,40,.42);
  --n-sombra:var(--v2-sombra-1);
  --n-sombra-2:var(--v2-sombra-2);
  --n-sombra-3:var(--v2-sombra-3);

  /* --- la marca en degradado --------------------------------------------------
     De su relleno a su tono pulsado: el mismo color, dos luces. Mezclarlo con
     otro tono de la paleta ensuciaba el naranja NEWSON (con el azul de señal
     salía un naranja apagado) y el cliente lo quiere "100 % NEWSON". La
     tinta de encima es --n-acento-tinta, que la paleta ya calculó para que se
     lea sobre ese relleno (por eso en naranja es oscura). */
  --v2-marca-a:var(--n-acento-solido);
  --v2-marca-b:color-mix(in srgb, var(--n-acento-solido) 45%, var(--n-acento-pulsado));
  --v2-degradado-marca:linear-gradient(150deg, var(--v2-marca-a) 0%, var(--v2-marca-b) 100%);
  --v2-degradado-marca-pulsado:linear-gradient(150deg,
      color-mix(in srgb, var(--n-acento-solido) 70%, var(--n-acento-pulsado)) 0%,
      var(--n-acento-pulsado) 100%);
  --v2-sombra-marca:0 1px 2px color-mix(in srgb, var(--n-acento-pulsado) 32%, transparent),
                    0 8px 20px -10px color-mix(in srgb, var(--n-acento-solido) 75%, transparent);
  --v2-sombra-marca-2:0 2px 4px color-mix(in srgb, var(--n-acento-pulsado) 30%, transparent),
                      0 14px 28px -12px color-mix(in srgb, var(--n-acento-solido) 80%, transparent);
  /* El tono de la marca en un azulejo suave (iconos de los indicadores). */
  --v2-azulejo:linear-gradient(150deg,
      color-mix(in srgb, var(--n-acento-solido) 20%, var(--n-panel)) 0%,
      color-mix(in srgb, var(--n-acento-solido) 7%, var(--n-panel)) 100%);
  --v2-rotulo:var(--n-acento-2);          /* rótulos de sección */

  /* --- foco ---------------------------------------------------------------------
     En petróleo, el color de señal de cada paleta: el de "dónde estás". */
  --v2-anillo:0 0 0 4px color-mix(in srgb, var(--n-aqua-vivo) 22%, transparent);

  /* --- barra lateral · claro: vidrio claro ------------------------------------ */
  --v2-lateral:linear-gradient(180deg,
      color-mix(in srgb, var(--n-panel) 78%, transparent) 0%,
      color-mix(in srgb, var(--n-panel) 62%, transparent) 100%);
  --v2-lat-tinta:var(--n-tinta);
  --v2-lat-tinta-2:var(--n-tinta-2);
  --v2-lat-tinta-3:var(--n-tinta-3);
  --v2-lat-linea:color-mix(in srgb, var(--n-linea) 80%, transparent);
  --v2-lat-hover:color-mix(in srgb, var(--n-panel) 78%, transparent);
  --v2-lat-icono:color-mix(in srgb, var(--n-panel) 70%, transparent);
  --v2-lat-ficha:color-mix(in srgb, var(--n-panel) 74%, transparent);

  /* --- panel de bienvenida: un degradado más rico ------------------------------
     Sale de los dos tonos oscuros de la paleta (--n-hero-a / -b) con la marca
     encendida en una esquina y la señal en la otra. El texto va claro encima
     en los dos temas, igual que en v1. */
  --v2-heroe-marca:var(--n-acento-solido);
  --v2-heroe-senal:var(--n-aqua-vivo);
  --v2-heroe:
    radial-gradient(85% 120% at 100% 0%, color-mix(in srgb, var(--v2-heroe-marca) 46%, transparent) 0%, transparent 62%),
    radial-gradient(70% 110% at 0% 100%, color-mix(in srgb, var(--v2-heroe-senal) 26%, transparent) 0%, transparent 60%),
    linear-gradient(128deg, var(--n-hero-a) 0%, color-mix(in srgb, var(--n-hero-a) 62%, var(--v2-heroe-marca)) 52%, var(--n-hero-b) 100%);

  /* --- malla de fondo · claro -----------------------------------------------------
     Cuatro manchas grandes y quietas sobre el papel de la paleta. Tenues a
     propósito: la malla tiene que notarse a través del vidrio, no competir con
     la tabla. Tamaños en %, para que en un móvil siga siendo una malla y no
     un punto. */
  --v2-malla:
    radial-gradient(70% 80% at -6% -10%, color-mix(in srgb, var(--n-acento-solido) 28%, transparent) 0%, transparent 64%),
    radial-gradient(60% 70% at 106% -4%, color-mix(in srgb, var(--n-aqua-vivo) 20%, transparent) 0%, transparent 62%),
    radial-gradient(75% 75% at 78% 108%, color-mix(in srgb, var(--n-acento-solido) 19%, transparent) 0%, transparent 64%),
    radial-gradient(55% 60% at 8% 100%, color-mix(in srgb, var(--n-aqua-vivo) 12%, transparent) 0%, transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--n-fondo) 50%, #ffffff) 0%, var(--n-fondo) 52%, color-mix(in srgb, var(--n-fondo) 88%, var(--n-acento-solido)) 100%);
  --v2-velo:color-mix(in srgb, var(--n-hero-b) 36%, transparent);
}

:root[data-diseno="v2"][data-theme="dark"]{
  /* --- vidrio · oscuro: ahumado ------------------------------------------------ */
  --v2-superficie:linear-gradient(180deg,
      color-mix(in srgb, var(--n-panel-2) 70%, transparent) 0%,
      color-mix(in srgb, var(--n-panel) 64%, transparent) 100%);
  --v2-vidrio:color-mix(in srgb, var(--n-panel) 68%, transparent);
  --v2-vidrio-denso:color-mix(in srgb, var(--n-panel) 88%, transparent);
  --v2-vidrio-tenue:color-mix(in srgb, var(--n-panel) 48%, transparent);
  --v2-vidrio-modal:color-mix(in srgb, var(--n-panel) 90%, transparent);
  --v2-vidrio-tabla:color-mix(in srgb, var(--n-panel) 92%, transparent);
  --v2-pieza:color-mix(in srgb, var(--n-panel-2) 62%, transparent);
  --v2-pieza-2:color-mix(in srgb, var(--n-panel-3) 46%, transparent);
  --v2-campo:color-mix(in srgb, var(--n-panel) 82%, transparent);

  --v2-filo:rgba(255,255,255,.085);
  --v2-separador:color-mix(in srgb, var(--n-linea-2) 70%, transparent);
  --v2-borde-campo:color-mix(in srgb, var(--n-linea-2) 100%, transparent);
  --v2-brillo:inset 0 1px 0 rgba(255,255,255,.07);
  --v2-brillo-suave:inset 0 1px 0 rgba(255,255,255,.05);

  --v2-sombra-1:0 1px 2px rgba(0,0,0,.5), 0 6px 18px -10px rgba(0,0,0,.7);
  --v2-sombra-2:0 1px 2px rgba(0,0,0,.45), 0 16px 40px -18px rgba(0,0,0,.8), 0 40px 70px -46px rgba(0,0,0,.9);
  --v2-sombra-3:0 2px 8px rgba(0,0,0,.5), 0 40px 90px -30px rgba(0,0,0,.95);

  --v2-sombra-marca:0 1px 2px rgba(0,0,0,.4),
                    0 10px 24px -12px color-mix(in srgb, var(--n-acento-solido) 70%, transparent);
  --v2-sombra-marca-2:0 2px 4px rgba(0,0,0,.4),
                      0 14px 30px -12px color-mix(in srgb, var(--n-acento-solido) 80%, transparent);
  --v2-azulejo:linear-gradient(150deg,
      color-mix(in srgb, var(--n-acento) 26%, var(--n-panel)) 0%,
      color-mix(in srgb, var(--n-acento) 10%, var(--n-panel)) 100%);
  --v2-anillo:0 0 0 4px color-mix(in srgb, var(--n-aqua-vivo) 26%, transparent);
  /* En oscuro la marca del panel de bienvenida se apaga hacia su fondo. Hay
     paletas que en oscuro invierten la marca a casi blanco (la grafito): sin
     esto el panel se volvía una lámina gris clara y el texto blanco perdía. */
  --v2-heroe-marca:color-mix(in srgb, var(--n-acento-solido) 55%, var(--n-hero-b));
  --v2-heroe-senal:color-mix(in srgb, var(--n-aqua-vivo) 55%, var(--n-hero-b));

  /* --- barra lateral · oscuro: vidrio ahumado del tono lateral --------------- */
  --v2-lateral:linear-gradient(180deg,
      color-mix(in srgb, var(--n-lateral) 74%, transparent) 0%,
      color-mix(in srgb, var(--n-lateral) 62%, transparent) 100%);
  --v2-lat-tinta:var(--n-sobre-oscuro);
  --v2-lat-tinta-2:var(--n-sobre-oscuro-2);
  --v2-lat-tinta-3:var(--n-sobre-oscuro-3);
  --v2-lat-linea:rgba(255,255,255,.07);
  --v2-lat-hover:rgba(255,255,255,.06);
  --v2-lat-icono:rgba(255,255,255,.045);
  --v2-lat-ficha:rgba(255,255,255,.05);

  /* --- malla · oscuro: más profunda, la marca como un resplandor ------------- */
  --v2-malla:
    radial-gradient(70% 80% at -6% -12%, color-mix(in srgb, var(--n-acento-solido) 24%, transparent) 0%, transparent 64%),
    radial-gradient(60% 70% at 106% -6%, color-mix(in srgb, var(--n-aqua) 13%, transparent) 0%, transparent 62%),
    radial-gradient(80% 80% at 74% 112%, color-mix(in srgb, var(--n-acento-solido) 18%, transparent) 0%, transparent 64%),
    linear-gradient(165deg, color-mix(in srgb, var(--n-fondo) 86%, var(--n-acento-solido)) 0%, var(--n-fondo) 48%, var(--n-fondo) 100%);
  --v2-velo:color-mix(in srgb, #000000 52%, transparent);
}


/* ===========================================================================
   2 · FONDO
   La malla vive en body::before, fija: el contenido pasa por encima y el
   vidrio la desenfoca. Sustituye al velo oscuro y a la retícula de v1 (y al
   lienzo de cristal.css, que lleva !important: por eso este también).
   =========================================================================== */
:root[data-diseno="v2"] body.ui-modern{
  background:var(--n-fondo) !important;
  font-size:14px;
  letter-spacing:-.006em;
}
:root[data-diseno="v2"] body.ui-modern::before{
  content:"";
  display:block !important;
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:1; animation:none;
  background:var(--v2-malla);
}
:root[data-diseno="v2"] body.ui-modern::after{ content:none; display:none; }


/* ===========================================================================
   3 · ARMAZÓN
   =========================================================================== */

/* --- barra lateral: un panel de vidrio que flota --------------------------- */
:root[data-diseno="v2"] body.ui-modern .sidebar{
  border-radius:var(--v2-r-panel);
  border:1px solid var(--v2-filo);
  background:var(--v2-lateral);
  -webkit-backdrop-filter:var(--v2-desenfoque-fuerte);
  backdrop-filter:var(--v2-desenfoque-fuerte);
  box-shadow:var(--v2-brillo), var(--v2-sombra-2);
  color:var(--v2-lat-tinta-2);
}
:root[data-diseno="v2"] body.ui-modern .sidebar-brand{
  border-bottom:1px solid var(--v2-lat-linea);
}
:root[data-diseno="v2"] body.ui-modern .sidebar-product{ border-left-color:var(--v2-lat-linea); }
:root[data-diseno="v2"] body.ui-modern .sidebar-brand strong,
:root[data-diseno="v2"] body.ui-modern .sidebar-product strong{ color:var(--v2-lat-tinta); }
:root[data-diseno="v2"] body.ui-modern .sidebar-brand small,
:root[data-diseno="v2"] body.ui-modern .sidebar-product small{ color:var(--v2-lat-tinta-3); }

/* El logotipo del menú es BLANCO (está hecho para la barra oscura de v1).
   Sobre el vidrio claro se pinta el de color —las figuras naranjas y el
   nombre en gris—, que es el logotipo de verdad. Se pone como fondo del
   enlace y la imagen blanca se vuelve invisible sin dejar de ocupar su sitio:
   así funciona en cualquier navegador y no se mueve nada. */
:root[data-diseno="v2"][data-theme="light"] body.ui-modern .sidebar-brand-lockup{
  background:url("../img/newson-logo-light.png") no-repeat 6px 53% / 76px auto;
}
:root[data-diseno="v2"][data-theme="light"] body.ui-modern .sidebar-brand-logo{ opacity:0; }

:root[data-diseno="v2"] body.ui-modern .sidebar-collapse,
:root[data-diseno="v2"] body.ui-modern .mobile-close{
  border-radius:12px;
  border:1px solid var(--v2-lat-linea);
  background:var(--v2-lat-icono);
  color:var(--v2-lat-tinta-3);
}
:root[data-diseno="v2"] body.ui-modern .sidebar-collapse:hover,
:root[data-diseno="v2"] body.ui-modern .mobile-close:hover{
  color:var(--v2-lat-tinta); border-color:var(--n-aqua-vivo); box-shadow:var(--v2-anillo);
}

/* Los rótulos de grupo: letra de leer, no monoespaciada. */
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-section{
  color:var(--v2-lat-tinta-3);
  font-family:var(--n-texto);
  font-size:10.5px; font-weight:650; letter-spacing:.12em;
  padding:8px 14px 5px;
}
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-admin{ margin-top:14px; }
/* 42 px por módulo: los trece módulos del administrador caben enteros en una
   pantalla de 900 px de alto, sin que el último quede bajo la ficha. */
:root[data-diseno="v2"] body.ui-modern .sidebar-nav{ padding:14px 12px 18px; }
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-link{
  height:42px; margin:2px 0; padding:0 8px; gap:11px;
  color:var(--v2-lat-tinta-2);
  font-size:13px; font-weight:600; letter-spacing:-.005em;
  border:1px solid transparent;
  border-radius:16px;
  box-shadow:none;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .2s ease;
}
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-link svg,
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-link .ico{
  width:30px; height:30px; padding:6px;
  border-radius:11px;
  background:var(--v2-lat-icono);
  color:var(--v2-lat-tinta-3);
  box-shadow:none;
  transition:color .18s ease, background-color .18s ease;
}
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-link:hover{
  background:var(--v2-lat-hover);
  border-color:var(--v2-lat-linea);
  color:var(--v2-lat-tinta);
  transform:none;
}
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-link:hover svg{
  transform:none; color:var(--n-acento); background:var(--v2-lat-icono);
}
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .sidebar .nav-link:hover svg{ color:var(--n-acento-2); }

/* El módulo activo: una píldora con el degradado de la marca. Es la única
   pieza de color fuerte de la barra, y por eso se encuentra de un vistazo. */
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-link.active{
  background:var(--v2-degradado-marca);
  border-color:transparent;
  color:var(--n-acento-tinta);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--v2-sombra-marca);
}
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-link.active::before,
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-link.active::after{ content:none; }
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-link.active svg,
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-link.active .ico{
  color:var(--n-acento-tinta);
  background:color-mix(in srgb, var(--n-acento-tinta) 16%, transparent);
  box-shadow:none;
}
/* El punto "este módulo tiene expedientes". */
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-link em{
  width:7px; height:7px;
  background:var(--n-aqua-vivo);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--n-aqua-vivo) 18%, transparent);
}
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .sidebar .nav-link em{
  background:var(--n-aqua-claro);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--n-aqua-claro) 16%, transparent);
}
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-link.active em{
  background:var(--n-acento-tinta);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--n-acento-tinta) 22%, transparent);
}
:root[data-diseno="v2"] body.ui-modern .nav-count{
  background:var(--v2-degradado-marca); color:var(--n-acento-tinta);
  font-family:var(--n-texto); font-weight:700;
}
:root[data-diseno="v2"] body.ui-modern .sidebar .nav-link.active .nav-count{
  background:color-mix(in srgb, var(--n-acento-tinta) 22%, transparent);
}
:root[data-diseno="v2"][data-theme="light"] body.ui-modern .nav-soon{
  background:var(--n-aqua-suave); color:var(--n-aqua);
  border-color:color-mix(in srgb, var(--n-aqua) 30%, transparent);
}

/* La ficha del usuario, al pie: otra lámina de vidrio dentro de la barra. */
:root[data-diseno="v2"] body.ui-modern .sidebar-profile{
  margin:0 10px 10px;
  border-radius:18px;
  border:1px solid var(--v2-lat-linea);
  background:var(--v2-lat-ficha);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:var(--v2-brillo-suave);
}
:root[data-diseno="v2"] body.ui-modern .sidebar-profile:hover{ background:var(--v2-lat-hover); }
:root[data-diseno="v2"] body.ui-modern .sidebar-profile,
:root[data-diseno="v2"] body.ui-modern .sidebar-profile *{ color:var(--v2-lat-tinta-3); }
:root[data-diseno="v2"] body.ui-modern .sidebar-profile strong,
:root[data-diseno="v2"] body.ui-modern .sidebar-profile b,
:root[data-diseno="v2"] body.ui-modern .sidebar strong{ color:var(--v2-lat-tinta); }
:root[data-diseno="v2"] body.ui-modern .sidebar-profile > div:not(.avatar) > span,
:root[data-diseno="v2"] body.ui-modern .sidebar-profile small{ color:var(--v2-lat-tinta-2); }
:root[data-diseno="v2"] body.ui-modern .sidebar-profile .avatar{
  border-radius:13px; border:0;
  background:var(--v2-degradado-marca);
  color:var(--n-acento-tinta);
  box-shadow:var(--v2-sombra-marca);
}
:root[data-diseno="v2"] body.ui-modern .sidebar-profile > a{ border-radius:12px; color:var(--v2-lat-tinta-3); }
:root[data-diseno="v2"] body.ui-modern .sidebar-profile > a:hover{ background:var(--v2-lat-icono); color:var(--n-mal); }
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .sidebar-profile > a:hover{ color:#fff; }
:root[data-diseno="v2"] body.ui-modern .sidebar-profile .profile-presence{
  background:var(--n-ok);
  border:0;
  box-shadow:0 0 0 2px var(--n-panel);
}
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .sidebar-profile .profile-presence{
  background:var(--n-aqua-claro); box-shadow:0 0 0 2px var(--n-lateral);
}
/* La lista de módulos se desvanece al llegar a la ficha del usuario, en vez
   de cortarse a ras: así se lee que hay más debajo y que se puede desplazar. */
:root[data-diseno="v2"] body.ui-modern .sidebar-nav{
  scrollbar-color:var(--v2-lat-linea) transparent;
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 30px), transparent 100%);
  mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 30px), transparent 100%);
}
:root[data-diseno="v2"] body.ui-modern .sidebar-scrim{
  background:var(--v2-velo);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* Minimizada (escritorio): el logotipo de color se quita del fondo, porque
   ahí se muestra solo la figura; y el botón de expandir va en vidrio. */
@media (min-width:1101px){
  :root[data-diseno="v2"] body.ui-modern.sidebar-collapsed .sidebar-brand-lockup{ background:none; }
  :root[data-diseno="v2"] body.ui-modern.sidebar-collapsed .sidebar-collapse{
    background:var(--v2-vidrio-denso);
    border-color:var(--v2-filo);
    box-shadow:var(--v2-sombra-1);
  }
  :root[data-diseno="v2"] body.ui-modern.sidebar-collapsed .sidebar .nav-link{ padding:0; }
  :root[data-diseno="v2"] body.ui-modern.sidebar-collapsed .sidebar .nav-link svg{ width:36px; height:36px; padding:8px; }
}

/* --- barra superior: vidrio que flota sobre el contenido ------------------ */
:root[data-diseno="v2"] body.ui-modern .topbar{
  position:sticky; top:12px; z-index:50;
  margin:12px 20px 0;
  height:72px;
  padding:0 14px 0 22px;
  border-radius:22px;
  border:1px solid var(--v2-filo);
  background:color-mix(in srgb, var(--n-panel) 68%, transparent);
  -webkit-backdrop-filter:var(--v2-desenfoque-fuerte);
  backdrop-filter:var(--v2-desenfoque-fuerte);
  box-shadow:var(--v2-brillo), var(--v2-sombra-1);
}
:root[data-diseno="v2"] body.ui-modern .topbar::before,
:root[data-diseno="v2"] body.ui-modern .topbar::after{ content:none; }
:root[data-diseno="v2"] body.ui-modern .topbar h1{
  font-size:21px; font-weight:700; letter-spacing:-.022em; color:var(--n-tinta);
}
:root[data-diseno="v2"] body.ui-modern .topbar-eyebrow{
  font-family:var(--n-texto);
  font-size:10.5px; font-weight:650; letter-spacing:.12em;
  color:var(--v2-rotulo);
}
:root[data-diseno="v2"] body.ui-modern .topbar-live{
  height:34px; padding:0 13px;
  border-radius:999px;
  border:1px solid var(--v2-filo);
  background:var(--v2-vidrio-tenue);
  color:var(--n-tinta-2);
  font-family:var(--n-texto); font-size:11.5px; font-weight:600; letter-spacing:0;
  box-shadow:var(--v2-brillo-suave);
}
:root[data-diseno="v2"] body.ui-modern .topbar-live i{ background:var(--n-ok); }
:root[data-diseno="v2"] body.ui-modern .top-icon,
:root[data-diseno="v2"] body.ui-modern .menu-button{
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid var(--v2-filo);
  background:var(--v2-vidrio);
  color:var(--n-tinta-2);
  box-shadow:var(--v2-brillo-suave), 0 1px 2px rgba(16,24,40,.05);
  transition:color .18s ease, border-color .18s ease, box-shadow .2s ease, background-color .18s ease;
}
:root[data-diseno="v2"] body.ui-modern .top-icon:hover,
:root[data-diseno="v2"] body.ui-modern .menu-button:hover{
  transform:none;
  background:var(--v2-vidrio-denso);
  border-color:color-mix(in srgb, var(--n-acento) 40%, var(--n-linea-2));
  color:var(--n-acento);
  box-shadow:var(--v2-brillo-suave), var(--v2-sombra-1);
}
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .top-icon:hover,
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .menu-button:hover{ color:var(--n-acento-2); }
:root[data-diseno="v2"] body.ui-modern .top-icon b{
  border:2px solid var(--n-panel);
  background:var(--n-mal-solido); color:#fff;
  font-family:var(--n-texto); font-weight:700;
}
:root[data-diseno="v2"] body.ui-modern .top-user{
  min-height:46px; padding:4px 12px 4px 5px;
  border-radius:999px;
  border:1px solid transparent;
  transition:background-color .18s ease, border-color .18s ease;
}
:root[data-diseno="v2"] body.ui-modern .top-user:hover{
  opacity:1;
  background:var(--v2-vidrio);
  border-color:var(--v2-filo);
  box-shadow:var(--v2-brillo-suave);
}
:root[data-diseno="v2"] body.ui-modern .top-user strong{ font-size:12.5px; font-weight:650; }
:root[data-diseno="v2"] body.ui-modern .top-user small{ font-size:11px; color:var(--n-tinta-3); }

/* Las iniciales: el degradado de la marca, en círculo. */
:root[data-diseno="v2"] body.ui-modern .avatar,
:root[data-diseno="v2"] body.ui-modern .top-user .avatar{
  border-radius:50%;
  background:var(--v2-degradado-marca);
  color:var(--n-acento-tinta);
}
:root[data-diseno="v2"] body.ui-modern .top-user .avatar{ box-shadow:var(--v2-sombra-marca); }

/* --- pie ------------------------------------------------------------------- */
:root[data-diseno="v2"] body.ui-modern .app-footer{
  border-top:1px solid var(--v2-separador);
  margin:26px 26px 0;
  padding-left:2px;
  font-family:var(--n-texto); font-size:11px; letter-spacing:.02em;
  /* Va directo sobre la malla, sin vidrio debajo: la tinta tenue se quedaba
     en 3.8 donde la malla es más intensa. */
  color:var(--n-tinta-2);
}


/* ===========================================================================
   4 · SUPERFICIES
   =========================================================================== */

/* --- la tarjeta de vidrio ----------------------------------------------------
   Solo las de primer nivel llevan desenfoque. Las mismas clases dentro de
   otra tarjeta son azulejos translúcidos sin desenfoque (ver más abajo). */
:root[data-diseno="v2"] body.ui-modern .surface-card,
:root[data-diseno="v2"] body.ui-modern .process-card{
  background:var(--v2-superficie);
  -webkit-backdrop-filter:var(--v2-desenfoque);
  backdrop-filter:var(--v2-desenfoque);
  border:1px solid var(--v2-filo);
  border-radius:var(--v2-r-tarjeta);
  box-shadow:var(--v2-brillo), var(--v2-sombra-2);
  color:var(--n-tinta);
}
/* Clases de tarjeta de v1 que no son de primer nivel: azulejo sin desenfoque. */
:root[data-diseno="v2"] body.ui-modern .card,
:root[data-diseno="v2"] body.ui-modern .panel,
:root[data-diseno="v2"] body.ui-modern .report-chart-card,
:root[data-diseno="v2"] body.ui-modern .report-link-card,
:root[data-diseno="v2"] body.ui-modern .settings-panel,
:root[data-diseno="v2"] body.ui-modern .surface-card .surface-card,
:root[data-diseno="v2"] body.ui-modern .surface-card .pro-chart-card{
  background:var(--v2-pieza);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid var(--v2-separador);
  border-radius:var(--v2-r-bloque);
  box-shadow:var(--v2-brillo-suave);
}
/* El campo del cajón de filtros llevaba en v1 el traje de tarjeta (borde,
   radio y recorte): con esquinas grandes el recorte se comía la primera
   letra del rótulo. Es un campo, no una tarjeta. */
:root[data-diseno="v2"] body.ui-modern .filter-field-card{
  background:transparent;
  border:0; border-radius:0; box-shadow:none;
  overflow:visible;
}

:root[data-diseno="v2"] body.ui-modern .card-header{
  background:transparent;
  border-bottom:1px solid var(--v2-separador);
  padding:20px 24px;
}
/* Rótulo ENCIMA del título, siempre. En v1 a veces iba al lado, y en las
   columnas estrechas ("MI BANDEJA · Requieren atención") se partían los dos
   en dos renglones cada uno. */
:root[data-diseno="v2"] body.ui-modern .card-header > div:has(> .section-kicker){
  flex-direction:column; align-items:flex-start; gap:2px;
}
:root[data-diseno="v2"] body.ui-modern .card-header > div:has(> .section-kicker) > .section-kicker{ margin-bottom:0; }
:root[data-diseno="v2"] body.ui-modern .card-header h2,
:root[data-diseno="v2"] body.ui-modern .card-header h3{
  font-size:17px; font-weight:700; letter-spacing:-.018em; color:var(--n-tinta);
}
:root[data-diseno="v2"] body.ui-modern .card-header p,
:root[data-diseno="v2"] body.ui-modern .card-header small{ font-size:12px; color:var(--n-tinta-3); }

/* El rótulo de sección: letra de leer, del color de la marca. */
:root[data-diseno="v2"] body.ui-modern .section-kicker{
  font-family:var(--n-texto);
  font-size:10.5px; font-weight:700; letter-spacing:.12em;
  color:var(--v2-rotulo);
}

/* Dentro de los paneles oscuros (bienvenida, cabecera ejecutiva de
   reportería) el rótulo vuelve al petróleo claro de v1: el color de la marca
   ahí sería marino sobre marino. */
:root[data-diseno="v2"] body.ui-modern .executive-hero .section-kicker,
:root[data-diseno="v2"] body.ui-modern .hero-panel .section-kicker,
:root[data-diseno="v2"] body.ui-modern .report-dashboard-head .section-kicker,
:root[data-diseno="v2"] body.ui-modern .report-dashboard-pro > .section-kicker{ color:var(--n-aqua-claro); }

/* --- cabecera de página ---------------------------------------------------- */
/* Lo que va directo sobre la malla (sin vidrio debajo) lleva la tinta
   secundaria, no la tenue: la malla aclara u oscurece el fondo según la
   paleta y la tenue se quedaba justa en algunas. */
:root[data-diseno="v2"] body.ui-modern .back-link,
:root[data-diseno="v2"] body.ui-modern .request-title-row p{ color:var(--n-tinta-2); }
:root[data-diseno="v2"] body.ui-modern .page-header h1,
:root[data-diseno="v2"] body.ui-modern .page-header h2{
  font-weight:750; letter-spacing:-.03em; color:var(--n-tinta);
}
:root[data-diseno="v2"] body.ui-modern .page-header p{ font-size:13px; color:var(--n-tinta-2); }

/* --- los indicadores (KPI) ---------------------------------------------------
   Vidrio con un resplandor de la marca en la esquina y una línea de color
   arriba que se desvanece. El rojo se reserva a los que hay que mirar. */
:root[data-diseno="v2"] body.ui-modern .executive-metrics article,
:root[data-diseno="v2"] body.ui-modern .executive-metrics article:first-child,
:root[data-diseno="v2"] body.ui-modern .metric-card,
:root[data-diseno="v2"] body.ui-modern .stat-card{
  background:
    radial-gradient(120% 110% at 100% 0%, color-mix(in srgb, var(--n-acento-solido) 12%, transparent) 0%, transparent 58%),
    var(--v2-superficie);
  -webkit-backdrop-filter:var(--v2-desenfoque);
  backdrop-filter:var(--v2-desenfoque);
  border:1px solid var(--v2-filo);
  border-radius:var(--v2-r-tarjeta);
  box-shadow:var(--v2-brillo), var(--v2-sombra-2);
  padding:20px 20px 18px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
:root[data-diseno="v2"] body.ui-modern .executive-metrics article:hover,
:root[data-diseno="v2"] body.ui-modern .metric-card:hover,
:root[data-diseno="v2"] body.ui-modern .stat-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--n-acento) 26%, var(--v2-filo));
  box-shadow:var(--v2-brillo), var(--v2-sombra-2), 0 18px 40px -26px color-mix(in srgb, var(--n-acento-solido) 60%, transparent);
}
:root[data-diseno="v2"] body.ui-modern .executive-metrics article::after,
:root[data-diseno="v2"] body.ui-modern .metric-card::after,
:root[data-diseno="v2"] body.ui-modern .stat-card::after{
  content:""; position:absolute; top:0; left:22px; right:22px; bottom:auto;
  height:3px; border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, var(--n-acento-solido) 0%, color-mix(in srgb, var(--n-acento-solido) 35%, transparent) 60%, transparent 100%);
  opacity:1;
}
:root[data-diseno="v2"] body.ui-modern .executive-metrics .metric-alert::after,
:root[data-diseno="v2"] body.ui-modern .executive-metrics .metric-overdue::after{
  background:linear-gradient(90deg, var(--n-mal) 0%, color-mix(in srgb, var(--n-mal) 35%, transparent) 60%, transparent 100%);
}
:root[data-diseno="v2"] body.ui-modern .executive-metrics .metric-alert,
:root[data-diseno="v2"] body.ui-modern .executive-metrics .metric-overdue{
  background:
    radial-gradient(120% 110% at 100% 0%, color-mix(in srgb, var(--n-mal) 11%, transparent) 0%, transparent 58%),
    var(--v2-superficie);
}
:root[data-diseno="v2"] body.ui-modern .metric-top span,
:root[data-diseno="v2"] body.ui-modern .metric-card span:first-child,
:root[data-diseno="v2"] body.ui-modern .stat-card span:first-child{
  font-family:var(--n-texto);
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  line-height:1.35;
  color:var(--n-tinta-3);
}
:root[data-diseno="v2"] body.ui-modern .metric-top i,
:root[data-diseno="v2"] body.ui-modern .metric-icon{
  width:36px; height:36px;
  border-radius:var(--v2-r-chip);
  border:1px solid color-mix(in srgb, var(--n-acento) 18%, transparent);
  background:var(--v2-azulejo);
  color:var(--n-acento-2);
  box-shadow:var(--v2-brillo-suave);
}
:root[data-diseno="v2"] body.ui-modern .executive-metrics .metric-alert .metric-top i,
:root[data-diseno="v2"] body.ui-modern .executive-metrics .metric-overdue .metric-top i{
  border-color:color-mix(in srgb, var(--n-mal) 22%, transparent);
  background:var(--n-mal-suave);
  color:var(--n-mal);
}
/* La cifra: letra de leer con dígitos de ancho fijo, no monoespaciada. Así
   "S/ 148,409.13" entra entero en la tarjeta (en v1 se cortaba). */
:root[data-diseno="v2"] body.ui-modern .executive-metrics article strong,
:root[data-diseno="v2"] body.ui-modern .metric-card strong,
:root[data-diseno="v2"] body.ui-modern .stat-card strong,
:root[data-diseno="v2"] body.ui-modern .metric-value,
:root[data-diseno="v2"] body.ui-modern .stat-value,
:root[data-diseno="v2"] body.ui-modern .kpi-value{
  font-family:var(--n-texto);
  font-size:26px; font-weight:700; letter-spacing:-.03em; line-height:1.15;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  color:var(--n-tinta);
  overflow:visible; text-overflow:clip;
}
:root[data-diseno="v2"] body.ui-modern .executive-metrics article small,
:root[data-diseno="v2"] body.ui-modern .metric-card small{ font-size:12px; color:var(--n-tinta-3); }

/* --- panel de bienvenida: el degradado más rico del portal ---------------- */
:root[data-diseno="v2"] body.ui-modern .executive-hero,
:root[data-diseno="v2"] body.ui-modern .hero-panel{
  border-radius:var(--v2-r-panel);
  border:1px solid rgba(255,255,255,.12);
  background:var(--v2-heroe);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 30px 60px -34px color-mix(in srgb, var(--n-hero-b) 90%, transparent), var(--v2-sombra-1);
}
/* La retícula técnica de v1 se cambia por un barrido de luz diagonal, muy
   tenue y quieto. */
:root[data-diseno="v2"] body.ui-modern .executive-hero::before{ content:none; }
:root[data-diseno="v2"] body.ui-modern .executive-hero::after,
:root[data-diseno="v2"] body.ui-modern .hero-panel::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:1;
  background:linear-gradient(112deg, transparent 0%, transparent 34%, rgba(255,255,255,.07) 46%, transparent 60%);
  mask-image:none; -webkit-mask-image:none;
}
:root[data-diseno="v2"] body.ui-modern .hero-grid-glow{ display:none; }
:root[data-diseno="v2"] body.ui-modern .executive-hero h2{
  font-size:32px; font-weight:750; letter-spacing:-.035em; color:#fff;
}
/* El texto corrido del panel, más claro que en v1: el degradado nuevo tiene
   zonas más luminosas y el gris azulado de v1 se quedaba corto ahí. */
:root[data-diseno="v2"] body.ui-modern .executive-hero p,
:root[data-diseno="v2"] body.ui-modern .executive-hero small{
  color:color-mix(in srgb, #ffffff 80%, var(--n-sobre-oscuro-2));
}
:root[data-diseno="v2"] body.ui-modern .hero-brand span{
  color:color-mix(in srgb, #ffffff 86%, var(--n-sobre-oscuro-2));
  letter-spacing:.16em;
}
:root[data-diseno="v2"] body.ui-modern .executive-score{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 18px 40px -24px rgba(0,0,0,.6);
}
:root[data-diseno="v2"] body.ui-modern .executive-score > span{ letter-spacing:.14em; }
:root[data-diseno="v2"] body.ui-modern .executive-score .score-ring,
:root[data-diseno="v2"] body.ui-modern .executive-hero .score-ring{
  background:conic-gradient(var(--n-aqua-claro) calc(var(--score,0)*1%), rgba(255,255,255,.16) 0);
}
:root[data-diseno="v2"] body.ui-modern .executive-score .score-ring::after,
:root[data-diseno="v2"] body.ui-modern .executive-hero .score-ring::after{
  background:color-mix(in srgb, var(--n-hero-b) 70%, var(--n-hero-a));
}
/* Dentro del panel el botón principal es BLANCO y el secundario, vidrio. */
:root[data-diseno="v2"] body.ui-modern .executive-hero .btn-primary{
  background:#ffffff; color:var(--n-hero-tinta);
  box-shadow:0 1px 2px rgba(0,0,0,.2), 0 10px 24px -12px rgba(0,0,0,.6);
}
:root[data-diseno="v2"] body.ui-modern .executive-hero .btn-primary:hover{
  background:#f1f4f8; color:var(--n-hero-tinta);
}
:root[data-diseno="v2"] body.ui-modern .btn-ghost-light{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.26);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
:root[data-diseno="v2"] body.ui-modern .btn-ghost-light:hover{
  background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); color:#fff;
}

/* --- vacíos y avisos ------------------------------------------------------- */
:root[data-diseno="v2"] body.ui-modern .empty-state{
  background:var(--v2-pieza);
  border:1px dashed var(--v2-borde-campo);
  border-radius:var(--v2-r-bloque);
}
:root[data-diseno="v2"] body.ui-modern .surface-card.empty-state{
  border-style:dashed;
  border-radius:var(--v2-r-tarjeta);
}
:root[data-diseno="v2"] body.ui-modern .info-banner,
:root[data-diseno="v2"] body.ui-modern .strong-info{
  border-radius:16px;
  background:color-mix(in srgb, var(--n-info-suave) 82%, transparent);
  border:1px solid color-mix(in srgb, var(--n-info) 22%, transparent);
}
:root[data-diseno="v2"] body.ui-modern .alert{
  border-radius:16px;
  box-shadow:var(--v2-brillo-suave), var(--v2-sombra-1);
}
/* "Pago pendiente" y su explicación salían pegados en la misma línea
   ("Pago pendienteCarga la constancia…"): título arriba, texto debajo. */
:root[data-diseno="v2"] body.ui-modern .attention-box > div{ display:grid; gap:3px; }
:root[data-diseno="v2"] body.ui-modern .attention-box > div > small{ display:block; }
/* El texto suelto de la tarjeta del tipo de cambio iba pegado al borde. */
:root[data-diseno="v2"] body.ui-modern .exchange-rate-panel > .field-hint,
:root[data-diseno="v2"] body.ui-modern .exchange-rate-panel > .exchange-rate-today{
  padding:0 24px;
}
:root[data-diseno="v2"] body.ui-modern .exchange-rate-panel > .field-hint{ margin-top:14px; }
:root[data-diseno="v2"] body.ui-modern .exchange-rate-panel > .exchange-rate-today:last-child{ margin-bottom:20px; }
:root[data-diseno="v2"] body.ui-modern .attention-box,
:root[data-diseno="v2"] body.ui-modern .empty-diagnosis,
:root[data-diseno="v2"] body.ui-modern .modal-note,
:root[data-diseno="v2"] body.ui-modern .confirm-summary > div{
  border-radius:16px;
  background:var(--v2-pieza-2);
  border-color:var(--v2-separador);
}


/* ===========================================================================
   5 · CONTROLES
   =========================================================================== */
:root[data-diseno="v2"] body.ui-modern .btn{
  border-radius:999px;
  min-height:40px;
  padding:0 18px;
  font-weight:600; font-size:13.5px; letter-spacing:-.006em;
  transition:transform .16s ease, box-shadow .2s ease, background-color .2s ease,
             border-color .2s ease, color .2s ease, filter .2s ease;
}
:root[data-diseno="v2"] body.ui-modern .btn:active{ transform:translateY(1px); }
:root[data-diseno="v2"] body.ui-modern .btn-small,
:root[data-diseno="v2"] body.ui-modern .btn-sm{ min-height:32px; padding:0 13px; font-size:12.5px; }

/* El principal: degradado de la marca, filo de luz arriba y una sombra del
   mismo color, corta. */
:root[data-diseno="v2"] body.ui-modern .btn-primary{
  background:var(--v2-degradado-marca);
  border-color:transparent;
  color:var(--n-acento-tinta);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--v2-sombra-marca);
}
:root[data-diseno="v2"] body.ui-modern .btn-primary:hover{
  background:var(--v2-degradado-marca-pulsado);
  color:var(--n-acento-tinta);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--v2-sombra-marca-2);
}
:root[data-diseno="v2"] body.ui-modern .btn-secondary{
  background:var(--v2-vidrio-denso);
  border-color:var(--v2-borde-campo);
  color:var(--n-tinta);
  box-shadow:var(--v2-brillo-suave), 0 1px 2px rgba(16,24,40,.05);
}
:root[data-diseno="v2"] body.ui-modern .btn-secondary:hover{
  background:var(--n-panel);
  border-color:color-mix(in srgb, var(--n-acento) 45%, var(--n-linea-2));
  color:var(--n-acento-2);
  transform:translateY(-1px);
  box-shadow:var(--v2-brillo-suave), var(--v2-sombra-1);
}
:root[data-diseno="v2"] body.ui-modern .btn-dark{
  background:linear-gradient(150deg, color-mix(in srgb, var(--n-tinta) 88%, var(--n-acento-solido)), var(--n-tinta));
  border-color:transparent;
  color:var(--n-panel);
}
:root[data-diseno="v2"] body.ui-modern .btn-danger{
  background:linear-gradient(150deg, var(--n-mal-solido), color-mix(in srgb, var(--n-mal-solido) 72%, #000000));
  border-color:transparent; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -10px color-mix(in srgb, var(--n-mal-solido) 80%, transparent);
}
:root[data-diseno="v2"] body.ui-modern .btn-danger:hover{ filter:brightness(.94); transform:translateY(-1px); }
:root[data-diseno="v2"] body.ui-modern .btn-danger-soft{ border-radius:999px; }
:root[data-diseno="v2"] body.ui-modern .btn-ghost:hover,
:root[data-diseno="v2"] body.ui-modern .btn-plain:hover{ background:var(--v2-pieza-2); }

/* Piezas pequeñas con relleno de marca. En app.css llevan blanco fijo encima
   del color de marca, y hay paletas (la naranja) en las que la tinta que se
   lee sobre la marca es oscura; y en oscuro el acento es tan claro que el
   blanco se queda en 2.9. Aquí van con el degradado y la tinta del token. */
:root[data-diseno="v2"] body.ui-modern .mini-flow .active i,
:root[data-diseno="v2"] body.ui-modern .legajo-number,
:root[data-diseno="v2"] body.ui-modern .chat-send-button,
:root[data-diseno="v2"] body.ui-modern .ai-compose-row button,
:root[data-diseno="v2"] body.ui-modern .chat-row-badge,
:root[data-diseno="v2"] body.ui-modern .mobile-chat-badge{
  background:var(--v2-degradado-marca);
  color:var(--n-acento-tinta);
}
:root[data-diseno="v2"] body.ui-modern .mini-flow i,
:root[data-diseno="v2"] body.ui-modern .legajo-number{ border-radius:50%; }
:root[data-diseno="v2"] body.ui-modern .chat-send-button,
:root[data-diseno="v2"] body.ui-modern .ai-compose-row button{ border-radius:50%; box-shadow:var(--v2-sombra-marca); }

/* Botones de icono: círculos de vidrio. */
:root[data-diseno="v2"] body.ui-modern .icon-button,
:root[data-diseno="v2"] body.ui-modern .btn-icon-soft,
:root[data-diseno="v2"] body.ui-modern .document-action{
  border-radius:12px;
  background:var(--v2-pieza);
  border:1px solid var(--v2-separador);
  color:var(--n-tinta-2);
  box-shadow:var(--v2-brillo-suave);
}
:root[data-diseno="v2"] body.ui-modern .icon-button:hover,
:root[data-diseno="v2"] body.ui-modern .btn-icon-soft:hover,
:root[data-diseno="v2"] body.ui-modern .document-action:hover{
  background:var(--n-acento-suave);
  border-color:color-mix(in srgb, var(--n-acento) 40%, transparent);
  color:var(--n-acento-2);
  transform:none;
}
:root[data-diseno="v2"] body.ui-modern .count-chip{
  border-radius:999px;
  background:var(--v2-pieza-2);
  border:1px solid var(--v2-separador);
  font-family:var(--n-texto); font-weight:700;
}
:root[data-diseno="v2"] body.ui-modern .text-link{ color:var(--n-acento-2); }

/* Un solo anillo de foco: visible sobre vidrio claro y oscuro. */
:root[data-diseno="v2"] body.ui-modern :focus-visible{
  outline:2px solid var(--n-aqua-vivo);
  outline-offset:3px;
  border-radius:inherit;
}
:root[data-diseno="v2"] body.ui-modern .btn:focus-visible,
:root[data-diseno="v2"] body.ui-modern .nav-link:focus-visible{
  outline:2px solid var(--n-aqua-vivo); outline-offset:3px;
}


/* ===========================================================================
   6 · FORMULARIOS
   =========================================================================== */
:root[data-diseno="v2"] body.ui-modern .field > span{
  font-family:var(--n-texto);
  font-size:11px; font-weight:650; letter-spacing:.06em;
  color:var(--n-tinta-2);
}
:root[data-diseno="v2"] body.ui-modern .field input,
:root[data-diseno="v2"] body.ui-modern .field select,
:root[data-diseno="v2"] body.ui-modern .field textarea,
:root[data-diseno="v2"] body.ui-modern .comment-card textarea,
:root[data-diseno="v2"] body.ui-modern input[type="text"],
:root[data-diseno="v2"] body.ui-modern input[type="search"],
:root[data-diseno="v2"] body.ui-modern input[type="number"],
:root[data-diseno="v2"] body.ui-modern input[type="date"],
:root[data-diseno="v2"] body.ui-modern input[type="email"],
:root[data-diseno="v2"] body.ui-modern input[type="password"],
:root[data-diseno="v2"] body.ui-modern input[type="tel"],
:root[data-diseno="v2"] body.ui-modern select,
:root[data-diseno="v2"] body.ui-modern textarea{
  background-color:var(--v2-campo);
  border:1px solid var(--v2-borde-campo);
  border-radius:var(--v2-r-campo);
  color:var(--n-tinta);
  box-shadow:inset 0 1px 2px rgba(16,24,40,.04);
}
:root[data-diseno="v2"] body.ui-modern .field input,
:root[data-diseno="v2"] body.ui-modern .field select{ min-height:42px; }
:root[data-diseno="v2"] body.ui-modern .field input,
:root[data-diseno="v2"] body.ui-modern .field select,
:root[data-diseno="v2"] body.ui-modern .field textarea{ padding:9px 14px; }
:root[data-diseno="v2"] body.ui-modern .field input:hover,
:root[data-diseno="v2"] body.ui-modern .field select:hover,
:root[data-diseno="v2"] body.ui-modern .field textarea:hover{
  border-color:color-mix(in srgb, var(--n-tinta-3) 60%, var(--n-linea-2));
}
:root[data-diseno="v2"] body.ui-modern .field input:focus,
:root[data-diseno="v2"] body.ui-modern .field select:focus,
:root[data-diseno="v2"] body.ui-modern .field textarea:focus,
:root[data-diseno="v2"] body.ui-modern input:focus,
:root[data-diseno="v2"] body.ui-modern select:focus,
:root[data-diseno="v2"] body.ui-modern textarea:focus{
  background-color:var(--n-panel);
  border-color:var(--n-aqua-vivo);
  box-shadow:var(--v2-anillo);
  outline:0;
}
:root[data-diseno="v2"] body.ui-modern .field input[readonly],
:root[data-diseno="v2"] body.ui-modern .field input:disabled,
:root[data-diseno="v2"] body.ui-modern .field select:disabled,
:root[data-diseno="v2"] body.ui-modern .field textarea:disabled{
  background-color:var(--v2-pieza-2);
  box-shadow:none;
}
/* El buscador: una píldora. El campo de dentro no lleva borde propio. */
:root[data-diseno="v2"] body.ui-modern .search-control,
:root[data-diseno="v2"] body.ui-modern .search-box{
  border-radius:999px;
  border:1px solid var(--v2-borde-campo);
  background:var(--v2-campo);
  box-shadow:inset 0 1px 2px rgba(16,24,40,.04);
  padding:0 16px;
}
:root[data-diseno="v2"] body.ui-modern .search-control:focus-within,
:root[data-diseno="v2"] body.ui-modern .search-box:focus-within{
  border-color:var(--n-aqua-vivo); box-shadow:var(--v2-anillo); background:var(--n-panel);
}
:root[data-diseno="v2"] body.ui-modern .search-control input,
:root[data-diseno="v2"] body.ui-modern .search-box input,
:root[data-diseno="v2"] body.ui-modern .search-control input:focus,
:root[data-diseno="v2"] body.ui-modern .search-box input:focus,
:root[data-diseno="v2"] body.ui-modern .chat-search input{
  border:0; background:transparent; box-shadow:none; border-radius:0;
}

/* Casillas, interruptores y zonas de subida. */
:root[data-diseno="v2"] body.ui-modern .toggle-line,
:root[data-diseno="v2"] body.ui-modern .filter-check,
:root[data-diseno="v2"] body.ui-modern .filter-check-v2,
:root[data-diseno="v2"] body.ui-modern .supplier-switch{
  border-radius:14px;
  background:var(--v2-pieza);
  border-color:var(--v2-separador);
}
:root[data-diseno="v2"] body.ui-modern .file-upload-label{
  border-radius:var(--v2-r-bloque);
  background:var(--v2-pieza);
}
:root[data-diseno="v2"] body.ui-modern .uploaded-file{ border-radius:14px; background:var(--v2-pieza); }

/* Las tarjetas de opción (tipo de operación, modalidad, aprobador). */
:root[data-diseno="v2"] body.ui-modern .type-option,
:root[data-diseno="v2"] body.ui-modern .approver-option{
  border-radius:var(--v2-r-bloque);
  border:1px solid var(--v2-borde-campo);
  background:var(--v2-pieza);
  box-shadow:var(--v2-brillo-suave), 0 1px 2px rgba(16,24,40,.04);
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
:root[data-diseno="v2"] body.ui-modern .type-option:hover,
:root[data-diseno="v2"] body.ui-modern .approver-option:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--n-acento) 40%, var(--n-linea-2));
  box-shadow:var(--v2-brillo-suave), var(--v2-sombra-1);
}
:root[data-diseno="v2"] body.ui-modern .type-option.selected,
:root[data-diseno="v2"] body.ui-modern .type-option:has(input:checked),
:root[data-diseno="v2"] body.ui-modern .approver-option:has(input:checked){
  border-color:color-mix(in srgb, var(--n-acento) 70%, transparent);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--n-acento-solido) 12%, transparent), color-mix(in srgb, var(--n-acento-solido) 4%, transparent)),
    var(--v2-vidrio-denso);
  color:var(--n-tinta);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--n-acento) 16%, transparent), var(--v2-sombra-1);
}
:root[data-diseno="v2"] body.ui-modern .type-option-icon{
  border-radius:13px;
  background:var(--v2-pieza-2);
  color:var(--n-tinta-2);
  box-shadow:var(--v2-brillo-suave);
}
:root[data-diseno="v2"] body.ui-modern .type-option:has(input:checked) .type-option-icon,
:root[data-diseno="v2"] body.ui-modern .type-option.selected .type-option-icon{
  background:var(--v2-degradado-marca);
  color:var(--n-acento-tinta);
  box-shadow:var(--v2-sombra-marca);
}
:root[data-diseno="v2"] body.ui-modern .type-option:has(input:checked) strong,
:root[data-diseno="v2"] body.ui-modern .approver-option:has(input:checked) strong{ color:var(--n-tinta); }
:root[data-diseno="v2"] body.ui-modern .type-option:has(input:checked) > i,
:root[data-diseno="v2"] body.ui-modern .approver-option:has(input:checked) > i{
  border-color:var(--n-acento-solido);
}
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .type-option:has(input:checked) > i,
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .approver-option:has(input:checked) > i{
  border-color:var(--n-acento);
}

/* El número de paso de cada sección del alta. */
:root[data-diseno="v2"] body.ui-modern .step-number{
  width:38px; height:38px; border-radius:13px;
  background:var(--v2-degradado-marca);
  color:var(--n-acento-tinta);
  font-family:var(--n-texto); font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--v2-sombra-marca);
}

/* Los ítems del expediente. */
:root[data-diseno="v2"] body.ui-modern .expense-item{
  border-radius:var(--v2-r-bloque);
  border:1px solid var(--v2-separador);
  background:var(--v2-pieza);
  box-shadow:var(--v2-brillo-suave), var(--v2-sombra-1);
}
:root[data-diseno="v2"] body.ui-modern .expense-item > header{
  background:linear-gradient(135deg, color-mix(in srgb, var(--n-acento-solido) 10%, transparent), transparent 70%);
  border-bottom:1px solid var(--v2-separador);
}
:root[data-diseno="v2"] body.ui-modern .item-index{
  border-radius:12px;
}

/* Resumen fijo del alta y otras columnas laterales. */
:root[data-diseno="v2"] body.ui-modern .sticky-summary{ top:100px; }

/* La caja del tipo de cambio. */
:root[data-diseno="v2"] body.ui-modern .exchange-rate-box{
  border-radius:16px;
  background:color-mix(in srgb, var(--n-acento-solido) 7%, var(--v2-pieza));
}


/* ===========================================================================
   7 · TABLAS
   La tabla vive en una superficie casi opaca: el vidrio es para el marco, no
   para los importes. Encabezado en letra de leer; códigos e importes siguen
   en monoespaciada de ancho fijo, como en v1.
   =========================================================================== */
:root[data-diseno="v2"] body.ui-modern .responsive-table-wrap{
  background:var(--v2-vidrio-tabla);
  border:1px solid var(--v2-separador);
  border-radius:var(--v2-r-bloque);
}
:root[data-diseno="v2"] body.ui-modern .surface-card > .responsive-table-wrap,
:root[data-diseno="v2"] body.ui-modern .surface-card > form > .responsive-table-wrap{
  border-width:1px 0 0;
  border-radius:0;
}
:root[data-diseno="v2"] body.ui-modern .surface-card > .responsive-table-wrap:last-child{
  border-radius:0 0 var(--v2-r-tarjeta) var(--v2-r-tarjeta);
}
:root[data-diseno="v2"] body.ui-modern .data-table thead th{
  background:color-mix(in srgb, var(--n-panel-2) 88%, transparent);
  color:var(--n-tinta-3);
  font-family:var(--n-texto);
  font-size:10.5px; font-weight:700; letter-spacing:.08em;
  border-bottom:1px solid var(--v2-separador);
}
/* El separador de filas va en el borde de ABAJO de la celda. La tabla es
   border-collapse:collapse, y en un choque de bordes iguales gana el de la
   celda de arriba: con el separador arriba y el de abajo transparente, las
   líneas entre filas desaparecían. */
:root[data-diseno="v2"] body.ui-modern .data-table td{
  border-top:0;
  border-bottom:1px solid var(--v2-separador);
  color:var(--n-tinta-2);
}
:root[data-diseno="v2"] body.ui-modern .data-table tbody tr:last-child td{ border-bottom-color:transparent; }
/* Los importes no se parten: "S/ 6,578.85" en una línea o no se lee como
   cifra. (La hoja de v1 deja que todo texto se corte donde sea, y en la tabla
   corta del panel principal salía "S/ · 6,578. · 85".) */
:root[data-diseno="v2"] body.ui-modern .data-table td[data-label="Monto"] > strong,
:root[data-diseno="v2"] body.ui-modern .data-table td.num > strong,
:root[data-diseno="v2"] body.ui-modern .data-table td.amount,
:root[data-diseno="v2"] body.ui-modern .data-table .money{
  white-space:nowrap; overflow-wrap:normal; word-break:normal;
}
:root[data-diseno="v2"] body.ui-modern .data-table.compact th,
:root[data-diseno="v2"] body.ui-modern .data-table.compact td{ padding-left:12px; padding-right:12px; }
:root[data-diseno="v2"] body.ui-modern .data-table.compact th:first-child,
:root[data-diseno="v2"] body.ui-modern .data-table.compact td:first-child{ padding-left:20px; }
:root[data-diseno="v2"] body.ui-modern .data-table tbody tr:hover{
  background:color-mix(in srgb, var(--n-acento) 5%, var(--n-panel));
  box-shadow:inset 3px 0 0 var(--n-aqua-vivo);
}
:root[data-diseno="v2"] body.ui-modern .data-table td strong,
:root[data-diseno="v2"] body.ui-modern .data-table td b{ color:var(--n-tinta); }
:root[data-diseno="v2"] body.ui-modern .table-toolbar{ border-bottom:1px solid var(--v2-separador); }

/* El pie con las páginas. */
:root[data-diseno="v2"] body.ui-modern .table-pie{ border-top:1px solid var(--v2-separador); }
:root[data-diseno="v2"] body.ui-modern .pager-num,
:root[data-diseno="v2"] body.ui-modern .pager-paso{
  border-radius:999px;
  background:var(--v2-pieza);
  border-color:var(--v2-separador);
}
:root[data-diseno="v2"] body.ui-modern .pager-num.is-on{
  background:var(--v2-degradado-marca);
  border-color:transparent;
  color:var(--n-acento-tinta);
  box-shadow:var(--v2-sombra-marca);
}
:root[data-diseno="v2"] body.ui-modern .table-pie-tamano select{ border-radius:999px; padding:0 12px; }


/* ===========================================================================
   8 · ESTADOS
   Píldoras en letra de leer: la monoespaciada de 9.5 px de v1 se queda en
   las celdas de código. Los colores de estado no cambian.
   =========================================================================== */
:root[data-diseno="v2"] body.ui-modern .pill,
:root[data-diseno="v2"] body.ui-modern .badge,
:root[data-diseno="v2"] body.ui-modern .status-pill,
:root[data-diseno="v2"] body.ui-modern .status-badge,
:root[data-diseno="v2"] body.ui-modern .type-pill,
:root[data-diseno="v2"] body.ui-modern .chip{
  border-radius:999px;
  font-family:var(--n-texto);
  font-size:11px; font-weight:650; letter-spacing:.005em;
  padding:4px 11px;
}
:root[data-diseno="v2"] body.ui-modern .status-badge{ gap:6px; padding-left:9px; }
:root[data-diseno="v2"] body.ui-modern .status-badge i{ width:7px; height:7px; }
:root[data-diseno="v2"] body.ui-modern .type-pill.cash{
  background:var(--v2-pieza-2);
  border-color:var(--v2-separador);
}
:root[data-diseno="v2"] body.ui-modern .payment-urgency{ border-radius:999px; }


/* ===========================================================================
   9 · PESTAÑAS, MODALES, CAJÓN DE FILTROS, MENÚS Y AVISOS FLOTANTES
   =========================================================================== */

/* --- pestañas: control segmentado sobre vidrio ---------------------------- */
:root[data-diseno="v2"] body.ui-modern .tabs-nav{
  gap:4px; padding:5px;
  border:1px solid var(--v2-filo);
  border-bottom:1px solid var(--v2-filo);
  border-radius:18px;
  background:var(--v2-vidrio-tenue);
  box-shadow:inset 0 1px 2px rgba(16,24,40,.05);
}
:root[data-diseno="v2"] body.ui-modern .tabs-nav a,
:root[data-diseno="v2"] body.ui-modern .tabs-nav button,
:root[data-diseno="v2"] body.ui-modern .settings-tab{
  border:0;
  border-radius:13px;
  color:var(--n-tinta-2);
  font-size:12.5px; font-weight:600;
  transition:background-color .18s ease, color .18s ease, box-shadow .2s ease;
}
:root[data-diseno="v2"] body.ui-modern .tabs-nav a:hover,
:root[data-diseno="v2"] body.ui-modern .settings-tab:hover{
  color:var(--n-tinta);
  background:color-mix(in srgb, var(--n-panel) 50%, transparent);
}
:root[data-diseno="v2"] body.ui-modern .tabs-nav a.active,
:root[data-diseno="v2"] body.ui-modern .tabs-nav button.active,
:root[data-diseno="v2"] body.ui-modern .settings-tab.active{
  background:var(--n-panel);
  color:var(--n-tinta);
  border:0;
  box-shadow:0 1px 2px rgba(16,24,40,.08), 0 6px 16px -8px rgba(16,24,40,.22);
}
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .tabs-nav a.active,
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .tabs-nav button.active,
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .settings-tab.active{
  background:var(--n-panel-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px -8px rgba(0,0,0,.8);
}
:root[data-diseno="v2"] body.ui-modern .tabs-nav:not(.maintainer-tabs) span{
  border-radius:999px;
  background:var(--v2-pieza-2);
  font-family:var(--n-texto); font-weight:700;
}
:root[data-diseno="v2"] body.ui-modern .tabs-nav:not(.maintainer-tabs) a.active span{
  background:var(--v2-degradado-marca); color:var(--n-acento-tinta);
}
/* En Mantenedores cada pestaña lleva un subtítulo, no un contador. */
:root[data-diseno="v2"] body.ui-modern .maintainer-tabs a{ padding:10px 16px; border-radius:14px; }
:root[data-diseno="v2"] body.ui-modern .maintainer-tabs a strong{ font-size:12.5px; font-weight:650; }
:root[data-diseno="v2"] body.ui-modern .maintainer-tabs a span{ font-size:11px; font-weight:500; color:var(--n-tinta-3); }
:root[data-diseno="v2"] body.ui-modern .maintainer-tabs a.active span{ color:var(--n-acento-2); }

/* --- modales --------------------------------------------------------------- */
:root[data-diseno="v2"] body.ui-modern .modal-backdrop{
  background:var(--v2-velo);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
}
:root[data-diseno="v2"] body.ui-modern .modal-dialog{
  background:var(--v2-vidrio-modal);
  -webkit-backdrop-filter:var(--v2-desenfoque-fuerte);
  backdrop-filter:var(--v2-desenfoque-fuerte);
  border:1px solid var(--v2-filo);
  border-radius:28px;
  box-shadow:var(--v2-brillo), var(--v2-sombra-3);
}
:root[data-diseno="v2"] body.ui-modern .modal-close{
  border-radius:50%;
  background:var(--v2-pieza-2);
  border:1px solid var(--v2-separador);
}
:root[data-diseno="v2"] body.ui-modern .modal-icon{
  border-radius:16px;
  background:var(--v2-azulejo);
  color:var(--n-acento-2);
  box-shadow:var(--v2-brillo-suave);
}
:root[data-diseno="v2"] body.ui-modern .modal-icon.success{ background:var(--n-ok-suave); color:var(--n-ok); }
:root[data-diseno="v2"] body.ui-modern .modal-icon.danger{ background:var(--n-mal-suave); color:var(--n-mal); }
:root[data-diseno="v2"] body.ui-modern .modal-icon.warning,
:root[data-diseno="v2"] body.ui-modern .modal-icon.aviso{ background:var(--n-aviso-suave); color:var(--n-aviso); }
:root[data-diseno="v2"] body.ui-modern .modal-actions{ border-top:1px solid var(--v2-separador); }
:root[data-diseno="v2"] body.ui-modern .master-modal .modal-head{
  background:transparent;
  border-bottom:1px solid var(--v2-separador);
}

/* Si además está el material "cristal" (cristal.css), el que manda es este
   vidrio: aquel pintaba el contenedor de pantalla completa del modal y hay
   que devolverlo a transparente. */
:root[data-diseno="v2"][data-material="cristal"] body.ui-modern .modal{
  background:transparent !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
}

/* --- el TXT de pagos: filas legibles, sin desenfoque propio --------------- */
:root[data-diseno="v2"] body.ui-modern .txt-fila{
  position:relative;
  border-radius:16px;
  border-left-width:1px;
  padding-left:20px;
  background:var(--v2-vidrio-tabla);
}
/* El color de estado de la fila: una píldora vertical dentro de la fila, en
   vez del borde izquierdo de 4 px (con esquinas de 16 px se doblaba). */
:root[data-diseno="v2"] body.ui-modern .txt-fila::before{
  content:""; position:absolute; left:7px; top:12px; bottom:12px;
  width:4px; border-radius:4px;
  background:var(--n-linea-2);
}
:root[data-diseno="v2"] body.ui-modern .txt-fila.pagado::before{ background:var(--n-ok); }
:root[data-diseno="v2"] body.ui-modern .txt-fila.parcial::before{ background:var(--n-aviso); }
:root[data-diseno="v2"] body.ui-modern .txt-fila.sin_pagar::before{ background:var(--n-mal); }
:root[data-diseno="v2"] body.ui-modern .txt-fila.pagado{ border-left-color:color-mix(in srgb, var(--n-ok) 30%, var(--n-linea)); }
:root[data-diseno="v2"] body.ui-modern .txt-fila.parcial{ border-left-color:color-mix(in srgb, var(--n-aviso) 30%, var(--n-linea)); }
:root[data-diseno="v2"] body.ui-modern .txt-fila.sin_pagar{ border-left-color:color-mix(in srgb, var(--n-mal) 30%, var(--n-linea)); }
:root[data-diseno="v2"] body.ui-modern .txt-resumen,
:root[data-diseno="v2"] body.ui-modern .txt-bcp,
:root[data-diseno="v2"] body.ui-modern .txt-bcp-form,
:root[data-diseno="v2"] body.ui-modern .txt-bcp-resultado{ border-radius:16px; }
:root[data-diseno="v2"] body.ui-modern .txt-bcp{ background:var(--v2-pieza); }
:root[data-diseno="v2"] body.ui-modern .txt-lapiz{ border-radius:50%; }

/* --- el cajón de filtros: una lámina que flota ----------------------------- */
:root[data-diseno="v2"] body.ui-modern .filter-drawer{
  top:12px; right:12px;
  height:calc(100dvh - 24px);
  border-radius:var(--v2-r-panel);
  border:1px solid var(--v2-filo);
  background:var(--v2-vidrio-modal);
  box-shadow:none;
  transition:transform .26s cubic-bezier(.32,.72,.28,1), box-shadow .26s ease;
}
:root[data-diseno="v2"] body.ui-modern .filter-drawer.show{
  -webkit-backdrop-filter:var(--v2-desenfoque-fuerte);
  backdrop-filter:var(--v2-desenfoque-fuerte);
  box-shadow:var(--v2-brillo), var(--v2-sombra-3);
}
:root[data-diseno="v2"] body.ui-modern .filter-drawer-head,
:root[data-diseno="v2"] body.ui-modern .filter-drawer-body details{ border-color:var(--v2-separador); }
:root[data-diseno="v2"] body.ui-modern .filter-drawer-actions{
  background:transparent;
  border-top:1px solid var(--v2-separador);
  box-shadow:none;
}
:root[data-diseno="v2"] body.ui-modern .filter-drawer-backdrop{
  background:var(--v2-velo);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
:root[data-diseno="v2"] body.ui-modern .filter-drawer-trigger span,
:root[data-diseno="v2"] body.ui-modern .filter-drawer-trigger > span{
  background:var(--v2-degradado-marca); color:var(--n-acento-tinta);
  font-family:var(--n-texto);
}

/* --- menús emergentes ------------------------------------------------------ */
:root[data-diseno="v2"] body.ui-modern .request-context-menu,
:root[data-diseno="v2"] body.ui-modern .prov-panel{
  border-radius:18px;
  border:1px solid var(--v2-filo);
  background:var(--v2-vidrio-modal);
  -webkit-backdrop-filter:var(--v2-desenfoque);
  backdrop-filter:var(--v2-desenfoque);
  box-shadow:var(--v2-brillo), var(--v2-sombra-3);
}
:root[data-diseno="v2"] body.ui-modern .prov-op{ border-radius:12px; }

/* --- avisos flotantes y espera --------------------------------------------- */
:root[data-diseno="v2"] body.ui-modern .toast{
  border-radius:18px;
  border:1px solid var(--v2-filo);
  background:var(--v2-vidrio-modal);
  -webkit-backdrop-filter:var(--v2-desenfoque);
  backdrop-filter:var(--v2-desenfoque);
  box-shadow:var(--v2-brillo), var(--v2-sombra-2);
}
:root[data-diseno="v2"] body.ui-modern .loading-layer{
  background:var(--v2-velo);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
:root[data-diseno="v2"] body.ui-modern .loading-card{
  border-radius:22px;
  border:1px solid var(--v2-filo);
  background:var(--v2-vidrio-modal);
  box-shadow:var(--v2-brillo), var(--v2-sombra-3);
}
:root[data-diseno="v2"] body.ui-modern .loading-progress-track i{ background:var(--v2-degradado-marca); }


/* ===========================================================================
   10 · PÁGINAS
   =========================================================================== */

/* --- detalle del expediente ------------------------------------------------- */
:root[data-diseno="v2"] body.ui-modern .request-title-row h2{
  font-weight:750; letter-spacing:-.035em;
}
:root[data-diseno="v2"] body.ui-modern .request-amount{ border-left-color:var(--v2-separador); }
:root[data-diseno="v2"] body.ui-modern .request-amount strong{
  font-family:var(--n-texto); font-weight:750; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
:root[data-diseno="v2"] body.ui-modern .process-card{ padding:16px 22px; }
:root[data-diseno="v2"] body.ui-modern .process-dot{
  flex:none;
  border-radius:50%;
  background:var(--v2-pieza);
  border:1px solid var(--v2-separador);
}
:root[data-diseno="v2"] body.ui-modern .process-step.done .process-dot{
  background:var(--n-ok-suave); color:var(--n-ok);
  border-color:color-mix(in srgb, var(--n-ok) 30%, transparent);
}
:root[data-diseno="v2"] body.ui-modern .process-step.current .process-dot{
  background:var(--v2-degradado-marca);
  color:var(--n-acento-tinta);
  border-color:transparent;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--n-acento-solido) 18%, transparent), var(--v2-sombra-marca);
}
:root[data-diseno="v2"] body.ui-modern .process-line{
  height:2px; border-radius:2px; background:var(--v2-separador);
}
:root[data-diseno="v2"] body.ui-modern .process-line.done{
  background:linear-gradient(90deg, var(--n-ok), color-mix(in srgb, var(--n-ok) 50%, transparent));
}
/* Las fichas de datos dentro de la tarjeta "Información del expediente". */
:root[data-diseno="v2"] body.ui-modern .detail-card .detail-grid > div,
:root[data-diseno="v2"] body.ui-modern .detail-card .detail-grid > div:nth-child(odd):not(.span-2),
:root[data-diseno="v2"] body.ui-modern .detail-card .detail-grid > div:nth-child(even){
  border-radius:16px;
  border:1px solid var(--v2-separador);
  background:var(--v2-pieza);
  box-shadow:var(--v2-brillo-suave);
}
:root[data-diseno="v2"] body.ui-modern .detail-grid dt{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--n-tinta-3);
}
:root[data-diseno="v2"] body.ui-modern .detail-grid dd{ font-size:13.5px; font-weight:650; }
:root[data-diseno="v2"] body.ui-modern .finance-bank-card,
:root[data-diseno="v2"] body.ui-modern .document-control-card,
:root[data-diseno="v2"] body.ui-modern .legajo-card,
:root[data-diseno="v2"] body.ui-modern .completion-banner,
:root[data-diseno="v2"] body.ui-modern .approval-panel .attention-box{
  border-radius:var(--v2-r-bloque);
}
:root[data-diseno="v2"] body.ui-modern .decision-panel{
  border-radius:var(--v2-r-tarjeta);
  background:var(--v2-superficie);
  border-color:var(--v2-filo);
  box-shadow:var(--v2-brillo), var(--v2-sombra-1);
}

/* --- reportería ------------------------------------------------------------- */
:root[data-diseno="v2"] body.ui-modern .rep-tabs{
  border-radius:18px; padding:5px;
  background:var(--v2-vidrio-tenue);
  border-color:var(--v2-filo);
}
:root[data-diseno="v2"] body.ui-modern .rep-tab{ border-radius:13px; }
:root[data-diseno="v2"] body.ui-modern .rep-tab.is-on{
  background:var(--n-panel);
  box-shadow:0 1px 2px rgba(16,24,40,.08), 0 6px 16px -8px rgba(16,24,40,.22);
}
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .rep-tab.is-on{ background:var(--n-panel-3); }
/* La cabecera ejecutiva de reportería: mismo degradado que el panel de
   bienvenida, para que se lean como la misma pieza. */
:root[data-diseno="v2"] body.ui-modern .report-dashboard-pro{
  border-radius:var(--v2-r-panel);
  background:var(--v2-heroe);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), var(--v2-sombra-2);
}
:root[data-diseno="v2"] body.ui-modern .report-kpis > a,
:root[data-diseno="v2"] body.ui-modern .report-kpis article{
  border-radius:20px;
  background:var(--v2-vidrio-denso);
  border:1px solid var(--v2-filo);
  box-shadow:var(--v2-brillo-suave), var(--v2-sombra-1);
}
:root[data-diseno="v2"] body.ui-modern .report-kpis article.danger-kpi{
  background:color-mix(in srgb, var(--n-mal-suave) 92%, var(--n-panel));
}
/* Dentro del panel ejecutivo (oscuro) las fichas y los gráficos van sobre
   vidrio casi opaco: una ficha translúcida sobre marino salía gris azulado
   y los ejes de los gráficos perdían contraste. */
:root[data-diseno="v2"] body.ui-modern .report-dashboard-pro .report-chart-card,
:root[data-diseno="v2"] body.ui-modern .report-dashboard-pro .report-drilldown,
:root[data-diseno="v2"] body.ui-modern .report-dashboard-pro .report-kpis > a,
:root[data-diseno="v2"] body.ui-modern .report-dashboard-pro .report-kpis article:not(.danger-kpi){
  background:var(--v2-vidrio-tabla);
  border:1px solid rgba(255,255,255,.5);
  border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 26px -16px rgba(0,0,0,.5);
}
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .report-dashboard-pro .report-chart-card,
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .report-dashboard-pro .report-drilldown,
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .report-dashboard-pro .report-kpis > a,
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .report-dashboard-pro .report-kpis article:not(.danger-kpi){
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px -16px rgba(0,0,0,.8);
}
:root[data-diseno="v2"] body.ui-modern .report-dashboard-pro .report-chart-card{ padding:18px 18px 12px; }
:root[data-diseno="v2"][data-theme="dark"] body.ui-modern .report-dashboard-pro .report-kpis article.danger-kpi{
  /* Opaco: el rojo claro del tema oscuro sobre un tinte translúcido encima
     del marino se quedaba en 3.7. */
  background:color-mix(in srgb, var(--n-mal) 14%, var(--n-panel));
}
:root[data-diseno="v2"] body.ui-modern .report-drilldown a{ border-radius:999px; }
:root[data-diseno="v2"] body.ui-modern .report-filter-head,
:root[data-diseno="v2"] body.ui-modern .report-filter-actions{
  background:transparent;
  border-color:var(--v2-separador);
}
:root[data-diseno="v2"] body.ui-modern .exportar-formato > span{ border-radius:16px; }
:root[data-diseno="v2"] body.ui-modern .exportar-resumen{ border-radius:16px; }
:root[data-diseno="v2"] body.ui-modern .zip-nombres{ border-radius:16px; }

/* --- administración y apariencia ------------------------------------------- */
:root[data-diseno="v2"] body.ui-modern .apariencia-opcion{ border-radius:var(--v2-r-bloque); }
:root[data-diseno="v2"] body.ui-modern .apariencia-muestra{ border-radius:12px; }
:root[data-diseno="v2"] body.ui-modern .apariencia-chips i{ border-radius:6px; }
:root[data-diseno="v2"] body.ui-modern .apariencia-fijada,
:root[data-diseno="v2"] body.ui-modern .apariencia-forzar{ border-radius:16px; }
:root[data-diseno="v2"] body.ui-modern .role-item,
:root[data-diseno="v2"] body.ui-modern .user-row{ border-radius:16px; }
:root[data-diseno="v2"] body.ui-modern .role-item.active,
:root[data-diseno="v2"] body.ui-modern .user-row.active{
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--n-acento-solido) 12%, transparent), color-mix(in srgb, var(--n-acento-solido) 4%, transparent)),
    var(--v2-vidrio-denso);
  border-color:color-mix(in srgb, var(--n-acento) 45%, transparent);
}
/* El módulo bloqueado de Perfiles: en v1 toda la fila iba al 72 % de
   opacidad y la nota "Exclusivo de Logística" —que explica el bloqueo— se
   quedaba en 3.1. Se apagan los interruptores, no el texto. */
:root[data-diseno="v2"] body.ui-modern .permission-row.permission-locked{ opacity:1; background:var(--v2-pieza-2); }
:root[data-diseno="v2"] body.ui-modern .permission-row.permission-locked .check-toggle{ opacity:.55; }
:root[data-diseno="v2"] body.ui-modern .settings-savebar{
  border-radius:20px;
  background:var(--v2-vidrio-denso);
  -webkit-backdrop-filter:var(--v2-desenfoque);
  backdrop-filter:var(--v2-desenfoque);
  border:1px solid var(--v2-filo);
  box-shadow:var(--v2-brillo), var(--v2-sombra-2);
}

/* --- órdenes de compra y cotizaciones -------------------------------------- */
:root[data-diseno="v2"] body.ui-modern .oc-item,
:root[data-diseno="v2"] body.ui-modern .oc-prorrateo,
:root[data-diseno="v2"] body.ui-modern .oc-aviso,
:root[data-diseno="v2"] body.ui-modern .oc-numero-caja,
:root[data-diseno="v2"] body.ui-modern .cot-pdf,
:root[data-diseno="v2"] body.ui-modern .cot-pdf-zona,
:root[data-diseno="v2"] body.ui-modern .cot-firma{
  border-radius:var(--v2-r-bloque);
}
:root[data-diseno="v2"] body.ui-modern .oc-item{ background:var(--v2-pieza); }
:root[data-diseno="v2"] body.ui-modern .oc-segmento{ border-radius:999px; }
:root[data-diseno="v2"] body.ui-modern .oc-segmento span{ border-radius:999px; }
:root[data-diseno="v2"] body.ui-modern .oc-anios a{ border-radius:999px; }
:root[data-diseno="v2"] body.ui-modern .oc-lateral{ top:100px; }
:root[data-diseno="v2"] body.ui-modern .cot-busca-estado{ border-radius:999px; }
/* 8.5.0 · la pantalla nueva de la OC. Las fichas con la marca (el número, el
   total y el punto de cada ítem) usan el degradado de v2 con su sombra; las
   piezas de dentro de un ítem, el vidrio sin desenfoque. */
:root[data-diseno="v2"] body.ui-modern .oc-numero-caja,
:root[data-diseno="v2"] body.ui-modern .oc-total-caja,
:root[data-diseno="v2"] body.ui-modern .oc-item-punto{ background:var(--v2-degradado-marca); box-shadow:var(--v2-sombra-marca); }
:root[data-diseno="v2"] body.ui-modern .oc-total-caja,
:root[data-diseno="v2"] body.ui-modern .oc-ctas,
:root[data-diseno="v2"] body.ui-modern .oc-detalle,
:root[data-diseno="v2"] body.ui-modern .oc-detalle > summary{ border-radius:var(--v2-r-bloque); }
:root[data-diseno="v2"] body.ui-modern .oc-item{ border-color:var(--v2-separador); }
:root[data-diseno="v2"] body.ui-modern .oc-ctas,
:root[data-diseno="v2"] body.ui-modern .oc-prorrateo,
:root[data-diseno="v2"] body.ui-modern .oc-detalle{ background:var(--v2-pieza-2); border-color:var(--v2-separador); }
:root[data-diseno="v2"] body.ui-modern .oc-det-cta{ background:var(--v2-pieza); border-color:var(--v2-separador); border-radius:12px; }
:root[data-diseno="v2"] body.ui-modern .oc-items-cuenta,
:root[data-diseno="v2"] body.ui-modern .oc-item-cuentas{ background:var(--v2-pieza-2); border-color:var(--v2-separador); }
:root[data-diseno="v2"] body.ui-modern .oc-orden-cab{ border-bottom-color:var(--v2-separador); }
@media (max-width:760px){
  :root[data-diseno="v2"] body.ui-modern .oc-item-total{ background:var(--v2-pieza-2); border-color:var(--v2-separador); border-radius:14px; }
}

/* --- perfil ----------------------------------------------------------------- */
:root[data-diseno="v2"] body.ui-modern .profile-hero{ border-radius:var(--v2-r-tarjeta); }
:root[data-diseno="v2"] body.ui-modern .avatar.avatar-xl{ box-shadow:var(--v2-sombra-marca); }


/* ===========================================================================
   11 · NEWI Y CHAT
   =========================================================================== */
:root[data-diseno="v2"] body.ui-modern .ai-assistant,
:root[data-diseno="v2"] body.ui-modern .internal-chat{
  border-radius:var(--v2-r-panel);
  border:1px solid var(--v2-filo);
  background:var(--v2-vidrio-modal);
  box-shadow:var(--v2-brillo), var(--v2-sombra-3);
}
:root[data-diseno="v2"] body.ui-modern .ai-assistant.open,
:root[data-diseno="v2"] body.ui-modern .internal-chat.open{
  -webkit-backdrop-filter:var(--v2-desenfoque-fuerte);
  backdrop-filter:var(--v2-desenfoque-fuerte);
}
:root[data-diseno="v2"] body.ui-modern .ai-assistant-header,
:root[data-diseno="v2"] body.ui-modern .chat-window-header{ background:var(--v2-heroe); }
:root[data-diseno="v2"] body.ui-modern .ai-messages,
:root[data-diseno="v2"] body.ui-modern .chat-messages{ background:transparent; }
:root[data-diseno="v2"] body.ui-modern .ai-compose,
:root[data-diseno="v2"] body.ui-modern .chat-compose-form,
:root[data-diseno="v2"] body.ui-modern .chat-send-row{ background:transparent; }
:root[data-diseno="v2"] body.ui-modern .ai-message.assistant .ai-bubble,
:root[data-diseno="v2"] body.ui-modern .chat-message-bubble{ border-radius:18px; }
:root[data-diseno="v2"] body.ui-modern .ai-message.user .ai-bubble,
:root[data-diseno="v2"] body.ui-modern .chat-message-row.mine .chat-message-bubble{
  border-radius:18px;
  background:var(--v2-degradado-marca);
  border-color:transparent;
  color:var(--n-acento-tinta);
}
:root[data-diseno="v2"] body.ui-modern .chat-launcher{
  border-radius:50%;
  background:var(--v2-degradado-marca);
  color:var(--n-acento-tinta);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 16px 34px -14px color-mix(in srgb, var(--n-acento-solido) 85%, transparent), 0 2px 6px rgba(16,24,40,.12);
}
:root[data-diseno="v2"] body.ui-modern .newi-launcher-hint{
  border-radius:16px;
  border:1px solid var(--v2-filo);
  background:var(--v2-vidrio-modal);
  -webkit-backdrop-filter:var(--v2-desenfoque);
  backdrop-filter:var(--v2-desenfoque);
  box-shadow:var(--v2-brillo), var(--v2-sombra-2);
}
:root[data-diseno="v2"] body.ui-modern .newi-launcher-name{
  background:color-mix(in srgb, var(--n-hero-b) 86%, transparent);
  border-color:rgba(255,255,255,.16);
}
:root[data-diseno="v2"] body.ui-modern .ai-empty button,
:root[data-diseno="v2"] body.ui-modern .ai-capabilities span{ border-radius:999px; }
:root[data-diseno="v2"] body.ui-modern .ai-compose textarea,
:root[data-diseno="v2"] body.ui-modern .chat-search{ border-radius:16px; }


/* ===========================================================================
   12 · PANTALLA DE ACCESO
   El panel de marca con el degradado del panel de bienvenida; el del
   formulario, con la malla y una tarjeta de vidrio encima.
   =========================================================================== */
:root[data-diseno="v2"] body.login-redesign{ background:var(--n-fondo); }
:root[data-diseno="v2"] body.login-redesign .login-brand-panel{
  background:var(--v2-heroe);
}
:root[data-diseno="v2"] body.login-redesign .login-visual-grid{ opacity:.45; }
:root[data-diseno="v2"] body.login-redesign .login-copy > p{
  color:color-mix(in srgb, #ffffff 80%, var(--n-sobre-oscuro-2));
}
/* El degradado nuevo es más luminoso que el de v1 en el centro: los textos
   pequeños del panel suben a casi blanco (con un toque del tono de señal). */
:root[data-diseno="v2"] body.login-redesign .login-kicker{
  color:color-mix(in srgb, var(--n-aqua-claro) 45%, #ffffff);
}
:root[data-diseno="v2"] body.login-redesign .login-brand-footer,
:root[data-diseno="v2"] body.login-redesign .login-brand-footer span,
:root[data-diseno="v2"] body.login-redesign .login-brand-footer small{
  color:color-mix(in srgb, #ffffff 80%, var(--n-sobre-oscuro-2));
}
:root[data-diseno="v2"] body.login-redesign .login-value-grid article{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
:root[data-diseno="v2"] body.login-redesign .login-value-grid article > span{
  border-radius:12px; background:rgba(255,255,255,.1);
}
:root[data-diseno="v2"] body.login-redesign .login-value-grid small{
  color:color-mix(in srgb, #ffffff 74%, var(--n-sobre-oscuro-2));
}
:root[data-diseno="v2"] body.login-redesign .login-security-badge{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2);
  color:color-mix(in srgb, #ffffff 86%, var(--n-sobre-oscuro-2));
}
:root[data-diseno="v2"] body.login-redesign .login-form-panel{
  background:var(--v2-malla), var(--n-fondo);
}
:root[data-diseno="v2"] body.login-redesign .login-form-card{
  padding:36px 34px 30px;
  border-radius:28px;
  border:1px solid var(--v2-filo);
  background:var(--v2-vidrio-denso);
  -webkit-backdrop-filter:var(--v2-desenfoque-fuerte);
  backdrop-filter:var(--v2-desenfoque-fuerte);
  box-shadow:var(--v2-brillo), var(--v2-sombra-3);
}
:root[data-diseno="v2"] body.login-redesign .login-form-heading .form-kicker{
  border-radius:999px;
  font-family:var(--n-texto); font-size:10.5px; font-weight:700; letter-spacing:.12em;
  color:var(--v2-rotulo);
  background:color-mix(in srgb, var(--n-acento-solido) 10%, var(--n-panel));
  border-color:color-mix(in srgb, var(--n-acento) 26%, transparent);
}
:root[data-diseno="v2"] body.login-redesign .login-form-heading h2{ font-weight:750; letter-spacing:-.03em; }
:root[data-diseno="v2"] body.login-redesign .login-form-heading p{ font-size:13px; }
:root[data-diseno="v2"] body.login-redesign .login-form label{ font-size:12px; font-weight:650; }
:root[data-diseno="v2"] body.login-redesign .login-input-wrap{
  border-radius:var(--v2-r-campo);
  border:1px solid var(--v2-borde-campo);
  background:var(--v2-campo);
  box-shadow:inset 0 1px 2px rgba(16,24,40,.04);
}
:root[data-diseno="v2"] body.login-redesign .login-input-wrap:focus-within{
  transform:none;
  border-color:var(--n-aqua-vivo);
  box-shadow:var(--v2-anillo);
  color:var(--n-aqua);
  background:var(--n-panel);
}
:root[data-diseno="v2"] body.login-redesign .login-submit{
  border-radius:999px;
  background:var(--v2-degradado-marca);
  color:var(--n-acento-tinta);
  font-size:14px; font-weight:650;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), var(--v2-sombra-marca-2);
  transition:background-color .2s ease, box-shadow .2s ease, transform .16s ease;
}
:root[data-diseno="v2"] body.login-redesign .login-submit:hover{
  background:var(--v2-degradado-marca-pulsado);
  transform:translateY(-1px);
}
:root[data-diseno="v2"] body.login-redesign .login-submit:focus-visible{
  outline:2px solid var(--n-aqua-vivo); outline-offset:3px;
}
:root[data-diseno="v2"] body.login-redesign .login-trust-note{
  border-radius:18px;
  border:1px solid var(--v2-separador);
  background:var(--v2-pieza);
}
:root[data-diseno="v2"] body.login-redesign .login-trust-note strong{ font-size:11.5px; }
:root[data-diseno="v2"] body.login-redesign .login-trust-note small{ font-size:11px; }
:root[data-diseno="v2"] body.login-redesign .login-trust-note > span{ border-radius:12px; }
:root[data-diseno="v2"] body.login-redesign .login-form-footer{ font-size:11px; color:var(--n-tinta-2); }
:root[data-diseno="v2"] body.login-redesign .login-alert{ border-radius:16px; }
:root[data-diseno="v2"] body.login-redesign input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--n-panel) inset;
}


/* ===========================================================================
   13 · MÓVIL
   =========================================================================== */
@media (max-width:1100px){
  /* La barra inferior flota como una píldora de vidrio, separada del borde. */
  :root[data-diseno="v2"] body.ui-modern .mobile-bottom-nav{
    left:10px; right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    height:var(--mobile-nav-height);
    padding:6px 8px;
    border-radius:26px;
    border:1px solid var(--v2-filo);
    background:var(--v2-vidrio-denso);
    -webkit-backdrop-filter:var(--v2-desenfoque-fuerte);
    backdrop-filter:var(--v2-desenfoque-fuerte);
    box-shadow:var(--v2-brillo), var(--v2-sombra-3);
  }
  :root[data-diseno="v2"] body.ui-modern .mobile-bottom-nav a{
    border-radius:18px;
    min-height:0;
    font-family:var(--n-texto); font-size:10.5px; font-weight:600;
    color:var(--n-tinta-3);
  }
  :root[data-diseno="v2"] body.ui-modern .mobile-bottom-nav a.active{
    color:var(--n-acento-2);
    background:color-mix(in srgb, var(--n-acento-solido) 11%, transparent);
  }
  :root[data-diseno="v2"] body.ui-modern .mobile-bottom-nav .mobile-create{ margin-top:-26px; }
  :root[data-diseno="v2"] body.ui-modern .mobile-create svg{
    border-radius:50%;
    background:var(--v2-degradado-marca);
    color:var(--n-acento-tinta);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 4px var(--n-fondo), var(--v2-sombra-marca-2);
  }
  /* Con el menú lateral abierto la barra inferior se aparta: si no, tapaba
     el pie del menú (la ficha del usuario y el botón de salir). */
  :root[data-diseno="v2"] body.ui-modern .mobile-bottom-nav{
    transition:transform .24s ease, opacity .2s ease;
  }
  :root[data-diseno="v2"] body.ui-modern.sidebar-open .mobile-bottom-nav{
    transform:translateY(calc(100% + 24px));
    opacity:0; pointer-events:none;
  }
  /* El contenido deja sitio a la barra flotante. */
  :root[data-diseno="v2"] body.ui-modern .page-container{
    padding-bottom:calc(var(--mobile-nav-height) + 46px + env(safe-area-inset-bottom));
  }
  :root[data-diseno="v2"] body.ui-modern .sidebar{ border-radius:24px; }
  :root[data-diseno="v2"] body.ui-modern .topbar{ margin:10px 14px 0; top:10px; }
}

@media (max-width:820px){
  :root[data-diseno="v2"] body.ui-modern .topbar{
    margin:8px 8px 0; top:8px;
    border-radius:20px;
    padding-left:10px; padding-right:10px;
  }
  :root[data-diseno="v2"] body.ui-modern .topbar h1{ font-size:17px; }
  :root[data-diseno="v2"] body.ui-modern .topbar-eyebrow{ font-size:9.5px; letter-spacing:.1em; }
  :root[data-diseno="v2"] body.ui-modern .top-icon,
  :root[data-diseno="v2"] body.ui-modern .menu-button{ width:40px; height:40px; }
  /* La tabla se vuelve tarjetas: cada fila, un azulejo casi opaco. */
  :root[data-diseno="v2"] body.ui-modern .responsive-table-wrap{ background:transparent; border:0; }
  :root[data-diseno="v2"] body.ui-modern .data-table tr{
    border-radius:18px;
    border:1px solid var(--v2-separador);
    background:var(--v2-vidrio-tabla);
    box-shadow:var(--v2-brillo-suave), var(--v2-sombra-1);
  }
  :root[data-diseno="v2"] body.ui-modern .data-table td{ border-top:0; }
  :root[data-diseno="v2"] body.ui-modern .data-table tbody tr:hover{ box-shadow:var(--v2-brillo-suave), var(--v2-sombra-1); }
  :root[data-diseno="v2"] body.ui-modern .data-table td::before{
    font-family:var(--n-texto); font-size:10.5px; font-weight:700; letter-spacing:.06em;
  }
  /* Modales como hoja que sube desde abajo. */
  :root[data-diseno="v2"] body.ui-modern .modal-dialog{ border-radius:26px 26px 0 0; border-bottom:0; }
  /* Las pestañas fijas, de vidrio. */
  :root[data-diseno="v2"] body.ui-modern .tabs-nav{
    background:var(--v2-vidrio-denso);
    -webkit-backdrop-filter:var(--v2-desenfoque);
    backdrop-filter:var(--v2-desenfoque);
  }
  :root[data-diseno="v2"] body.ui-modern .filter-drawer{
    top:8px; right:8px; width:calc(100vw - 16px); height:calc(100dvh - 16px);
  }
}

@media (max-width:640px){
  :root[data-diseno="v2"] body.ui-modern .surface-card,
  :root[data-diseno="v2"] body.ui-modern .process-card,
  :root[data-diseno="v2"] body.ui-modern .executive-metrics article{ border-radius:20px; }
  :root[data-diseno="v2"] body.ui-modern .executive-hero{ border-radius:22px; }
  :root[data-diseno="v2"] body.ui-modern .executive-hero h2{ font-size:25px; }
  :root[data-diseno="v2"] body.ui-modern .card-header{ padding:16px 18px; }
  :root[data-diseno="v2"] body.ui-modern .executive-metrics article strong{ font-size:24px; }
}


/* ===========================================================================
   13b · AJUSTES DE LA 8.3.0
   =========================================================================== */
/* Panel principal: el gráfico de «Volumen mensual» ocupa toda la altura de su
   tarjeta. La de «Operaciones por modalidad» crece con cada tipo de pago (y
   la 8.3.0 suma Crédito Honorarios); sin esto quedaba un hueco en blanco bajo
   el gráfico. El gráfico ya está hecho para estirarse (maintainAspectRatio
   false): basta con darle el sitio. */
@media (min-width:1101px){
  :root[data-diseno="v2"] body.ui-modern .pro-analytics-grid .analytics-main{ display:flex; flex-direction:column; }
  :root[data-diseno="v2"] body.ui-modern .pro-analytics-grid .analytics-main .chart-stage{ flex:1 1 auto; min-height:330px; }
}
/* Mantenedores: ocho pestañas en dos filas de cuatro, todas del mismo ancho.
   Con la letra de la v2 se iban a tres filas y la última quedaba sola. */
@media (min-width:1101px){
  :root[data-diseno="v2"] body.ui-modern .maintainer-tabs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  :root[data-diseno="v2"] body.ui-modern .maintainer-tabs a{ min-width:0; text-align:center; }
  /* El subtítulo hereda el alto fijo (18 px) del contador de las demás
     pestañas: al partirse en dos renglones se cortaba. */
  :root[data-diseno="v2"] body.ui-modern .maintainer-tabs a span{ white-space:normal; display:block; height:auto; min-width:0; margin-left:0; line-height:1.35; background:none; border-radius:0; }
}

/* El número de paso del alta no se encoge: en el móvil, al lado del título y
   del botón «Agregar…», quedaba aplastado con las cifras una sobre otra. Y el
   botón no se parte en dos renglones. */
:root[data-diseno="v2"] body.ui-modern .step-number{ flex:none; }
@media (max-width:600px){
  :root[data-diseno="v2"] body.ui-modern .form-main > .card-header > .btn{ flex:none; white-space:nowrap; }
}

/* ===========================================================================
   14 · SIN DESENFOQUE, SIN TRANSPARENCIA Y SIN MOVIMIENTO
   =========================================================================== */

/* Navegadores sin backdrop-filter: el vidrio sin desenfoque deja ver la malla
   a través del texto y se lee peor. Se vuelve superficie opaca: mismo
   diseño, mismas esquinas, sin transparencia. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-diseno="v2"]{
    --v2-superficie:linear-gradient(180deg, var(--n-panel) 0%, color-mix(in srgb, var(--n-panel) 94%, var(--n-panel-2)) 100%);
    --v2-vidrio:var(--n-panel);
    --v2-vidrio-denso:var(--n-panel);
    --v2-vidrio-tenue:var(--n-panel-2);
    --v2-vidrio-modal:var(--n-panel);
    --v2-vidrio-tabla:var(--n-panel);
    --v2-lateral:var(--n-panel);
  }
  :root[data-diseno="v2"][data-theme="dark"]{
    --v2-superficie:linear-gradient(180deg, var(--n-panel-2) 0%, var(--n-panel) 100%);
    --v2-lateral:var(--n-lateral);
  }
  :root[data-diseno="v2"] body.ui-modern .topbar{ background:var(--n-panel); }
}

/* "Reducir transparencia" del sistema: lo mismo que sin desenfoque. Hay gente
   que lo activa justo porque la translucidez le cuesta al leer. */
@media (prefers-reduced-transparency:reduce){
  :root[data-diseno="v2"]{
    --v2-superficie:var(--n-panel);
    --v2-vidrio:var(--n-panel);
    --v2-vidrio-denso:var(--n-panel);
    --v2-vidrio-tenue:var(--n-panel-2);
    --v2-vidrio-modal:var(--n-panel);
    --v2-vidrio-tabla:var(--n-panel);
    --v2-pieza:var(--n-panel);
    --v2-pieza-2:var(--n-panel-2);
    --v2-campo:var(--n-panel);
    --v2-lateral:var(--n-panel);
    --v2-desenfoque:none;
    --v2-desenfoque-fuerte:none;
  }
  :root[data-diseno="v2"][data-theme="dark"]{ --v2-lateral:var(--n-lateral); }
  :root[data-diseno="v2"] body.ui-modern .topbar{ background:var(--n-panel); }
}

/* "Reducir movimiento": nada se levanta ni se desliza. Las transiciones de
   color se quedan (no son movimiento), las de posición se van. */
@media (prefers-reduced-motion:reduce){
  :root[data-diseno="v2"] body.ui-modern .btn:hover,
  :root[data-diseno="v2"] body.ui-modern .btn:active,
  :root[data-diseno="v2"] body.ui-modern .executive-metrics article:hover,
  :root[data-diseno="v2"] body.ui-modern .metric-card:hover,
  :root[data-diseno="v2"] body.ui-modern .stat-card:hover,
  :root[data-diseno="v2"] body.ui-modern .type-option:hover,
  :root[data-diseno="v2"] body.ui-modern .approver-option:hover,
  :root[data-diseno="v2"] body.login-redesign .login-submit:hover{ transform:none; }
  :root[data-diseno="v2"] body.ui-modern .filter-drawer{ transition:none; }
  :root[data-diseno="v2"] body.login-redesign .login-form-card,
  :root[data-diseno="v2"] body.login-redesign .login-value-grid article{ transition:none; }
}