/* ===========================================================================
   ARTEMIS · hoja de estilos de la aplicación de Compras de SERCOIN

   PIEL: FORGE-DS118 · 23-sep-2026. Los valores de `:root` salen de MEDIR los
   50 mockups que el ORACLE entregó en `mockups/ORACLE-20260923/` (1448x1086 px
   cada uno), no de mirarlos. Cada token lleva en `docs/PIEL-SERCOIN-DS118.md`
   el fichero y el recuadro `(x0,y0,x1,y1)` de donde sale, y el número de
   contraste que se midió. Cuando el mockup y la accesibilidad no coincidían,
   ganó la accesibilidad y la desviación está escrita en ese documento.
   Cuando dos mockups discrepaban ganó el de la tanda más alta: las rondas 5 y
   6 son las que mantienen el lenguaje visual, y así lo dice su README.

   CORRECCIÓN: FORGE-DS131 · 23-sep-2026 (hallazgo 456). El logotipo que
   pintan los 50 mockups es INVENTADO: una llama roja que SERCOIN no tiene.
   Con él se inventó también su rojo. `--sc-brand` y `--sc-link` dejan de
   salir del mockup y pasan a `#DE0613`, medido en los píxeles opacos de las
   dos piezas reales de `sercoin.net` (`swarm-core/.../marca/`). Todo lo
   demás de esta hoja —estructura, densidad, el resto de la paleta— sigue
   siendo de DS118 y del mockup: la corrección es del rojo y de lo que el
   rojo arrastra (ver `docs/PIEL-SERCOIN-DS118.md` §9).

   ANDAMIO: FORGE-DS102 · el contrato de tokens (`docs/SISTEMA-DE-DISENO-DS102.md`).
   DS118 rellena ese andamio; no inventa nombres de token salvo la familia
   `--sc-nav-*`, que existe porque la barra lateral de este diseño es OSCURA y
   sin ella la piel tendría que escribir color a mano dentro de una regla.

   Fichero ESTÁTICO a propósito. Antes el CSS era una constante de Python que
   se servía desde `/estilos.css`; seguía siendo una respuesta aparte, pero
   vivía dentro del módulo de plantillas, así que nadie podía abrirlo en un
   navegador ni medirlo sin arrancar la aplicación. Ahora es un fichero: se
   edita, se diffea y se mide solo.

   Ni una dependencia, ni una fuente remota, ni un byte de JavaScript. La
   cabecera `Content-Security-Policy: default-src 'self'` del servidor lo
   exige y esta hoja lo cumple: no hay `@import`, ni `url(http...)`, ni fuente
   descargada. La tipografía es la pila del sistema. NO se puede leer el
   nombre de una fuente de un PNG y no se ha inventado: lo que se midió son
   los TAMAÑOS, y la pila de abajo es una APROXIMACIÓN declarada.
   =========================================================================== */

:root {
  /* --- LIENZO Y SUPERFICIES -------------------------------------------
         Medidos por censo de baldosas planas 8x8 sobre las 20 pantallas de
         las tandas 5 y 6: 46 249 baldosas de lienzo y 153 812 de superficie.
         El lienzo y la superficie se separan por 1,08:1 de tono: en este
         diseño el que dibuja el límite es la SOMBRA, no un filete. */
  --sc-bg:            #F4F6F8;
  --sc-surface:       #FFFFFF;   /* medido #FEFEFE; ver desviación 1 del doc */
  --sc-surface-sunk:  #F2F4F6;   /* banda de cabecera de columna */
  --sc-paper:         #FFFFFF;

  /* --- BORDES ---------------------------------------------------------
         El separador de fila se midió dos veces en filas distintas y dio el
         mismo valor. El límite de CONTROL no se copia del mockup: allí mide
         1,17:1 y WCAG 1.4.11 exige 3:1 (desviación 4 del doc). */
  --sc-border:        #EFF1F6;   /* 1,13:1 · separador de fila, sin suelo */
  --sc-border-strong: #EAEDF4;   /* filete más oscuro medido en el diseño */
  --sc-border-control:#7D8798;   /* WCAG 1.4.11 · 3,63:1 sobre blanco */
  --sc-line:          1px;

  /* --- TEXTO ----------------------------------------------------------
         Medidos por NÚCLEO DE TRAZO (el píxel más oscuro de su entorno, que
         no está antialiasado) sobre las 20 pantallas buenas. Tres niveles,
         196 384 núcleos contados. El tenue se oscureció: ver desviación 2. */
  --sc-text:          #000116;   /* 20,67:1 sobre superficie · 58 027 núcleos */
  --sc-text-muted:    #515C7B;   /*  6,63:1 sobre superficie · 48 809 núcleos */
  --sc-text-faint:    #636D8C;   /*  5,13:1 · medido #7B85A2 = 3,67:1, NO valía */
  --sc-on-brand:      #FFFFFF;   /*  5,91:1 sobre --sc-brand */

  /* --- MARCA. El rojo SERCOIN de VERDAD (hallazgo 456, corregido por
         FORGE-DS131). #CB0211 era la mediana de los botones de los 50
         mockups, pero el ORACLE confirmó que esos mockups se inventaron el
         logotipo (una llama que SERCOIN no tiene) y, con él, su rojo. El
         rojo real sale de muestrear los píxeles OPACOS de las dos piezas de
         `sercoin.net` que están en `swarm-core/.../marca/`:
         `logo-sercoin-400X100-.png` (mediana de 13 979 px opacos, dos
         valores: `#DF0613` con 9 693 px y `#DE0613` con 4 286) y
         `cropped-sercoin-avatar-512-192x192.png` (mediana de 16 563 px
         rojos: `#DE0613` es el más repetido con 6 255, y sigue siéndolo
         sumado a los del logotipo: 10 541 px de `#DE0613` contra 9 693 de
         `#DF0613`, un LSB de diferencia por compresión). En esta piel el
         enlace también es rojo: se midió así en las tres pantallas. ---- */
  --sc-brand:         #DE0613;
  --sc-brand-hover:   #B2050F;   /* derivado: luminosidad HSL de --sc-brand al 80 % */
  --sc-brand-soft:    #FCF1F3;   /* tarjeta de opción seleccionada; medido, no derivado del rojo */
  --sc-brand-border:  #FDE5E7;   /* su filete; medido, no derivado del rojo */

  /* --- BARRA LATERAL OSCURA. Familia NUEVA. DS102 dejó el lateral sobre
         `--sc-surface` porque el andamio era claro; este diseño lo pinta casi
         negro y el activo en granate con un carril rojo de 2 px a la
         izquierda. Sin estos tokens habría que escribir el color dentro de la
         regla, que es justo lo que la prueba de DS102 prohíbe. ------------ */
  --sc-nav-bg:        #151B1F;   /* 36 414 baldosas planas */
  --sc-nav-sunk:      #232A2E;   /* derivado: el mockup no trae estado hover */
  --sc-nav-border:    #2A3034;   /* derivado del par bg/fg */
  --sc-nav-fg:        #E4EDF2;   /* 14,64:1 sobre --sc-nav-bg */
  --sc-nav-faint:     #8C9AA9;   /*  6,05:1 sobre --sc-nav-bg */
  --sc-nav-active-bg: #5E1E21;   /* pastilla del elemento activo */
  --sc-nav-active-fg: #FFFFFF;   /* 12,47:1 sobre la pastilla */
  --sc-nav-rail:      #F60C18;   /* carril de 2 px del activo */

  /* --- ESTADOS. Fondo MEDIDO de los chips; tinta medida y, donde no llegaba
         a 4,5:1 sobre su propio fondo, oscurecida manteniendo tono y
         saturación hasta 4,6:1. Los tres ajustes están en el doc. --------- */
  --sc-ok-bg:      #E0F8EF;  --sc-ok-fg:      #107D45;  /* medido #139351 = 3,53:1 */
  --sc-warn-bg:    #FEF0E1;  --sc-warn-fg:    #B44E05;  /* medido #F8700F = 2,55:1 */
  --sc-danger-bg:  #FDE7EA;  --sc-danger-fg:  #CD0002;  /* medido, 4,95:1, vale */
  --sc-info-bg:    #E8F2FE;  --sc-info-fg:    #1E61F0;  /* medido #2868F1 = 4,28:1 */
  --sc-neutral-bg: #F2F4F6;  --sc-neutral-fg: #515C7B;  /* 6,00:1 */
  --sc-violet-bg:  #F1EBFE;  --sc-violet-fg:  #6D3FD8;  /* DS198 · carril «Recepción parcial» del kanban, 5,6:1 */

  /* --- FRESCURA DEL DATO. Codifica ANTIGÜEDAD, no severidad. Toma los tres
         tonos ya verificados de las familias semánticas. ------------------ */
  --sc-fresh:  #107D45;   /* < 24 h  */
  --sc-stale:  #B44E05;   /* 1-7 d   */
  --sc-old:    #CD0002;   /* > 7 d   */

  /* --- TIPOGRAFÍA. Los SIETE pasos, medidos por altura de mayúscula sobre
         los mockups y divididos por 0,71 (la razón de altura de mayúscula de
         las familias de la pila). La FAMILIA no se puede leer de un PNG y no
         se ha inventado: la pila del sistema es una aproximación declarada.
         Sospecha, no hecho: el dibujo es de una neo-grotesca del tipo de
         Inter o Roboto. ---------------------------------------------------- */
  --sc-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --sc-fs-display: 28px; --sc-lh-display: 36px;  /* cifra KPI · mayúscula 19 px */
  --sc-fs-h1:      36px; --sc-lh-h1:      44px;  /* hero · mayúscula 25,5 px */
  --sc-fs-h2:      16px; --sc-lh-h2:      22px;  /* título de tarjeta · 11 px */
  --sc-fs-body:    13px; --sc-lh-body:    18px;  /* celda · 9 px, paso 17-18 px */
  --sc-fs-sm:      12px; --sc-lh-sm:      16px;  /* meta de fila */
  --sc-fs-label:   12px; --sc-lh-label:   16px;  /* cabecera de columna · 9 px */
  --sc-fs-micro:   11px; --sc-lh-micro:   14px;

  /* --- ESPACIADO. Rejilla de 4. La sangría se midió: el lienzo va de x=209 a
         x=218 entre el borde del lateral y el de la tarjeta. -------------- */
  --sc-1: 4px; --sc-2: 8px; --sc-3: 12px; --sc-4: 16px;
  --sc-5: 20px; --sc-6: 24px; --sc-8: 32px;
  --sc-gutter: 12px;

  /* --- RADIOS. Medidos por DÉFICIT DE ÁREA en la esquina superior izquierda
         (la cobertura que le falta a un ángulo recto es r²·(1-π/4)), que no
         depende de ningún umbral. ---------------------------------------- */
  --sc-r-sm: 4px;      /* anillo de foco */
  --sc-r: 6px;         /* controles · botón medido 5,9 px */
  --sc-r-card: 12px;   /* superficies · tarjeta medida 11,3 px */
  --sc-r-pill: 999px;  /* chips: en el mockup son estadios */
  --sc-r-dot: 50%;

  /* --- SOMBRA. En este diseño la tarjeta NO tiene filete visible: lo que la
         separa del lienzo es una sombra corta. Medida bajo el borde inferior
         de una tarjeta: pico de 8/228 = 3,5 % a 1-2 px y apagada a los 6 px.
         `--sc-shadow-none` sigue existiendo, y sigue siendo lo que usan la
         tabla y la fila: que no floten es una decisión, no un olvido. ----- */
  --sc-shadow-none: none;
  --sc-shadow-card: 0 1px 2px rgba(10, 15, 30, 0.04), 0 2px 6px rgba(10, 15, 30, 0.06);
  --sc-shadow-pop:  0 4px 12px rgba(10, 15, 30, 0.10);

  /* --- ARMAZÓN Y DENSIDAD. Medidos sobre el render de 1448 px de ancho, que
         se toma como 1:1 en píxeles CSS (límite declarado en el doc). ----- */
  --sc-sidebar-w:   208px;  /* el lateral acaba en x=207 en las 20 pantallas */
  --sc-header-h:    54px;   /* la barra blanca acaba en y=53 */
  --sc-drawer-w:    484px;  /* panel de detalle de la derecha */

  --sc-row-h:       48px;   /* fila de tabla medida 48 px */
  --sc-cell-pad:    10px 12px;
  --sc-th-pad:      8px 12px;   /* banda de cabecera medida entre 24 y 38 px */
  --sc-group-bg:    #F8F9FA;    /* banda de cabecera de grupo, 24 px */
  --sc-group-h:     32px;

  --sc-tap-min:     48px;   /* Recepción: de pie y con guantes */
  --sc-tap-touch:   44px;   /* suelo global en viewport táctil (<=900px) */

  /* --- CARRIL DE EVIDENCIA. NO MEDIDO: ninguno de los 50 mockups trae
         columna de procedencia. Se dejan los valores del andamio. -------- */
  --sc-ev-bar-h:    36px;
  --sc-ev-col-w:    168px;
  --sc-ev-bg:       #F4F6F8;
  --sc-ev-noev-bg:  #FDE7EA;
  --sc-ev-noev-fg:  #CD0002;

  /* --- ENLACE. En esta piel el enlace es ROJO, no azul: medido en tres
         pantallas distintas (#DA050F, #E21625, #C50C16). Vale el mismo rojo
         de marca corregido (hallazgo 456): #DE0613, no #CB0211. ---------- */
  --sc-link:          #DE0613;   /* 5,07:1 sobre superficie, recalculado */
  --sc-link-hover:    #B2050F;
  --sc-warn-border:   #E9C3A3;
  --sc-info-border:   #BCD2FB;
  --sc-danger-press:  #A00002;

  /* --- FOCO. `--sc-focus-on-dark` deja de ser `var(--sc-text)` y pasa a ser
         BLANCO, y esto no es gusto: con el lateral oscuro de esta piel, un
         anillo del color del texto primario (#000116) da 1,19:1 sobre
         #151B1F, o sea que DESAPARECE. DS111 cerró el agujero de quedarse sin
         anillo; cambiar la piel sin tocar este token lo habría reabierto por
         otro sitio. Blanco da 17,38:1 sobre el lateral y 5,91:1 sobre el
         rojo de marca. ---------------------------------------------------- */
  --sc-focus-color:   var(--sc-brand);
  --sc-focus-on-dark: #FFFFFF;   /* sobre superficie de acento y sobre el lateral */
  --sc-focus-w:       2px;
  --sc-focus-offset:  2px;

  /* --- CATEGORÍAS DEL ANILLO DE LA PORTADA. Familia NUEVA (FORGE-DS139).
         Los seis colores salen de MUESTREAR los seis puntos de la leyenda del
         anillo de `panel_artemis_compras_de_sercoin.png` a resolución completa
         (x=964, y=407..543): #BE171B, #FEC6C8, #92C5FE, #85BEFE, #73C89A y
         #B7BCC3. Cinco de los seis NO se copian tal cual, y por la misma
         razón que los cuatro de la desviación 4 del doc: un trozo de gráfico
         es un OBJETO GRÁFICO y WCAG 1.4.11 le exige 3:1 contra lo que tiene al
         lado. Medidos contra blanco daban 1,49:1 (rosa), 1,80:1 y 1,95:1 (los
         dos azules, que además son casi el mismo color: dos trozos
         indistinguibles es un gráfico que miente), 2,01:1 (verde) y 1,91:1
         (gris). Se oscurecen manteniendo tono y saturación hasta pasar de 3:1,
         y los dos azules se separan a propósito. El anillo deja además 2 px de
         blanco entre trozo y trozo, para que cada uno se mida contra el blanco
         y no contra su vecino.
         El primero no se copia por otro motivo: es el rojo, y el rojo de esta
         casa es `--sc-brand` (hallazgo 456), no el del mockup. -------------- */
  --sc-cat-1: var(--sc-brand);   /* 5,07:1 sobre superficie */
  --sc-cat-2: #FC5D63;           /* 3,05:1 · medido #FEC6C8 = 1,49:1 */
  --sc-cat-3: #3795FD;           /* 3,05:1 · medido #92C5FE = 1,80:1 */
  --sc-cat-4: var(--sc-info-fg); /* 4,71:1 · el otro azul, separado a propósito */
  --sc-cat-5: #41A56F;           /* 3,07:1 · medido #73C89A = 2,01:1 */
  --sc-cat-6: #8D94A0;           /* 3,05:1 · medido #B7BCC3 = 1,91:1 */
  /* La segunda serie de la curva de compras. Token propio y no `--sc-cat-4`
     aunque hoy valgan lo mismo: «pedidos por mes» y «la cuarta categoría del
     anillo» no son el mismo hecho, y el día que el anillo cambie de paleta la
     curva no tiene por qué cambiar con él. 4,71:1 sobre superficie. */
  --sc-serie-pedidos: var(--sc-cat-6);   /* DS171 · gris en el mockup, 3,05:1 */
  /* DS171 · el plano del HUECO de la fotografía (portada y /entrar), mientras
     el ORACLE no entregue la foto: tono medio de la foto del mockup
     (luminancia 40-60 de 255 en x=1040..1440). 10,5:1 con blanco encima. */
  --sc-foto-hueco: #3A3F45;
  /* DS193 · los tres planos del degradado de la cabecera de Categorías. */
  --sc-cat-hero-claro: #F2F4F7;
  --sc-cat-hero-medio: #2A2E35;
  --sc-cat-hero-oscuro: #1B1E23;
  /* CX-FAC · estados apagados del detalle de facturas. */
  --sc-fac-inactivo-bg: #f3f5f8;
  --sc-fac-inactivo-borde: #dce1e8;
  --sc-fac-inactivo-fg: #788394;
  --sc-fac-chip-fg: #718093;
  --sc-fac-punto: #8d98a7;
  --sc-fac-borde: #e9edf2;
  --sc-fac-sombra: 0 1px 3px rgb(30 43 63 / 4%);
  --sc-prv-resumen-bg: #f8f9fc;
  --sc-prv-selector-fg: #66758b;

  /* --- MOVIMIENTO. Sin medir: un PNG no tiene duración. Se deja lo que
         había, bajo el `prefers-reduced-motion` que ya estaba puesto. ----- */
  --sc-dur: 120ms;
  --sc-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* --- PANTALLA DE ENTRADA (FORGE-DS146). Medido sobre
         `RONDAS_1_Y_2/acceso_seguro_a_artemis_compras.png` (1448x1086, 1:1 en
         px CSS): tamaños por altura de mayúscula / 0,71 y paso de línea por
         proyección de filas. La escala de esta pantalla es MAYOR que la de
         las listas (DS118) porque no compite con una tabla: el hero mide
         36 px de mayúscula, el título de la tarjeta 22, la etiqueta 12. Los
         anchos son los cantos medidos: la fotografía arranca en x=700 y la
         tarjeta va de x=65 a x=666. --------------------------------------- */
  --sc-entrar-col-w:      700px;
  --sc-entrar-card-w:     602px;
  --sc-fs-entrar-hero:    48px; --sc-lh-entrar-hero:   50px;   /* «Gestiona tus…», mayúscula 36 px */
  --sc-fs-entrar-marca:   40px; --sc-lh-entrar-marca:  48px;   /* «Artemis Compras», mayúscula 29 px */
  --sc-fs-entrar-h1:      30px; --sc-lh-entrar-h1:     38px;   /* «Acceso a tu cuenta», mayúscula 22 px */
  --sc-fs-entrar-lead:    22px; --sc-lh-entrar-lead:   30px;   /* subtitular a dos líneas, paso 30 */
  --sc-fs-entrar-rotulo:  18px; --sc-lh-entrar-rotulo: 24px;   /* «SOLUCIONES…», mayúscula 13 px, paso 24 */
  --sc-fs-entrar-copy:    18px; --sc-lh-entrar-copy:   26px;   /* párrafo del hero, paso 25-26 */
  --sc-fs-entrar-md:      17px; --sc-lh-entrar-md:     24px;   /* subtítulo de la tarjeta */
  --sc-fs-entrar-ui:      16px; --sc-lh-entrar-ui:     22px;   /* etiqueta, campo, botón, reclamo, firma */
  --sc-fs-entrar-sub:     15px; --sc-lh-entrar-sub:    22px;   /* segunda línea de reclamo y de ayuda */
  --sc-fs-entrar-meta:    14px; --sc-lh-entrar-meta:   20px;   /* pie y texto de ayuda */
  /* La mitad derecha: en el mockup es una FOTOGRAFÍA (hueco declarado en el
     informe DS146; `background-image` está prohibido y no hay pieza de marca).
     Se resuelve con superficie y tokens de la piel; estos cuatro alias son
     el único sitio que hay que tocar para cambiar de claro a oscuro. */
  --sc-entrar-panel:        var(--sc-bg);
  --sc-entrar-panel-fg:     var(--sc-text);
  --sc-entrar-panel-muted:  var(--sc-text-muted);
  --sc-entrar-panel-circle: var(--sc-brand-soft);
  /* DS171 · las cuatro teselas del acceso de Microsoft del mockup (botón
     APAGADO: el SSO no existe). Colores de la marca de Microsoft, que es lo
     que el mockup pinta; van atenuados por `.entrar-sso` (opacidad). */
  --sc-ms-1: #F25022; --sc-ms-2: #7FBA00; --sc-ms-3: #00A4EF; --sc-ms-4: #FFB900;
}
/* ===========================================================================
   1 · Base
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--sc-fs-body)/var(--sc-lh-body) var(--sc-font);
  color: var(--sc-text);
  background: var(--sc-bg);
}

/* La pagina NUNCA se desplaza en horizontal, y NO por taparlo: lo que no cabe
   se desplaza dentro de su propio carril (`.tw`, el rail de navegacion) o se
   trunca. `overflow-x:hidden` en `body` se probo y se quito: propagado al
   viewport deja de clipar `html`, asi que enmascara la pantalla y no la
   medicion. Medido con Playwright a 360 px: 0 px en las 16 pantallas. */

/* La causa raíz que SIERRA5 encontró y que hacía desbordar la maqueta de
   MIKE5 entre 16 y 475 px: un hijo de rejilla o de flex arranca en
   `min-width:auto`, así que una tabla ancha empuja la columna entera y el
   `overflow-x` del contenedor no llega a actuar NUNCA. Esta regla es el
   arreglo, y va primero porque todo lo demás depende de ella. */
.app, .app > *, .pilaflex, .pilaflex > *,
.tablero, .tablero > *, .fila, .fila > * { min-width: 0; }

/* --- Foco de teclado. Deuda nº 6 de SIERRA5: el foco visible no estaba en
       los tokens. Aquí es una regla global, no un detalle por componente:
       2 px de contorno con 2 px de separación, en el rojo de marca sobre
       claro. `:focus-visible` y no `:focus` para que el ratón no lo pinte. -- */
:focus-visible {
  outline: var(--sc-focus-w) solid var(--sc-focus-color);
  outline-offset: var(--sc-focus-offset);
  border-radius: var(--sc-r-sm);
}
/* Navegadores sin `:focus-visible`: mejor un foco de más que ninguno. */
@supports not selector(:focus-visible) {
  :focus { outline: var(--sc-focus-w) solid var(--sc-focus-color);
           outline-offset: var(--sc-focus-offset); }
}
/* Sobre superficie roja el contorno rojo no se vería. DS102 fijó esta regla y
   DS111 la clavó con una prueba; DS118 la deja EXACTAMENTE como estaba porque
   sigue siendo cierta para el botón primario y para el lateral, que en esta
   piel es casi negro. */
.boton:focus-visible, .lateral a:focus-visible, .barra a:focus-visible {
  outline-color: var(--sc-focus-on-dark);
}
/* Y aquí va el arreglo que la piel obliga a hacer, porque el nombre del token
   se quedó corto. `--sc-focus-on-dark` valía #101828 cuando el lateral era
   BLANCO: era un anillo oscuro y se veía igual de bien sobre el botón rojo que
   sobre la barra superior. Con el lateral casi negro de este diseño ese valor
   da 1,19:1 y el anillo desaparece, así que el token pasa a blanco... y
   entonces el que desaparece es el de la barra superior, que es blanca
   (`--sc-surface`). La regla de arriba mete los tres sitios en el mismo saco y
   ya no valen lo mismo: la barra vuelve al anillo de marca, que da 5,91:1
   sobre blanco. Medido, no supuesto; `test_piel_ds118` lo sostiene. */
.barra a:focus-visible { outline-color: var(--sc-focus-color); }

a { color: var(--sc-link); }
a:hover { color: var(--sc-link-hover); }

h1 { font: 600 var(--sc-fs-h1)/var(--sc-lh-h1) var(--sc-font); margin: 0 0 var(--sc-4); }
h2 {
  font: 600 var(--sc-fs-h2)/var(--sc-lh-h2) var(--sc-font);
  margin: var(--sc-6) 0 var(--sc-3);
  color: var(--sc-text);
}
h3 { font: 600 var(--sc-fs-body)/var(--sc-lh-body) var(--sc-font); margin: var(--sc-4) 0 var(--sc-2); }

/* ===========================================================================
   2 · Shell: barra lateral OSCURA de 208 px + cabecera blanca de 54 px +
       carril de evidencia de 36 px.

   Las tres medidas son del mockup: el lateral acaba en x=207 y la banda
   blanca de la cabecera en y=53 en las veinte pantallas de las tandas
   buenas. El lateral oscuro es lo único del diseño que obliga a una FAMILIA
   de tokens nueva (`--sc-nav-*`): sobre #151B1F ni el texto primario ni el
   apagado de la piel clara se leen, y escribir el color a mano dentro de la
   regla es exactamente lo que `test_ningun_color_suelto_fuera_del_bloque_de_tokens`
   impide desde DS102.
   =========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sc-sidebar-w) 1fr;
  min-height: 100vh;
}

.lateral {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  background: var(--sc-nav-bg);
  border-right: var(--sc-line) solid var(--sc-nav-border);
  /* padding: lo pone el esqueleto DS171 (más abajo); el esqueleto manda. */
}

.marca {
  font: 600 var(--sc-fs-h2)/var(--sc-lh-h2) var(--sc-font);
  color: var(--sc-text);
  padding: 0 var(--sc-3) var(--sc-4);
  letter-spacing: .01em;
}
.marca small {
  display: block;
  font: 400 var(--sc-fs-micro)/var(--sc-lh-micro) var(--sc-font);
  color: var(--sc-text-faint);
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* El logotipo vive en DOS sitios: en el lateral oscuro y en la pantalla de
   entrada, que no tiene armazón y es blanca (`main.entrada .marca`). Por eso
   el color claro va ESCOGIDO por el lateral y no en `.marca` a secas: pintarlo
   ahí dejaría el logotipo de la entrada en gris claro sobre blanco. */
.lateral .marca { color: var(--sc-nav-fg); }
.lateral .marca small { color: var(--sc-nav-faint); }
/* El logotipo REAL de SERCOIN (hallazgo 453+456), servido como fichero
   estático desde `/logo-sercoin.png` (`app/servidor.py:logo_sercoin`), NUNCA
   como `background-image` de la hoja: esa prohibición de DS102 sigue en pie
   y la sostiene `test_ningun_vacio_trae_dibujo`, ahora AJUSTADA para mirar
   el bloque `.vacio` y no la página entera; el lateral no es un vacío y
   nunca lo fue. El PNG mide 400x100; se escala a 140x35 (misma razón 4:1)
   para caber en los ~160 px que quedan dentro del lateral de 208 px una vez
   descontado el padding de `.lateral` y de `.marca`. */
.lateral .marca img { display: block; }

.lateral nav ul { list-style: none; margin: 0; padding: 0; }
.lateral nav li { margin: 0 0 2px; }
.lateral a {
  display: flex;
  align-items: center;
  gap: var(--sc-2);
  min-height: 40px;
  padding: var(--sc-2) var(--sc-3);
  border-radius: var(--sc-r);
  border-left: 2px solid transparent;
  color: var(--sc-nav-fg);
  text-decoration: none;
  font-size: var(--sc-fs-body);
  transition: background-color var(--sc-dur) var(--sc-ease);
}
.lateral a:hover { background: var(--sc-nav-sunk); color: var(--sc-nav-active-fg); }
/* El activo del mockup: pastilla granate de 37 px con un carril rojo de 2 px
   pegado al borde izquierdo (medido en x=11..12 de las dos pantallas que
   traen elemento activo). El carril es lo que hace que el activo se distinga
   aunque la pastilla quede por debajo de 3:1 contra el fondo del lateral. */
.lateral a[aria-current="page"] {
  background: var(--sc-nav-active-bg);
  border-left-color: var(--sc-nav-rail);
  color: var(--sc-nav-active-fg);
  font-weight: 600;
}
.lateral .grupo {
  font: 600 var(--sc-fs-micro)/var(--sc-lh-micro) var(--sc-font);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sc-nav-faint);
  padding: var(--sc-4) var(--sc-3) var(--sc-1);
}
/* Contador de pendientes. Base compartida por el lateral y el aviso de la
   barra superior (DS119). */
.cuenta {
  font: 600 var(--sc-fs-micro)/16px var(--sc-font);
  background: var(--sc-neutral-bg);
  color: var(--sc-neutral-fg);
  border-radius: var(--sc-r-pill);
  padding: 0 6px;
}
.lateral .cuenta { margin-left: auto; }

/* El pie del lateral: claim de ingeniería y versión, al fondo de la columna
   (ronda 1 y EXC de tanda 5). */
.lateral-pie {
  font-size: var(--sc-fs-micro);
  line-height: var(--sc-lh-micro);
  color: var(--sc-nav-faint);
}
.lateral-pie p { margin: 0; }
.lateral-pie .version { margin-top: var(--sc-1); }

.principal { grid-column: 2; display: flex; flex-direction: column; }

.barra {
  height: var(--sc-header-h);
  display: flex;
  align-items: center;
  background: var(--sc-surface);
  border-bottom: var(--sc-line) solid var(--sc-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.barra > *, .barra .yo > * { min-width: 0; }
.barra .titulo {
  font-weight: 600;
  font-size: var(--sc-fs-body);
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barra .yo {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sc-2);
  font-size: var(--sc-fs-sm);
  color: var(--sc-text-muted);
  min-width: 0;
}
.barra .yo b {
  font-weight: 600;
  color: var(--sc-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barra .yo .org {
  font-size: var(--sc-fs-micro);
  color: var(--sc-text-faint);
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-pill);
  padding: 1px 8px;
  white-space: nowrap;
}
/* El único indicador real de la cabecera (DS119): el aviso de
   `/notificaciones`, con el mismo contador que ya usa el lateral. */
.barra .avisos {
  color: var(--sc-link);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.barra .avisos:hover { color: var(--sc-link-hover); }

/* --- El carril de procedencia. Barra fija bajo la cabecera, en TODAS las
       pantallas, antes de que nadie mire un número. Es lo que impide que la
       pantalla mienta: de cuándo es cada fuente y cuántos datos van sin
       evidencia. ------------------------------------------------------------ */
.evbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sc-1) var(--sc-4);
  background: var(--sc-ev-bg);
  font: var(--sc-fs-micro)/var(--sc-lh-micro) var(--sc-font);
  color: var(--sc-text-muted);
}
.evbar b { font-weight: 600; color: var(--sc-text); }
.evbar .noev { color: var(--sc-ev-noev-fg); font-weight: 600; }

/* Punto de frescura de 6 px. Con la fecha exacta en `title`, y con TEXTO al
   lado: ningún estado depende solo del color. */
.punto {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  background: var(--sc-text-faint);
}
.punto.fresco { background: var(--sc-fresh); }
.punto.tibio  { background: var(--sc-stale); }
.punto.viejo  { background: var(--sc-old); }

main {
  flex: 1;
  padding: var(--sc-5) var(--sc-gutter) var(--sc-8);
  max-width: 1560px;
  width: 100%;
  min-width: 0;
}

/* La pantalla de entrada no tiene armazón: no hay a dónde navegar todavía.
   Una tarjeta centrada de 400 px, que es el ancho de un formulario de dos
   campos; a pantalla completa los campos miden 1200 px y el ojo no sabe
   dónde empezar. */
main.entrada {
  max-width: 400px;
  margin: 0 auto;
  padding: var(--sc-8) var(--sc-gutter);
}
main.entrada .marca { padding: 0 0 var(--sc-6); }
main.entrada h1 { font-size: var(--sc-fs-h2); line-height: var(--sc-lh-h2); }
main.entrada .acciones > button { flex: 1 1 100%; }
main.entrada code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--sc-fs-sm);
}

/* El pie de marca (DS119, mockup de ronda 1): SERCOIN a la izquierda,
   Artemis Compras a la derecha. Vive en `.principal`, en el flujo normal —
   por eso no sale en la captura de pantallas con tabla larga (EXC, RFQ):
   queda fuera del recuadro de 1086 px, no falta en la página. */
.marca-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-2) var(--sc-6);
  background: var(--sc-group-bg);
  border-top: var(--sc-line) solid var(--sc-border);
  color: var(--sc-text-faint);
}
.marca-pie b { color: var(--sc-text); font-weight: 600; }

/* ===========================================================================
   3 · Tabla · la decisión central. Fila de 48 px (medida), `padding:10px 12px`,
       cabecera pegajosa, sin cebra, y SIEMPRE dentro de su propio carril.
   =========================================================================== */

/* `.tw` es el carril. La tabla se desplaza DENTRO de él; la página jamás. */
/* La sombra no es adorno. En esta piel la superficie y el lienzo se separan
   por 1,08:1 (#FFFFFF contra #F4F6F8) y el filete que queda mide 1,13:1: si
   la tarjeta no proyecta, su límite no existe. Se midió bajo el borde
   inferior de una tarjeta del mockup —pico de 8/228 = 3,5 % a 1-2 px, apagada
   a los 6 px— y ese es `--sc-shadow-card`. Lo que NO flota (la fila, la
   celda) sigue con `--sc-shadow-none`, que es el acuerdo de DS102 §1.10. */
.tw {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-card);
  box-shadow: var(--sc-shadow-card);
  margin-bottom: var(--sc-4);
  max-width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sc-fs-body);
  background: var(--sc-surface);
  /* Debajo de esto una tabla de 5-6 columnas deja de leerse: mejor que se
     desplace dentro del carril que aplastarla a celdas de 33 px, que es lo
     que hacen las tres referencias medidas y por lo que suspenden. */
  min-width: 720px;
}
/* Tabla de PARES clave/valor: dos columnas. El suelo de 720 px existe para
   las de cinco o seis; aquí solo consigue que el resumen que hay que leer
   ANTES de confirmar haya que leerlo desplazando de lado. Medido a 360 px:
   con el suelo puesto, «Cliente o referencia» y «Cómo se compra» quedan
   cortados fuera del carril. */
table.pares { min-width: 0; }
table.pares th { white-space: normal; position: static; width: 40%; }

th, td {
  text-align: left;
  padding: var(--sc-cell-pad);
  border-bottom: var(--sc-line) solid var(--sc-border);
  vertical-align: top;
}
tr:last-child td { border-bottom: 0; }
th {
  padding: var(--sc-th-pad);
  font: 600 var(--sc-fs-label)/var(--sc-lh-label) var(--sc-font);
  color: var(--sc-text-muted);
  background: var(--sc-surface-sunk);
  text-transform: uppercase;
  letter-spacing: .04em;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}
td { height: var(--sc-row-h); }
/* Cifras tabulares obligatorias en importe, cantidad y referencia: sin esto
   una columna de precios no se compara de un vistazo. */
td.num, th.num, .num { font-variant-numeric: tabular-nums; text-align: right; }
/* Columna de procedencia: ancho declarado, no un `title` escondido. */
th.proc, td.proc { width: var(--sc-ev-col-w); }

/* ===========================================================================
   4 · Chips de estado. Caja de 24 px, 12 px/500, punto de 6 px delante.
   =========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  margin: 0 4px 2px 0;
  border-radius: var(--sc-r-pill);
  font: 500 var(--sc-fs-label)/var(--sc-lh-label) var(--sc-font);
  background: var(--sc-neutral-bg);
  color: var(--sc-neutral-fg);
  border: var(--sc-line) solid transparent;
  white-space: nowrap;
}
.chip.obra  { background: var(--sc-info-bg);    color: var(--sc-info-fg); }
.chip.stock { background: var(--sc-neutral-bg); color: var(--sc-neutral-fg); }

/* Los CUATRO estados visibles del ORACLE (`app/visible.py`) y los tres
   colores que el PDF V4 §3.2.2 hace requisito. El punto va delante del texto
   para que el estado no dependa del color: «azul» también se lee. */
.est { font-weight: 600; }
.est::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: var(--sc-r-dot);
  margin-right: 6px;
  background: currentColor;
}
.est.azul    { background: var(--sc-info-bg);    color: var(--sc-info-fg); }
.est.naranja { background: var(--sc-warn-bg);    color: var(--sc-warn-fg); }
.est.verde   { background: var(--sc-ok-bg);      color: var(--sc-ok-fg); }
.est.rojo    { background: var(--sc-danger-bg);  color: var(--sc-danger-fg); }

/* Un dato SIN respaldo no se esconde y no se pinta igual que uno respaldado. */
.noev {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: var(--sc-r-pill);
  font: 600 var(--sc-fs-label)/var(--sc-lh-label) var(--sc-font);
  background: var(--sc-ev-noev-bg);
  color: var(--sc-ev-noev-fg);
}

/* Texto de aviso en línea. Heredado de la maqueta anterior; sin `.rojo` y
   `.ambar` habría que tocar catorce plantillas para re-colorear un aviso. */
.rojo  { color: var(--sc-danger-fg); font-weight: 600; }
.ambar { color: var(--sc-warn-fg);   font-weight: 600; }
.verde { color: var(--sc-ok-fg);     font-weight: 600; }

/* ===========================================================================
   5 · Superficies, formularios y acciones
   =========================================================================== */

.caja {
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-card);
  padding: var(--sc-4);
  margin-bottom: var(--sc-4);
  box-shadow: var(--sc-shadow-card);
}

.tarjeta {
  display: block;
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  border-left: 3px solid var(--sc-border-strong);
  border-radius: var(--sc-r-card);
  padding: var(--sc-3) var(--sc-4);
  margin-bottom: var(--sc-2);
}
.tarjeta.vencido { border-left-color: var(--sc-danger-fg); }
.tarjeta.sinfecha { border-left-color: var(--sc-warn-fg); }
.tarjeta > a {
  color: var(--sc-text);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  /* Objetivo táctil: en móvil, 44 px de alto reales, no 19. */
  min-height: 24px;
}
.tarjeta > a:hover { text-decoration: underline; }

.meta { font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.meta.micro { font-size: var(--sc-fs-micro); color: var(--sc-text-faint); }

.vacio {
  color: var(--sc-text-muted);
  background: var(--sc-surface);
  border: 1px dashed var(--sc-border-strong);
  border-radius: var(--sc-r-card);
  padding: var(--sc-5);
  text-align: left;
  margin: 0 0 var(--sc-4);
}
/* DS102 · un vacío es un título de una línea, la causa y la acción. Sin
   ilustración: no hay ni un `background-image` en toda esta hoja. */
.vacio b { display: block; color: var(--sc-text); margin-bottom: var(--sc-1); }
.vacio .acciones { margin-top: var(--sc-3); }

.aviso, .error, .nota {
  border-radius: var(--sc-r-card);
  padding: var(--sc-3) var(--sc-4);
  margin-bottom: var(--sc-4);
  font-size: var(--sc-fs-body);
}
.aviso { background: var(--sc-warn-bg);   border: var(--sc-line) solid var(--sc-warn-border); color: var(--sc-warn-fg); }
.error { background: var(--sc-danger-bg); border: var(--sc-line) solid var(--sc-brand-border); color: var(--sc-danger-fg); font-weight: 600; }
.nota  { background: var(--sc-info-bg);   border: var(--sc-line) solid var(--sc-info-border); color: var(--sc-info-fg); }

label {
  display: block;
  font: 500 var(--sc-fs-label)/var(--sc-lh-label) var(--sc-font);
  color: var(--sc-text-muted);
  margin: var(--sc-3) 0 var(--sc-1);
}

input, select, textarea {
  font: var(--sc-fs-body)/var(--sc-lh-body) var(--sc-font);
  color: var(--sc-text);
  background: var(--sc-surface);
  /* 3,63:1 contra el blanco: WCAG 1.4.11 exige 3:1 para el LÍMITE de un
     componente de interfaz. El #D0D5DD del corpus da 1,47:1 y suspende. */
  border: var(--sc-line) solid var(--sc-border-control);
  border-radius: var(--sc-r);
  padding: 9px var(--sc-3);
  min-height: 40px;
  min-width: 0;
  max-width: 100%;
}
textarea { min-height: 80px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--sc-text-faint); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--sc-surface-sunk);
  color: var(--sc-text-muted);
}
/* Medido en 18 px: por debajo del minimo de 24 px de WCAG 2.5.8 AA incluso
   en escritorio. 24 en escritorio, 28 con el dedo. */
input[type=checkbox], input[type=radio] {
  min-height: 0;
  width: 24px; height: 24px;
  accent-color: var(--sc-brand);
  vertical-align: middle;
}

button, .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-2);
  font: 600 var(--sc-fs-body)/var(--sc-lh-body) var(--sc-font);
  min-height: 40px;
  padding: var(--sc-2) var(--sc-4);
  border-radius: var(--sc-r);
  border: var(--sc-line) solid var(--sc-brand);
  background: var(--sc-brand);
  color: var(--sc-on-brand);   /* 5,91:1 sobre --sc-brand, medido por DS118 */
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--sc-dur) var(--sc-ease);
}
button:hover, .boton:hover { background: var(--sc-brand-hover); border-color: var(--sc-brand-hover); color: var(--sc-on-brand); }
button.sec, .boton.sec {
  background: var(--sc-surface);
  color: var(--sc-text);
  border-color: var(--sc-border-control);
}
button.sec:hover, .boton.sec:hover { background: var(--sc-surface-sunk); color: var(--sc-text); }
button.peligro { background: var(--sc-danger-fg); border-color: var(--sc-danger-fg); }
button.peligro:hover { background: var(--sc-danger-press); border-color: var(--sc-danger-press); }

.acciones {
  display: flex;
  gap: var(--sc-2);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--sc-4);
}
/* Un enlace suelto dentro de una barra de acciones es una acción, no una
   palabra en mitad de una frase. Medido en Aprobación: 294x20 px, por debajo
   de los 24 px de WCAG 2.5.8 AA incluso en escritorio. */
.acciones a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* Barra de filtros sobre la tabla. El filtro RECORTA lo que ya estás mirando:
   no hay animación y no cambia de pantalla. */
form.filtros {
  display: flex;
  gap: var(--sc-2);
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: var(--sc-4);
  padding: var(--sc-3);
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-card);
  box-shadow: var(--sc-shadow-card);
}
form.filtros label { margin-top: 0; }
form.filtros > * { min-width: 0; }
form.filtros input[type=search], form.filtros input[name=q] { flex: 1 1 200px; }
/* DS102 · el campo de búsqueda va envuelto en su `div` con la etiqueta, así
   que el que tiene que crecer es el `div`, no el `input`. Estaba puesto con
   un `style=` en la plantilla: un valor de maqueta dentro del HTML es un
   token que nadie puede revisar. */
form.filtros .ancho { flex: 1 1 200px; }
form.filtros .ancho input { width: 100%; }

.pila > input, .pila > select, .pila > textarea { width: 100%; }
.pila label + input, .pila label + select, .pila label + textarea { width: 100%; }

/* Rejilla de columnas de la vista de trabajo. */
.tablero { display: grid; gap: var(--sc-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .tablero { grid-template-columns: repeat(3, 1fr); } }
.tablero .col > h2 { margin-top: 0; }

/* ===========================================================================
   5 bis · DS102 · LISTA DE PEDIDOS (pantalla piloto, rol R07)
   UNA tabla que cabe, con los filtros a la vista. Antes eran tres columnas
   kanban: con 40 pedidos obligaban a desplazar tres veces y no dejaban
   comparar importes ni fechas entre estados, que es lo que hace a diario
   quien compra. El estado no se pierde: encabeza su grupo dentro de la misma
   tabla. Es una decisión de PRODUCTO (qué hace falta para trabajar), no de
   estética: aquí no se copia el aspecto de nada. La piel entera sale de los
   tokens de `:root` y la trae el ORACLE.
   =========================================================================== */

/* Sólo para leer: se anuncia y no se ve. Sin esto un `<caption>` obliga a
   elegir entre describir la tabla o duplicar el `<h1>` en pantalla. */
.oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Cabecera de grupo DENTRO del cuerpo. `position: static` a propósito: la
   regla global deja todo `th` pegajoso, y dos pegajosos en el mismo carril
   se tapan el uno al otro al desplazar. */
.tpedidos tbody th.grupo {
  position: static;
  height: var(--sc-group-h);
  padding: var(--sc-2) var(--sc-3);
  background: var(--sc-group-bg);
  color: var(--sc-text);
  text-transform: none;
  letter-spacing: 0;
  font: 600 var(--sc-fs-sm)/var(--sc-lh-sm) var(--sc-font);
  border-bottom: var(--sc-line) solid var(--sc-border-strong);
}
.tpedidos tbody th.grupo .cuantos { color: var(--sc-text-muted); font-weight: 500; }

/* Densidad: una fila de pedido es una línea, no un párrafo. */
.tpedidos td { vertical-align: middle; }
.tpedidos td .meta { display: block; }
.tpedidos .ref { font-weight: 600; }

/* La fila entera reacciona al ratón Y al teclado. `:focus-within` es lo que
   hace que tabular por la lista se vea igual de claro que pasar el ratón:
   sin ella sólo se ilumina el enlace de 60 px y se pierde la fila. */
.tpedidos tbody tr:hover td { background: var(--sc-surface-sunk); }
.tpedidos tbody tr:focus-within td { background: var(--sc-brand-soft); }

/* El aviso de entrega vive en su celda y no depende sólo del color: lleva
   escrito «vencido» o «sin fecha de entrega». */
.tpedidos td.ent { white-space: nowrap; }

/* Vacío con filtros puestos: una fila que dice qué pasa y qué hacer. */
.tpedidos td.nada { color: var(--sc-text-muted); }

.fila { display: flex; gap: var(--sc-4); flex-wrap: wrap; align-items: flex-start; }
.fila > * { flex: 1 1 280px; }

/* KPI del Inicio. Cifra de 24 px, borde, sombra none. */
.kpis { display: grid; gap: var(--sc-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: var(--sc-5); }
.kpi {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-card);
  box-shadow: var(--sc-shadow-card);
  padding: var(--sc-3) var(--sc-4);
  min-width: 0;
}
.kpi .cifra {
  font: 600 var(--sc-fs-display)/var(--sc-lh-display) var(--sc-font);
  font-variant-numeric: tabular-nums;
  display: block;
}
.kpi:hover { border-color: var(--sc-border-control); }
.kpi .rotulo {
  display: block;
  text-decoration: none;
  font: 500 var(--sc-fs-label)/var(--sc-lh-label) var(--sc-font);
  color: var(--sc-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Hilo de eventos del pedido. */
ol.hilo { list-style: none; padding: 0; margin: 0; }
ol.hilo li {
  border-left: 2px solid var(--sc-border);
  padding: var(--sc-2) 0 var(--sc-2) var(--sc-4);
  font-size: var(--sc-fs-sm);
}
ol.hilo li b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--sc-fs-micro);
  color: var(--sc-text-muted);
}

/* Migas del formulario guiado. */
ol.pasos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-1);
  padding: 0;
  margin: 0 0 var(--sc-4);
  font: 500 var(--sc-fs-label)/var(--sc-lh-label) var(--sc-font);
  color: var(--sc-text-muted);
}
ol.pasos li {
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-pill);
  padding: var(--sc-1) var(--sc-3);
  background: var(--sc-surface);
  min-height: 24px;
  display: flex;
  align-items: center;
}
ol.pasos li.aqui {
  border-color: var(--sc-brand);
  background: var(--sc-brand-soft);
  color: var(--sc-brand);
  font-weight: 600;
}

/* Una opción de radio o casilla: el objetivo es la FILA, no el círculo. */
.opcion {
  display: flex;
  align-items: center;
  gap: var(--sc-3);
  min-height: 44px;
  padding: var(--sc-1) var(--sc-2);
  margin: 0;
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r);
  background: var(--sc-surface);
  font: var(--sc-fs-body)/var(--sc-lh-body) var(--sc-font);
  color: var(--sc-text);
  cursor: pointer;
}
.opcion:hover { background: var(--sc-surface-sunk); }
.opcion:focus-within {
  outline: var(--sc-focus-w) solid var(--sc-focus-color);
  outline-offset: var(--sc-focus-offset);
}
.opcion input { flex: 0 0 auto; }
/* Una opción con explicación debajo. El texto de apoyo va DENTRO del objetivo
   táctil, no al lado: elegir mal la modalidad cambia lo que hará falta para
   cerrar la tarjeta, y eso no se adivina por el nombre. */
.opcion.alta { align-items: flex-start; padding: var(--sc-3); }
.opcion.alta > span { min-width: 0; }
.opcion.alta .meta { display: block; margin-top: 2px; }

/* ===========================================================================
   5.bis · Las líneas del formulario guiado (V5C · PDF §3.2.1)
       «Se pueden añadir varias líneas del mismo proveedor». Cada línea es una
       TARJETA y no una fila de tabla, por la misma medida que llevó la
       recepción a fila-tarjeta: a 360 px una tabla de cinco columnas deja
       celdas de 33 px o se sale de la pantalla.
   =========================================================================== */

/* El fondo es HUNDIDO, y eso tiene una consecuencia medida: `--sc-text-faint`
   está calibrado sobre el lienzo (4,68:1) y aquí cae a 4,51:1. Pasa AA por una
   centésima, y una centésima no es un margen, así que dentro de esta tarjeta
   no se usa. Medido en Chromium contra el fondo real compuesto. */
.lineas .linea {
  background: var(--sc-surface-sunk);
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-card);
  padding: var(--sc-3) var(--sc-4) var(--sc-4);
  margin-bottom: var(--sc-3);
}
.lineas .linea .que {
  font: 600 var(--sc-fs-label)/var(--sc-lh-label) var(--sc-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sc-text-muted);
  margin-bottom: var(--sc-2);
}
.lineas .linea input {
  width: 100%;
  min-height: var(--sc-tap-min);
}
.lineas .quitar, .lineas .anadir { margin-top: var(--sc-3); }
.lineas .quitar button, .lineas .anadir button { min-height: var(--sc-tap-min); }

/* Enlace de salto al contenido. Invisible hasta que el teclado lo enfoca. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sc-surface);
  color: var(--sc-text);
  padding: var(--sc-2) var(--sc-4);
  border: var(--sc-line) solid var(--sc-border-control);
  border-radius: var(--sc-r);
  z-index: 100;
}
.saltar {
  min-height: var(--sc-tap-touch);
  display: flex;
  align-items: center;
}
.saltar:focus { left: var(--sc-gutter); top: var(--sc-2); }

/* Un enlace dentro de una celda o de una tarjeta es el objetivo principal de
   esa fila, no una palabra subrayada en mitad de una frase: no le aplica la
   excepcion de WCAG 2.5.8 para enlaces en linea. Medido: 16 px de alto.
   24 px en escritorio (2.5.8 AA), 44 en cualquier viewport tactil. */
td a, .tarjeta > a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* ===========================================================================
   6 · Recepción / albarán · móvil de verdad
       Se usa DE PIE, con el móvil en una mano y un albarán de papel en la
       otra. La tabla no se estrecha: se SUSTITUYE por fila-tarjeta, y todo
       objetivo mide 48 px. Estrechar una tabla no la hace móvil: las tres
       referencias medidas lo demuestran (33 px de celda, 10 de 10 objetivos
       por debajo de 44 px).
   =========================================================================== */

.recep .linea {
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-card);
  padding: var(--sc-3) var(--sc-4);
  margin-bottom: var(--sc-3);
}
.recep .linea .que { font-weight: 600; font-size: var(--sc-fs-body); }
.recep .linea .cuentas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-1) var(--sc-3);
  font-size: var(--sc-fs-sm);
  color: var(--sc-text-muted);
  margin: var(--sc-1) 0 var(--sc-2);
  font-variant-numeric: tabular-nums;
}
.recep .linea input,
.recep .linea select,
.recep .linea textarea {
  min-height: var(--sc-tap-min);
  font-size: 16px;   /* iOS no hace zoom si el campo mide 16 px o más */
  width: 100%;
}
.recep label { font-size: var(--sc-fs-body); color: var(--sc-text); font-weight: 500; }
.recep input, .recep select, .recep textarea, .recep button, .recep .boton {
  min-height: var(--sc-tap-min);
}
.recep input[type=file] { padding: var(--sc-2); }
/* Acción principal al alcance del pulgar, fija al pie, sin taparse con nada. */
.recep .pie {
  position: sticky;
  bottom: 0;
  background: var(--sc-bg);
  border-top: var(--sc-line) solid var(--sc-border);
  padding: var(--sc-3) 0;
  margin-top: var(--sc-4);
  display: flex;
  gap: var(--sc-2);
  flex-wrap: wrap;
}
.recep .pie button, .recep .pie .boton { flex: 1 1 160px; }

/* ===========================================================================
   7 · Táctil y móvil
   =========================================================================== */

@media (max-width: 900px) {
  /* El shell se apila. La navegación pasa a un carril horizontal propio:
     sigue visible, no necesita JavaScript, y no desborda la página porque
     el desplazamiento vive DENTRO del carril. */
  .app { grid-template-columns: 1fr; }
  .lateral, .principal { grid-column: 1; }
  .lateral {
    border-right: 0;
    border-bottom: var(--sc-line) solid var(--sc-nav-border);
    padding: var(--sc-3) 0 0;
    position: sticky; top: 0; z-index: 30;
  }
  .marca { padding: 0 var(--sc-gutter) var(--sc-2); }
  .lateral .grupo { display: none; }
  /* El pie del lateral (claim + versión) no cabe en el carril horizontal
     pegajoso sin añadirle una fila muerta a cada pantalla; se retira igual
     que los títulos de grupo, dos líneas más arriba. */
  .lateral-pie { display: none; }
  .lateral nav ul {
    display: flex;
    gap: var(--sc-1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--sc-gutter) var(--sc-2);
    scrollbar-width: thin;
  }
  .lateral nav li { flex: 0 0 auto; }
  .lateral a {
    /* Suelo táctil GLOBAL de 44 px en cualquier viewport <= 900 px, no solo
       en Recepción: SIERRA5 midió objetivos de 28 y 34 px en las diez
       pantallas de la maqueta anterior. */
    min-height: var(--sc-tap-touch);
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--sc-r) var(--sc-r) 0 0;
    white-space: nowrap;
  }
  .lateral a[aria-current="page"] {
    border-left: 0;
    border-bottom-color: var(--sc-nav-rail);
  }
  .barra {
    position: static;
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    padding: var(--sc-2) var(--sc-gutter);
  }
  /* El `<h1>` de la pantalla dice lo mismo tres píxeles más abajo. */
  .barra .titulo { display: none; }
  .barra .yo { margin-left: 0; flex-wrap: wrap; }
  /* Un enlace de celda de 40 px de ancho sigue siendo un objetivo pequeño
     aunque mida 44 de alto. Medido en Obras: 40x44. */
  td a { min-width: 44px; padding: 0 var(--sc-1); }

  /* Todo lo que se pulsa, 44 px. */
  button, .boton, input, select, textarea, .tarjeta > a {
    min-height: var(--sc-tap-touch);
  }
  input[type=checkbox], input[type=radio] {
    width: 28px; height: 28px; min-height: 0;
  }
  td a, .tarjeta > a, .acciones a { min-height: var(--sc-tap-touch); }
  /* Un campo de menos de 16 px hace que iOS haga zoom al enfocarlo, y el
     zoom deja la página desplazada en horizontal. */
  input, select, textarea { font-size: 16px; }
  .acciones > button, .acciones > .boton, .acciones > form, .acciones > a { flex: 1 1 160px; }
  .acciones a > button { width: 100%; }
}

@media (max-width: 420px) {
  h1 { font-size: 18px; line-height: 26px; }
  main { padding: var(--sc-4) var(--sc-gutter) var(--sc-8); }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* ===========================================================================
   8 · Menos movimiento, impresión
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .lateral, .barra, .marca-pie, .acciones, form.filtros { display: none; }
  .app { display: block; }
  body { background: var(--sc-paper); }
  .tw { overflow: visible; border: 0; }
}

/* === DS147 · alta de proveedor === */
:root {
  --pn-aside: 292px;
  --pn-row-gap: 9px;
  --pn-title: 30px;
  --pn-section-title: 14px;
  --pn-control-h: 28px;
  --pn-steps-h: 89px;
  --pn-legal-h: 159px;
  --pn-address-h: 150px;
  --pn-contact-h: 143px;
  --pn-commercial-h: 220px;
  --pn-heading-h: 70px;
  --pn-dependencies-offset: 103px;
}
.pn147 { margin-top: calc(-1 * var(--sc-3)); }
.pn147 .pn-migas { display: flex; gap: var(--sc-3); font-size: var(--sc-fs-sm); margin: 0 var(--sc-4) var(--sc-2); }
.pn147 .pn-migas a { text-decoration: none; }
.pn147 .pn-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sc-4); min-height: var(--pn-heading-h); padding: 0 var(--sc-4); }
.pn147 h1 { font-size: var(--pn-title); line-height: var(--sc-lh-display); margin: 0; }
.pn147 h1 span { font-weight: 400; color: var(--sc-text-muted); }
.pn147 .pn-cabecera p { margin: 0 0 var(--sc-3); color: var(--sc-text-muted); font-size: var(--pn-section-title); }
.pn147 .pn-volver { display: inline-flex; align-items: center; justify-content: center; padding: var(--sc-2) var(--sc-4); border: var(--sc-line) solid var(--sc-border-control); border-radius: var(--sc-r-sm); background: var(--sc-surface); color: var(--sc-text); text-decoration: none; white-space: nowrap; }
.pn147 .pn-reticula { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) var(--pn-aside); gap: var(--pn-row-gap) var(--sc-3); align-items: start; grid-template-rows: auto auto auto auto var(--pn-commercial-h) auto; }
.pn147 .pn-tarjeta, .pn147 .pn-pasos { border: var(--sc-line) solid var(--sc-border); border-radius: var(--sc-r-sm); background: var(--sc-surface); padding: var(--sc-3) var(--sc-4); margin: 0; }
.pn147 h2 { margin: 0 0 var(--sc-3); font-size: var(--pn-section-title); line-height: var(--sc-lh-h2); border-left: var(--sc-1) solid var(--sc-brand); padding-left: var(--sc-3); }
.pn147 .pn-pasos { grid-column: 1 / 4; grid-row: 1; min-height: var(--pn-steps-h); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-3); list-style: none; }
.pn147 .pn-pasos li { font-size: var(--sc-fs-sm); display: flex; align-items: flex-start; gap: var(--sc-3); padding-top: var(--sc-1); }
.pn147 .pn-pasos b { display: grid; place-items: center; flex: 0 0 var(--sc-8); height: var(--sc-8); border-radius: var(--sc-r-dot); background: var(--sc-surface-sunk); }
.pn147 .pn-pasos div { border-top: var(--sc-line) solid var(--sc-border-strong); margin-top: var(--sc-3); padding-top: var(--sc-2); font-weight: 600; }
.pn147 .pn-pasos small { display: block; font-size: var(--sc-fs-micro); color: var(--sc-text-muted); font-weight: 400; }
.pn147 .pn-pasos [aria-current] b { background: var(--sc-brand); color: var(--sc-on-brand); }
.pn147 .pn-pasos [aria-current] div { border-top-color: var(--sc-brand); }
.pn147 .pn-legal { grid-column: 1 / 4; grid-row: 2; min-height: var(--pn-legal-h); }
.pn147 .pn-direccion { grid-column: 1 / 4; grid-row: 3; min-height: var(--pn-address-h); }
.pn147 .pn-direccion { padding-top: var(--sc-2); padding-bottom: var(--sc-2); }
.pn147 .pn-direccion h2 { margin-bottom: var(--sc-2); }
.pn147 .pn-direccion .pn-tres { margin-top: var(--sc-1); }
.pn147 .pn-contacto { grid-column: 1 / 4; grid-row: 4; min-height: var(--pn-contact-h); }
.pn147 .pn-comercial { grid-column: 3; grid-row: 5; min-height: var(--pn-commercial-h); }
.pn147 .pn-siguientes { grid-column: 4; grid-row: 5 / 7; margin-top: var(--pn-dependencies-offset); }
.pn147 .pn-siguientes ol { padding-left: var(--sc-5); margin: var(--sc-4) 0 0; }
.pn147 .pn-siguientes li { padding: 0 0 var(--sc-4) var(--sc-2); }
.pn147 .pn-siguientes li::marker { color: var(--sc-brand); }
.pn147 .pn-siguientes p, .pn147 .pn-ayuda { font-size: var(--sc-fs-sm); color: var(--sc-text-muted); margin: var(--sc-2) 0 0; }
.pn147 .pn-dos, .pn147 .pn-tres { display: grid; gap: var(--sc-3); }
.pn147 .pn-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pn147 .pn-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--sc-2); }
.pn147 label { display: block; font-size: var(--sc-fs-label); color: var(--sc-text-muted); margin: 0 0 var(--sc-1); font-weight: 400; }
.pn147 .pn-requerido { color: var(--sc-brand); }
.pn147 input, .pn147 textarea { width: 100%; min-width: 0; font-size: var(--sc-fs-sm); padding: var(--sc-1) var(--sc-2); min-height: var(--pn-control-h); border-radius: var(--sc-r-sm); }
.pn147 textarea { resize: vertical; }
.pn147 .pn-pie { grid-column: 1 / 4; grid-row: 6; display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); border-top: var(--sc-line) solid var(--sc-border-strong); padding: var(--sc-3) var(--sc-4); }
.pn147 .pn-pie p { color: var(--sc-text-muted); font-size: var(--sc-fs-sm); }
.pn147 .pn-acciones { display: flex; gap: var(--sc-3); align-items: center; }
@media (max-width: 1100px) {
  .pn147 .pn-reticula { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
  .pn147 .pn-siguientes { grid-column: 1 / 3; grid-row: 5; margin-top: 0; }
  .pn147 .pn-cabecera { flex-wrap: wrap; padding-bottom: var(--sc-3); }
}
@media (max-width: 700px) {
  .pn147 .pn-reticula, .pn147 .pn-dos, .pn147 .pn-tres { display: flex; flex-direction: column; }
  .pn147 .pn-reticula > * { width: 100%; }
  .pn147 .pn-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn147 .pn-pie { flex-direction: column; align-items: stretch; }
  .pn147 .pn-acciones { flex-wrap: wrap; }
  .pn147 input, .pn147 button, .pn147 .pn-volver { min-height: var(--sc-tap-touch); }
}

/* === DS146 · entrar === */
/* ===========================================================================
   La pantalla de entrada, clonada de
   `RONDAS_1_Y_2/acceso_seguro_a_artemis_compras.png`. Dos mitades: la
   izquierda mide 700 px (logotipo real de SERCOIN, «Artemis Compras», la
   tarjeta de acceso de 602 px y el pie); la derecha lleva el rótulo vertical,
   el titular a tres líneas con la última en rojo, el párrafo, los tres
   reclamos con su círculo y la firma abajo a la derecha. Lo que el mockup
   enseña y Artemis no tiene (SSO, recuperar contraseña, idioma, correo de
   soporte, enlaces legales, la fotografía, el ojo de la contraseña) NO se
   pinta: está declarado en `inbox/FORGE-DS146/INFORME.md` con su parche.
   Las medidas en px de este bloque son las del PNG y llevan al lado la
   coordenada de la que salen; las de tipografía son tokens de `:root`.
   =========================================================================== */

/* La entrada deja de ser la tarjeta de 400 px centrada de `main.entrada`.
   Misma clase base para que las páginas de error sin sesión sigan igual. */
main.entrada.entrar { max-width: none; margin: 0; padding: 0; }

.entrar {
  display: grid;
  grid-template-columns: var(--sc-entrar-col-w) minmax(0, 1fr);
  min-height: 100vh;
}
.entrar, .entrar > * { min-width: 0; }

/* --- mitad izquierda ------------------------------------------------------ */
.entrar-izq {
  display: flex;
  flex-direction: column;
  padding: 41px 33px 31px 65px;   /* logotipo y=41 · 700-667 · pie en y=1039..1050 · canto x=65 */
  background: var(--sc-bg);
}
/* DS171 · el símbolo (hueco, DATA_GAP) en x=64..100 y el logotipo real a
   su derecha, a la altura de la palabra del mockup: x=112, 124x26 → 128x32
   por la proporción 4:1 del fichero. */
.entrar-marca {
  display: grid;
  grid-template-columns: 36px auto;
  column-gap: 12px;
  justify-content: start;
}
.entrar-diamante { grid-row: 1 / span 2; width: 36px; height: 61px; display: block; }
/* DS198 · la palabra del mockup: negra, 700, espaciada, x=116 y=48. */
.entrar-palabra { font: 700 22px/28px var(--sc-font); letter-spacing: .06em; color: var(--sc-text); margin-top: 6px; }
.entrar-lema {
  margin: var(--sc-1) 0 0;
  font: 500 var(--sc-fs-micro)/var(--sc-lh-micro) var(--sc-font);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sc-text-muted);
}
/* El triángulo de Artemis (hueco, DATA_GAP) ocupa x=64..128, y=156..208;
   «Artemis Compras» y el subtitular arrancan en x=148. */
.entrar-titular {
  display: grid;
  grid-template-columns: 64px auto;
  column-gap: 20px;
  justify-content: start;
  margin-top: 52px;                 /* triángulo en y=156 */
}
.entrar-triangulo { grid-row: 1 / span 2; width: 64px; height: 56px; margin-top: 0; display: block; }
.entrar-producto {
  margin: 0;                        /* mayúscula de «Artemis» en y=170 */
  font: 400 var(--sc-fs-entrar-marca)/var(--sc-lh-entrar-marca) var(--sc-font);
  letter-spacing: -.01em;
  color: var(--sc-text);
}
.entrar-producto b { font-weight: 700; }
.entrar-lead {
  margin: var(--sc-2) 0 0;
  font: 400 var(--sc-fs-entrar-lead)/var(--sc-lh-entrar-lead) var(--sc-font);
  color: var(--sc-text-muted);
}

.entrar-tarjeta {
  width: 100%;
  max-width: var(--sc-entrar-card-w);
  margin: 38px 0 0;                 /* la tarjeta empieza en y=312 */
  padding: 32px 32px 32px;          /* 96-65 · 666-636 · la tarjeta acaba en y=994 */
  background: var(--sc-surface);
  border-radius: var(--sc-r-card);  /* medido ~8 px; el token de superficie es 12 */
  box-shadow: var(--sc-shadow-card);
}
.entrar .entrar-tarjeta h1 {
  margin: 0;
  font: 600 var(--sc-fs-entrar-h1)/var(--sc-lh-entrar-h1) var(--sc-font);
  color: var(--sc-text);
}
.entrar-sub {
  margin: var(--sc-1) 0 0;
  font: 400 var(--sc-fs-entrar-md)/var(--sc-lh-entrar-md) var(--sc-font);
  color: var(--sc-text-muted);
}
.entrar-tarjeta .error { margin: var(--sc-5) 0 0; }

.entrar-form label {
  margin: 24px 0 6px;               /* subtítulo y=405 → etiqueta y=440 → campo y=465 */
  font: 500 var(--sc-fs-entrar-ui)/var(--sc-lh-entrar-ui) var(--sc-font);
  color: var(--sc-text);
}
.entrar-form .entrar-campo + label { margin-top: var(--sc-6); }   /* 513 → 540 */
.entrar-campo { position: relative; }
.entrar-campo .icono {
  position: absolute;
  left: 19px;                       /* icono en x=115 dentro del campo que empieza en 96 */
  top: 50%;
  width: 22px; height: 22px;
  margin-top: -11px;
  color: var(--sc-text-faint);
  pointer-events: none;
}
.entrar-campo input {
  width: 100%;
  min-height: 48px;                 /* campo 540x48 */
  padding: 12px 19px 12px 60px;     /* el texto empieza en x=156 */
  font-size: var(--sc-fs-entrar-ui);
  line-height: var(--sc-lh-entrar-ui);
  border-radius: var(--sc-r);       /* medido 6 px */
  background: var(--sc-bg);         /* DS171 · el campo del mockup va relleno de gris claro; el
                                       borde NO se aclara como en el PNG (1,13:1): un campo necesita
                                       3:1 contra la tarjeta (WCAG 1.4.11) */
}
.entrar-campo .entrar-ojo {
  position: absolute;
  right: 16px;
  top: 50%;
  display: grid;
  margin-top: -11px;
  color: var(--sc-text-faint);
  cursor: not-allowed;
}
.entrar-campo .entrar-ojo .icono { position: static; margin: 0; }
.entrar-campo input[type=password] { padding-right: 52px; }
.entrar-olvido {
  margin: 10px 0 0;                 /* «¿Has olvidado…?» en y=624..640, a la derecha */
  text-align: right;
  font: 500 var(--sc-fs-entrar-meta)/var(--sc-lh-entrar-meta) var(--sc-font);
}
.entrar-olvido-enlace { color: var(--sc-link); }
.entrar-form button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-3);
  width: 100%;
  min-height: 55px;                 /* botón 541x55, y 667..721 */
  margin-top: 24px;                 /* del «¿Has olvidado…?» (644) al botón (668) */
  font: 600 var(--sc-fs-entrar-ui)/var(--sc-lh-entrar-ui) var(--sc-font);
  border-radius: 8px;               /* medido ~8 px */
}

.entrar-form button .icono { width: 20px; height: 20px; }

/* «o continúa con»: filete a los dos lados, centrado en y=754. */
.entrar-o {
  display: flex;
  align-items: center;
  gap: var(--sc-4);
  margin: 22px 0 0;
  font: 400 var(--sc-fs-entrar-meta)/var(--sc-lh-entrar-meta) var(--sc-font);
  color: var(--sc-text-muted);
}
.entrar-o::before, .entrar-o::after {
  content: "";
  flex: 1;
  border-top: var(--sc-line) solid var(--sc-border-strong);
}
/* El acceso de Microsoft, APAGADO: caja de 541x66 en y=786..852. */
.entrar-sso {
  display: grid;
  grid-template-columns: 28px auto;
  column-gap: var(--sc-3);
  justify-content: center;
  align-items: center;
  min-height: 66px;
  margin-top: 22px;
  padding: var(--sc-2) var(--sc-4);
  border: var(--sc-line) solid var(--sc-border-strong);
  border-radius: 8px;
  background: var(--sc-surface);
  color: var(--sc-text);
  opacity: .6;
  cursor: not-allowed;
}
.entrar-ms { grid-row: 1 / span 2; width: 28px; height: 28px; }
.entrar-ms .t1 { fill: var(--sc-ms-1); }
.entrar-ms .t2 { fill: var(--sc-ms-2); }
.entrar-ms .t3 { fill: var(--sc-ms-3); }
.entrar-ms .t4 { fill: var(--sc-ms-4); }
.entrar-sso b { font: 600 var(--sc-fs-entrar-sub)/var(--sc-lh-entrar-sub) var(--sc-font); }
.entrar-sso > span { font: 400 var(--sc-fs-entrar-meta)/var(--sc-lh-entrar-meta) var(--sc-font); color: var(--sc-text-muted); }

.entrar-ayuda {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--sc-4);
  margin-top: 28px;                 /* ayuda en y=894 */
}
.entrar-ayuda > div {
  display: grid;
  grid-template-columns: 28px 1fr;  /* icono de 28 px en x=98..135, texto en x=148 */
  gap: 0 var(--sc-3);
  align-content: start;
}
.entrar-ayuda > div + div {
  padding-left: var(--sc-4);
  border-left: var(--sc-line) solid var(--sc-border-strong);   /* filete en x=366 */
}
.entrar-ayuda .icono { grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--sc-brand); }
.entrar-ayuda > div + div .icono { color: var(--sc-text-muted); }   /* el escudo del mockup es gris */
.entrar-ayuda b { font: 600 var(--sc-fs-entrar-sub)/var(--sc-lh-entrar-sub) var(--sc-font); color: var(--sc-text); }
.entrar-ayuda span { font: 400 var(--sc-fs-body)/var(--sc-lh-body) var(--sc-font); color: var(--sc-text-muted); }
.entrar-ayuda code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--sc-fs-sm); }
.entrar-ayuda .entrar-soporte { grid-column: 2; color: var(--sc-link); opacity: .6; cursor: not-allowed; }

.entrar-pie {
  display: flex;
  justify-content: space-between;
  gap: var(--sc-2) var(--sc-6);
  flex-wrap: wrap;
  max-width: var(--sc-entrar-card-w);
  margin-top: auto;                 /* al fondo de la columna: y=1039 */
  padding-top: 36px;
  font: 400 var(--sc-fs-sm)/var(--sc-lh-sm) var(--sc-font);
  color: var(--sc-text-muted);
}
.entrar-legales { display: flex; gap: var(--sc-4); }
.entrar-legal { cursor: not-allowed; }
.entrar-sep { color: var(--sc-border-strong); }

/* --- mitad derecha ------------------------------------------------------- */
.entrar-der {
  position: relative;
  padding: 410px 52px 77px 42px;    /* mayúscula del hero en y=417 · 1448-1396 · 742-700 */
  background: var(--sc-entrar-panel);
  color: var(--sc-entrar-panel-fg);
  overflow: hidden;
}
/* DS171 · el HUECO de la fotografía (DATA_GAP: foto /entrar · fuente:
   ORACLE). Cubre la mitad derecha entera, como la foto del mockup, y se
   funde desde la izquierda: el texto oscuro del hero queda sobre el tramo
   claro (hasta x≈1134, donde acaba el texto más largo de los reclamos) y
   el rótulo, el idioma y la firma, en blanco, sobre el tramo ya opaco
   (desde x≈1231; el rótulo empieza en x=1242). */
.entrar-foto {
  /* DS198 · la foto del mockup (x=680..1448 del PNG) con su propio fundido. */
  position: absolute;
  top: 0;
  left: -20px;
  width: calc(100% + 20px);
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
.entrar-der > :not(.entrar-foto) { position: relative; }
.entrar-der .entrar-idioma {
  position: absolute;
  top: 30px;
  right: 52px;
  display: flex;
  align-items: center;
  gap: var(--sc-2);
  font: 500 var(--sc-fs-entrar-meta)/var(--sc-lh-entrar-meta) var(--sc-font);
  color: var(--sc-on-brand);
  cursor: not-allowed;
}
.entrar-idioma .icono { width: 18px; height: 18px; }
.entrar-der .entrar-rotulo, .entrar-der .entrar-firma {
  position: absolute;
  right: 52px;
  margin: 0;
  text-transform: uppercase;
  color: var(--sc-on-brand);
}
.entrar-rotulo {
  top: 118px;                       /* mayúscula en y=123 */
  font: 500 var(--sc-fs-entrar-rotulo)/var(--sc-lh-entrar-rotulo) var(--sc-font);
  letter-spacing: .12em;            /* «QUE PROTEGEN» mide 150 px en el mockup */
}
.entrar-rotulo::after, .entrar-firma::before {
  content: "";
  display: block;
  width: 27px; height: 4px;         /* barras medidas 27x5 y 27x4 */
  background: var(--sc-brand);
}
.entrar-rotulo::after { margin-top: 9px; }   /* barra en y=199, 16 px bajo la última mayúscula */
.entrar-firma {
  bottom: 69px;                     /* «PERSONAS.» acaba en y=1010 */
  font: 500 var(--sc-fs-entrar-ui)/var(--sc-lh-entrar-ui) var(--sc-font);
  letter-spacing: .15em;
}
.entrar-firma::before { margin-bottom: var(--sc-4); }
.entrar-hero {
  margin: 0;
  font: 400 var(--sc-fs-entrar-hero)/var(--sc-lh-entrar-hero) var(--sc-font);
  letter-spacing: -.02em;
}
.entrar-hero em { font-style: normal; font-weight: 700; color: var(--sc-brand); }
.entrar-copy {
  max-width: 350px;                 /* DS171 · párrafo x 741..1072, a cinco líneas como el mockup */
  margin: var(--sc-6) 0 0;
  font: 400 var(--sc-fs-entrar-copy)/var(--sc-lh-entrar-copy) var(--sc-font);
  color: var(--sc-entrar-panel-muted);
}
.entrar-reclamos {
  list-style: none;
  margin: 46px 0 0;                 /* primer círculo en y=734 */
  padding: 0;
}
.entrar-reclamo {
  display: grid;
  grid-template-columns: 50px 1fr;  /* círculo de 50 px, texto en x=814 */
  gap: 0 25px;
  align-items: center;
  margin-top: 33px;                 /* paso de 83 px entre círculos */
}
.entrar-reclamo:first-child { margin-top: 0; }
.entrar-reclamo .circulo {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: var(--sc-r-dot);
  background: var(--sc-entrar-panel-circle);
  color: var(--sc-brand);
}
.entrar-reclamo .icono { width: 24px; height: 24px; }
.entrar-reclamo b { font: 600 var(--sc-fs-entrar-ui)/var(--sc-lh-entrar-ui) var(--sc-font); }
.entrar-reclamo > span:last-child {
  font: 400 var(--sc-fs-entrar-sub)/var(--sc-lh-entrar-sub) var(--sc-font);
  color: var(--sc-entrar-panel-muted);
}

/* --- estrecho: las dos mitades se apilan y nada queda absoluto -------------- */
@media (max-width: 1100px) {
  .entrar { grid-template-columns: 1fr; }
  .entrar-izq { padding: var(--sc-6) var(--sc-4); }
  .entrar-der { padding: var(--sc-8) var(--sc-4); }
  .entrar-der .entrar-rotulo, .entrar-der .entrar-firma, .entrar-der .entrar-idioma {
    position: static;
    color: var(--sc-entrar-panel-fg);
  }
  .entrar-der .entrar-idioma { margin-bottom: var(--sc-6); }
  /* Apiladas, la franja de la foto quedaría bajo el texto a todo el ancho:
     el hueco se retira y el texto vuelve a la superficie clara. */
  .entrar-foto { display: none; }
  .entrar-sso { grid-template-columns: 28px 1fr; justify-content: start; }
  .entrar-rotulo { margin-bottom: var(--sc-8); }
  .entrar-firma { margin-top: var(--sc-8); }
}
@media (max-width: 600px) {
  /* Los huecos de las dos marcas se retiran en móvil: guardan geometría del
     PNG de 1448 px y aquí solo le quitarían ancho al texto. */
  .entrar-marca, .entrar-titular { display: block; }
  .entrar-diamante, .entrar-triangulo { display: none; }
  .entrar-ayuda { grid-template-columns: 1fr; gap: var(--sc-4) 0; }
  .entrar-ayuda > div + div { padding-left: 0; border-left: 0; }
  .entrar-form button { margin-top: var(--sc-6); }
}

/* === DS171 · esqueleto: lateral, barra superior, cabecera y KPI ============

   Evento 501 (UI FIDELITY LOCK): se CLONA, no se interpreta. Sustituye al
   bloque DS138. Todo medido a resolución completa sobre
   `RONDAS_1_Y_2/panel_artemis_compras_de_sercoin.png` (1448x1086, 1:1 en px
   CSS), con `panel_de_proveedores_de_artemis_compras.png` y las tandas 5 y 6
   de desempate:

     LATERAL (x=0..207)
       · símbolo de marca ......................... x=26..47, y=16..57
       · palabra SERCOIN .......................... x=61..159, mayúscula y=23..36
       · lema, dos líneas ......................... x=62, y=52..57 y 65..70
       · pastilla activa .......................... x=11..196, y=95..132 (38 px)
       · paso entre entradas ...................... 43 px (10 entradas)
       · icono .................................... x=26..43 (18 px)
       · rótulo ................................... x=66, mayúscula de 9,5 px
       · filete del pie ........................... y=581, x=26..45
       · «Seguridad. / Ingeniería. / Personas.» ... y=600, 619, 639
       · versión .................................. y=1053..1062
     BARRA (y=0..53)
       · triángulo de Artemis ..................... x=234..259, y=14..37
       · «Artemis Compras» ........................ x=270..423, mayúscula 13 px
       · buscador ................................. x=471..926, y=12..42
       · chip de entorno .......................... x=1002..1112, y=15..38
       · campana / ayuda / módulos ................ x=1133 / 1175 / 1217
       · filete ................................... x=1255
       · avatar ................................... x=1274..1304 (31 px)
       · nombre / organización .................... x=1314, y=14..22 / 30..37
       · desplegable .............................. x=1417..1423
   ========================================================================= */

/* --- El icono: trazo en línea, `currentColor`. 18 px, los del mockup. --- */
.ic {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

/* --- Lateral --------------------------------------------------------- */
/* El lateral mide la ventana y se queda quieto: en el mockup la versión está
   al pie de los 1086 px, no al final de una página larga. El fondo oscuro de
   la columna lo pone `.app`, para que no se corte al desplazar. */
.app { background: linear-gradient(90deg, var(--sc-nav-bg) var(--sc-sidebar-w), transparent 0); }
.lateral {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 22px;
}
/* DS198 · la textura oscura del mockup, pegada al pie y por DETRÁS del menú. */
.lateral > * { position: relative; z-index: 1; }
.lateral > .lateral-textura { position: absolute; z-index: 0; left: 0; bottom: 0; width: 208px; height: 536px; pointer-events: none; }
.lateral .marca {
  display: grid;
  grid-template-columns: 26px auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: start;
  padding: 16px 0 0 26px;
  height: 95px;
}
/* El hueco del símbolo (DATA_GAP del informe DS171): la geometría medida,
   sin dibujo inventado. */
.lateral .marca-simbolo {
  grid-row: 1 / span 2;
  width: 26px;
  height: 46px;
}
/* DS198 · la palabra del mockup (blanca, 700, espaciada), no el PNG rojo. */
.lateral .marca-palabra { font: 700 19px/22px var(--sc-font); letter-spacing: .06em; color: var(--sc-nav-fg); margin-top: 8px; }
.lateral .marca small {
  font: 500 9px/13px var(--sc-font);
  letter-spacing: .16em;
  margin-top: 6px;
  max-width: 100px;
}
.lateral nav ul { padding: 0 11px; }
.lateral nav li { margin: 0 0 5px; }
.lateral nav .ic { width: 20px; height: 20px; }
.lateral nav a, .lateral .nav-off {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 38px;
  padding: 0 12px 0 12px;
  border-radius: var(--sc-r);
  border-left: 2px solid transparent;
  font: 500 14px/18px var(--sc-font);
  color: var(--sc-nav-fg);
  text-decoration: none;
}
.lateral nav a[aria-current="page"] { font-weight: 600; }
/* Entrada del diseño SIN pantalla detrás: mismo sitio, mismo icono, apagada.
   No es un enlace y no se enfoca: el motivo va en `title` y en texto oculto. */
.lateral .nav-off { color: var(--sc-nav-faint); cursor: default; }
.lateral .cuenta {
  background: var(--sc-nav-sunk);
  color: var(--sc-nav-fg);
}
/* El pie ya no se pega al fondo entero: el lema de ingeniería va 58 px bajo
   la última entrada (y=581 contra y=522) y solo la VERSIÓN baja al fondo. */
.lateral-pie {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  margin-top: 54px;
  padding: 0 26px;
  font: 400 13px/20px var(--sc-font);
  letter-spacing: .08em;
}
.lateral-pie p:first-child { max-width: 112px; }
.lateral-pie p:first-child::before {
  content: "";
  display: block;
  width: 20px;
  border-top: 2px solid var(--sc-nav-faint);
  margin: 0 0 17px;
}
.lateral-pie .version {
  margin-top: auto;
  font-size: 12px;
  letter-spacing: 0;
}

/* --- Barra superior ------------------------------------------------------ */
.barra {
  gap: 0;
  padding: 0 25px 0 26px;
  border-bottom-color: var(--sc-border-strong);
}
.barra summary { list-style: none; cursor: pointer; }
.barra summary::-webkit-details-marker { display: none; }
.barra .producto {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--sc-text);
  text-decoration: none;
}
.barra .producto .marca-simbolo { width: 28px; height: 24px; display: block; }
.barra .titulo {
  font: 400 20px/24px var(--sc-font);
  white-space: nowrap;
}
.barra .titulo b { font-weight: 700; }
.barra .buscador {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 455px;
  min-width: 0;
  height: 31px;
  margin-left: 47px;
  padding: 0 8px 0 14px;
  gap: 10px;
  background: var(--sc-bg);
  border: var(--sc-line) solid var(--sc-border-strong);
  border-radius: var(--sc-r);
  color: var(--sc-text-muted);
}
.barra .buscador .ic { width: 16px; height: 16px; }
.barra .buscador input {
  flex: 1 1 auto;
  min-width: 0;
  height: 29px;
  padding: 0;
  border: 0;
  background: transparent;
  font: 400 13px/18px var(--sc-font);
  color: var(--sc-text);
}
.barra .buscador input:focus-visible { outline: none; }
.barra .buscador:focus-within {
  outline: var(--sc-focus-w) solid var(--sc-focus-color);
  outline-offset: var(--sc-focus-offset);
}
.barra .buscador kbd {
  flex: 0 0 auto;
  font: 600 10px/16px var(--sc-font);
  padding: 0 5px;
  border-radius: var(--sc-r-sm);
  background: var(--sc-border-strong);
  color: var(--sc-text-muted);
}
.barra .entorno {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin-left: auto;
  padding: 0 12px;
  border-radius: var(--sc-r-pill);
  background: var(--sc-neutral-bg);
  color: var(--sc-neutral-fg);
  font: 600 12px/16px var(--sc-font);
  white-space: nowrap;
}
.barra .entorno::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--sc-r-dot);
  background: var(--sc-text-faint);
}
.barra .campana {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 21px;
  color: var(--sc-text);
  text-decoration: none;
}
.barra .campana:hover { color: var(--sc-brand); }
.barra .campana .ic, .barra .barra-icono .ic { width: 20px; height: 20px; }
.barra .campana .cuenta {
  position: absolute;
  background: var(--sc-brand);
  color: var(--sc-on-brand);
  top: -7px;
  left: 10px;
  min-width: 16px;
  text-align: center;
  padding: 0 4px;
}
.barra .barra-icono {
  display: flex;
  align-items: center;
  color: var(--sc-text);
  margin-left: 24px;
}
.barra .barra-icono.off { color: var(--sc-text-faint); }
.barra .modulos { position: relative; }
.barra .modulos > summary { margin-left: 24px; }
.barra .modulos-menu, .barra .yo-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 40;
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border-strong);
  border-radius: var(--sc-r-card);
  box-shadow: var(--sc-shadow-pop);
  padding: var(--sc-2);
}
.barra .modulos-menu {
  width: 260px;
  max-height: 70vh;
  overflow-y: auto;
}
.barra .modulos-menu ul { list-style: none; margin: 0; padding: 0; }
.barra .modulos-menu .grupo {
  font: 600 var(--sc-fs-micro)/var(--sc-lh-micro) var(--sc-font);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sc-text-faint);
  padding: var(--sc-3) var(--sc-2) var(--sc-1);
}
.barra .modulos-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-2);
  padding: 6px var(--sc-2);
  border-radius: var(--sc-r);
  color: var(--sc-text);
  text-decoration: none;
  font-size: var(--sc-fs-body);
}
.barra .modulos-menu a:hover { background: var(--sc-surface-sunk); }
.barra .yo {
  display: block;
  flex: 0 0 auto;
  position: relative;
  margin-left: 22px;
  padding-left: 19px;
  border-left: var(--sc-line) solid var(--sc-border-control);
  gap: 0;
}
.barra .yo > summary {
  display: flex;
  align-items: center;
  gap: 10px;
}
.barra .yo > summary > .ic { width: 14px; height: 14px; margin-left: 12px; color: var(--sc-text); }
/* El mockup pinta una FOTOGRAFÍA; Artemis no guarda fotografías de usuario,
   así que pinta las iniciales, que sí son dato. */
.barra .avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: var(--sc-r-dot);
  background: var(--sc-neutral-bg);
  color: var(--sc-neutral-fg);
  font: 600 var(--sc-fs-sm)/1 var(--sc-font);
}
.barra .quien {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 82px;
  max-width: 160px;
}
.barra .quien b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra .quien .org { border: 0; padding: 0; }
.barra .quien b { font: 600 12px/15px var(--sc-font); color: var(--sc-text); }
.barra .quien .org {
  font: 500 10px/14px var(--sc-font);
  color: var(--sc-text-muted);
  text-transform: uppercase;
}
.barra .yo-menu { min-width: 160px; }
.barra .yo-menu button { width: 100%; }

/* --- Pie de marca y carril de procedencia -------------------------------
       El pie del mockup: banda blanca de y=1030 a 1086, SERCOIN en palabra a
       x=234, separadores «|» y el lema de Artemis a la derecha, 11-12 px. El
       carril de procedencia no está en ningún mockup y es la evidencia: se
       queda, en una línea de 11 px al pie del contenido. ------------------ */
.marca-pie {
  min-height: 56px;
  padding: 0 28px 0 26px;
  background: var(--sc-surface);
  border-top-color: var(--sc-border-strong);
  font-size: 12px;
  color: var(--sc-text-muted);
}
.marca-pie b { font-weight: 800; letter-spacing: .02em; }
.evbar {
  min-height: 0;
  margin: var(--sc-1) 0;
  padding: 0;
  background: none;
  border-bottom: 0;
  border-top: 0;
  color: var(--sc-text-faint);
}

@media (max-width: 1100px) {
  .barra .entorno, .barra .barra-icono.off, .barra .buscador kbd { display: none; }
  .barra .campana { margin-left: auto; }
}
@media (max-width: 900px) {
  .barra { padding: var(--sc-2) var(--sc-gutter); row-gap: var(--sc-2); }
  .barra .buscador { order: 5; flex: 1 1 100%; margin-left: 0; }
  .barra .yo .quien { display: none; }
  .lateral .marca { height: auto; padding: var(--sc-3) var(--sc-gutter) var(--sc-2); }
  .lateral nav ul { padding: 0 var(--sc-gutter) var(--sc-2); }
  .lateral nav a, .lateral .nav-off { min-height: var(--sc-tap-touch); gap: var(--sc-2); }
  .lateral nav li { margin: 0; }
  /* Apilado, el lateral es el carril horizontal de arriba (bloque 1157): ni
     alto de pantalla entera ni pie, que ya retiraba ese bloque y este
     volvía a encender. */
  .lateral { height: auto; min-width: 0; padding: 0; }
  .app { background: none; }   /* sin columna oscura: el lateral ya no es columna */
  .lateral-pie { display: none; }
  .tira-kpi .kpi { min-height: 0; }
}

/* ===========================================================================
   9 · DS171 · portada de inicio (reclonada; sustituye al bloque DS139)

   `/inicio` contra `panel_artemis_compras_de_sercoin.png`, medido a
   resolución completa (1448x1086, 1:1 en px CSS):

     · banda de bienvenida ... y=54..241; «BIENVENIDO A» mayúscula y=98..104,
                               h1 y=118..161 (x=237..599), lema y=168..184,
                               reclamos y=205..220; foto desde x≈900
     · tira de KPI ........... y=242..335, 5 tarjetas, canaleta de 6
     · fila 1 ................ y=348..578: 560 / 331 / 307, canaleta de 12
     · fila 2 ................ y=591..830: mismos anchos
     · fila 3 ................ y=843..1025: 411 / 480 / 307
     · tarjeta ............... radio de 6-8, filete muy claro y sombra corta
   Ni un `#RRGGBB` fuera de `:root`, ni un `background-image`.
   =========================================================================== */

/* --- Banda de bienvenida ----------------------------------------------- */
.pbanda {
  position: relative;
  min-height: 188px;
  margin: calc(-1 * var(--sc-5)) calc(-1 * var(--sc-gutter)) 0;
  overflow: hidden;
}
.pbanda-texto { position: relative; z-index: 1; padding: 42px 0 0 29px; }
.pbanda-sobre {
  margin: 0;
  font: 600 10px/12px var(--sc-font);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sc-text-muted);
}
.pbanda h1 {
  margin: 2px 0 0;
  font: 700 46px/52px var(--sc-font);
  letter-spacing: -.01em;
}
.pbanda-rojo { color: var(--sc-brand); font-weight: 600; }
.pbanda-lema {
  margin: 0;
  font: 400 18px/24px var(--sc-font);
  color: var(--sc-text);
}
.pbanda-reclamos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-2) 30px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font: 400 12px/18px var(--sc-font);
  color: var(--sc-text);
}
.pbanda-reclamos li { display: flex; align-items: center; gap: 10px; }
.pbanda-reclamos .ic { width: 17px; height: 17px; }
/* El HUECO de la fotografía (DATA_GAP · fuente: ORACLE): la geometría de la
   foto del mockup (x=900..1448), un fundido desde el lienzo y un plano
   oscuro. Encima, el rótulo de marca que el mockup escribe sobre la foto. */
.pbanda-foto {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 548px;
  background: linear-gradient(90deg, var(--sc-bg) 0, var(--sc-foto-hueco) 26%);
}
.pbanda-claim {
  position: absolute;
  left: 381px;
  top: 74px;
  margin: 0;
  font: 400 15px/21px var(--sc-font);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sc-on-brand);
}
.pbanda-claim::after {
  content: "";
  display: block;
  width: 24px;
  margin-top: 10px;
  border-top: 3px solid var(--sc-brand);
}
.foto-pendiente {
  position: absolute;
  left: 170px;
  bottom: 10px;
  margin: 0;
  font: 400 var(--sc-fs-micro)/var(--sc-lh-micro) var(--sc-font);
  color: var(--sc-on-brand);   /* 10,5:1 sobre --sc-foto-hueco (el gris de antes daba 3,7:1) */
}
.pbanda + .kpis.tira-kpi { position: relative; z-index: 1; gap: 8px; margin: 0 0 10px; }
.pbanda + .kpis.tira-kpi .kpi { min-height: 91px; padding-top: 12px; padding-bottom: 12px; }

/* La lista de trabajo «Qué hay que atender hoy»: no está en el mockup, va
   DEBAJO de sus tres filas, a todo el ancho, fuera del pliegue comparado. */
.ptarjeta.patender { margin: 0 0 10px; }
.ptarjeta.patender table { margin-top: var(--sc-2); }

/* --- Rejilla de tres tarjetas por fila ---------------------------------- */
.prejilla {
  display: grid;
  gap: 12px;
  margin: 0 0 10px;
  align-items: stretch;
}
.prejilla.f1 { grid-template-columns: 560fr 331fr 307fr; min-height: 234px; }
.prejilla.f2 { grid-template-columns: 560fr 331fr 307fr; min-height: 240px; }
.prejilla.f3 { grid-template-columns: 411fr 480fr 307fr; min-height: 185px; }
.prejilla > * { min-width: 0; }
.ptarjeta {
  display: flex;
  flex-direction: column;
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border-strong);
  border-radius: 8px;
  box-shadow: var(--sc-shadow-card);
  padding: 10px 16px 8px;
}
.ptarjeta > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font: 600 15px/22px var(--sc-font);
}
.ptarjeta > h2 > .ic { width: 20px; height: 20px; color: var(--sc-brand); }
.pmas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font: 500 12px/16px var(--sc-font);
  color: var(--sc-link);
  text-decoration: none;
  white-space: nowrap;
}
.pmas .ic { width: 14px; height: 14px; }
.pmas:hover { text-decoration: underline; }
.pmas.off { color: var(--sc-text-faint); cursor: default; }
.pchip {
  margin-left: auto;
  padding: 3px 12px;
  border: var(--sc-line) solid var(--sc-border-strong);
  border-radius: var(--sc-r);
  font: 400 12px/16px var(--sc-font);
  color: var(--sc-text-muted);
}
.pbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: var(--sc-r-pill);
  background: var(--sc-warn-bg);
  color: var(--sc-warn-fg);
  font: 700 12px/1 var(--sc-font);
}
.ptarjeta .vacio { margin: 0; font-size: var(--sc-fs-sm); }

/* --- Evolución de compras ---------------------------------------------- */
.pleyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 6px;
  margin: 0 0 2px;
  font: 400 12px/16px var(--sc-font);
  color: var(--sc-text-muted);
}
.pleyenda .ppunto + .ppunto, .pleyenda .ppunto:not(:first-child) { margin-left: 14px; }
.ppunto {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--sc-r-dot);
}
.pgrafico { display: block; width: 100%; height: auto; }
.prej { stroke: var(--sc-border-strong); stroke-width: 1; }
.peje { font: 400 10px var(--sc-font); fill: var(--sc-text-muted); }
.pserie-gasto { stroke: var(--sc-cat-1); stroke-width: 2; }
.pserie-gasto-pt { fill: var(--sc-cat-1); }
.pserie-gasto-area { fill: var(--sc-cat-1); fill-opacity: .10; }
.pserie-pedidos { stroke: var(--sc-serie-pedidos); stroke-width: 1.5; }
.pserie-pedidos-pt { fill: var(--sc-serie-pedidos); }
.pserie-gasto-bg { background: var(--sc-cat-1); }
.pserie-pedidos-bg { background: var(--sc-serie-pedidos); }

/* --- Gasto por categoría ------------------------------------------------ */
.panillo {
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 18px;
  align-items: center;
  flex: 1 1 auto;
}
.panillo-dibujo { position: relative; width: 136px; height: 136px; }
.panillo-svg { display: block; width: 136px; height: 136px; }
.panillo-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
}
.panillo-centro b { font: 700 13px/16px var(--sc-font); font-variant-numeric: tabular-nums; }
.panillo-centro span { font: 400 10px/13px var(--sc-font); color: var(--sc-text-muted); }
.panillo-leyenda { margin: 0; padding: 0; list-style: none; }
.panillo-leyenda li {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 25px;
  font: 400 11.5px/14px var(--sc-font);
}
.pleg-v { font-variant-numeric: tabular-nums; }
.ptrozo.t1 { stroke: var(--sc-cat-1); } .ppunto.t1 { background: var(--sc-cat-1); }
.ptrozo.t2 { stroke: var(--sc-cat-2); } .ppunto.t2 { background: var(--sc-cat-2); }
.ptrozo.t3 { stroke: var(--sc-cat-3); } .ppunto.t3 { background: var(--sc-cat-3); }
.ptrozo.t4 { stroke: var(--sc-cat-4); } .ppunto.t4 { background: var(--sc-cat-4); }
.ptrozo.t5 { stroke: var(--sc-cat-5); } .ppunto.t5 { background: var(--sc-cat-5); }
.ptrozo.t6 { stroke: var(--sc-cat-6); } .ppunto.t6 { background: var(--sc-cat-6); }
.ppie {
  display: flex;
  align-items: center;
  gap: var(--sc-2);
  margin: auto 0 0;
  padding-top: 6px;
}

/* --- Acciones rápidas: cinco botones apilados, el primero rojo --------- */
.pacc > h2 { margin-bottom: 8px; }
.pacciones { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pacciones a, .pacciones .accion-off {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 33px;
  padding: 0 16px;
  border: var(--sc-line) solid var(--sc-border-strong);
  border-radius: 4px;
  background: var(--sc-surface-sunk);
  color: var(--sc-text);
  font: 400 13px/18px var(--sc-font);
  text-decoration: none;
}
.pacciones a:hover { border-color: var(--sc-border-control); }
.pacciones .primaria a {
  background: var(--sc-brand);
  border-color: var(--sc-brand);
  color: var(--sc-on-brand);
}
.pacciones .primaria a:hover { background: var(--sc-brand-hover); }
.pacciones .accion-off { color: var(--sc-text-faint); cursor: default; }
.pacciones .primaria .accion-off { border-color: var(--sc-brand-border); background: var(--sc-brand-soft); }

/* --- Tablas pequeñas de la portada -------------------------------------- */
.ptarjeta .tw { box-shadow: none; border: 0; border-radius: 0; overflow-x: auto; }   /* el carril sigue desplazándose: la página no */
.pmini { min-width: 0; width: 100%; table-layout: fixed; font-size: 12px; }
.pmini th, .pmini td { height: auto; padding: 4px 8px; border-bottom: var(--sc-line) solid var(--sc-border); font-size: 11.5px; line-height: 14px; }
.pmini th[scope="col"] {
  position: static;
  background: var(--sc-surface-sunk);
  font: 500 11px/14px var(--sc-font);
  text-transform: none;
  letter-spacing: 0;
  color: var(--sc-text-muted);
}
.pmini th[scope="row"] { font-weight: 400; background: none; color: var(--sc-text); text-transform: none; letter-spacing: 0; }
.pmini th[scope="row"] a { color: var(--sc-text); text-decoration: none; }
.pmini th[scope="row"] a:hover { color: var(--sc-link); text-decoration: underline; }
.psol td.nada { padding: 10px 8px; border-bottom: 0; white-space: normal; }
.ptop th:first-child { width: 36%; }
.ptop th[scope="row"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptop th.num, .ptop td.num { width: 26%; }
.pbarra-c { vertical-align: middle; }
.pbarra { display: block; width: 100%; height: 10px; }
.pbarra-f { fill: var(--sc-brand-border); }
.pbarra-r { fill: var(--sc-cat-1); fill-opacity: .72; }

/* --- Actividad reciente ------------------------------------------------ */
.pactividad { margin: 0; padding: 0; list-style: none; }
.pactividad li {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 1px 0;
}
.pact-punto {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: var(--sc-r-dot);
  background: var(--sc-ok-fg);
}
.pact-t { min-width: 0; }
.pact-t b { display: block; font: 500 12px/16px var(--sc-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pact-t b a { color: var(--sc-text); text-decoration: none; }
.pact-t b a:hover { color: var(--sc-link); text-decoration: underline; }
.pact-t span, .pact-cuando {
  display: block;
  font: 400 11px/14px var(--sc-font);
  color: var(--sc-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pact-cuando { white-space: nowrap; }

/* --- Alertas y avisos --------------------------------------------------- */
.pavisos { margin: 0; padding: 0; list-style: none; }
.pavisos li + li { border-top: var(--sc-line) solid var(--sc-border); }
.pavisos a {
  display: grid;
  grid-template-columns: 36px 1fr 16px;
  gap: 14px;
  align-items: center;
  padding: 5px 0;
  color: var(--sc-text);
  text-decoration: none;
}
.pavisos a:hover b { text-decoration: underline; }
.pavisos a > .ic { width: 16px; height: 16px; color: var(--sc-text-muted); }
.palerta-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--sc-r-dot);
}
.palerta-ic .ic { width: 18px; height: 18px; }
.palerta-ic.rojo { background: var(--sc-danger-fg); color: var(--sc-on-brand); }
.palerta-ic.naranja { background: var(--sc-stale); color: var(--sc-on-brand); }
.palerta-ic.gris { background: var(--sc-neutral-bg); color: var(--sc-neutral-fg); }
.palerta-t b { display: block; font: 500 12px/16px var(--sc-font); }
.palerta-t span { display: block; font: 400 11px/14px var(--sc-font); color: var(--sc-text-muted); }

/* --- Ahorro y eficiencia: tres tarjetas sin fuente ---------------------- */
.pahorro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}
.pahorro li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: var(--sc-line) solid var(--sc-border-strong);
  border-radius: 6px;
}
.pahorro-r { font: 400 11.5px/15px var(--sc-font); color: var(--sc-text-muted); min-height: 30px; }
.pahorro b { font: 700 22px/28px var(--sc-font); }

@media (max-width: 1100px) {
  .prejilla.f1, .prejilla.f2, .prejilla.f3 { grid-template-columns: 1fr 1fr; min-height: 0; }
  .pbanda-foto { width: 40%; }
  .pbanda-claim, .foto-pendiente { display: none; }
}
@media (max-width: 900px) {
  .prejilla.f1, .prejilla.f2, .prejilla.f3 { grid-template-columns: 1fr; }
  .pbanda { margin: calc(-1 * var(--sc-5)) calc(-1 * var(--sc-gutter)) var(--sc-3); }
  .pbanda-foto { display: none; }
  .pbanda-texto { padding: var(--sc-5) var(--sc-gutter); }
  .pbanda h1 { font-size: 32px; line-height: 38px; }
  .tira-kpi.n4, .tira-kpi.n5, .tira-kpi.n6 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .tira-kpi .kpi { min-height: 0; }
  .pahorro { grid-template-columns: 1fr; }
}

/* === DS149 · clases que sustituyen a los style= en línea ===
   Hallazgo 473: sin `style-src` en la CSP, el navegador descarta todo
   `style=` en línea. Los siete que había en plantilla.py no pintaban nada
   en un navegador real; se sustituyen aquí por clases. */

/* Antes `style="display:inline"` en el `<form>` de Salir: vive dentro de
   `span.yo`, junto a texto y otro `span`, en la cabecera; sin
   `display:inline` se cae a bloque y rompe la línea de la cabecera. */
.form-en-linea { display: inline; }

/* Antes `style="flex:1 1 130px"`: campo corto de una sola cifra (código en
   Factu) dentro de `form.filtros`. No es un buscador -no crece igual que
   `.ancho`- así que va aparte con su propio ancho, más estrecho a
   propósito. */
.filtros .campo-corto { flex: 1 1 130px; }

/* Antes `style="flex:1 1 220px"` (buscador de proveedores y buscador de
   pedido en incidencia nueva): mismo papel que `.ancho` -campo que crece
   dentro de la fila de filtros-, pero medido en el mockup a 220px, no a
   200. Se deja en su propia clase para no mover un ancho ya medido; los
   dos sitios que lo piden comparten esta clase porque el papel es
   idéntico. */
.filtros .ancho-buscador { flex: 1 1 220px; }

/* Antes `style="margin:0 0 16px"` en dos barras de `.acciones` (Stock,
   Incidencias): en ambas la barra es el primer bloque bajo el `<h1>`, así
   que no lleva el `margin-top` que trae `.acciones` por defecto, y deja
   16px antes del bloque siguiente. */
.acciones-bajo-titulo { margin: 0 0 16px; }
/* === DS137 · kit de cabecera y tabla ======================================

   Los seis bloques que FORGE-DS135 midió que faltaban en LAS SIETE pantallas
   (`inbox/FORGE-DS135/COMPARACION.md` §0.3). Van en UN bloque al final para
   que el merge con DS138 (lateral) y DS139 (barra superior y portada) sea
   limpio: ninguna regla de aquí toca un selector de arriba.

   Ni un color a mano: todo sale de los tokens de DS118. No hace falta ningún
   token nuevo, y eso es un resultado: lo que faltaba era composición, no
   medidas (§0.1 de la comparación).
   ========================================================================= */

/* --- 1 · Migapán. Medido en `panel_de_proveedores_de_artemis_compras.png`:
       la tinta del migapán ocupa y=77..87 (altura de mayúscula 8 px, o sea
       ~11-12 px de cuerpo → `--sc-fs-sm`) y el `h1` arranca en y=106. ---- */
.migapan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--sc-fs-sm);
  line-height: var(--sc-lh-sm);
  color: var(--sc-text-muted);
  margin-bottom: var(--sc-2);
}
.migapan .sep { color: var(--sc-text-faint); }
.migapan [aria-current="page"] { color: var(--sc-text); font-weight: 600; }
/* DS171 · el migapán del mockup es GRIS y sin subrayar, sangrado 16 px más
   que las tarjetas (x=236 contra x=220), con «›» de separador. */
.migapan { padding: 0 16px; gap: var(--sc-2); }
.migapan a { color: var(--sc-text-muted); text-decoration: none; }
.migapan a:hover { color: var(--sc-link); text-decoration: underline; }

/* --- 2 · Titular. El `h1` y la acción primaria en la MISMA línea (defecto 5
       de §0.3). Medido: el botón va de x=1250 a x=1427 en la línea del `h1`,
       pegado al canto derecho de la tarjeta (x=1434). El subtítulo mide 12-13
       px de mayúscula → ~17-18 px de cuerpo; el paso más cercano de la escala
       de siete de DS118 es `--sc-fs-h2` (16 px, mayúscula 11 px) y se usa ese
       en vez de inventar un octavo paso. Desviación declarada: 1-2 px. ---- */
.titulo-pantalla {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sc-4);
}
.titulo-pantalla > div { min-width: 0; }
.titulo-pantalla h1 { margin: 0; }
/* El rojo de marca de la segunda mitad del titular bicolor. NO se reutiliza
   `.rojo`, que es `--sc-danger-fg` y significa «esto va mal»: un título no
   es una alarma. */
.h1-marca { color: var(--sc-brand); }
.h1-marca::before { content: " "; }
.subtitulo {
  margin: var(--sc-1) 0 0;
  font: 400 var(--sc-fs-h2)/var(--sc-lh-h2) var(--sc-font);
  color: var(--sc-text-muted);
}
.titulo-accion { flex: 0 0 auto; }
/* DS171 · medido en panel_de_proveedores_de_artemis_compras.png: el h1 es de
   40 px en negrita plena (mayúscula y=106..137, 31 px / 0,71 ≈ 44 → 40 px de
   Segoe UI, que tiene la mayúscula más alta), sangrado 16 px como el migapán;
   el subtítulo, 17 px (mayúscula 12 px) en y=151..166. */
.titulo-pantalla { padding-left: 16px; margin-bottom: var(--sc-4); }
/* DS198 · crítica de Codex: el h1 real salía 4-6 px mayor que el del mockup
   de Solicitudes/Aprobaciones (≈36-38 px). Se baja 4 px con su subtítulo. */
.titulo-pantalla h1 { font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -.01em; }
.titulo-pantalla .subtitulo { font-size: 15px; line-height: 20px; }

/* --- 3 · Tira de KPI. MEDIDO, y no es lo que parecía: las «cinco columnas
       partidas por filetes» de la portada son cinco TARJETAS con canaleta de
       lienzo. En `panel_artemis_compras_de_sercoin.png`, y=250, el blanco
       puro corre 218-452, 459-692, 698-937, 944-1181, 1188-1437, y en
       x=453..458 el color es (242,244,247), o sea `--sc-bg`. En
       `panel_de_proveedores_de_artemis_compras.png`, y=190, son cuatro:
       220-517, 528-822, 834-1130, 1142-1434, canaleta de 10-11 px. La
       canaleta de `.kpis` es `--sc-3` = 12 px: cae dentro de lo medido, así
       que se reutiliza la piel de DS102 en vez de escribir otra.
       Lo que DS137 añade es que las columnas sean IGUALES (`1fr` fijo, no
       `auto-fit`): con `auto-fit` la de la cifra larga se come a las demás y
       los cantos dejan de alinearse con los del mockup. -------------------- */
.tira-kpi.n2 { grid-template-columns: repeat(2, 1fr); }
.tira-kpi.n3 { grid-template-columns: repeat(3, 1fr); }
.tira-kpi.n4 { grid-template-columns: repeat(4, 1fr); }
.tira-kpi.n5 { grid-template-columns: repeat(5, 1fr); }
.tira-kpi.n6 { grid-template-columns: repeat(6, 1fr); }
/* Alto MEDIDO de la tarjeta de KPI: y=185..283 en el mockup de proveedores,
   o sea 99 px. El mínimo se fija ahí para que una tarjeta sin tercera línea
   no se quede más baja que la de al lado.

   La CIFRA no lleva regla propia y eso es una decisión: medida la altura de
   mayúscula del «276» del mockup (x 275..365) sale y=224..242, o sea 19 px,
   que es exactamente lo que DS118 midió para `--sc-fs-display` («cifra KPI ·
   mayúscula 19 px»). `.kpi .cifra` ya usa ese token desde DS102, así que
   subirla a `--sc-fs-h1` (mayúscula 25,5 px) habría sido inventar un tamaño
   contra una medida que ya estaba tomada. */
/* --- KPI (componente compartido) ----------------------------------------
       Medido en los dos mockups que lo traen: tarjeta blanca suelta, canaleta
       de 6 a 11 px, radio de 8, icono en círculo rosa de 46 px (x=236..282 en
       proveedores, 233..278 en el panel), rótulo de 13 px en tinta plena y en
       caja normal (NO en mayúsculas), cifra de 24 px en negrita y la línea de
       variación de 12 px debajo. ------------------------------------------- */
.kpis.tira-kpi { gap: 8px; margin-bottom: var(--sc-3); }
.tira-kpi .kpi {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-content: center;
  /* DS198 · 94 px de alto medido (Codex), sin que la etiqueta parta línea. */
  min-height: 94px;
  padding: 12px 14px;
  border: var(--sc-line) solid var(--sc-border-strong);
  border-radius: 8px;
  box-shadow: var(--sc-shadow-card);
  color: var(--sc-text);
  text-decoration: none;
}
.tira-kpi .kpi > :not(.kpi-icono) { grid-column: 2; }
.tira-kpi .kpi-icono {
  grid-row: 1 / span 3;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sc-r-dot);
  background: var(--sc-brand-soft);
  color: var(--sc-brand);
}
.tira-kpi .kpi-icono .ic { width: 20px; height: 20px; }
.tira-kpi .kpi .rotulo {
  font: 500 12px/16px var(--sc-font);
  text-transform: none;
  letter-spacing: 0;
  color: var(--sc-text);
}
.tira-kpi .kpi .cifra { font: 700 24px/30px var(--sc-font); }
.tira-kpi .kpi .var, .tira-kpi .kpi .meta.micro {
  font-size: var(--sc-fs-sm);
  line-height: 16px;
  color: var(--sc-text-muted);
}
.tira-kpi .kpi .var.sube { color: var(--sc-ok-fg); }
.tira-kpi .kpi .var.baja { color: var(--sc-danger-fg); }
.tira-kpi a.kpi:hover { border-color: var(--sc-border-control); }
.tira-kpi .var.plano { color: var(--sc-text-muted); }

/* --- 4 · Barra de acciones sobre la tabla y pie de tabla. Medidos en el
       mockup de proveedores: la barra ocupa y=380..415 (encima del filete de
       cabecera de la tabla) y el pie y=984..1039, los dos sobre blanco y
       dentro del canto de la tarjeta. --------------------------------- */
.barra-tabla {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-3);
  padding: var(--sc-3) var(--sc-4);
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  font-size: var(--sc-fs-sm);
  color: var(--sc-text-muted);
}
.barra-tabla {
  border-radius: var(--sc-r-card) var(--sc-r-card) 0 0;
  border-bottom: 0;
  /* `.tw` no lleva margen superior: la barra queda pegada a la tabla sin
     ningún tirón negativo. */
  margin-bottom: 0;
}
/* El pie se pega al carril de la tabla en vez de flotar debajo: `.tw` lleva
   `margin-bottom: var(--sc-4)` y esto lo cancela, que es la única forma de
   unirlos sin tocar `plantilla._carriles`, que envuelve TODA tabla de la
   aplicación y no es territorio de esta tarea. */
.pie-tabla {
  /* DS198 · UNA banda (crítica de Codex): recuento en texto plano a la
     izquierda, páginas en el centro y tamaño de página a la derecha, cada
     uno en su columna aunque falte alguno de los otros dos. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sc-3);
  min-height: 52px;
  padding: var(--sc-2) var(--sc-4);
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  font-size: var(--sc-fs-sm);
  color: var(--sc-text-muted);
  margin: calc(-1 * var(--sc-4)) 0 var(--sc-4);
  border-radius: 0 0 var(--sc-r-card) var(--sc-r-card);
  border-top: 0;
}
.pie-tabla .cuenta { font-variant-numeric: tabular-nums; grid-column: 1; justify-self: start;
  background: none; border: 0; padding: 0; min-width: 0; font-size: inherit; font-weight: 400;
  color: var(--sc-text-muted); border-radius: 0; }
.pie-tabla .paginador { grid-column: 2; justify-content: center; }
.pie-tabla .por-pagina { grid-column: 3; justify-self: end; }
.paginador { display: flex; flex-wrap: wrap; gap: var(--sc-1); }
.pag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 var(--sc-2);
  border-radius: var(--sc-r);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pag.actual {
  background: var(--sc-brand);
  color: var(--sc-on-brand);
  font-weight: 600;
}
.por-pagina { display: flex; align-items: center; gap: var(--sc-2); }

/* --- 5 · Columna de selección y columna de acciones de fila. El mockup abre
       con casilla y cierra con «Ver · ✓ · ⋯». Solo se pintan los controles
       que llevan a algo que existe: la casilla, mientras no haya acción de
       lote, no la pinta nadie. -------------------------------------------- */
th.sel, td.sel { width: 40px; text-align: center; }
th.acciones-col, td.acciones-fila { width: 116px; white-space: nowrap; }
.acciones-fila .acc {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--sc-2);
  border-radius: var(--sc-r);
  text-decoration: none;
}
.acciones-fila .acc:hover { background: var(--sc-surface-sunk); }
/* DS184 · el «⋯» sin menú: mismo hueco que un enlace, sin comportarse como uno. */
.acciones-fila .acc.pd-off { opacity: .6; cursor: not-allowed; pointer-events: none; }
/* Etiqueta que lee el lector de pantalla y no ocupa sitio. No es
   `display:none`: eso la borra también para el lector. */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 6 · El buscador ancho del mockup NO lleva regla nueva: `form.filtros
       .ancho` ya existe desde DS102 con `flex: 1 1 200px` y `width: 100%`
       en su campo, que es exactamente lo que hacía falta. Queda dicho aquí
       para que nadie escriba la regla otra vez con otro nombre. -------- */

@media (max-width: 720px) {
  .tira-kpi.n2, .tira-kpi.n3, .tira-kpi.n4, .tira-kpi.n5, .tira-kpi.n6 {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .titulo-accion { flex: 1 1 100%; }
}

/* === DS150 · la octava clase que sustituye a un style= en línea === */
/* Hallazgo 473: sin `style-src`, el navegador descarta todo `style=` en
   línea. DS149 movió siete de `plantilla.py`; éste entró con DS139 y salió
   de una base anterior, así que DS149 no pudo verlo.

   Antes `style="margin-top:0"` en el primer `<h2>` de `/proveedor/nuevo`
   («Identificación de la empresa»): es el primer bloque dentro de
   `form.caja.pila`, así que no lleva el `margin-top` de var(--sc-6) que
   `h2` trae por defecto y que ahí sólo abre un hueco contra el borde de la
   caja. El nombre es genérico a propósito —no dice de qué pantalla es—
   porque el papel es genérico: «este encabezado abre su contenedor». */
.sin-margen-arriba { margin-top: 0; }

/* ===========================================================================
   FORGE-DS173 · Aprobaciones (`ap-*`) y Kanban de pedidos (`kb-*`).
   Clonados de `panel_de_aprobaciones_de_compras.png` y
   `panel_kanban_de_pedidos_de_compras.png` (1448x1086). Solo el cuerpo: el
   esqueleto es de DS171. Medidas en px del PNG, anotadas donde importan.
   =========================================================================== */

/* Iconos de trazo de los dos cuerpos. */
.ap-rejilla .ico, .kb-rejilla .ico { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.ap-rejilla .ico.rojo, .kb-rejilla .ico.rojo { color: var(--sc-brand); }

/* --- Rejilla: cuerpo + cajón pegado a la barra y al canto derecho.
       Cajón de aprobaciones x=970..1448 (478 px); del kanban x=1138..1448. */
.ap-rejilla, .kb-rejilla {
  display: grid;
  gap: 0 var(--sc-3);
  margin: calc(-1 * var(--sc-5)) calc(-1 * var(--sc-gutter)) calc(-1 * var(--sc-8)) 0;
  align-items: start;
}
.ap-rejilla { grid-template-columns: minmax(0, 1fr) 478px; }
.kb-rejilla { grid-template-columns: minmax(0, 1fr) 310px; }
.ap-principal, .kb-principal { min-width: 0; padding-top: var(--sc-5); padding-bottom: var(--sc-5); }
.ap-cajon, .kb-cajon {
  background: var(--sc-surface);
  border-left: var(--sc-line) solid var(--sc-border-strong);
  min-height: calc(100vh - var(--sc-header-h));
  position: sticky;
  top: var(--sc-header-h);
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 8px rgba(10, 15, 30, 0.04);
}
.ap-cajon-vacio, .kb-cajon-vacio { padding: var(--sc-5); }

/* --- Pestañas de la vista (y=190..226, subrayado rojo de 2 px). */
.ap-pestanas {
  display: flex; align-items: flex-end; justify-content: space-between;
  border-bottom: var(--sc-line) solid var(--sc-border-strong);
  margin: var(--sc-4) 0 var(--sc-5);
}
.ap-pestanas nav, .ap-pest-cajon { display: flex; gap: var(--sc-1); }
.ap-pestanas nav > *, .ap-pest-cajon > * {
  padding: var(--sc-2) var(--sc-4) 10px;
  font-size: var(--sc-fs-body);
  color: var(--sc-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ap-pestanas nav > .on, .ap-pest-cajon > .on {
  color: var(--sc-brand); font-weight: 600; border-bottom-color: var(--sc-brand);
}
.ap-pestanas nav > .off, .ap-pest-cajon > .off { cursor: not-allowed; }
.ap-flujos { margin-bottom: var(--sc-2); display: inline-flex; gap: var(--sc-2); align-items: center; }

/* --- KPI con icono en disco (y=246..333, 4 tarjetas, canaleta 6 px). */
.ap-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: var(--sc-4); }
.kb-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: var(--sc-4) 0; }
.ap-kpi, .kb-kpi {
  display: flex; align-items: flex-start;
  background: var(--sc-surface); border-radius: var(--sc-r-card);
  box-shadow: var(--sc-shadow-card);
  min-width: 0;
}
.ap-kpi { gap: var(--sc-3); }
.kb-kpi { padding: var(--sc-3) var(--sc-2); gap: var(--sc-2); }
.ap-kpi > div, .kb-kpi > div { display: flex; flex-direction: column; min-width: 0; }
.ap-kpi .cifra, .kb-kpi .cifra { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--sc-text); }
.ap-kpi .rotulo, .kb-kpi .rotulo { font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.ap-kpi-pie, .kb-kpi .meta { font-size: var(--sc-fs-micro); color: var(--sc-text-faint); margin-top: 2px; }
.ap-kpi-ico {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sc-danger-bg); color: var(--sc-brand);
}
.ap-kpi-ico .ico { width: 22px; height: 22px; }
.ap-kpi-ico.azul { background: var(--sc-info-bg); color: var(--sc-info-fg); }
.ap-kpi-ico.ambar { background: var(--sc-warn-bg); color: var(--sc-warn-fg); }
.ap-kpi-ico.verde { background: var(--sc-ok-bg); color: var(--sc-ok-fg); }
.kb-kpi .ap-kpi-ico { width: 34px; height: 34px; }
.ap-kpi-alerta { color: var(--sc-danger-fg); font-size: var(--sc-fs-micro); display: inline-flex; gap: 4px; align-items: center; }
.ap-kpi-alerta .ico { width: 12px; height: 12px; }

/* --- Barra de filtros (y=350..385). */
.ap-filtros { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr auto; gap: 6px; margin-bottom: var(--sc-3); }
.ap-buscar {
  display: flex; align-items: center; gap: var(--sc-2);
  background: var(--sc-surface); border: var(--sc-line) solid var(--sc-border-strong);
  border-radius: var(--sc-r); padding: 0 var(--sc-3); color: var(--sc-text-faint);
}
.ap-buscar input { border: 0; background: transparent; padding: var(--sc-2) 0; min-width: 0; width: 100%; font-size: var(--sc-fs-sm); }
.ap-select, .ap-mas-filtros {
  background: var(--sc-surface); color: var(--sc-text-muted); border: var(--sc-line) solid var(--sc-border-strong);
  font-weight: 400; justify-content: space-between; text-align: left;
  display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 36px;
}
.ap-select::after { content: "⌄"; color: var(--sc-text-faint); }
.ap-rejilla button:disabled, .kb-rejilla button:disabled { cursor: not-allowed; opacity: 1; }

/* --- Tabla (fila 50 px, cabecera 40 px, fila marcada en rosa). */
.ap-tabla-caja { background: var(--sc-surface); border-radius: var(--sc-r-card); box-shadow: var(--sc-shadow-card); overflow-x: auto; }
.ap-tabla { width: 100%; border-collapse: collapse; font-size: var(--sc-fs-sm); }
.ap-tabla th {
  text-align: left; font-weight: 400; color: var(--sc-text-muted); font-size: var(--sc-fs-micro);
  padding: var(--sc-3) var(--sc-2); border-bottom: var(--sc-line) solid var(--sc-border-strong); background: var(--sc-surface);
}
.ap-tabla td { padding: var(--sc-2); height: 50px; border-bottom: var(--sc-line) solid var(--sc-border); vertical-align: middle; }
.ap-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.ap-tabla tr.ap-marcada td { background: var(--sc-brand-soft); }
.ap-tabla tr.ap-marcada td:first-child { box-shadow: inset 2px 0 0 var(--sc-brand); }
.ap-sel { width: 32px; }
.ap-casilla {
  display: inline-flex; width: 16px; height: 16px; border: 1.5px solid var(--sc-border-control);
  border-radius: 3px; align-items: center; justify-content: center; background: var(--sc-surface);
}
.ap-casilla.on { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); }
.ap-casilla .ico { width: 12px; height: 12px; }
.ap-id { white-space: nowrap; color: var(--sc-text-muted); }
.ap-desc { color: var(--sc-text); }
.ap-prov, .ap-prio, .ap-chip, .kb-chip {
  display: inline-block; padding: 2px 10px; border-radius: var(--sc-r-pill);
  background: var(--sc-neutral-bg); color: var(--sc-neutral-fg); font-size: var(--sc-fs-micro); white-space: nowrap;
}
.ap-chip.rojo, .kb-chip.rojo { background: var(--sc-danger-bg); color: var(--sc-danger-fg); }
.ap-chip.ambar, .kb-chip.ambar { background: var(--sc-warn-bg); color: var(--sc-warn-fg); }
.ap-chip.verde, .kb-chip.verde { background: var(--sc-ok-bg); color: var(--sc-ok-fg); }
.kb-chip.azul { background: var(--sc-info-bg); color: var(--sc-info-fg); }
.ap-riesgo { text-align: center; color: var(--sc-text-faint); }
.ap-aviso { color: var(--sc-danger-fg); }
.ap-aviso .ico { width: 20px; height: 20px; }
.ap-revisar { color: var(--sc-link); text-decoration: none; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.ap-revisar:hover { color: var(--sc-link-hover); text-decoration: underline; }
.ap-tabla .nada { height: auto; padding: var(--sc-5); }
.ap-pie { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--sc-3) var(--sc-3); font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.ap-paginas { display: flex; gap: var(--sc-2); }
.ap-paginas .pag {
  min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: var(--sc-line) solid var(--sc-border-strong); border-radius: var(--sc-r); background: var(--sc-surface);
}
.ap-paginas .pag.actual { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); font-weight: 600; }
.ap-paginas .pag.off { color: var(--sc-text-faint); }
.ap-mostrar { justify-self: end; display: inline-flex; gap: var(--sc-2); align-items: center; }

/* --- Cajón de aprobaciones. */
.ap-cajon-cab, .kb-cajon-cab { display: flex; align-items: center; gap: var(--sc-3); padding: var(--sc-4) var(--sc-5) 0; }
.ap-cajon-cab .ico { width: 22px; height: 22px; }
.ap-cajon-id { font-size: 17px; }
.ap-cerrar { margin-left: auto; color: var(--sc-text); display: inline-flex; padding: var(--sc-1); border-radius: var(--sc-r-sm); }
.ap-cerrar .ico { width: 20px; height: 20px; }
.ap-cajon-tit { line-height: 28px; margin: var(--sc-4) var(--sc-5) 2px; }
.ap-cajon-sub { margin: 0 var(--sc-5) var(--sc-3); color: var(--sc-text-muted); font-size: var(--sc-fs-body); }
.ap-pest-cajon { border-bottom: var(--sc-line) solid var(--sc-border-strong); padding: 0 var(--sc-3); }
.ap-pest-cajon > * { padding: var(--sc-2) var(--sc-2) 10px; font-size: var(--sc-fs-sm); }
.ap-cajon-cuerpo { padding: var(--sc-2) var(--sc-2) var(--sc-3); display: flex; flex-direction: column; gap: var(--sc-2); flex: 1; }
.ap-bloque, .kb-bloque { background: var(--sc-surface); }
.ap-bloque { border: var(--sc-line) solid var(--sc-border-strong); border-radius: 8px; }
.kb-bloque { padding: var(--sc-3); }
.ap-bloque h3, .kb-bloque h3 {
  display: flex; align-items: center; gap: var(--sc-2); margin: 0 0 var(--sc-2);
  font-size: var(--sc-fs-body); font-weight: 600;
}
.ap-mas-enlace { margin-left: auto; font-weight: 400; font-size: var(--sc-fs-micro); color: var(--sc-link); text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.ap-mas-enlace .ico { width: 12px; height: 12px; }
.ap-dl, .kb-dl { display: grid; margin: 0; }
.kb-dl { grid-template-columns: 1fr auto; }
.ap-dl dt, .kb-dl dt { color: var(--sc-text-muted); }
.ap-dl dd, .kb-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kb-dl dd { text-align: right; }
.ap-persona { display: inline-flex; gap: var(--sc-2); align-items: center; }
.ap-persona > span:last-child { display: flex; flex-direction: column; }
.ap-av {
  width: 30px; height: 30px; border-radius: 50%; background: var(--sc-neutral-bg); color: var(--sc-text);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--sc-fs-micro); font-weight: 600;
}
.ap-arts { width: 100%; border-collapse: collapse; font-size: var(--sc-fs-micro); }
.ap-arts th { text-align: left; font-weight: 400; color: var(--sc-text-muted); background: var(--sc-surface-sunk); padding: 4px 6px; }
.ap-arts td { padding: 6px; border-bottom: var(--sc-line) solid var(--sc-border); }
.ap-arts .num { text-align: right; white-space: nowrap; }
.ap-total { display: flex; justify-content: space-between; margin: var(--sc-2) 0 0; font-size: var(--sc-fs-sm); }
.ap-total b { font-size: 16px; }
.ap-comparativa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ap-prov-card {
  border: var(--sc-line) solid var(--sc-border-strong); border-radius: 8px; padding: var(--sc-2);
  display: flex; flex-direction: column; gap: 4px;
}
.ap-prov-card.elegido { border-color: var(--sc-ok-fg); box-shadow: 0 0 0 1px var(--sc-ok-fg) inset; }
.ap-prov-card.vacia { background: var(--sc-surface-sunk); }
.ap-prov-cifra { font-weight: 700; }
.ap-pareja { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-2); }
.ap-impacto { margin: 0 0 6px; font-size: var(--sc-fs-sm); }
.ap-barra { height: 8px; border-radius: var(--sc-r-pill); background: var(--sc-neutral-bg); margin-bottom: 4px; }
.ap-alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--sc-fs-micro); }
.ap-alertas li { display: flex; gap: 6px; align-items: flex-start; }
.ap-alertas li > span { display: flex; flex-direction: column; }
.ap-alertas li.rojo { color: var(--sc-danger-fg); }
.ap-alertas li.ambar { color: var(--sc-warn-fg); }
.ap-alertas li.ok { color: var(--sc-ok-fg); }
.ap-cajon-pie { border-top: var(--sc-line) solid var(--sc-border-strong); background: var(--sc-surface); position: sticky; bottom: 0; }
.ap-decision label { font-size: var(--sc-fs-micro); color: var(--sc-text-muted); }
.ap-decision input { width: 100%; margin: 2px 0 var(--sc-2); }
.ap-botonera { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: var(--sc-2); }
.ap-botonera button, .ap-botonera .boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; }
button.ap-rechazar { color: var(--sc-danger-fg); border-color: var(--sc-danger-fg); }
.ap-cajon-pie .micro { margin: var(--sc-2) 0 0; }

/* --- Kanban. Filtros con rótulo encima (y=270..322). */
.kb-filtros { display: grid; grid-template-columns: 1fr 1fr 1fr 1.6fr auto auto; gap: var(--sc-2); align-items: end; }
.kb-filtros label { display: block; font-size: var(--sc-fs-micro); color: var(--sc-text-muted); margin-bottom: 4px; }
.kb-filtros select, .kb-filtros input { width: 100%; min-height: 36px; font-size: var(--sc-fs-sm); }
.kb-buscar { position: relative; }
.kb-buscar .ico { position: absolute; left: 10px; bottom: 10px; color: var(--sc-text-faint); }
.kb-buscar input { padding-left: 32px; }
.kb-filtrar, .kb-limpiar { min-height: 36px; display: inline-flex; gap: 6px; align-items: center; }
.kb-vistas { display: flex; justify-content: flex-end; align-items: center; gap: var(--sc-2); margin: var(--sc-2) 0 var(--sc-3); }
.kb-arrastre { margin-right: auto; }
.kb-vista {
  display: inline-flex; gap: 6px; align-items: center; padding: 6px var(--sc-4); border-radius: var(--sc-r);
  font-size: var(--sc-fs-sm); color: var(--sc-text); text-decoration: none; background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border-strong);
}
.kb-vista.on { background: var(--sc-brand); color: var(--sc-on-brand); border-color: var(--sc-brand); }

/* Columnas: seis de ~146 px con canaleta de 6 px (x=220..1124). */
.kb-tablero { display: grid; grid-template-columns: repeat(6, minmax(140px, 1fr)); gap: 6px; overflow-x: auto; }
.kb-col { background: var(--sc-surface-sunk); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kb-col-cab { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 6px; background: var(--sc-surface); border-radius: 6px; padding: var(--sc-2); }
.kb-col-cab h2 { margin: 0; font-size: var(--sc-fs-body); font-weight: 600; }
.kb-cuenta { font-size: var(--sc-fs-micro); background: var(--sc-neutral-bg); border-radius: var(--sc-r-pill); padding: 1px 8px; }
.kb-suma { grid-column: 1 / -1; font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.kb-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--sc-neutral-fg); }
.kb-punto.azul { background: var(--sc-info-fg); }
.kb-punto.ambar { background: var(--sc-warn-fg); }
.kb-punto.verde { background: var(--sc-ok-fg); }
.kb-punto.rojo { background: var(--sc-danger-fg); }
.kb-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kb-tarjeta { position: relative; background: var(--sc-surface); border: var(--sc-line) solid var(--sc-border-strong); border-radius: 6px; }
.kb-tarjeta.on { border-color: var(--sc-info-fg); box-shadow: 0 0 0 1px var(--sc-info-fg) inset; }
.kb-enlace { display: flex; flex-direction: column; gap: 3px; padding: var(--sc-2); color: var(--sc-text); text-decoration: none; font-size: var(--sc-fs-micro); }
.kb-enlace:hover .kb-num { color: var(--sc-link); }
.kb-num { font-weight: 600; padding-right: 18px; }
.kb-linea { display: flex; gap: 6px; align-items: flex-start; color: var(--sc-text-muted); min-width: 0; }
.kb-linea > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.kb-linea .ico { width: 12px; height: 12px; margin-top: 1px; }
.kb-prov { color: var(--sc-text); }
.kb-importe { font-weight: 700; font-size: var(--sc-fs-sm); }
.kb-alerta { color: var(--sc-danger-fg); display: inline-flex; gap: 4px; align-items: center; }
.kb-alerta.ambar { color: var(--sc-warn-fg); }
.kb-alerta .ico { width: 12px; height: 12px; }
.kb-enlace .kb-chip { align-self: flex-start; margin-top: 2px; }
.kb-menu { position: absolute; top: 6px; right: 6px; color: var(--sc-text-faint); }
.kb-vacia { font-size: var(--sc-fs-micro); color: var(--sc-text-faint); padding: var(--sc-2); text-align: center; }
.kb-crear { display: inline-flex; gap: 6px; align-items: center; justify-content: center; padding: var(--sc-2); background: var(--sc-surface); border-radius: 6px; color: var(--sc-link); text-decoration: none; font-size: var(--sc-fs-sm); }
.kb-crear.off { color: var(--sc-text-faint); cursor: not-allowed; }
.kb-trunc { margin: 0; text-align: center; }

/* Cajón del kanban (x=1138..1448). */
.kb-cajon { padding: 0 0 var(--sc-4); gap: var(--sc-2); }
.kb-cajon-cab { font-size: 17px; }
.kb-cajon > .meta { margin: 0 var(--sc-5); }
.kb-bloque { margin: 0 var(--sc-2); border: 0; border-bottom: var(--sc-line) solid var(--sc-border-strong); border-radius: 0; }
.kb-pasos { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 var(--sc-3); padding: 0; font-size: var(--sc-fs-micro); text-align: center; color: var(--sc-text-muted); }
.kb-pasos li { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kb-paso-bola { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--sc-border-control); display: inline-flex; align-items: center; justify-content: center; background: var(--sc-surface); }
.kb-pasos .hecho .kb-paso-bola, .kb-pasos .actual .kb-paso-bola { background: var(--sc-ok-fg); border-color: var(--sc-ok-fg); color: var(--sc-on-brand); }
.kb-pasos .actual { color: var(--sc-text); font-weight: 600; }
.kb-info { display: flex; gap: var(--sc-2); background: var(--sc-info-bg); color: var(--sc-info-fg); border-radius: 6px; padding: var(--sc-3); margin: 0; font-size: var(--sc-fs-sm); }
.kb-info > span { display: flex; flex-direction: column; }
.kb-arts { list-style: none; margin: 0; padding: 0; font-size: var(--sc-fs-sm); }
.kb-arts li { display: grid; grid-template-columns: 1fr auto 18px; gap: var(--sc-2); padding: 6px 0; align-items: center; }
.kb-ok { color: var(--sc-ok-fg); }
.kb-ver { margin: var(--sc-2) var(--sc-3) 0; display: flex; justify-content: center; gap: 6px; align-items: center; }

@media (max-width: 1100px) {
  .ap-rejilla, .kb-rejilla { grid-template-columns: minmax(0, 1fr); margin-right: 0; }
  .ap-cajon, .kb-cajon { position: static; min-height: 0; border-left: 0; border-radius: var(--sc-r-card); margin-bottom: var(--sc-5); }
  .ap-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-filtros, .kb-filtros { grid-template-columns: 1fr 1fr; }
}

/* DS173 · densidad: el mockup escribe a 11-12 px dentro de tablas,
   tarjetas y cajón; sin esto la tabla desborda y los KPI crecen a 4 líneas. */
.ap-tabla th, .ap-arts th { text-transform: none; letter-spacing: 0; }
.ap-tabla td { font-size: var(--sc-fs-micro); line-height: 14px; padding: 6px; }
.ap-tabla th { padding: var(--sc-3) 6px; }
.ap-tabla .num, .ap-tabla td:nth-child(7) { white-space: nowrap; }
.ap-desc { max-width: 120px; }
.ap-prov { max-width: 110px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.ap-kpi .cifra, .kb-kpi .cifra { white-space: nowrap; }
.kb-kpi .cifra { font-size: 17px; line-height: 22px; }
.ap-kpi .rotulo, .kb-kpi .rotulo, .ap-kpi-pie { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--sc-fs-micro); }
.ap-kpi { padding: var(--sc-3); }
.ap-select, .ap-mas-filtros, .ap-buscar input { font-size: var(--sc-fs-micro); }
.ap-select, .ap-mas-filtros { white-space: nowrap; overflow: hidden; padding: 0 var(--sc-2); }
.ap-flujos.boton { font-weight: 400; font-size: var(--sc-fs-sm); min-height: 34px; padding: 0 var(--sc-3); }
.ap-cuenta { font-size: var(--sc-fs-micro); }
.ap-pie .ap-select { min-width: 120px; }
.ap-cajon-tit { font-size: 19px; margin-top: var(--sc-3); }
.ap-dl { font-size: var(--sc-fs-micro); gap: 3px var(--sc-3); grid-template-columns: 130px 1fr; }
.ap-bloque { padding: var(--sc-2) var(--sc-3); }
.ap-bloque h3 { font-size: var(--sc-fs-sm); margin-bottom: 6px; }
.ap-arts { table-layout: fixed; }
.ap-arts th:first-child, .ap-arts td:first-child { width: 42%; }
.ap-arts td, .ap-arts th { padding: 3px 4px; overflow-wrap: anywhere; }
.ap-prov-card { min-height: 0; font-size: var(--sc-fs-micro); }
.ap-prov-cifra { font-size: 13px; }
.ap-botonera button, .ap-botonera .boton { font-size: var(--sc-fs-sm); white-space: nowrap; padding: 0 var(--sc-2); min-height: 38px; }
.ap-decision input { padding-top: 6px; padding-bottom: 6px; }
.ap-cajon-pie { padding: var(--sc-2) var(--sc-3); }
.kb-enlace, .kb-linea { line-height: 14px; }
.kb-linea > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.kb-num { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--sc-fs-micro); }
.kb-importe { font-size: var(--sc-fs-sm); }
.kb-dl { font-size: var(--sc-fs-micro); gap: 4px var(--sc-2); }
.kb-dl dt { white-space: nowrap; }
.kb-cajon-cab b { overflow-wrap: anywhere; }
.kb-filtros select, .kb-filtros input { font-size: var(--sc-fs-micro); }
.kb-filtrar, .kb-limpiar { font-size: var(--sc-fs-sm); font-weight: 400; }
.ap-arts { min-width: 0; }
.ap-arts td { height: auto; }
.ap-tabla { min-width: 700px; }
.ap-tabla th { font-weight: 400; font-size: var(--sc-fs-micro); position: static; }
.ap-tabla td:last-child, .ap-tabla th:last-child { padding-right: var(--sc-3); }
.ap-kpi-pie .meta { font-size: inherit; color: inherit; }
.ap-revisar .ico { width: 14px; height: 14px; }
/* === DS175 · Pedido detalle, clonado de detalle_del_pedido_de_compra_sercoin.png
   Medido sobre el PNG original 1448x1086: columna principal x=220..1144,
   carril derecho x=1158..1436 (278 px, canaleta 14), tarjetas de radio 12 con
   la sombra de la casa. Fila 1 en y=183 (tres tarjetas 331/239/338 px), líneas
   en y=398, asignación+totales en y=703 y historial+documentos en y=883. El
   carril arranca en y=70, a la altura del migapán. Todo va bajo `.pd`. ===== */
.pd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 278px;
  gap: 14px;
  align-items: start;
}
.pd-main, .pd-carril { min-width: 0; display: flex; flex-direction: column; }
.pd-main { gap: 10px; }
.pd-carril { gap: 14px; }
.pd .titulo-pantalla { margin-bottom: 2px; }
.pd .titulo-pantalla h1 { font-size: 34px; line-height: 42px; letter-spacing: -.01em; }
.pd .migapan { margin-bottom: 4px; }
.pd-botones { display: flex; gap: 10px; align-items: center; }
.pd-botones button, .pd-botones .boton { min-height: 38px; }
.pd-mas { min-width: 44px; }
.pd-id { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.pd-num { font-size: 16px; line-height: 22px; color: var(--sc-text); font-variant-numeric: tabular-nums; }
.pd-id .chip { margin: 0; }

.pd-card {
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-card);
  box-shadow: var(--sc-shadow-card);
  padding: 14px 16px 16px;
  min-width: 0;
}
.pd-card-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sc-3); margin-bottom: 12px; min-height: 26px;
}
.pd-card-cab h2 {
  margin: 0; display: flex; align-items: center; gap: 10px;
  font-size: 15px; line-height: 20px;
}
.pd-card-cab h2::before {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px;
  border: 2px solid var(--sc-brand); border-radius: 4px;
}
.pd-carril .pd-card-cab h2::before { display: none; }
.pd-card-cab .boton, .pd-card-cab button { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
.pd-link-off { color: var(--sc-brand); font-size: var(--sc-fs-sm); opacity: .6; }
.pd-no { color: var(--sc-text-faint); font-style: italic; }
.pd .meta { display: block; font-size: var(--sc-fs-sm); line-height: var(--sc-lh-sm); color: var(--sc-text-muted); }

.pd-fila3 { display: grid; grid-template-columns: 331fr 239fr 338fr; gap: 8px; }
.pd-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pd-quien { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.pd-quien b { display: block; font-size: 14px; line-height: 20px; }
.pd-logo, .pd-avatar {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--sc-text);
}
.pd-logo { width: 76px; height: 42px; border: 1px solid var(--sc-border-strong); border-radius: 6px; font-size: 16px; }
.pd-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sc-neutral-bg); font-size: 14px; }
.pd-enlace { display: inline-block; margin-top: 4px; font-size: var(--sc-fs-sm); text-decoration: none; }
.pd-contacto { list-style: none; margin: 0; padding: 0; font-size: var(--sc-fs-body); }
.pd-contacto li { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; color: var(--sc-text-muted); }
.pd-ico { width: 14px; flex: 0 0 auto; color: var(--sc-text-muted); }
.pd-entrega { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pd-dato { margin-bottom: 12px; }
.pd-dato .rot, .pd-notas .rot { display: block; font-size: var(--sc-fs-micro); line-height: var(--sc-lh-micro); color: var(--sc-text-muted); }
.pd-dato .val { display: block; font-size: var(--sc-fs-body); line-height: var(--sc-lh-body); font-weight: 500; }

.pd-tw { overflow-x: auto; }
.pd-tabla { min-width: 0; }
.pd-tabla th {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: var(--sc-fs-sm); background: var(--sc-surface-sunk); position: static;
}
.pd-tabla td { height: 44px; vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
.pd-tabla td .meta { font-size: var(--sc-fs-micro); }
.pd-tabla th.sel, .pd-tabla td.sel { width: 34px; }
.pd-prod { display: flex; gap: 10px; align-items: center; }
.pd-prod b { display: block; font-weight: 500; }
.pd-mini {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: var(--sc-neutral-bg); border: 1px solid var(--sc-border-strong);
}
.pd-compacta td { height: 30px; }
.pd-total td { font-weight: 600; border-top: 1px solid var(--sc-border-strong); }
.pd-card .aviso, .pd-card .meta + .aviso { margin: 10px 0 0; font-size: var(--sc-fs-sm); }

.pd-importes {
  display: grid; grid-template-columns: 1fr auto; margin: 0;
  font-size: var(--sc-fs-body); line-height: 18px;
}
.pd-importes dt { color: var(--sc-text-muted); padding: 5px 0; border-bottom: 1px solid var(--sc-border); }
.pd-importes dd { margin: 0; padding: 5px 0; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--sc-border); }
.pd-total-pedido {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  background: var(--sc-brand-soft);
}
.pd-total-pedido span { font-weight: 600; }
.pd-total-pedido b { font-size: 20px; line-height: 26px; font-variant-numeric: tabular-nums; }
.pd-total-pedido.pd-sin-fondo { background: none; padding: 10px 0 0; }
.pd-info dt, .pd-info dd { border-bottom: 0; padding: 4px 0; }
.pd-notas { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sc-border); }
.pd-notas p { margin: 2px 0 0; font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }

.pd-linea-t { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; }
.pd-linea-t li {
  position: relative; display: flex; justify-content: space-between; gap: 12px;
  padding: 0 0 12px; font-size: var(--sc-fs-body);
}
.pd-linea-t li::before {
  content: ""; position: absolute; left: -18px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--sc-ok-fg);
}
.pd-linea-t li::after {
  content: ""; position: absolute; left: -14px; top: 16px; bottom: -2px;
  border-left: 1px dashed var(--sc-border-control);
}
.pd-linea-t li:last-child::after { display: none; }
.pd-linea-t b { font-weight: 500; }
.pd-linea-t li > .meta { flex: 0 0 auto; white-space: nowrap; }
.pd-docs { list-style: none; margin: 0 0 10px; padding: 0; }
.pd-docs li { display: flex; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--sc-border); }
.pd-docs b { font-weight: 500; }
.pd-pdf { color: var(--sc-brand); font-size: 18px; }
.pd-soltar {
  border: 1px dashed var(--sc-border-control); border-radius: 8px;
  padding: 10px; text-align: center; font-size: var(--sc-fs-sm); color: var(--sc-text-muted);
}

.pd-estado {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px;
  border-radius: 8px; background: var(--sc-neutral-bg); margin-bottom: 12px;
}
.pd-estado b { display: block; }
.pd-estado.verde { background: var(--sc-ok-bg); }
.pd-estado.azul { background: var(--sc-info-bg); }
.pd-estado.naranja { background: var(--sc-warn-bg); }
.pd-estado.rojo { background: var(--sc-danger-bg); }
.pd-check { font-size: 22px; line-height: 22px; }
.pd-estado.verde .pd-check { color: var(--sc-ok-fg); }
.pd-estado.azul .pd-check { color: var(--sc-info-fg); }
.pd-estado.naranja .pd-check { color: var(--sc-warn-fg); }
.pd-estado.rojo .pd-check { color: var(--sc-danger-fg); }
.pd-acciones { display: flex; flex-direction: column; gap: 6px; }
.pd-acc { width: 100%; justify-content: flex-start; min-height: 36px; text-align: left; }
.pd-peligro { border-color: var(--sc-brand); color: var(--sc-brand); }
.pd-etq .chip { margin: 0 6px 6px 0; }
.pd-bajo { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.pd-bajo .pd-card .caja { box-shadow: none; }

@media (max-width: 1100px) {
  .pd { grid-template-columns: 1fr; }
  .pd-fila3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .pd-fila3, .pd-fila2, .pd-entrega { grid-template-columns: 1fr; }
}
/* DS175 · segunda pasada tras la primera foto: la cabecera medía 38 px de
   más (id del pedido en y=183 contra 152) y el carril se desbordaba. */
.pd .titulo-pantalla { margin-bottom: -22px; }
.pd .titulo-pantalla h1 { font-size: 32px; line-height: 40px; }
.pd-botones { padding-top: 16px; }
.pd-id { margin-bottom: 18px; }
.pd-card-cab h2 { font-size: 14px; }
.pd-tabla { margin: 0; }
.pd-tabla td.num { white-space: nowrap; }
.pd-tabla td.num .meta { display: inline; margin-left: 4px; }
.pd-tabla td.num .meta::before { content: "· "; }
.pd-carril .chip { white-space: normal; }
.pd-info { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
.pd-info dd { overflow-wrap: anywhere; }
.pd-carril .pd-importes { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
.pd-tw { margin: 0; }
.pd-c-lin .pd-tabla th:nth-child(3) { width: 36%; }
.pd-c-lin .pd-tabla td:nth-child(4) { white-space: nowrap; }

/* === DS175 · Proveedores, clonado de panel_de_proveedores_de_artemis_compras.png
   Medido: KPI en y=183..285, barra de filtros y=303..341 (buscador
   x=220..585, cuatro desplegables de ~150 px y «Más filtros» a la derecha),
   tarjeta de tabla desde y=356 con su barra de acciones (y=372..404), filas
   de 53 px, logo de 52 px delante del nombre y pie con paginador centrado. */
.pv .kpis { margin-bottom: 18px; }
.pv-filtros {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;
  background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 14px;
}
.pv-filtros .ancho-buscador { flex: 1 1 360px; }
.pv-filtros .ancho-buscador input { width: 100%; min-height: 40px; }
.pv-desp {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--sc-border-strong); border-radius: var(--sc-r);
  background: var(--sc-surface); padding-left: 10px; min-height: 40px;
}
.pv-desp label { font-size: var(--sc-fs-sm); color: var(--sc-text); margin: 0; padding-right: 8px;
  border-right: 1px solid var(--sc-border-strong); }
.pv-desp select { border: 0; background: transparent; min-height: 38px; flex: 1 1 auto; min-width: 0; }
.pv-mas { min-width: 120px; }
.pv-tabla {
  background: var(--sc-surface); border: 1px solid var(--sc-border);
  border-radius: var(--sc-r-card); box-shadow: var(--sc-shadow-card); padding: 14px 8px 8px;
}
.pv-tabla .barra-tabla { display: flex; justify-content: space-between; align-items: center;
  padding: 0 8px 12px; gap: 10px; flex-wrap: wrap; }
.pv-tabla .barra-tabla .izq, .pv-tabla .barra-tabla .der { display: flex; gap: 10px; align-items: center; }
.pv-tabla .barra-tabla button { min-height: 34px; }
.pv-sel { display: inline-flex; gap: 8px; align-items: center; font-size: var(--sc-fs-sm); padding-right: 6px; }
.pv-mostrar { font-size: var(--sc-fs-sm); color: var(--sc-text-muted); display: inline-flex; gap: 8px; align-items: center; }
.pv-tabla select:disabled { min-height: 34px; color: var(--sc-text); }
.pv .pd-tabla td { height: 52px; padding-top: 5px; padding-bottom: 5px; }
.pv .meta { display: block; font-size: var(--sc-fs-micro); line-height: var(--sc-lh-micro); color: var(--sc-text-muted); }
.pv-prov { display: flex; gap: 12px; align-items: center; }
.pv-prov a { font-weight: 500; color: var(--sc-text); text-decoration: none; }
.pv-prov a:hover { text-decoration: underline; }
.pv-logo {
  flex: 0 0 auto; height: 30px; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 800; color: var(--sc-brand); font-size: 14px;
}
.pv-nota {
  min-width: 54px; justify-content: center; border-radius: var(--sc-r-pill);
  background: var(--sc-neutral-bg); color: var(--sc-text-muted); padding: 2px 8px; font-size: var(--sc-fs-sm);
}
.pv-cond .proc { display: block; margin-top: 2px; }
.pv-cond .proc .noev { min-height: 18px; font-size: var(--sc-fs-micro); padding: 0 6px; }
.pv-alta { margin-top: 2px; }
.pv-alta .chip { min-height: 20px; }
.pv-alta .meta.micro { display: inline; }
.pv .pd-tabla th.proc, .pv .pd-tabla td.proc { width: auto; }
.pv .pd-no { color: var(--sc-text-faint); font-style: italic; }
.pv .pie-tabla { display: flex; justify-content: space-between; align-items: center; padding: 14px 8px 4px; gap: 12px; flex-wrap: wrap; }
.pv td.acciones-fila .acc:first-child { border: 1px solid var(--sc-border-strong); min-width: 50px; justify-content: center; color: var(--sc-text); font-weight: 600; }
@media (max-width: 1100px) { .pv-desp { flex: 1 1 140px; } }
/* DS175 · Proveedores, segunda pasada: la fila medía 92 px contra 53. */
.pv form.pv-filtros { background: none; border: 0; box-shadow: none; padding: 0; align-items: stretch; }
.pv-cond .proc br { display: none; }
.pv-cond .proc .meta.micro, .pv-alta + .meta, .pv .pv-est .meta.micro {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pv-est { white-space: nowrap; }
.pv-est .chip { margin: 0 4px 0 0; min-height: 22px; }
.pv-est .pv-codigo { display: block; font-size: var(--sc-fs-micro); color: var(--sc-text-muted); }
.pv-cond { white-space: nowrap; }
.pv .pd-tabla th:nth-child(2) { width: 25%; }
.pv .pd-tabla th:nth-child(3) { width: 11%; }
.pv .pd-tabla th:nth-child(8) { width: 15%; }
.pv .pv-est .meta.micro { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; display: block; }
.pv-filtros .ancho-buscador { flex: 0 1 365px; }
.pv-desp { flex: 1 1 150px; }
.pv-prov a { white-space: nowrap; }
.pv-logo { width: 40px; }
.pv .pd-tabla th:nth-child(6) { width: 12%; }
.pv-prov a { display: block; max-width: 250px; overflow: hidden; text-overflow: ellipsis; }
/* `pagina()` mete cada <table> en su carril `.tw`, que es una tarjeta: dentro
   de las tarjetas de DS175 sería tarjeta dentro de tarjeta. */
.pd .tw, .pv .tw, .pd-bajo .tw { border: 0; box-shadow: none; margin: 0; border-radius: 0; background: none; }
.pd-c-lin .pd-prod { min-width: 250px; }
/* DS175 · la piel de botón sobre un <span> que no es control (ver
   `plantilla._pd_desactivado`): apagada y sin cursor de mano. */
.boton.pd-off { opacity: .6; cursor: not-allowed; pointer-events: none; display: inline-flex; align-items: center; }
.boton.pd-prim.pd-off { opacity: .7; }
.pd-c-lin .pd-prod { min-width: 190px; }
.pd-c-lin .pd-tabla td:nth-child(5) { white-space: normal; }
.pd-c-lin .pd-tabla td:nth-child(5) .meta { display: block; margin: 0; }
.pd-c-lin .pd-tabla td:nth-child(5) .meta::before { content: ""; }
.boton.sec.pd-peligro { border-color: var(--sc-brand); color: var(--sc-brand); }

/* ===========================================================================
   FORGE-DS179 · Proveedor 360 (`.pv`) y Recepción lista/detalle (`.rc`).
   Medidos sobre los PNG de 1448x1086 de RONDAS_1_Y_2 (lienzo x=220..1436):
   panel_proveedor_360_de_victaulic, panel_de_recepción_de_mercancía,
   detalle_de_recepción_de_materiales. Solo cuerpo: nada de lateral ni barra.
   =========================================================================== */
.pv .ico, .rc .ico, .rc-rejilla .ico { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.pv .ico.rojo, .rc .ico.rojo, .rc-rejilla .ico.rojo { color: var(--sc-brand); }
.pv [aria-disabled="true"], .rc [aria-disabled="true"], .rc-rejilla [aria-disabled="true"] { cursor: not-allowed; }

/* Botones de cabecera: 42 px de alto, icono + texto (y=97..139). */
.pv-acciones, .rc-acciones { display: flex; gap: var(--sc-3); align-items: center; }
.pv-acciones .boton, .rc-acciones .boton, .rc-acciones button {
  display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 40px;
  padding: 0 var(--sc-4); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.pv-acciones .boton.sec.off, .rc-acciones .boton.sec.off { color: var(--sc-text); }
.pv-acciones .boton.off:not(.sec) { opacity: 1; }
.pv-solo, .rc-solo { padding: 0 var(--sc-3) !important; }
.rc-atras { transform: rotate(180deg); }
.boton.off { pointer-events: none; }

/* Tarjeta base: blanca, radio 8, sombra de tarjeta (DS118). */
.pv-card, .rc-card, .rc-bloque {
  background: var(--sc-surface); border-radius: 8px; box-shadow: var(--sc-shadow-card);
  border: var(--sc-line) solid var(--sc-border-strong); min-width: 0;
}
.pv-card, .rc-card { padding: 14px 16px; }
.pv-card-cab, .rc-card-cab { display: flex; align-items: flex-start; gap: var(--sc-3); margin-bottom: var(--sc-3); }
.pv-card-cab h2, .rc-card-cab h2 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.pv-card-cab .ico, .rc-card-cab .ico { width: 20px; height: 20px; }
.rc-card-cab > div { flex: 1; min-width: 0; }
.rc-card-cab .meta { margin: 0; font-size: var(--sc-fs-micro); }
.pv-mas, .rc-mas, .rc-enlace {
  margin-left: auto; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap;
  font-size: var(--sc-fs-micro); color: var(--sc-link); text-decoration: none;
}
.pv-mas.off, .rc-mas.off { color: var(--sc-text-muted); }
.pv-mas .ico, .rc-mas .ico, .rc-enlace .ico { width: 12px; height: 12px; }
.pv-pie-card { margin: var(--sc-3) 0 0; display: flex; justify-content: flex-end; }
.pv-vacio {
  display: flex; flex-direction: column; gap: 2px; padding: var(--sc-2) var(--sc-3);
  border: 1px dashed var(--sc-border-strong); border-radius: 6px; font-size: var(--sc-fs-micro);
  color: var(--sc-text-muted); margin-bottom: var(--sc-2);
}
.pv-vacio b { color: var(--sc-text); font-size: var(--sc-fs-sm); }

/* --- Proveedor 360 · fila 1: identidad 814 px + evaluación 390 (canaleta 12). */
.pv-fila1 { display: grid; grid-template-columns: minmax(0, 814fr) minmax(0, 390fr); gap: 12px; margin-bottom: 10px; }
.pv-identidad {
  display: grid; grid-template-columns: 124px minmax(0, 1fr) 256px; grid-template-rows: auto 1fr;
  gap: var(--sc-3) var(--sc-5);
}
.pv-identidad .pv-logo {
  width: 124px; height: 88px; border: var(--sc-line) solid var(--sc-border-strong); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font: 700 28px/1 var(--sc-font); color: var(--sc-text);
}
.pv-nombre h2 { margin: 6px 0 2px; font-size: 20px; line-height: 26px; }
.pv-nombre .meta { margin: 0 0 6px; font-size: var(--sc-fs-body); }
.pv-datos { grid-column: 1 / 3; display: grid; align-content: start; }
.pv-dato { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.pv-dato .meta { font-size: var(--sc-fs-micro); }
.pv-resumen {
  grid-column: 3; grid-row: 1 / 3; background: var(--sc-surface-sunk); border-radius: 6px;
  padding: var(--sc-3); font-size: var(--sc-fs-sm); display: flex; flex-direction: column; gap: 6px;
}
.pv-resumen p { margin: 0; }
.pv-resumen .aviso { padding: 6px var(--sc-2); font-size: var(--sc-fs-micro); line-height: 15px; }
.pv-resumen .pv-mas { margin-top: auto; align-self: flex-end; }
.pv-nota { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--sc-3); margin-bottom: var(--sc-3); }
.pv-cifra {
  background: var(--sc-ok-bg); color: var(--sc-ok-fg); border-radius: 8px; padding: 4px 14px;
  font: 700 24px/32px var(--sc-font);
}
.pv-cifra small { font-size: 16px; font-weight: 600; }
.pv-ultima { text-align: right; font-size: var(--sc-fs-micro); }
.pv-ultima b { font-size: var(--sc-fs-sm); color: var(--sc-text); font-weight: 400; }
.pv-criterios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pv-criterios li { display: grid; grid-template-columns: 138px 1fr 28px; gap: var(--sc-3); align-items: center; font-size: var(--sc-fs-sm); }
.pv-barra { height: 7px; border-radius: var(--sc-r-pill); background: var(--sc-neutral-bg); }

/* --- Fila 2 y fila 3: tres tarjetas (435/385/373 y 407/386/400). */
.pv-fila3 { display: grid; grid-template-columns: minmax(0, 435fr) minmax(0, 385fr) minmax(0, 373fr); gap: 11px; margin: 10px 0; }
.pv-fila-baja { grid-template-columns: minmax(0, 407fr) minmax(0, 386fr) minmax(0, 400fr); }
.pv-fila3 .pv-card { min-height: 300px; }
.pv-fila-baja .pv-card { min-height: 220px; }
.pv-contacto { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--sc-3); align-items: start; font-size: var(--sc-fs-sm); }
.pv-contacto > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pv-contacto .chip { align-self: flex-start; margin-top: 4px; }
.pv-av {
  width: 40px; height: 40px; border-radius: 50%; background: var(--sc-neutral-bg);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.pv-botones { display: flex !important; flex-direction: row !important; gap: 6px; }
.pv-icono {
  width: 32px; height: 32px; border: var(--sc-line) solid var(--sc-border-strong); border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--sc-text);
}
.pv-tabla { width: 100%; border-collapse: collapse; font-size: var(--sc-fs-micro); }
.pv-tabla th { text-align: left; font-weight: 400; color: var(--sc-text-muted); background: var(--sc-surface-sunk); padding: 5px 6px; text-transform: none; letter-spacing: 0; }
.pv-tabla td { padding: 6px; border-bottom: var(--sc-line) solid var(--sc-border); height: 26px; }
.pv-tabla .chip { min-height: 20px; font-size: var(--sc-fs-micro); padding: 0 8px; margin: 0; }
.pv-suma { margin: 0 0 6px; font-size: var(--sc-fs-micro); }
.pv-lista { margin: 0; padding-left: 18px; font-size: var(--sc-fs-micro); }
.pv-linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--sc-border-strong); font-size: var(--sc-fs-micro); }
.pv-linea-tiempo li { display: flex; flex-direction: column; padding: 0 0 8px; position: relative; }
.pv-linea-tiempo li::before { content: ""; position: absolute; left: -24px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--sc-brand); }
.pv .tira-kpi .kpi { min-height: 92px; }

/* --- Recepción · lista: cuerpo 918 px + carril de 290 (x=1148..1436). */
.rc-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 10px; align-items: start; }
.rc-principal { min-width: 0; }
.rc-principal .tira-kpi .kpi { min-height: 92px; }
.rc-carril { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.rc-bloque { padding: 12px 14px; }
.rc-carril-cab { display: flex; align-items: center; margin-bottom: var(--sc-2); }
.rc-h { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.rc-carril-lista { list-style: none; margin: 0; padding: 0; }
.rc-carril-lista li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--sc-2); align-items: center;
  padding: 8px 0; border-bottom: var(--sc-line) solid var(--sc-border); font-size: var(--sc-fs-micro);
}
.rc-carril-lista li > div { display: flex; flex-direction: column; min-width: 0; }
.rc-bola {
  width: 36px; height: 36px; border-radius: 50%; background: var(--sc-danger-bg); color: var(--sc-brand);
  display: inline-flex; align-items: center; justify-content: center;
}
.rc-bola-aviso { background: var(--sc-warn-bg); color: var(--sc-warn-fg); }
.rc-vacio { margin: 0; padding: var(--sc-3) 0; color: var(--sc-text-muted); font-size: var(--sc-fs-sm); }
.rc-rapidas { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sc-2); }
.rc-rapida {
  display: flex; align-items: center; gap: var(--sc-3); min-height: 36px; padding: 0 var(--sc-3);
  border: var(--sc-line) solid var(--sc-border-strong); border-radius: 6px; background: var(--sc-surface);
  color: var(--sc-text); text-decoration: none; font-size: var(--sc-fs-sm);
}
.rc-rapida .ico { width: 20px; height: 20px; }
.rc-rapida-roja { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); }
a.rc-rapida:hover { border-color: var(--sc-border-control); }
.rc-registrar { display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 38px; padding: 0 var(--sc-5); font-size: 14px; }

.rc-filtros { margin: 0 0 12px; padding: 14px 14px 12px; }
.rc-buscar-fila { display: grid; grid-template-columns: 1fr auto; gap: var(--sc-3); margin-bottom: var(--sc-3); }
.rc-buscar, .rc-select {
  display: flex; align-items: center; gap: var(--sc-2); min-height: 36px; padding: 0 var(--sc-3);
  border: var(--sc-line) solid var(--sc-border-strong); border-radius: 6px; background: var(--sc-surface);
  color: var(--sc-text-muted); font-size: var(--sc-fs-sm); white-space: nowrap; overflow: hidden;
}
.rc-select { justify-content: space-between; color: var(--sc-text); }
.rc-select::after { content: "⌄"; color: var(--sc-text-faint); }
.rc-mas-filtros { display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 36px; color: var(--sc-text) !important; }
.rc-selects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-3); }
.rc-filtro { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rc-rotulo { font-size: var(--sc-fs-sm); color: var(--sc-text); }

.rc-listado { padding: 12px 14px 8px; }
.rc-listado .rc-card-cab { align-items: center; }
.rc-exportar { display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 32px; padding: 0 var(--sc-3); font-size: var(--sc-fs-sm); color: var(--sc-text) !important; }
.rc-tabla-caja { overflow-x: auto; }
.rc-tabla { width: 100%; border-collapse: collapse; font-size: var(--sc-fs-micro); }
.rc-tabla th {
  text-align: left; font-weight: 400; color: var(--sc-text-muted); background: var(--sc-surface-sunk);
  padding: 8px 6px; text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.rc-tabla td { padding: 6px; height: 44px; border-bottom: var(--sc-line) solid var(--sc-border); vertical-align: middle; }
.rc-tabla .chip { min-height: 22px; font-size: var(--sc-fs-micro); margin: 0; }
.rc-tabla a { color: var(--sc-info-fg); text-decoration: none; }
.rc-tabla a:hover { text-decoration: underline; }
.rc-sel { width: 28px; }
.rc-casilla { display: inline-block; width: 16px; height: 16px; border: 1.5px solid var(--sc-border-control); border-radius: 3px; background: var(--sc-surface); }
.rc-acc { white-space: nowrap; text-align: right; }
.rc-icono {
  display: inline-flex; width: 30px; height: 30px; margin-left: 4px; align-items: center; justify-content: center;
  border: var(--sc-line) solid var(--sc-border-strong); border-radius: 6px; color: var(--sc-text) !important; background: var(--sc-surface);
}
.rc-icono.off { color: var(--sc-text-faint) !important; }
.rc-alerta.off { color: var(--sc-danger-fg) !important; }
.rc-pie { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--sc-3) 0 var(--sc-1); font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.rc-paginas { display: flex; gap: var(--sc-2); }
.rc-paginas .pag {
  min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: var(--sc-line) solid var(--sc-border-strong); border-radius: 6px; background: var(--sc-surface);
}
.rc-paginas .pag.actual { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); font-weight: 600; }
.rc-mostrar { justify-self: end; display: inline-flex; gap: var(--sc-2); align-items: center; }
.rc-mostrar .rc-select { min-width: 128px; }

/* --- Recepción · detalle: franja de 6 celdas (y=190..322) y dos columnas
       786 + 419 (x=220..1006 y 1017..1436). */
.rc-acciones .boton:not(.sec), .rc-marcar { background: var(--sc-brand); color: var(--sc-on-brand); border-color: var(--sc-brand); }
button.rc-marcar { display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 40px; padding: 0 var(--sc-5); }
.rc-franja { display: grid; grid-template-columns: 1fr 0.95fr 0.87fr 1fr 1.24fr 0.96fr; padding: 0; margin-bottom: 12px; }
.rc-celda { display: flex; flex-direction: column; gap: 4px; padding: 16px 14px; min-height: 130px; font-size: var(--sc-fs-sm); min-width: 0; overflow-wrap: anywhere; }
.rc-celda + .rc-celda { border-left: var(--sc-line) solid var(--sc-border-strong); }
.rc-celda-cab { display: flex; align-items: center; gap: var(--sc-2); margin-bottom: 6px; font-size: 13px; }
.rc-celda-cab .ico { width: 20px; height: 20px; }
.rc-celda .chip { align-self: flex-start; font-size: 14px; min-height: 30px; padding: 2px 12px; }
.rc-celda a { color: var(--sc-info-fg); font-weight: 600; text-decoration: none; }
.rc-fechas { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--sc-3); margin: 0; font-size: var(--sc-fs-micro); }
.rc-fechas dt { color: var(--sc-text-muted); }
.rc-fechas dd { margin: 0; }
.rc-det { display: grid; grid-template-columns: minmax(0, 786fr) minmax(0, 419fr); gap: 11px; align-items: start; }
.rc-det-izq, .rc-det-der { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rc-tabla-det td { height: 48px; }
.rc-prod { display: flex; align-items: center; gap: var(--sc-2); min-height: 36px; }
.rc-mini {
  width: 36px; height: 36px; flex: none; border-radius: 6px; background: var(--sc-surface-sunk);
  display: inline-flex; align-items: center; justify-content: center; color: var(--sc-text-muted);
}
.rc-rojo { color: var(--sc-danger-fg); font-weight: 600; }
.rc-llega input { width: 84px; min-height: 32px; padding: 4px 6px; }
.rc-parciales .rc-tabla-det td { height: 42px; }
.rc-notas { list-style: none; margin: 0; padding: 0; }
.rc-notas li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--sc-3); align-items: center; padding: 8px 0; border-bottom: var(--sc-line) solid var(--sc-border); font-size: var(--sc-fs-micro); }
.rc-notas li > div { display: flex; flex-direction: column; }
.rc-campo, .rc-papel, .rc-adjunto { display: flex; flex-direction: column; gap: 4px; font-size: var(--sc-fs-sm); margin-top: var(--sc-2); }
.rc-papel { background: var(--sc-surface-sunk); border-radius: 6px; padding: var(--sc-4); min-height: 200px; justify-content: center; }
.rc-papel input { background: var(--sc-surface); }
.rc-adjunto { border: var(--sc-line) solid var(--sc-border-strong); border-radius: 6px; padding: var(--sc-3); }
.rc-discrepancias { background: var(--sc-danger-bg); border-color: var(--sc-brand-border); }
.rc-discrepancias .rc-card-cab { align-items: center; }
.rc-cuenta { background: var(--sc-surface); color: var(--sc-danger-fg); border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.rc-disc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-disc li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--sc-3); align-items: center; background: var(--sc-surface); border-radius: 6px; padding: var(--sc-2) var(--sc-3); font-size: var(--sc-fs-micro); }
.rc-disc li > div { display: flex; flex-direction: column; }
.rc-discrepancias .rc-vacio { background: var(--sc-surface); border-radius: 6px; padding: var(--sc-3); }
.rc-rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-2); }
.rc-rejilla-2 .rc-rapida { min-height: 42px; }

@media (max-width: 1100px) {
  .pv-fila1, .pv-fila3, .pv-fila-baja, .rc-rejilla, .rc-det { grid-template-columns: minmax(0, 1fr); }
  .pv-identidad { grid-template-columns: 96px minmax(0, 1fr); }
  .pv-resumen { grid-column: 1 / -1; grid-row: auto; }
  .rc-franja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-selects { grid-template-columns: 1fr 1fr; }
  .pv-acciones, .rc-acciones { flex-wrap: wrap; }
}
/* DS179 · segunda pasada tras la captura lado a lado. */
.pv-identidad { min-height: 0; padding: 14px 16px 12px; row-gap: 10px; }
.pv-datos { grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-template-columns: 1fr 1.2fr 1.1fr; gap: 6px var(--sc-5); }
.pv-dato { font-size: var(--sc-fs-sm); }
.pv-dir { grid-row: 1 / span 3; }
.pv-identidad .pv-logo { height: 84px; }
.pv-nombre h2 { margin-top: 2px; }
.pv-eval { padding-bottom: 10px; }
.pv-criterios { gap: 7px; }
.pv-fila3 .pv-card { min-height: 290px; }
.pv-tabla { table-layout: fixed; }
.pv-tabla td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-tabla .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 20px; }
.pv-tabla .chip.est::before { vertical-align: 1px; }
.rc-principal .tira-kpi .kpi .rotulo, .rc-principal .tira-kpi .kpi .cifra { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-principal .tira-kpi .kpi { min-height: 92px; padding-top: 10px; padding-bottom: 10px; }
.rc-tabla td:nth-child(4), .rc-tabla td:nth-child(6) { white-space: nowrap; }
.rc-tabla .rc-prov { max-width: 120px; }
.pv-tabla { min-width: 0; background: transparent; }
.rc-tabla-det { min-width: 0; }
.pv .tw { border: 0; border-radius: 0; background: transparent; }
.pv-tabla td { height: 30px; padding: 4px 6px; vertical-align: middle; }
.pv-tabla th { padding: 5px 6px; font-weight: 400; font-size: var(--sc-fs-micro); }
.pv-tabla td a { min-height: 0; color: var(--sc-text); text-decoration: none; }
.pv-tabla th:nth-child(3), .pv-tabla td:nth-child(3) { width: 30%; }
.pv-tabla th:nth-child(2), .pv-tabla td:nth-child(2) { width: 76px; }
.pv-tabla th:first-child, .pv-tabla td:first-child { width: 22%; }

/* ===========================================================================
   FORGE-DS180 · Facturas y cotejo (`fo-fac`), Obras (`fo-obras`) y Obra 360
   (`fo-360`). Clonados de `panel_de_facturas_y_cotejo_trilateral.png`,
   `panel_de_obras_y_compras_artemis.png` y `TANDA_5/panel_obra_360_los_olivos.png`
   (1448x1086). Solo el cuerpo: el esqueleto, el titular y la tira de KPI son
   de DS171. Medidas en px del PNG, anotadas donde importan.
   =========================================================================== */
.fo .ico { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.fo .ico.rojo { color: var(--sc-brand); }
.fo .titulo-pantalla { margin-bottom: var(--sc-3); }
.fo .kpis.tira-kpi { margin-bottom: 12px; }

/* --- Piezas comunes: caja blanca, chips, botones y selects apagados. */
.fo-caja {
  background: var(--sc-surface); border-radius: var(--sc-r-card);
  box-shadow: var(--sc-shadow-card); padding: var(--sc-3);
}
.fo-caja > h2 {
  display: flex; align-items: center; gap: var(--sc-2);
  font-size: 15px; line-height: 22px; font-weight: 700; margin: 0 0 var(--sc-3);
}
.fo-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px;
  border-radius: var(--sc-r-pill); background: var(--sc-neutral-bg); color: var(--sc-text-muted);
  font-size: var(--sc-fs-micro); line-height: 18px; white-space: nowrap;
}
.fo-chip.rojo { background: var(--sc-danger-bg); color: var(--sc-danger-fg); }
.fo-chip.ambar { background: var(--sc-warn-bg); color: var(--sc-warn-fg); }
.fo-chip.verde { background: var(--sc-ok-bg); color: var(--sc-ok-fg); }
.fo-chip.azul { background: var(--sc-info-bg); color: var(--sc-info-fg); }
.fo-punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
.fo-punto.verde { color: var(--sc-ok-fg); } .fo-punto.azul { color: var(--sc-info-fg); }
.fo-punto.gris { color: var(--sc-text-faint); } .fo-punto.rojo { color: var(--sc-brand); }
.fo-acciones { display: flex; gap: var(--sc-3); align-items: center; }
.fo-boton, .fo-rapida {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  padding: 0 var(--sc-4); border-radius: var(--sc-r);
  background: var(--sc-surface); color: var(--sc-text); border: var(--sc-line) solid var(--sc-border-strong);
  text-decoration: none; white-space: nowrap;
}
.fo-boton { min-height: 38px; font-size: var(--sc-fs-sm); justify-content: center; font-weight: 600; }
.fo-boton.rojo { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); }
.fo-boton.cuadrado { padding: 0; width: 42px; }
.fo-boton[aria-disabled="true"], .fo-rapida[aria-disabled="true"], .fo-select[aria-disabled="true"] { cursor: not-allowed; }
a.fo-boton:hover { background: var(--sc-brand-hover); }
.fo-acciones .fo-boton { min-height: 42px; }
.fo-select {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sc-2);
  min-height: 34px; padding: 0 var(--sc-3); border: var(--sc-line) solid var(--sc-border-strong);
  border-radius: var(--sc-r); background: var(--sc-surface); color: var(--sc-text);
  font-size: var(--sc-fs-micro); white-space: nowrap;
}
.fo-select::after { content: "⌄"; color: var(--sc-text-faint); margin-left: var(--sc-3); }
.fo-buscar {
  display: flex; align-items: center; gap: var(--sc-2); min-height: 34px; padding: 0 var(--sc-3);
  border: var(--sc-line) solid var(--sc-border-strong); border-radius: var(--sc-r);
  background: var(--sc-surface); color: var(--sc-text-faint); font-size: var(--sc-fs-micro);
  cursor: not-allowed; min-width: 0;
}
.fo-buscar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-filtros { display: flex; gap: 8px; align-items: flex-end; margin-bottom: var(--sc-3); }
.fo-filtros .fo-boton { min-height: 34px; font-weight: 400; font-size: var(--sc-fs-micro); padding: 0 var(--sc-3); }
.fo-hueco { flex: 1; }
.fo-ver { margin-left: auto; font-size: var(--sc-fs-micro); font-weight: 400; color: var(--sc-brand); }
.fo-ver.off { cursor: not-allowed; }
.fo-ver::after { content: " →"; }

/* --- Tabla densa (facturas: fila 29 px; obras: 36 px). */
.fo-tabla { width: 100%; border-collapse: collapse; font-size: var(--sc-fs-micro); }
.fo-tabla th {
  text-align: left; font-weight: 400; color: var(--sc-text-muted); padding: 8px 8px;
  background: var(--sc-surface-sunk); white-space: nowrap; text-transform: none; letter-spacing: 0;
}
.fo-tabla td { padding: 4px 8px; height: 29px; border-bottom: var(--sc-line) solid var(--sc-border); vertical-align: middle; color: var(--sc-text); }
.fo-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fo-tabla a { color: var(--sc-text); text-decoration: none; }
.fo-tabla a:hover { color: var(--sc-link); text-decoration: underline; }
.fo-tabla tr.fo-marcada td { background: var(--sc-brand-soft); }
.fo-sel { width: 28px; }
.fo-casilla {
  display: inline-flex; width: 14px; height: 14px; border: 1.5px solid var(--sc-border-control);
  border-radius: 3px; align-items: center; justify-content: center; background: var(--sc-surface);
}
.fo-casilla.on { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); }
.fo-casilla .ico { width: 11px; height: 11px; }
.fo-acc { text-align: center; width: 60px; }
.fo-mas { display: inline-flex; padding: 2px 6px; border-radius: var(--sc-r-sm); color: var(--sc-text); }
.fo-mas .ico { width: 18px; height: 18px; stroke-width: 3; }
.fo-pie { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--sc-3) var(--sc-1) 0; font-size: var(--sc-fs-micro); color: var(--sc-text-muted); }
.fo-paginas { display: flex; gap: var(--sc-2); }
.fo-paginas .pag {
  min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: var(--sc-line) solid var(--sc-border-strong); border-radius: var(--sc-r); background: var(--sc-surface);
}
.fo-paginas .pag.actual { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); font-weight: 600; }
.fo-paginas .pag.off { color: var(--sc-text-faint); }
.fo-mostrar { justify-self: end; display: inline-flex; gap: var(--sc-2); align-items: center; }
.fo-nota { margin: var(--sc-2) var(--sc-1) 0; }

/* --- Facturas: barra de filtros y=290..322, tabla y=338..650. */
.fo-fac .fo-lista { padding: 10px 8px 10px; margin-bottom: 14px; }
.fo-filtros-fac .fo-buscar { flex: 0 0 330px; }
.fo-filtros-fac .fo-select { min-width: 92px; }
.fo-id { font-weight: 400; }

/* --- Panel «Cotejo 3 vías» (y=710..1060): canto rojo, cabecera, nav, tabla. */
.fo-detalle {
  background: var(--sc-surface); border-radius: var(--sc-r-card); box-shadow: var(--sc-shadow-card);
  margin-bottom: var(--sc-4); overflow: hidden;
}
.fo-det-cab { display: flex; align-items: center; gap: var(--sc-3); padding: var(--sc-3) var(--sc-3) var(--sc-2); border-left: 3px solid var(--sc-brand); }
.fo-det-ico { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--sc-text-muted); }
.fo-det-ico .ico { width: 26px; height: 26px; }
.fo-det-tit { flex: 1; min-width: 0; }
.fo-det-tit p { margin: 0; display: flex; align-items: center; gap: var(--sc-2); flex-wrap: wrap; }
.fo-det-num { font-size: 20px; line-height: 26px; }
.fo-det-prov { font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.fo-det-botones { display: grid; grid-template-columns: auto auto 36px; gap: 8px; }
.fo-det-botones .fo-boton { min-height: 32px; font-size: var(--sc-fs-micro); }
.fo-det-botones .fo-boton.ancho { grid-column: 1 / 3; }
.fo-boton-mas { display: inline-flex; align-items: center; justify-content: center; border: var(--sc-line) solid var(--sc-border-strong); border-radius: var(--sc-r); color: var(--sc-text); }
.fo-boton-mas .ico { stroke-width: 3; }
.fo-det-cuerpo { display: grid; grid-template-columns: 170px minmax(0, 1fr); border-top: var(--sc-line) solid var(--sc-border); }
.fo-det-nav { display: flex; flex-direction: column; padding: var(--sc-2) 0; border-right: var(--sc-line) solid var(--sc-border); }
.fo-det-nav > * { display: flex; align-items: center; gap: var(--sc-2); padding: 9px var(--sc-3); font-size: var(--sc-fs-micro); color: var(--sc-text); text-decoration: none; }
.fo-det-nav > .on { color: var(--sc-brand); background: var(--sc-brand-soft); box-shadow: inset 3px 0 0 var(--sc-brand); }
.fo-det-nav > [aria-disabled="true"] { cursor: not-allowed; }
.fo-det-main { padding: var(--sc-2) var(--sc-3) var(--sc-3); min-width: 0; }
.fo-det-h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sc-3); margin-bottom: var(--sc-2); }
.fo-det-h h2 { font-size: 15px; line-height: 20px; margin: 0; }
.fo-det-h .meta { margin: 0; font-size: var(--sc-fs-micro); }
.fo-det-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fo-tres td { height: 48px; }
.fo-tres th { line-height: 14px; }
.fo-sub { display: block; font-size: 10px; color: var(--sc-text-faint); }
.fo-prod { display: flex; align-items: center; gap: var(--sc-2); }
.fo-prod > span:last-child { display: flex; flex-direction: column; }
.fo-miniatura { width: 34px; height: 34px; border-radius: 6px; background: var(--sc-surface-sunk); color: var(--sc-text-faint); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fo-ref { color: var(--sc-text-muted); }
.fo-marca-dif { background: var(--sc-danger-bg); color: var(--sc-danger-fg); padding: 1px 6px; border-radius: 3px; }
.fo-dif { color: var(--sc-danger-fg); font-weight: 700; white-space: nowrap; }
.fo-dif.cero { color: var(--sc-text-muted); font-weight: 400; }
.fo-alta { margin-bottom: var(--sc-4); }
.fo-alta > summary { cursor: pointer; font-weight: 600; font-size: var(--sc-fs-sm); padding: var(--sc-2) 0; }

/* --- Obras: cuerpo x=220..1115 + columna derecha x=1128..1438. */
.fo-obras {
  display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 0 12px; align-items: start;
  margin-right: calc(-1 * var(--sc-gutter) + 10px);
}
.fo-principal { min-width: 0; }
.fo-obras .fo-lista { padding: 12px 10px 10px; }
.fo-filtros-obra .fo-buscar { flex: 0 0 225px; }
.fo-campo { display: flex; flex-direction: column; gap: 3px; }
.fo-rot { font-size: var(--sc-fs-micro); color: var(--sc-text-muted); }
.fo-campo .fo-select { min-width: 80px; }
.fo-pestanas { display: flex; gap: var(--sc-1); border-bottom: var(--sc-line) solid var(--sc-border-strong); margin: 0 0 var(--sc-2); }
.fo-pestanas > * {
  display: inline-flex; align-items: center; gap: 6px; padding: var(--sc-2) var(--sc-3) 10px;
  font-size: var(--sc-fs-sm); color: var(--sc-text-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.fo-pestanas > .on { color: var(--sc-brand); font-weight: 600; border-bottom-color: var(--sc-brand); }
.fo-pestanas > .off { cursor: not-allowed; }
.fo-tabla-obras td { height: 36px; }
.fo-obra { max-width: 150px; }
.fo-tabla-obras th, .fo-tabla-obras td { padding-left: 6px; padding-right: 6px; }
.fo-obra b, .fo-obra .meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-obra .meta { font-size: 10px; }
.fo-codigo a { display: block; white-space: nowrap; }
.fo-codigo .proc { display: block; max-width: 70px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; }
.fo-codigo .proc br { display: none; }
.fo-persona { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fo-av { width: 24px; height: 24px; border-radius: 50%; background: var(--sc-neutral-bg); color: var(--sc-text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex: none; }
.fo-compras { display: table-cell; }
.fo-alerta, .fo-sin-imputar { font-size: 10px; color: var(--sc-danger-fg); white-space: normal; max-width: 120px; margin-left: auto; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fo-avance { display: inline-block; width: 42px; height: 6px; border-radius: var(--sc-r-pill); background: var(--sc-neutral-bg); margin-right: 6px; vertical-align: middle; }
/* DS182 · aviso de reparto y nota de «Compras acum.»: una línea plegable bajo la tabla. */
.fo-aviso, details.fo-nota { margin: 6px var(--sc-1) 0; font-size: var(--sc-fs-micro); color: var(--sc-text-muted); }
.fo-aviso summary, details.fo-nota summary { cursor: pointer; display: flex; align-items: center; gap: 6px; list-style: none; }
.fo-aviso summary::-webkit-details-marker, details.fo-nota summary::-webkit-details-marker { display: none; }
.fo-aviso summary:focus-visible, details.fo-nota summary:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; }
.fo-aviso summary b { color: var(--sc-warn-fg); }
.fo-aviso summary .ico, details.fo-nota summary .ico { width: 14px; height: 14px; flex: none; }
.fo-aviso p, .fo-aviso ul, details.fo-nota p { margin: 4px 0 0; }
.fo-aside { display: flex; flex-direction: column; gap: 12px; }
.fo-lado { padding: 14px; }
.fo-lado > h2 { font-size: 15px; margin-bottom: var(--sc-3); }
.fo-rapida { justify-content: flex-start; width: 100%; min-height: 40px; margin-bottom: 8px; font-weight: 400; font-size: var(--sc-fs-micro); }
.fo-rapida .ico { width: 20px; height: 20px; margin-right: 8px; }
.fo-donut-fila { display: grid; grid-template-columns: 96px 1fr; gap: var(--sc-4); align-items: center; }
.fo-donut {
  width: 96px; height: 96px; border-radius: 50%; border: 14px solid var(--sc-neutral-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fo-donut b { font-size: 22px; line-height: 24px; }
.fo-donut span { font-size: var(--sc-fs-micro); color: var(--sc-text-muted); }
.fo-leyenda, .fo-control { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--sc-fs-micro); }
.fo-leyenda li, .fo-control li { display: flex; align-items: center; gap: 8px; }
.fo-leyenda b, .fo-control b { margin-left: auto; font-weight: 600; }
.fo-control-ico { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sc-neutral-bg); color: var(--sc-text-muted); flex: none; }
.fo-control-ico.rojo { background: var(--sc-danger-bg); color: var(--sc-danger-fg); }
.fo-control-ico.ambar { background: var(--sc-warn-bg); color: var(--sc-warn-fg); }
.fo-control-ico.verde { background: var(--sc-ok-bg); color: var(--sc-ok-fg); }
.fo-lado .vacio { margin: 0; font-size: var(--sc-fs-micro); }

/* --- Obra 360: cabecera, 4 fichas (y=165..260), pestañas, 5 KPI, dos
       gráficos (y=430..700) y la tabla de consumo (y=715..1010). */
.fo-360-cab { display: flex; justify-content: space-between; gap: var(--sc-4); margin-bottom: var(--sc-3); }
.fo-360-tit { display: flex; align-items: center; gap: var(--sc-4); padding-left: 16px; }
.fo-360-tit h1 { font-size: 30px; line-height: 38px; margin: 0; }
.fo-360-dir { display: flex; gap: var(--sc-2); align-items: center; margin: 2px 0 0 16px; font-size: var(--sc-fs-body); color: var(--sc-text-muted); }
.fo-360-der { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sc-2); }
.fo-360-der .meta { margin: 0; font-size: var(--sc-fs-micro); }
.fo-sep { display: inline-block; width: 16px; }
.fo-estado { cursor: not-allowed; }
.fo-360-fichas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.fo-ficha { display: flex; gap: var(--sc-3); align-items: center; min-height: 100px; }
.fo-ficha > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fo-ficha > div > b { font-size: 20px; line-height: 26px; }
.fo-ficha .meta.micro b { font-weight: 600; }
.fo-ficha .meta { font-size: var(--sc-fs-micro); }
.fo-ficha .meta.micro { overflow: hidden; text-overflow: ellipsis; }
.fo-foto { width: 64px; height: 64px; border-radius: 50%; background: var(--sc-neutral-bg); color: var(--sc-text-faint); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fo-foto .ico { width: 28px; height: 28px; }
.fo-disco { width: 44px; height: 44px; border-radius: 50%; background: var(--sc-danger-bg); color: var(--sc-brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fo-disco .ico { width: 22px; height: 22px; }
.fo-barra { display: block; width: 150px; height: 8px; border-radius: var(--sc-r-pill); background: var(--sc-neutral-bg); margin: 4px 0; }
.fo-anillo { position: relative; width: 64px; height: 64px; flex: none; }
.fo-anillo svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.fo-anillo circle { fill: none; stroke-width: 4; }
.fo-anillo .fondo { stroke: var(--sc-neutral-bg); }
.fo-anillo .valor { stroke: var(--sc-ok-fg); stroke-dasharray: 0 100; }
.fo-anillo b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.fo-anillo .valor.p0 { stroke-dasharray: 0 100; }
.fo-anillo .valor.p5 { stroke-dasharray: 5 100; }
.fo-anillo .valor.p10 { stroke-dasharray: 10 100; }
.fo-anillo .valor.p15 { stroke-dasharray: 15 100; }
.fo-anillo .valor.p20 { stroke-dasharray: 20 100; }
.fo-anillo .valor.p25 { stroke-dasharray: 25 100; }
.fo-anillo .valor.p30 { stroke-dasharray: 30 100; }
.fo-anillo .valor.p35 { stroke-dasharray: 35 100; }
.fo-anillo .valor.p40 { stroke-dasharray: 40 100; }
.fo-anillo .valor.p45 { stroke-dasharray: 45 100; }
.fo-anillo .valor.p50 { stroke-dasharray: 50 100; }
.fo-anillo .valor.p55 { stroke-dasharray: 55 100; }
.fo-anillo .valor.p60 { stroke-dasharray: 60 100; }
.fo-anillo .valor.p65 { stroke-dasharray: 65 100; }
.fo-anillo .valor.p70 { stroke-dasharray: 70 100; }
.fo-anillo .valor.p75 { stroke-dasharray: 75 100; }
.fo-anillo .valor.p80 { stroke-dasharray: 80 100; }
.fo-anillo .valor.p85 { stroke-dasharray: 85 100; }
.fo-anillo .valor.p90 { stroke-dasharray: 90 100; }
.fo-anillo .valor.p95 { stroke-dasharray: 95 100; }
.fo-anillo .valor.p100 { stroke-dasharray: 100 100; }
.fo-360-pest { background: var(--sc-surface); border-radius: var(--sc-r-card) var(--sc-r-card) 0 0; margin-bottom: 10px; padding: 0 var(--sc-2); box-shadow: var(--sc-shadow-card); }
.fo-360-pest > * { flex: 1; justify-content: center; padding: 12px var(--sc-2); }
.fo-360-pest .ico { width: 18px; height: 18px; }
.fo-badge { background: var(--sc-brand); color: var(--sc-on-brand); border-radius: var(--sc-r-pill); font-size: 10px; min-width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.fo-360 .kpis.tira-kpi { margin-bottom: 10px; }
.fo-360-graf { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
.fo-h-der { margin-left: auto; display: flex; gap: 8px; font-weight: 400; }
.fo-lienzo {
  height: 170px; display: flex; align-items: center; justify-content: center;
  border-top: var(--sc-line) solid var(--sc-border); border-bottom: var(--sc-line) solid var(--sc-border-strong);
}
.fo-lienzo .vacio { background: var(--sc-surface); max-width: 360px; margin: 0; font-size: var(--sc-fs-micro); }
.fo-fases-cab { display: grid; grid-template-columns: 1.4fr 1fr 1fr .5fr; font-size: var(--sc-fs-micro); color: var(--sc-text-muted); padding: 6px 8px; background: var(--sc-surface-sunk); }
.fo-fases .vacio { font-size: var(--sc-fs-micro); }
.fo-filtros-360 .fo-buscar { flex: 0 0 260px; }
.fo-consumo .fo-ref { white-space: nowrap; color: inherit; }
.fo-consumo .fo-nota { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-mat td { height: 26px; }
.fo-pct.verde { color: var(--sc-ok-fg); } .fo-pct.ambar { color: var(--sc-warn-fg); } .fo-pct.rojo { color: var(--sc-danger-fg); }

@media (max-width: 1100px) {
  .fo-obras { grid-template-columns: minmax(0, 1fr); margin-right: 0; }
  .fo-360-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fo-360-graf, .fo-det-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .fo-filtros { flex-wrap: wrap; }
  .fo-lista { overflow-x: auto; }
}
@media (max-width: 640px) {
  .fo-360-cab, .fo-det-cab { flex-direction: column; align-items: stretch; }
  .fo-360-fichas { grid-template-columns: minmax(0, 1fr); }
  .fo-acciones { flex-wrap: wrap; }
}
/* === DS172 · Solicitudes, clonada de `panel_de_solicitudes_de_compra.png` ===
   Solo el CUERPO. Lateral, barra, migapán, titular y KPI base son de DS171 y
   aquí no se tocan. Medidas sobre el PNG original a 1448x1086:
   cuerpo x=220..1048, panel de detalle x=1062..1448 desde y=54 hasta abajo. */
.sol-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 386px;
  gap: 14px;
  margin: calc(-1 * var(--sc-5)) calc(-1 * var(--sc-gutter)) calc(-1 * var(--sc-8)) 0;
  align-items: stretch;
}
.sol-rejilla.sin-panel { grid-template-columns: minmax(0, 1fr); margin-right: 0; }
.sol-cuerpo { min-width: 0; padding: var(--sc-5) 0 var(--sc-8); }
.sol-rejilla .tira-kpi { margin-bottom: 20px; }

/* Filtros: buscador 326 px, tres desplegables de 100, «Solicitante» hasta el
   canto; segunda fila «Proveedor sugerido» (150) y el botón al canto. */
.sol-filtros {
  display: grid;
  grid-template-columns: 326px repeat(3, 100px) minmax(0, 1fr);
  gap: 8px 10px;
  margin-bottom: 10px;
  align-items: center;
}
.sol-filtros select, .sol-filtros input { width: 100%; min-height: 34px; padding: 6px 10px;
  font-size: var(--sc-fs-sm); border-color: var(--sc-border-strong); }
.sol-filtros select { border-color: var(--sc-border-control); }
.sol-buscar { position: relative; }
.sol-buscar .ic { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px;
  transform: translateY(-50%); color: var(--sc-text-muted); }
.sol-buscar input { padding-left: 34px; border-color: var(--sc-border-control); }
.sol-filtro:last-of-type { grid-column: 1; width: 150px; }
.sol-mas { grid-column: 5; justify-self: end; min-height: 34px; width: 124px;
  font-size: var(--sc-fs-sm); font-weight: 500; }
.sol-mas .ic, .sol-lote .ic { width: 15px; height: 15px; }

/* Tarjeta de la tabla: barra de lote, tabla y pie dentro de UNA superficie. */
.sol-tabla {
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-card);
  box-shadow: var(--sc-shadow-card);
  padding: 10px 12px 0;
}
.sol-tabla .tw { border: 0; box-shadow: none; margin-bottom: 0; border-radius: 0; }
.sol-tabla .pie-tabla { margin: 0; border: 0; border-top: var(--sc-line) solid var(--sc-border);
  border-radius: 0 0 var(--sc-r-card) var(--sc-r-card); padding: 14px 2px; }
.sol-lote { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 12px; }
.sol-lote .izq, .sol-lote .der { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sol-lote button { min-height: 32px; padding: 4px 10px; font-size: var(--sc-fs-micro);
  font-weight: 500; gap: 6px; border-color: var(--sc-border-strong); }
.sol-lote button:disabled, .sol-panel button:disabled { cursor: not-allowed; opacity: .75; }
.sol-selec { display: inline-flex; align-items: center; gap: 8px; font-size: var(--sc-fs-sm);
  color: var(--sc-text); padding: 0 12px 0 2px; }
button.solo-icono { width: 32px; padding: 0; }
.sol-selec input, .tsolicitudes input[type=checkbox] { width: 16px; height: 16px; }

table.tsolicitudes { font-size: var(--sc-fs-micro); min-width: 760px; table-layout: fixed; }
.tsolicitudes col.c-id { width: 106px; } .tsolicitudes col.c-desc { width: auto; }
.tsolicitudes col.c-obra { width: 62px; } .tsolicitudes col.c-sol { width: 92px; }
.tsolicitudes col.c-prov { width: 96px; } .tsolicitudes col.c-imp { width: 64px; }
.tsolicitudes col.c-fecha { width: 70px; } .tsolicitudes col.c-est { width: 84px; }
.tsolicitudes col.c-prio { width: 62px; } .tsolicitudes col.c-mas { width: 32px; }
.tsolicitudes col.c-sel { width: 30px; }
.tsolicitudes th { white-space: normal; }
.tsolicitudes .chip.prov { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 20px; }
.tsolicitudes .est { white-space: normal; text-align: center; line-height: 14px; padding: 3px 8px; }
.tsolicitudes th { text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: var(--sc-fs-micro); padding: 7px 6px; color: var(--sc-text-muted); }
.tsolicitudes td { padding: 4px 6px; height: 48px; line-height: 15px; vertical-align: middle;
  color: var(--sc-text); }
.tsolicitudes .sel { width: 30px; }
.tsolicitudes td:nth-child(4) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsolicitudes .sol-id { white-space: nowrap; }
.tsolicitudes .sol-id a { color: var(--sc-text); text-decoration: none; }
.tsolicitudes .sol-id a:hover { color: var(--sc-link); text-decoration: underline; }
.tsolicitudes .sol-desc { max-width: 110px; }
.tsolicitudes .sol-fecha { white-space: nowrap; }
.tsolicitudes tr.elegida td { background: var(--sc-brand-soft); }
.tsolicitudes .chip { font-size: var(--sc-fs-micro); min-height: 22px; margin: 0; }
.tsolicitudes .est::before { display: none; }
.sol-mas-fila a { display: inline-flex; width: 28px; height: 28px; align-items: center;
  justify-content: center; border-radius: var(--sc-r); color: var(--sc-text); }
.sol-mas-fila a:hover { background: var(--sc-surface-sunk); }
.sol-mas-fila .ic { width: 18px; height: 18px; }
.chip.prov { background: var(--sc-info-bg); color: var(--sc-info-fg); }
.chip.prov.sin { background: var(--sc-danger-bg); color: var(--sc-danger-fg); }
.chip.prio { min-width: 54px; justify-content: center; }
.chip.prio.alta  { background: var(--sc-danger-bg); color: var(--sc-danger-fg); }
.chip.prio.media { background: var(--sc-warn-bg);   color: var(--sc-warn-fg); }
.chip.prio.baja  { background: var(--sc-ok-bg);     color: var(--sc-ok-fg); }

/* Panel de detalle: 386 px, blanco, a sangre desde la barra hasta abajo. */
.sol-panel {
  background: var(--sc-surface);
  border-left: var(--sc-line) solid var(--sc-border-strong);
  padding: 20px 12px 24px;
  min-width: 0;
}
.sol-panel-cab { display: flex; align-items: center; gap: 12px; padding: 0 10px; }
.sol-panel-cab b { font-size: var(--sc-fs-h2); white-space: nowrap; }
.sol-ic-rojo .ic, .sol-card h3 .ic { color: var(--sc-brand); width: 22px; height: 22px; }
.sol-panel-cab .chip { margin: 0; }
.sol-cerrar { margin-left: auto; color: var(--sc-text-muted); display: inline-flex;
  width: 28px; height: 28px; align-items: center; justify-content: center; }
.sol-cerrar .ic { width: 18px; height: 18px; }
.sol-panel-tit { font-size: 20px; line-height: 26px; margin: 16px 10px 4px; }
.sol-panel-desc { margin: 0 10px 18px; font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.sol-tabs { display: flex; gap: 14px; white-space: nowrap; overflow-x: auto; border-bottom: var(--sc-line) solid var(--sc-border-strong);
  padding: 0 10px; margin-bottom: 12px; font-size: var(--sc-fs-sm); }
.sol-tabs > * { padding: 8px 0 10px; color: var(--sc-text-muted); text-decoration: none; }
.sol-tabs [aria-current] { color: var(--sc-brand); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--sc-brand); }
.sol-tabs .apagado { color: var(--sc-text-faint); }
.sol-card { border: var(--sc-line) solid var(--sc-border-strong); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px; }
.sol-card h3 { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px;
  font-size: 14px; line-height: 20px; }
.sol-editar { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--sc-fs-sm); font-weight: 500; color: var(--sc-brand); text-decoration: none; }
.sol-editar .ic { width: 15px; height: 15px; }
.sol-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.sol-dato { display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding-bottom: 8px; border-bottom: var(--sc-line) solid var(--sc-border); }
.sol-dato .rot { font-size: var(--sc-fs-micro); color: var(--sc-text-muted); }
.sol-dato .val { font-size: var(--sc-fs-sm); }
.sol-dato .chip { margin: 0; align-self: flex-start; }
.sol-persona { display: flex; gap: 8px; align-items: center; }
.sol-persona b { display: block; font-size: var(--sc-fs-sm); }
.sol-persona .meta { display: block; font-size: var(--sc-fs-micro); }
.sol-avatar, .sol-icobra { flex: 0 0 32px; height: 32px;
  background: var(--sc-surface-sunk); display: inline-flex; align-items: center;
  justify-content: center; font-weight: 600; font-size: var(--sc-fs-sm); }
.sol-avatar { border-radius: 50%; }
.sol-icobra { border-radius: var(--sc-r); }
.sol-icobra .ic { width: 18px; height: 18px; }
.sol-importe { font-size: var(--sc-fs-h2); font-weight: 600; }
.sol-prov { display: flex; gap: 12px; align-items: center; }
.sol-prov b { display: block; font-size: var(--sc-fs-body); }
.sol-prov .meta { display: block; font-size: var(--sc-fs-sm); }
.sol-logo { flex: 0 0 60px; height: 60px; border: var(--sc-line) solid var(--sc-border-strong);
  border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--sc-text-muted); }
a.sol-cambiar { display: flex; margin: 10px 0 0 auto; width: max-content; white-space: nowrap; min-height: 30px;
  font-size: var(--sc-fs-sm); color: var(--sc-brand); border-color: var(--sc-brand); }
.sol-texto { margin: 0; font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.sol-panel-acc { display: flex; gap: 8px; padding: 18px 4px 0; }
.sol-panel-acc > * { white-space: nowrap; }
.sol-panel-acc > :first-child { flex: 0 0 auto; }
.sol-panel-acc > :nth-child(2) { flex: 0 0 auto; color: var(--sc-brand); border-color: var(--sc-brand); }
.sol-panel-acc > .solo-icono { margin-left: auto; width: 40px; flex: 0 0 40px; }
.sol-panel-acc > .boton, .sol-panel-acc > button { padding: 8px 12px; font-size: var(--sc-fs-sm); }
.sol-panel-acc .ic { width: 16px; height: 16px; }

@media (max-width: 1100px) {
  .sol-rejilla { grid-template-columns: minmax(0, 1fr); margin-right: 0; }
  .sol-panel { border-left: 0; border-top: var(--sc-line) solid var(--sc-border-strong); }
}
@media (max-width: 720px) {
  .sol-filtros { grid-template-columns: 1fr 1fr; }
  .sol-buscar { grid-column: 1 / -1; }
  .sol-filtro:last-of-type { grid-column: auto; width: auto; }
  .sol-mas { grid-column: auto; width: auto; justify-self: stretch; }
}

/* === DS172 · Nueva solicitud, clonada de `nueva_solicitud_de_compra_artemis.png` ===
   Medido sobre el PNG a 1448x1086: columna de secciones x=222..1077, columna
   de resumen x=1091..1440, canaleta 14 px. Secciones con número rojo de 28 px. */
.ns-cab-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.ns-cab-botones > * { min-height: 38px; white-space: nowrap; }
.ns-cab-botones > :first-child { min-width: 164px; }
.ns-cab-botones > :nth-child(2) { min-width: 108px; }
.ns-cab-botones > :last-child { min-width: 180px; }
.ns-cab-botones .ic { width: 17px; height: 17px; }
.ns-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 349px;
  gap: 14px;
  align-items: start;
}
.ns-izq, .ns-der { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ns-seccion, .ns-lado {
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-card);
  box-shadow: var(--sc-shadow-card);
  padding: 14px 16px 16px;
}
.ns-seccion.activa, .ns-lado.activa { border-color: var(--sc-brand-border);
  box-shadow: 0 0 0 1px var(--sc-brand-border), var(--sc-shadow-card); }
.ns-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.ns-cab h3 { margin: 0; font-size: 16px; line-height: 22px; }
.ns-num { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--sc-brand);
  color: var(--sc-on-brand); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--sc-fs-body); }
h2.ns-paso { margin: 0; font-size: var(--sc-fs-micro); line-height: 20px; font-weight: 600;
  color: var(--sc-brand); background: var(--sc-brand-soft); border-radius: var(--sc-r-pill);
  padding: 0 10px; }
.ns-cab-acc { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.ns-cab-acc button { min-height: 32px; padding: 4px 12px; font-size: var(--sc-fs-sm);
  font-weight: 500; }
.ns-cab-acc .ic { width: 16px; height: 16px; }
button.ns-cab-rojo { color: var(--sc-brand); border-color: var(--sc-brand); }
.ns-seccion button:disabled, .ns-lado button:disabled, .ns-cab-botones button:disabled {
  cursor: not-allowed; opacity: .7; }

.ns-rejilla-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 18px; }
.ns-campo { min-width: 0; }
.ns-campo > label, .ns-rot { display: block; margin: 6px 0 4px; font-size: var(--sc-fs-sm);
  font-weight: 500; color: var(--sc-text); }
.ns-oblig { color: var(--sc-brand); }
.ns-campo input:not([type=radio]), .ns-campo select, .ns-campo textarea, .ns-lado select { width: 100%; }
.ns-radios .opcion { min-height: 38px; font-size: var(--sc-fs-sm); border: var(--sc-line) solid var(--sc-border-strong); border-radius: var(--sc-r); }
.ns-radios input[type=radio] { width: 18px; height: 18px; }
.ns-ayuda { margin: 4px 0 0; font-size: var(--sc-fs-micro); color: var(--sc-text-muted); }
.ns-valor { min-height: 38px; display: flex; align-items: center; padding: 6px 12px;
  border: var(--sc-line) solid var(--sc-border-strong); border-radius: var(--sc-r);
  font-size: var(--sc-fs-sm); background: var(--sc-surface); overflow-wrap: anywhere; }
.ns-valor.vacio { color: var(--sc-text-faint); }
.ns-valor.ns-area { min-height: 76px; align-items: flex-start; }
.ns-persona { gap: 10px; padding: 4px 10px; }
.ns-persona b { display: block; font-size: var(--sc-fs-sm); }
.ns-persona .meta { display: block; font-size: var(--sc-fs-micro); }
.ns-radios { display: flex; flex-direction: column; gap: 4px; }
.ns-radios .opcion { margin: 0; }

.ns-lineas { margin-top: 6px; }
.ns-linea { display: grid; align-items: center; gap: 10px;
  grid-template-columns: 24px minmax(0, 2.2fr) minmax(0, 1.2fr) 74px 74px 100px 92px 56px;
  padding: 8px 8px; border-bottom: var(--sc-line) solid var(--sc-border); }
.ns-linea input { width: 100%; min-height: 34px; padding: 6px 8px; font-size: var(--sc-fs-sm); }
.ns-linea .ns-valor { min-height: 34px; }
.ns-th { background: var(--sc-surface-sunk); border-radius: var(--sc-r); border-bottom: 0;
  font-size: var(--sc-fs-micro); color: var(--sc-text-muted); padding: 7px 8px; }
.ns-n { font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.ns-prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ns-prod > div { min-width: 0; flex: 1; font-size: var(--sc-fs-sm); }
.ns-foto { flex: 0 0 44px; height: 44px; border-radius: 8px; background: var(--sc-surface-sunk);
  display: inline-flex; align-items: center; justify-content: center; color: var(--sc-text-faint); }
.ns-foto .ic { width: 20px; height: 20px; }
.chip.ns-cat { background: var(--sc-info-bg); color: var(--sc-info-fg); font-size: var(--sc-fs-micro);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 20px; }
.ns-imp { font-size: var(--sc-fs-sm); font-weight: 500; }
.ns-acc { display: flex; justify-content: center; }
button.ns-quitar { width: 32px; min-height: 32px; color: var(--sc-brand); border-color: transparent; }
button.ns-anadir { display: flex; width: 100%; justify-content: flex-start; gap: 12px;
  margin: 10px 0 4px; padding: 10px 14px; background: var(--sc-surface); color: var(--sc-text);
  border: 1px dashed var(--sc-border-control); border-radius: 8px; font-weight: 400; text-align: left; }
button.ns-anadir:hover { background: var(--sc-surface-sunk); color: var(--sc-text); }
button.ns-anadir .ic { width: 22px; height: 22px; color: var(--sc-brand); }
button.ns-anadir b { display: block; font-size: var(--sc-fs-sm); }
button.ns-anadir .meta { display: block; font-size: var(--sc-fs-micro); }

.ns-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.ns-dos .ns-ayuda { text-align: right; }
.ns-soltar { min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 12px;
  border: 1px dashed var(--sc-border-control); border-radius: 8px; padding: 10px 14px;
  font-size: var(--sc-fs-sm); color: var(--sc-text-muted); background: var(--sc-surface-sunk); }
.ns-soltar .ic { width: 24px; height: 24px; }
.ns-soltar .meta { display: block; font-size: var(--sc-fs-micro); }

.ns-ruta { display: grid; grid-template-columns: 120px minmax(0, 310px); align-items: center; gap: 10px; }
.ns-modalidades .opcion { margin: 4px 0; }
.ns-etapas { list-style: none; margin: 14px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ns-etapas li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ns-etapas b { display: block; font-size: var(--sc-fs-sm); font-weight: 500; }
.ns-etapas .meta { display: block; font-size: var(--sc-fs-micro); }
.ns-bola { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--sc-surface-sunk);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--sc-fs-sm); }
.ns-acciones { justify-content: flex-end; margin-top: 0; }

.ns-lado h3 { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px;
  font-size: 15px; line-height: 22px; }
.ns-lado h3 .ic { width: 22px; height: 22px; color: var(--sc-brand); }
.ns-lado h2.ns-paso { display: inline-block; margin-bottom: 8px; }
.ns-par { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0;
  border-bottom: var(--sc-line) solid var(--sc-border); font-size: var(--sc-fs-sm); }
.ns-par span { color: var(--sc-text-muted); }
.ns-par b { font-weight: 600; }
.ns-total { display: flex; justify-content: space-between; align-items: center; margin-top: 10px;
  padding: 12px; border-radius: 8px; background: var(--sc-danger-bg); }
.ns-total span { font-weight: 600; }
.ns-total b { font-size: 18px; }
.ns-lado .sol-prov { margin-bottom: 8px; padding: 10px; border: var(--sc-line) solid var(--sc-border);
  border-radius: 8px; }
.ns-ver { display: flex; width: 100%; margin-top: 10px; min-height: 36px; font-size: var(--sc-fs-sm); }
.ns-ver .ic { width: 15px; height: 15px; }
.ns-par2 { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 3px 0; font-size: var(--sc-fs-sm); }
.ns-par2 > span { color: var(--sc-text-muted); margin: 0; }
.ns-par2 > .ns-valor { margin: 0; }
.ns-par2 .ns-valor { min-height: 28px; border: 0; background: var(--sc-surface-sunk); }
.ns-siguiente h3 .ic { color: var(--sc-info-fg); }
.ns-siguiente p { margin: 0 0 8px 34px; font-size: var(--sc-fs-sm); }
.ns-confirmar h2.ns-paso { display: inline-block; }
.ns-confirmar { background: var(--sc-surface); border: 1px solid var(--sc-brand-border);
  border-radius: var(--sc-r-card); padding: 12px 16px; }

@media (max-width: 1100px) {
  .ns-rejilla { grid-template-columns: minmax(0, 1fr); }
  .ns-rejilla-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ns-rejilla-campos, .ns-dos, .ns-etapas { grid-template-columns: minmax(0, 1fr); }
  .ns-linea { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr); }
  .ns-linea.ns-th { display: none; }
  .ns-linea > .ns-prod { grid-column: 2 / -1; }
  .ns-cab-acc { margin-left: 0; }
  .ns-cab-botones > * { flex: 1 1 auto; min-width: 0; }
}

/* DS172 · el control del mockup que Artemis todavía no hace: misma caja que
   el botón, apagada, sin foco y sin puntero (no es un botón: D4). */
.boton.apagado, .boton.apagado:hover {
  background: var(--sc-surface-sunk);
  color: var(--sc-text-muted);
  border-color: var(--sc-border-strong);
  cursor: not-allowed;
}
.boton.apagado:not(.sec), .boton.apagado:not(.sec):hover {
  background: var(--sc-brand); color: var(--sc-on-brand); border-color: var(--sc-brand);
  opacity: .55;
}
.sol-lote .boton, .ns-cab-acc .boton { min-height: 32px; padding: 4px 10px; font-size: var(--sc-fs-micro);
  font-weight: 500; gap: 6px; }
.ns-cab-acc .boton { font-size: var(--sc-fs-sm); padding: 4px 12px; }
.boton.solo-icono { width: 32px; padding: 0; }
.sol-panel-acc > .boton.solo-icono { width: 40px; flex: 0 0 40px; margin-left: auto; }

/* === DS192 · Incidencias + Stock e inventario === */
/* Solo el CUERPO de `/incidencias` y `/stock`. Todo va acotado bajo `.inc-`.
   Medidas sobre los PNG originales a 1448x1086:
   · incidencias: KPI y=180..278 a todo el ancho; tarjeta de lista
     x=218..1040 desde y=290; panel x=1050..1434 desde y=290 (tarjeta, no a
     sangre). Pestañas y=290..332, filtros y=345..376, filas de 52-56 px.
   · stock: banda y=54..241, KPI y=242..336; carril izquierdo 934 y derecho
     273 con canaleta de 12. Filas: 670/252 (y=347..590), 500/422
     (y=603..810), 479/443 (y=823..1025). */

/* --- Incidencias --------------------------------------------------------- */
.inc-pantalla .tira-kpi { margin-bottom: 12px; }
.inc-cab-acc { display: flex; gap: 12px; align-items: center; }
.inc-cab-acc .boton { min-height: 38px; }
.inc-cab-acc .ic { width: 18px; height: 18px; }
.inc-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 385px;
  gap: 10px;
  align-items: start;
}
.inc-rejilla.sin-panel { grid-template-columns: minmax(0, 1fr); }
.inc-lista {
  min-width: 0;
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-card);
  box-shadow: var(--sc-shadow-card);
  padding: 0 8px;
}
.inc-pestanas {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 10px;
  border-bottom: var(--sc-line) solid var(--sc-border);
  font-size: var(--sc-fs-sm);
}
.inc-pestanas > * { padding: 13px 0 12px; color: var(--sc-text-muted); text-decoration: none; }
.inc-pestanas a:hover { color: var(--sc-text); }
.inc-pestanas [aria-current] { color: var(--sc-brand); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--sc-brand); }
.inc-pestanas .apagado { color: var(--sc-text-faint); cursor: not-allowed; }
.inc-filtros {
  display: grid;
  grid-template-columns: minmax(160px, 220px) repeat(4, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: center;
  padding: 12px 0 10px;
}
.inc-filtros select, .inc-filtros input, .inc-filtros .inc-falso, .inc-filtros button {
  width: 100%;
  min-height: 32px;
  padding: 5px 10px;
  font-size: var(--sc-fs-micro);
  border: var(--sc-line) solid var(--sc-border-control);
  border-radius: var(--sc-r);
}
.inc-filtros .sol-buscar input { padding-left: 32px; }
.inc-filtros .inc-falso { display: inline-flex; align-items: center; color: var(--sc-text-muted);
  background: var(--sc-surface-sunk); cursor: not-allowed; white-space: nowrap; }
.inc-filtros button { width: auto; display: inline-flex; gap: 6px; align-items: center;
  background: var(--sc-surface); color: var(--sc-text); font-weight: 500; }
.inc-filtros button .ic { width: 15px; height: 15px; }
.inc-lista .tw { border: 0; box-shadow: none; margin: 0; border-radius: 0; }
table.tincidencias { font-size: var(--sc-fs-micro); min-width: 760px; table-layout: fixed; }
.tincidencias col.c-sel { width: 28px; } .tincidencias col.c-id { width: 112px; }
.tincidencias col.c-desc { width: auto; } .tincidencias col.c-prov { width: 92px; }
.tincidencias col.c-ped { width: 62px; } .tincidencias col.c-obra { width: 74px; }
.tincidencias col.c-tipo { width: 70px; } .tincidencias col.c-grav { width: 58px; }
.tincidencias col.c-imp { width: 50px; } .tincidencias col.c-est { width: 78px; }
.tincidencias col.c-fecha { width: 74px; }
.tincidencias th { text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: var(--sc-fs-micro); padding: 10px 6px; color: var(--sc-text-muted); white-space: normal; }
.tincidencias td { padding: 4px 6px; height: 54px; line-height: 15px; vertical-align: middle;
  color: var(--sc-text); overflow: hidden; }
.tincidencias input[type=checkbox] { width: 16px; height: 16px; }
.tincidencias .inc-id, .tincidencias .inc-fecha { white-space: nowrap; }
.tincidencias .inc-id a, .tincidencias .inc-desc a { color: var(--sc-text); text-decoration: none; }
.tincidencias .inc-id a:hover, .tincidencias .inc-desc a:hover { color: var(--sc-link);
  text-decoration: underline; }
.tincidencias .inc-desc a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.tincidencias .inc-prov { color: var(--sc-info-fg); }
.tincidencias td a { color: var(--sc-text); text-decoration: none; }
.tincidencias tr.elegida td { background: var(--sc-brand-soft); }
.tincidencias .chip { font-size: var(--sc-fs-micro); min-height: 22px; margin: 0;
  white-space: normal; line-height: 14px; text-align: center; justify-content: center; }
.tincidencias .chip.est::before { display: none; }
.inc-lista .pie-tabla { margin: 0; border: 0; border-top: var(--sc-line) solid var(--sc-border);
  border-radius: 0; padding: 14px 4px; }
.inc-lista .inc-nota { margin: 0; padding: 0 4px 10px; }

/* Panel de detalle: tarjeta de 385 px con el mismo filete que la lista. */
.inc-panel {
  min-width: 0;
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-card);
  box-shadow: var(--sc-shadow-card);
  padding: 16px 12px 14px;
}
.inc-panel .sol-panel-cab { padding: 0 4px; }
.inc-panel .sol-panel-cab b { font-size: 16px; }
.inc-panel .sol-panel-tit { margin: 14px 4px 4px; }
.inc-panel .sol-panel-desc { margin: 0 4px 14px; }
.inc-panel .sol-tabs { padding: 0 4px; gap: 22px; }
.inc-datos { padding: 0 4px; }
.inc-fila3, .inc-fila2 { display: grid; gap: 10px; padding: 6px 0 8px;
  border-bottom: var(--sc-line) solid var(--sc-border); }
.inc-fila3 { grid-template-columns: 1.25fr 1fr 1fr; }
.inc-fila2 { grid-template-columns: 1fr 1fr; }
.inc-dato { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inc-dato .rot { font-size: var(--sc-fs-micro); color: var(--sc-text-muted); }
.inc-dato .val { font-size: var(--sc-fs-sm); display: flex; flex-direction: column; gap: 2px;
  align-items: flex-start; overflow-wrap: anywhere; }
.inc-dato .val a { font-size: var(--sc-fs-micro); color: var(--sc-info-fg); }
.inc-dato .chip { margin: 0; }
.inc-prov-fila { display: flex; gap: 6px; align-items: flex-start; }
.inc-prov-fila > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.inc-prov-fila .meta { font-size: var(--sc-fs-micro); }
.inc-logo { flex: 0 0 34px; height: 34px; border: var(--sc-line) solid var(--sc-border-strong);
  border-radius: var(--sc-r); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--sc-fs-micro); color: var(--sc-text-muted); }
.inc-importe { font-size: var(--sc-fs-h2); }
.inc-descripcion { padding: 8px 4px 6px; }
.inc-evidencias { display: flex; align-items: center; justify-content: center; min-height: 56px;
  margin: 4px 4px 12px; border: 1px dashed var(--sc-border-strong); border-radius: var(--sc-r);
  text-align: center; padding: 8px; }
.inc-evidencias .meta { margin: 0; font-size: var(--sc-fs-micro); }
.inc-acciones { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 4px; }
.inc-acciones > * { flex: 1 1 calc(50% - 5px); min-height: 36px; justify-content: center;
  font-size: var(--sc-fs-sm); padding: 6px 10px; gap: 8px; white-space: nowrap; }
.inc-acciones > .inc-ancha { flex: 1 1 auto; }
.inc-acciones > .solo-icono { flex: 0 0 52px; width: 52px; }
.inc-acciones .ic { width: 16px; height: 16px; }

/* --- Stock e inventario -------------------------------------------------- */
.inc-banda .pbanda-reclamos .ic { width: 17px; height: 17px; }
.inc-stk {
  display: grid;
  grid-template-columns: minmax(0, 934fr) minmax(0, 273fr);
  gap: 12px;
  align-items: start;
}
.inc-stk-izq, .inc-stk-der { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.inc-fila { display: grid; gap: 12px; align-items: stretch; }
.inc-fila.f1 { grid-template-columns: minmax(0, 670fr) minmax(0, 252fr); min-height: 243px; }
.inc-fila.f2 { grid-template-columns: minmax(0, 500fr) minmax(0, 422fr); min-height: 207px; }
.inc-fila.f3 { grid-template-columns: minmax(0, 479fr) minmax(0, 443fr); min-height: 202px; }
.inc-card {
  min-width: 0;
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-card);
  box-shadow: var(--sc-shadow-card);
  padding: 12px 14px;
}
.inc-card h2 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.inc-card-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; min-height: 30px; }
.inc-card-ic .ic { width: 20px; height: 20px; color: var(--sc-brand); }
.inc-card-cab .inc-abrir { margin-left: auto; min-height: 30px; padding: 4px 14px;
  font-size: var(--sc-fs-sm); }
.inc-card-cab .inc-ver { margin-left: auto; font-size: var(--sc-fs-micro); color: var(--sc-brand);
  cursor: not-allowed; white-space: nowrap; }
.inc-card-cab .inc-abrir + .inc-ver { margin-left: 8px; }
.inc-card .tw { border: 0; box-shadow: none; margin: 0; border-radius: 0; }
table.inc-mini { font-size: var(--sc-fs-micro); width: 100%; min-width: 0; table-layout: fixed; }
.inc-mini th { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--sc-fs-micro);
  padding: 6px; color: var(--sc-text-muted); background: var(--sc-surface-sunk); }
.inc-mini td { padding: 6px; height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-mini th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-mini .chip { margin: 0; font-size: var(--sc-fs-micro); min-height: 20px; }
.inc-card .inc-vacia { color: var(--sc-text-muted); font-size: var(--sc-fs-micro); text-align: center;
  padding: 18px 8px; white-space: normal; }
.inc-barra { display: inline-block; width: 50px; height: 6px; border-radius: var(--sc-r-pill);
  background: var(--sc-surface-sunk); vertical-align: middle; }
.inc-verif { display: flex; gap: 12px; align-items: center; }
.inc-anillo-caja { position: relative; flex: 0 0 128px; height: 128px; }
.inc-anillo { width: 128px; height: 128px; }
.inc-anillo circle { stroke: var(--sc-surface-sunk); }
.inc-anillo-centro { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: var(--sc-fs-micro); color: var(--sc-text-muted); }
.inc-anillo-centro b { font-size: 20px; color: var(--sc-text); }
.inc-leyenda { list-style: none; margin: 0; padding: 0; font-size: var(--sc-fs-micro);
  display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.inc-leyenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 6px;
  line-height: 15px; }
.inc-leyenda b { grid-column: 2; font-weight: 400; color: var(--sc-text-muted); }
.inc-verif { margin-top: 14px; }
.inc-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 4px; background: var(--sc-text-faint); }
.inc-punto.verde { background: var(--sc-ok-fg); }
.inc-punto.azul { background: var(--sc-info-fg); }
.inc-punto.ambar { background: var(--sc-warn-fg); }
.inc-rapidas h2 { margin-bottom: 10px; }
.inc-rapidas .acciones-bajo-titulo { margin: 0 0 8px; }
.inc-rapidas .inc-accion-1 { width: 100%; justify-content: flex-start; gap: 10px; min-height: 34px;
  font-size: var(--sc-fs-sm); }
.inc-rapidas .ic { width: 17px; height: 17px; }
.inc-acciones-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 6px; }
.inc-acciones-lista .inc-accion { display: flex; align-items: center; gap: 10px; min-height: 32px;
  padding: 4px 12px; border-radius: var(--sc-r); background: var(--sc-surface-sunk);
  font-size: var(--sc-fs-sm); color: var(--sc-text-muted); cursor: not-allowed; }
.inc-actividad { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.inc-actividad li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px;
  font-size: var(--sc-fs-micro); }
.inc-actividad li b { display: block; font-weight: 500; }
.inc-actividad .meta { display: block; font-size: var(--sc-fs-micro); }
.inc-act-txt { min-width: 0; }
.inc-act-txt .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.inc-chips .chip { margin: 0; padding: 4px 14px; font-size: var(--sc-fs-micro); }
.inc-card.inc-bajo { margin-top: 12px; }
.inc-card.inc-bajo h2 { margin-bottom: 8px; }

@media (max-width: 1100px) {
  .inc-rejilla, .inc-stk { grid-template-columns: minmax(0, 1fr); }
  .inc-fila.f1, .inc-fila.f2, .inc-fila.f3 { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}
@media (max-width: 720px) {
  .inc-filtros { grid-template-columns: 1fr 1fr; }
  .inc-filtros .sol-buscar { grid-column: 1 / -1; }
  .inc-cab-acc { flex-wrap: wrap; }
  .inc-fila3, .inc-fila2 { grid-template-columns: 1fr; }
}

/* === DS193 · Categorías + Notificaciones === */
/* Clonados de `catálogo_industrial_de_artemis_compras.png` (/categorias) y
   `centro_de_alertas_artemis_compras.png` (/notificaciones), 1448x1086. Solo
   lo propio, acotado bajo `.cat-`: caja, tabla, chips, selects apagados, pie,
   pestañas y donut son las piezas `fo-` de DS180, usadas tal cual. */
.cat-sub { display: block; font-size: 10px; line-height: 14px; color: var(--sc-text-muted); font-weight: 400; }

/* --- Catálogo: cabecera con foto a la derecha (y=55..245, x=760..1448). */
.cat-catalogo .cat-cabecera { position: relative; min-height: 138px; margin: -8px calc(-1 * var(--sc-gutter)) 8px 0; padding-right: 46%; }
.cat-catalogo .cat-cabecera .titulo-pantalla { margin-bottom: 0; }
.cat-heroe {
  position: absolute; top: -12px; right: 0; bottom: -58px; width: 47%;
  background: linear-gradient(90deg, var(--sc-canvas, var(--sc-cat-hero-claro)) 0%, rgba(40, 44, 52, .55) 22%, var(--sc-cat-hero-medio) 70%, var(--sc-cat-hero-oscuro) 100%);
  display: flex; align-items: flex-start; justify-content: flex-end; padding: 40px 32px 0 0; z-index: 0;
}
.cat-heroe p {
  margin: 0; max-width: 150px; color: var(--sc-on-brand); font-size: 15px; line-height: 21px; letter-spacing: .14em;
  text-transform: uppercase; border-bottom: 3px solid var(--sc-brand); padding-bottom: 8px;
}
.cat-teselas { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.cat-tesela {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 86px; padding: 6px; background: var(--sc-surface); border-radius: var(--sc-r-card);
  box-shadow: var(--sc-shadow-card); border: var(--sc-line) solid var(--sc-border); text-align: center;
  font-size: var(--sc-fs-micro); color: var(--sc-text-muted);
}
.cat-tesela b { color: var(--sc-text); font-size: var(--sc-fs-sm); line-height: 18px; }
.cat-tesela.on { border: 2px solid var(--sc-brand); background: var(--sc-brand-soft); }
.cat-tesela.sugerida { border-style: dashed; }
.cat-tico { color: var(--sc-text); margin-bottom: 6px; }
.cat-tico .ico { width: 30px; height: 30px; stroke-width: 1.4; }
.cat-tesela.on .cat-tico { color: var(--sc-brand); }
.cat-catalogo .kpis.tira-kpi { position: relative; z-index: 1; }
.cat-filtros .fo-buscar { flex: 0 0 316px; min-height: 34px; }
.cat-filtros .fo-select { min-width: 138px; }
.cat-lista { padding: 10px 10px 8px; }
.cat-tabla td { height: 48px; padding-top: 2px; padding-bottom: 2px; }
.cat-lista .fo-filtros { margin-bottom: 8px; }
.cat-lista .pie-tabla { padding-top: 8px; }
.cat-prod { display: flex; align-items: center; gap: 12px; }
.cat-foto {
  width: 36px; height: 36px; border-radius: var(--sc-r-sm); background: var(--sc-neutral-bg); color: var(--sc-text-muted);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.cat-foto .ico { width: 22px; height: 22px; }
.cat-mas { display: inline-flex; margin-left: 6px; padding: 1px 8px; border-radius: var(--sc-r-pill); background: var(--sc-neutral-bg); font-size: 10px; }
.cat-precio { white-space: nowrap; }
.cat-disp { display: inline-flex; align-items: center; gap: 8px; }
.cat-acc { white-space: nowrap; text-align: right; }
.cat-anadir.fo-boton { min-height: 30px; padding: 0 16px; font-size: var(--sc-fs-micro); margin-right: 8px; }
.cat-nota h3 { font-size: var(--sc-fs-sm); margin: 10px 0 4px; }

/* --- Alertas y avisos: lista + carril de 310 px (x=1128..1438), como Obras. */
.cat-alertas {
  display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 0 12px; align-items: start;
  margin-right: calc(-1 * var(--sc-gutter) + 10px);
}
.cat-alertas .fo-lista { padding: 12px 10px 10px; }
.cat-filtros-av .fo-buscar { flex: 0 0 330px; }
.cat-filtros-av .fo-select { min-width: 92px; }
.cat-tabla-av td { height: 58px; }
.cat-alerta { display: flex; align-items: center; gap: 12px; max-width: 330px; }
.cat-alerta a { color: var(--sc-text); text-decoration: none; }
.cat-alerta a:hover { color: var(--sc-link); text-decoration: underline; }
.cat-alerta a:focus-visible, .cat-recientes a:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; }
.cat-texto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 10px; line-height: 14px; color: var(--sc-text-muted); }
.cat-aico {
  width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  flex: none; background: var(--sc-neutral-bg); color: var(--sc-text-muted);
}
.cat-aico .ico { width: 18px; height: 18px; }
.cat-aico.rojo { background: var(--sc-danger-bg); color: var(--sc-danger-fg); }
.cat-aico.ambar { background: var(--sc-warn-bg); color: var(--sc-warn-fg); }
.cat-aico.azul { background: var(--sc-info-bg); color: var(--sc-info-fg); }
.cat-ref { white-space: nowrap; }
.cat-cuando { color: var(--sc-text-muted); max-width: 120px; }
.cat-rapida.fo-rapida { min-height: 54px; gap: 10px; }
.cat-rico { width: 36px; height: 36px; border-radius: 50%; background: var(--sc-neutral-bg); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cat-rapida b { font-weight: 600; color: var(--sc-text); }
.cat-barras, .cat-recientes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--sc-fs-micro); }
.cat-barras li { display: grid; grid-template-columns: 32px 88px 1fr 24px; align-items: center; gap: 8px; }
.cat-barras .cat-aico { width: 26px; height: 26px; background: none; }
.cat-barras b { text-align: right; font-weight: 600; }
.cat-barra { display: block; height: 20px; border-radius: 2px; background: var(--sc-neutral-bg); overflow: hidden; }
.cat-barra > span { display: block; height: 100%; background: var(--sc-brand); }
.cat-barra > span.gris { background: var(--sc-text-faint); }
.cat-barra > .w0 { width: 0; } .cat-barra > .w1 { width: 10%; } .cat-barra > .w2 { width: 20%; }
.cat-barra > .w3 { width: 30%; } .cat-barra > .w4 { width: 40%; } .cat-barra > .w5 { width: 50%; }
.cat-barra > .w6 { width: 60%; } .cat-barra > .w7 { width: 70%; } .cat-barra > .w8 { width: 80%; }
.cat-barra > .w9 { width: 90%; } .cat-barra > .w10 { width: 100%; }
.cat-recientes a { display: flex; align-items: center; gap: 10px; color: var(--sc-text); text-decoration: none; padding: 2px 0; }
.cat-recientes a > span:nth-child(2) { flex: 1; min-width: 0; }
.cat-recientes b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-recientes .cat-aico { width: 28px; height: 28px; background: none; }
.cat-flecha { color: var(--sc-text-faint); font-size: 18px; }

@media (max-width: 1100px) {
  .cat-alertas { grid-template-columns: minmax(0, 1fr); margin-right: 0; }
  .cat-teselas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-catalogo .cat-cabecera { padding-right: 0; margin-right: 0; }
  .cat-heroe { display: none; }
}
@media (max-width: 640px) {
  .cat-teselas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === DS194 · Negociación + Bandeja de correo === */
/* Medido sobre los PNG 1448x1086. Mesa: proveedor y=208..303, fila de
   solicitud y=316..437 (840 | 366), rejilla desde y=448 en tres columnas
   414 | 442 | 338 con canaleta de 12. Correo: tres columnas 372 | 538 | 284
   desde y=210. Todo el CSS va con prefijo `.neg-`. */
.neg { display: flex; flex-direction: column; gap: 10px; }
.neg .migapan { margin-bottom: 0; }
.neg .titulo-pantalla { margin-bottom: 0; align-items: flex-start; }
.neg .titulo-pantalla h1 { font-size: 40px; line-height: 46px; letter-spacing: -.01em; }
.neg .subtitulo { font-size: 17px; line-height: 24px; margin-top: 2px; }
.neg-antetitulo {
  margin: 0 0 -8px; font-size: var(--sc-fs-sm); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sc-text-muted);
}
.neg-accion { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.neg-accion-fila { display: flex; gap: 12px; align-items: center; }
.neg-estado { min-height: 32px; padding: 4px 14px; margin: 0; }
.neg-ultima { font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.neg-ventajas {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 36px;
  font-size: var(--sc-fs-body); color: var(--sc-text-muted);
}
.neg-ventajas li { display: flex; align-items: center; gap: 10px; }
.neg-ventajas .ic { width: 18px; height: 18px; color: var(--sc-text); }

.neg-card {
  background: var(--sc-surface);
  border: var(--sc-line) solid var(--sc-border);
  border-radius: var(--sc-r-card);
  box-shadow: var(--sc-shadow-card);
  padding: 14px 16px;
  min-width: 0;
}
.neg-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; min-height: 26px; }
.neg-cab h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 20px; }
.neg-hic { display: inline-flex; color: var(--sc-brand); }
.neg-hic .ic { width: 20px; height: 20px; }
.neg-sub { display: block; margin: 0; font-size: var(--sc-fs-body); line-height: var(--sc-lh-body); color: var(--sc-text-muted); }
.neg-vacio {
  margin: 0 0 10px; padding: 14px; border: 1px dashed var(--sc-border-strong); border-radius: 8px;
  font-size: var(--sc-fs-sm); color: var(--sc-text-faint); text-align: center;
}
.neg-nota { margin: 8px 0 0; font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.neg-centro { margin: 0; text-align: center; }

.boton.neg-off { opacity: .62; cursor: not-allowed; min-height: 36px; padding: 6px 14px; }
.boton.neg-prim { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); }
.boton.neg-ok { background: var(--sc-ok-fg); border-color: var(--sc-ok-fg); color: var(--sc-on-brand); }
.boton.neg-plano { background: transparent; border-color: transparent; color: var(--sc-text); padding-left: 4px; padding-right: 4px; }
.boton.neg-mas { min-width: 44px; padding: 6px 10px; }
.boton.neg-off .ic { width: 16px; height: 16px; }
.neg-link-off { font-size: var(--sc-fs-sm); color: var(--sc-brand); opacity: .7; cursor: not-allowed; }

.neg-prov { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 10px 16px; }
.neg-logo {
  width: 66px; height: 66px; border-radius: 50%; border: 1px solid var(--sc-border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: var(--sc-text-faint);
}
.neg-prov-nom { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.neg-prov-nom b { font-size: 20px; line-height: 26px; }
.neg-prov-nom .chip { margin: 0; }
.neg-contacto { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.neg-contacto li { display: flex; align-items: center; gap: 8px; }
.neg-contacto .ic { width: 14px; height: 14px; }
.neg-vertical { flex-direction: column; flex-wrap: nowrap; gap: 8px; margin-bottom: 10px; }
.neg-stats { display: flex; margin: 0; }
.neg-stats div { padding: 0 18px; border-left: 1px solid var(--sc-border-strong); }
.neg-stats div:first-child { border-left: 0; }
.neg-stats dt { order: 2; font-size: var(--sc-fs-micro); color: var(--sc-text-muted); }
.neg-stats dd { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; }
.neg-stats div { display: flex; flex-direction: column-reverse; }

.neg-fila2 { display: grid; grid-template-columns: 840fr 366fr; gap: 12px; }
.neg-sol-cab { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.neg-sol-cab > div { flex: 1 1 auto; }
.neg-sol-cab .chip { margin: 6px 0 0; }
.neg-sol-ic { color: var(--sc-brand); }
.neg-sol-ic .ic { width: 30px; height: 30px; }
.neg-sol-id { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--sc-text); text-decoration: none; }
.neg-sol-prod { margin: 0; font-size: 15px; line-height: 20px; }
.neg-campos { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.neg-campos div { padding: 0 14px; border-left: 1px solid var(--sc-border-strong); }
.neg-campos div:first-child { border-left: 0; padding-left: 0; }
.neg-campos dt, .neg-objetivos dt, .neg-rel dt { font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.neg-campos dd { margin: 2px 0 0; font-size: 14px; line-height: 20px; }
.neg-cola { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.neg-cola ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.neg-pastillas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.neg-pastillas .chip { margin: 0; }

.neg-rejilla { display: grid; grid-template-columns: 414fr 442fr 338fr; gap: 12px; align-items: stretch; }
.neg-hilo, .neg-docs { flex: 1 1 auto; display: flex; flex-direction: column; }
.neg-hilo .neg-redactar { margin-top: auto; }
.neg-tres .neg-col { gap: 10px; }
.neg-tres .neg-col .neg-card { padding: 12px 14px; }
.neg-tres .neg-col .neg-cab h2 { font-size: 14px; }
.neg-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.neg-recibida { margin: -8px 0 10px; font-size: var(--sc-fs-sm); }
.neg-cajas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.neg-cajas div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 8px; background: var(--sc-surface-sunk); }
.neg-cajas span { font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.neg-cajas b { font-size: 22px; line-height: 30px; }
.neg-cajas small { font-size: var(--sc-fs-micro); color: var(--sc-text-faint); }
.neg-sin { margin: 0; background: var(--sc-danger-bg); color: var(--sc-danger-fg); }
.neg-tabla { width: 100%; min-width: 0; font-size: var(--sc-fs-sm); }
.neg-tabla th { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--sc-fs-sm); background: var(--sc-surface-sunk); position: static; }
.neg-tabla td { height: 32px; padding-top: 4px; padding-bottom: 4px; }
.neg-oferta-celda { background: var(--sc-danger-bg); }
.neg-total td { font-weight: 700; background: var(--sc-surface-sunk); }
.boton.neg-sel { min-height: 30px; padding: 2px 10px; font-weight: 500; font-size: var(--sc-fs-sm); }

.neg-reco { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 8px; background: var(--sc-neutral-bg); border: 1px solid var(--sc-border-strong); font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.neg-reco b { color: var(--sc-text); font-size: 14px; }
.neg-objetivos, .neg-rel { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.neg-objetivos div, .neg-rel div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--sc-fs-body); }
.neg-objetivos dd, .neg-rel dd { margin: 0; font-weight: 600; text-align: right; }
.neg-args { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 8px; background: var(--sc-info-bg); font-size: var(--sc-fs-sm); }
.neg-args b { color: var(--sc-info-fg); }

.neg-redactar { display: flex; flex-direction: column; gap: 8px; }
.neg-caja-texto {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--sc-border-control); border-radius: var(--sc-r);
  font-size: var(--sc-fs-body); color: var(--sc-text-faint); background: var(--sc-surface); cursor: not-allowed;
}
.neg-caja-texto .ic { width: 16px; height: 16px; }
.neg-area { min-height: 48px; align-items: flex-start; }
.neg-redactar-pie { display: flex; align-items: center; gap: 12px; }
.neg-atajo { margin-left: auto; font-size: var(--sc-fs-sm); color: var(--sc-text-faint); }
.neg-botones { display: flex; flex-direction: column; gap: 8px; }
.neg-botones .boton.neg-off { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
.neg-botones .boton.neg-off { width: 100%; justify-content: center; }
.neg-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* -- bandeja de correo -- */
.neg-tres { display: grid; grid-template-columns: 372fr 538fr 284fr; gap: 12px; align-items: stretch; }
.neg-buscar { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; flex-wrap: wrap; }
.neg-buscar .neg-caja-texto { flex: 1 1 150px; white-space: nowrap; overflow: hidden; }
.neg-buscar select { min-height: 36px; width: 96px; }
.neg-buscar .neg-filtrar { min-height: 36px; padding: 6px 10px; }
.neg-filtrar .ic { width: 16px; height: 16px; }
.neg-pestanas { display: flex; flex-wrap: nowrap; gap: 4px; margin-bottom: 10px; overflow-x: auto; }
.neg-pestanas a, .neg-pest-off {
  display: inline-flex; align-items: center; min-height: 30px; padding: 4px 7px;
  border: 1px solid var(--sc-border-strong); border-radius: 6px;
  font-size: var(--sc-fs-micro); color: var(--sc-text); text-decoration: none; background: var(--sc-surface); white-space: nowrap;
}
.neg-pestanas a.activa { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); }
.neg-pest-off { color: var(--sc-text-faint); cursor: not-allowed; }
.neg-lista { list-style: none; margin: 0 -16px; padding: 0; }
.neg-lista li { border-top: 1px solid var(--sc-border); }
.neg-item { display: flex; gap: 12px; padding: 12px 16px; color: var(--sc-text); text-decoration: none; }
.neg-item:hover { background: var(--sc-surface-sunk); }
.neg-item.activo { background: var(--sc-brand-soft); box-shadow: inset 3px 0 0 var(--sc-brand); }
.neg-avatar {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sc-neutral-bg); font-weight: 700; font-size: 14px; color: var(--sc-text);
}
.neg-avatar-g { width: 48px; height: 48px; }
.neg-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.neg-item-l1 { display: flex; justify-content: space-between; gap: 8px; }
.neg-item-l1 time { font-size: var(--sc-fs-sm); color: var(--sc-text-muted); white-space: nowrap; }
.neg-item-asunto { font-size: var(--sc-fs-body); font-weight: 600; }
.neg-item-res { font-size: var(--sc-fs-sm); color: var(--sc-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neg-item-chips { margin-top: 4px; }
.neg-conv { display: flex; flex-direction: column; gap: 12px; }
.neg-conv-cab { display: flex; gap: 12px; align-items: center; }
.neg-conv-cab > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.neg-conv-nom { font-size: 18px; line-height: 24px; }
.neg-conv-bot { display: flex; gap: 8px; }
.neg-conv-bot .boton { min-height: 36px; padding: 6px 14px; }
.neg-conv-chips .chip { margin: 0 4px 0 0; }
.neg-msg { padding: 12px 14px; border-radius: 10px; background: var(--sc-surface-sunk); font-size: var(--sc-fs-body); }
.neg-msg header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.neg-msg header .neg-avatar { width: 32px; height: 32px; font-size: 12px; background: var(--sc-surface); }
.neg-msg time { font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.neg-msg h3 { margin: 0 0 6px; font-size: 14px; }
.neg-msg p { margin: 0; white-space: pre-wrap; }
.neg-adjuntos { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.neg-adjuntos li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--sc-border-strong); border-radius: 8px; background: var(--sc-surface); font-size: var(--sc-fs-sm); }
.neg-adjuntos .ic { width: 18px; height: 18px; color: var(--sc-brand); }
.neg-adjuntos span { display: flex; flex-direction: column; }
.neg-adjuntos small { color: var(--sc-text-muted); }
.neg-conv .aviso { margin: 0; font-size: var(--sc-fs-sm); }
.neg-redactar-correo { border-top: 1px solid var(--sc-border); padding-top: 10px; margin-top: auto; }
.neg-rel div { flex-direction: column; gap: 0; }
.neg-rel dd { text-align: left; }
.neg-tabs-resp { display: flex; gap: 6px; }
.neg-tabs-resp .activa { color: var(--sc-brand); border-color: var(--sc-brand); }
.neg-sugeridas { padding: 10px 12px; border-radius: 8px; background: var(--sc-info-bg); }
.neg-sugeridas b { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: var(--sc-fs-sm); color: var(--sc-info-fg); }
.neg-sugeridas .ic { width: 14px; height: 14px; }
.neg-sugeridas div { display: flex; flex-wrap: wrap; gap: 6px; }
.neg-quien { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.neg-linea { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--sc-ok-bg); display: flex; flex-direction: column; gap: 10px; font-size: var(--sc-fs-sm); }
.neg-linea li { display: flex; flex-direction: column; position: relative; color: var(--sc-text-muted); }
.neg-linea li::before { content: ""; position: absolute; left: -22px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--sc-ok-fg); }
.neg-linea b { color: var(--sc-text); font-weight: 500; }

@media (max-width: 1100px) {
  .neg-rejilla, .neg-tres, .neg-fila2 { grid-template-columns: 1fr; }
  .neg-prov { grid-template-columns: 1fr; }
  .neg-campos { grid-template-columns: repeat(2, 1fr); }
}
/* === DS198 === ============================================================
   Crítica de Codex sobre el MÓDULO 1 (Core Compras). Aquí solo lo que es de
   UNA pantalla, siempre con selector acotado. Los cambios de componente
   compartido (título, KPI, tabla, pie, tarjeta) se hicieron en su regla
   original, no aquí.
   ========================================================================= */

/* --- Kanban: carriles continuos del mockup (tanda 6). Columnas x=220..1124,
       canaleta 6 px, tarjeta ~146 px, padding 9 px, texto 12/600. ---- */
.kb-rejilla .kb-tablero { grid-template-columns: repeat(6, minmax(136px, 1fr)); gap: 6px; }
.kb-rejilla .kb-tablero.n7 { grid-template-columns: repeat(7, minmax(120px, 1fr)); }
.kb-rejilla .kb-col { background: var(--sc-surface); border: var(--sc-line) solid var(--sc-border-strong);
  border-radius: 8px; padding: 0 5px 6px; gap: 5px; box-shadow: var(--sc-shadow-card); }
.kb-rejilla .kb-col-cab { background: transparent; border-radius: 0; padding: 8px 3px 6px;
  border-bottom: var(--sc-line) solid var(--sc-border-strong); gap: 2px 5px; }
.kb-rejilla .kb-col-cab h2 { line-height: 16px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.kb-rejilla .kb-suma { font-size: var(--sc-fs-micro); }
.kb-rejilla .kb-cuenta { font-size: var(--sc-fs-micro); padding: 0 6px; }
.kb-col-ico { display: inline-flex; color: var(--sc-neutral-fg); }
.kb-rejilla .kb-col-ico .ico { width: 14px; height: 14px; }
.kb-col-ico.ambar { color: var(--sc-warn-fg); }
.kb-col-ico.azul { color: var(--sc-info-fg); }
.kb-col-ico.morado { color: var(--sc-violet-fg); }
.kb-col-ico.verde { color: var(--sc-ok-fg); }
.kb-col-ico.rojo { color: var(--sc-danger-fg); }
.kb-rejilla .kb-tarjeta { border-radius: 6px; }
.kb-rejilla .kb-enlace { padding: 8px 9px; gap: 2px; font-size: var(--sc-fs-micro); line-height: 14px; }
.kb-rejilla .kb-num { font-size: var(--sc-fs-sm); font-weight: 600; line-height: 16px; }
.kb-rejilla .kb-importe { font-size: var(--sc-fs-sm); font-weight: 700; margin-top: 1px; }
.kb-rejilla .kb-enlace .kb-chip, .kb-rejilla .kb-enlace .kb-alerta, .kb-progreso { margin-top: 3px; }
.kb-rejilla .kb-crear { border: var(--sc-line) dashed var(--sc-border-strong); font-size: var(--sc-fs-micro); padding: 6px; }
.kb-rejilla .kb-vacia { padding: 10px 4px; }
.kb-progreso { display: flex; flex-direction: column; gap: 3px; color: var(--sc-violet-fg); font-size: var(--sc-fs-micro); }
.kb-barra { display: block; height: 4px; border-radius: var(--sc-r-pill); background: var(--sc-violet-bg); overflow: hidden; }
.kb-barra > span { display: block; height: 100%; width: 0; background: var(--sc-violet-fg); }
.kb-barra.p10 > span { width: 10%; } .kb-barra.p20 > span { width: 20%; }
.kb-barra.p30 > span { width: 30%; } .kb-barra.p40 > span { width: 40%; }
.kb-barra.p50 > span { width: 50%; } .kb-barra.p60 > span { width: 60%; }
.kb-barra.p70 > span { width: 70%; } .kb-barra.p80 > span { width: 80%; }
.kb-barra.p90 > span { width: 90%; } .kb-barra.p100 > span { width: 100%; }
.ap-kpi-ico.morado { background: var(--sc-violet-bg); color: var(--sc-violet-fg); }
.kb-chip.gris { background: var(--sc-neutral-bg); color: var(--sc-neutral-fg); }
/* Filtros + vistas en UNA fila (sin la línea «Mover tarjetas», que retrasaba
   el tablero 20-25 px: el motivo vive en `aria-describedby`). */
.kb-rejilla .kb-vistas { margin: 8px 0; gap: 0; }
.kb-rejilla .kb-vista { padding: 5px 14px; min-height: 30px; }
.kb-rejilla .kb-vista.on { border-radius: var(--sc-r) 0 0 var(--sc-r); }
.kb-rejilla .kb-vista + .kb-vista { border-radius: 0 var(--sc-r) var(--sc-r) 0; border-left: 0; }
.kb-chip.morado { background: var(--sc-violet-bg); color: var(--sc-violet-fg); }
.kb-rejilla .kb-kpi .rotulo { white-space: normal; line-height: 13px; }
.kb-rejilla .kb-kpi .ap-kpi-ico { width: 32px; height: 32px; }
.kb-rejilla .kb-kpi .ap-kpi-ico .ico { width: 18px; height: 18px; }
.kb-rejilla .kb-col-cab h2 { font-size: var(--sc-fs-micro); letter-spacing: -.02em; text-overflow: clip; }
.kb-rejilla .kb-kpis { margin: 12px 0; }
.kb-rejilla .kb-kpi { padding: 12px 10px; align-items: center; min-height: 64px; }
/* Cajón: la línea de progreso con nodos unidos y fecha bajo cada fase. */
.kb-rejilla .kb-pasos { position: relative; }
.kb-rejilla .kb-pasos li { position: relative; gap: 2px; }
.kb-rejilla .kb-pasos li + li::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%;
  height: 2px; background: var(--sc-border-control); }
.kb-rejilla .kb-pasos li.hecho + li::before, .kb-rejilla .kb-pasos li.hecho + li.actual::before { background: var(--sc-ok-fg); }
.kb-rejilla .kb-paso-bola { position: relative; z-index: 1; }
.kb-rejilla .kb-pasos b { font-weight: 500; font-size: var(--sc-fs-micro); color: var(--sc-text); }
.kb-paso-fecha { color: var(--sc-text-muted); font-size: var(--sc-fs-micro); }
.kb-cajon-menu { margin-left: auto; display: inline-flex; align-items: center; color: var(--sc-text-muted); cursor: not-allowed; }
.kb-cajon-menu .ico { width: 16px; height: 16px; }
/* --- Pie de tabla compartido: el selector de tamaño compacto (el botón
       existe porque la CSP prohíbe el `onchange`). */
.pie-tabla .por-pagina select, .pie-tabla .por-pagina button { min-height: 30px; padding: 2px 10px;
  font-size: var(--sc-fs-sm); font-weight: 400; }
.pie-tabla .paginador .pag { min-width: 30px; min-height: 30px; }

/* --- Pedido (`/pedido/<id>`): cabecera, tarjetas, tabla y bloque inferior
       más compactos para que Historial y Documentos entren en el primer
       viewport (mockup: fila 1 y=183, líneas y=398, asignación y=703,
       historial y=883). ------------------------------------------------ */
.pd .pd-id { margin-bottom: 4px; }
.pd .pd-card { padding: 12px 14px; border-radius: 8px; }
.pd .pd-card-cab { margin-bottom: 8px; min-height: 22px; }
.pd .pd-card-cab h2 { font-size: 15px; line-height: 20px; }
.pd .pd-quien { margin-bottom: 8px; }
.pd .pd-dato { margin-bottom: 8px; }
.pd .pd-contacto li { padding: 2px 0; }
.pd .pd-tabla th { padding: 8px; font-size: var(--sc-fs-micro); }
.pd .pd-tabla td { height: 44px; padding: 4px 8px; }
.pd .pd-mini { width: 30px; height: 30px; border-radius: 6px; }
.pd .pd-compacta th { padding: 5px 8px; }
.pd .pd-compacta td { height: 28px; padding: 3px 8px; }
.pd .pd-c-asig .aviso { margin: 6px 0 0; padding: 6px 10px; font-size: var(--sc-fs-micro); line-height: 15px; }
.pd .pd-importes dt, .pd .pd-importes dd { padding: 4px 0; }
.pd .pd-total-pedido { margin-top: 6px; padding: 6px 10px; }
.pd-tabla th.pd-acc-linea, .pd-tabla td.pd-acc-linea { width: 38px; padding-left: 0; padding-right: 0; text-align: center; }
.pd-linea-mas { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
  border-radius: var(--sc-r); color: var(--sc-text-muted); cursor: not-allowed; font-size: 16px; }
.pd .pd-card-cab h2.con-ico::before { display: none; }
.pd-card-ico { display: inline-flex; color: var(--sc-brand); }
.pd-card-ico .ic { width: 18px; height: 18px; }

/* --- Banners fotográficos de cabecera (Catálogo y Stock), recortados de sus
       mockups: la foto se pinta con `<img>` debajo del rótulo. ------------ */
.cat-heroe-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: -1; }
.cat-catalogo .cat-heroe { overflow: hidden; }
.cat-catalogo .cat-heroe > p { position: relative; }
.inc-banda .pbanda-foto { background: none; width: 748px; overflow: hidden; }
.pbanda-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.inc-banda .pbanda-claim { left: auto; right: 38px; z-index: 1; }

/* --- Solicitudes: píldoras de estado en una línea (columna con mínimo) y
       descripción a dos líneas como máximo: filas de ~48 px. ------------- */
.sol-tabla .tsolicitudes col.c-est { width: 112px; }
.sol-tabla .tsolicitudes col.c-sol { width: 86px; }
.sol-tabla .tsolicitudes col.c-obra { width: 56px; }
.sol-tabla .tsolicitudes .est { white-space: nowrap; line-height: 18px; padding: 2px 8px; }
.sol-tabla .tsolicitudes .sol-desc, .sol-tabla .tsolicitudes td:nth-child(5) > * {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sol-tabla .tsolicitudes td { height: 46px; padding-top: 3px; padding-bottom: 3px; }

/* --- Aprobaciones: KPI sin truncar la etiqueta y comparativa con tres
       tarjetas iguales, precio a 18/700 y zona reservada para plazo y
       señales. ------------------------------------------------------------ */
.ap-rejilla .ap-kpi .rotulo, .ap-rejilla .ap-kpi-pie { white-space: normal; overflow: visible; line-height: 13px; }
.ap-rejilla .ap-kpi { align-items: center; min-height: 86px; }
.ap-rejilla .ap-comparativa { gap: 8px; }
.ap-rejilla .ap-prov-card { min-height: 108px; padding: 8px 10px; gap: 3px; }
.ap-rejilla .ap-prov-cifra { font-size: 18px; line-height: 22px; }
.ap-rejilla .ap-bloque { padding: 10px 12px; }
.ap-rejilla .ap-cajon-cuerpo { gap: 10px; }
.ap-rejilla .ap-tabla td { height: 49px; }

/* --- Nueva solicitud: Información general en la rejilla 3x2 del mockup
       (~200-230 px): la elección obra/stock va en horizontal, compacta. --- */
.ns-rejilla-campos .ns-radios { gap: 2px; }
.ns-rejilla-campos .ns-radios .opcion { min-height: 0; padding: 2px 0; border: 0; font-size: var(--sc-fs-micro); line-height: 13px; gap: 6px; }
.ns-rejilla-campos .ns-radios input[type=radio] { width: 14px; height: 14px; }

.ns-rejilla-campos .ns-ayuda { line-height: 13px; margin-top: 2px; }
.ns-rejilla-campos .ns-campo > label, .ns-rejilla-campos .ns-rot { margin: 4px 0 3px; }
.ns-seccion .ns-rejilla-campos { gap: 2px 16px; }
span.ns-anadir { display: flex; width: 100%; gap: 12px; align-items: center; margin: 10px 0 4px; padding: 8px 14px;
  min-height: 46px; box-sizing: border-box; border: 1px dashed var(--sc-border-control); border-radius: 8px;
  color: var(--sc-text-muted); cursor: not-allowed; }
span.ns-anadir .ic { width: 22px; height: 22px; color: var(--sc-brand); }
span.ns-anadir b { display: block; font-size: var(--sc-fs-sm); color: var(--sc-text); }
span.ns-anadir .meta { display: block; font-size: var(--sc-fs-micro); }
.ns-dos .ns-valor.ns-area, .ns-dos .ns-soltar { min-height: 76px; }

/* --- Entrar: idioma y firma en tinta oscura, como el mockup (van sobre el
       tramo claro de la foto); el rótulo de arriba sigue en blanco. -------- */
.entrar .entrar-der .entrar-firma, .entrar .entrar-der .entrar-idioma { color: var(--sc-text); }
.ns-seccion .ns-rejilla-campos .ns-persona { padding-top: 1px; padding-bottom: 1px; min-height: 38px; }
.ns-seccion .ns-rejilla-campos .ns-persona .sol-avatar { flex-basis: 28px; height: 28px; }
.ns-seccion .ns-cab { margin-bottom: 4px; }
main .ns-seccion { padding-top: 12px; padding-bottom: 12px; }
.ns-rejilla-campos .ns-ayuda { font-size: 10px; line-height: 12px; }
/* Solicitudes: la tira de KPI arranca en y=195 como el mockup (14 px más abajo). */
.sol-rejilla .titulo-pantalla { margin-bottom: 30px; }
/* Nueva solicitud: el bloque 1 arranca en y=173 como el mockup (8 px más arriba). */
form.ns-rejilla { margin-top: -8px; }

/* === CX-CORE-C2 === */
.cx-core-c2-entrar .entrar-tarjeta h1 { font-size: 32px; line-height: 38px; font-weight: 700; }
.cx-core-c2-entrar .entrar-sub { font-size: 18px; line-height: 24px; }
.cx-core-c2-entrar .entrar-form label,
.cx-core-c2-entrar .entrar-campo input { font-size: 17px; }
.cx-core-c2-entrar .entrar-olvido { font-size: 16px; }
.cx-core-c2-entrar .entrar-olvido-enlace,
.cx-core-c2-entrar .entrar-sso,
.cx-core-c2-entrar .entrar-soporte { opacity: 1; }
.cx-core-c2-entrar .entrar-sso b { font-size: 17px; }
.cx-core-c2-entrar .entrar-sso > span { font-size: 15px; }
.cx-core-c2-entrar .entrar-ayuda { margin-top: 26px; }
.cx-core-c2-entrar .entrar-ayuda > div { position: relative; grid-template-columns: 32px 1fr; gap: 0 12px; }
.cx-core-c2-entrar .entrar-ayuda .icono { width: 30px; height: 30px; }
.cx-core-c2-entrar .entrar-ayuda b { font-size: 15px; }
.cx-core-c2-entrar .entrar-ayuda span { font-size: 14px; line-height: 18px; }
.cx-core-c2-entrar .entrar-der .entrar-idioma { color: var(--sc-on-brand); font-size: 15px; }
.cx-core-c2-entrar .entrar-reclamo .icono { width: 27px; height: 27px; stroke-width: 2; }
.cx-core-c2-entrar .entrar-pie { font-size: 13px; }

/* === CX-CORE-C2 · entrar === */
.cx-core-c2-entrar .entrar-lead { font-size: 24px; line-height: 30px; }
.cx-core-c2-entrar .entrar-copy { max-width: 320px; margin-top: 8px; font-size: 19px; line-height: 26px; }
.cx-core-c2-entrar .entrar-reclamos { margin-top: 36px; }
.cx-core-c2-entrar .entrar-reclamo > span:last-child { font-size: 16px; line-height: 21px; }
.cx-core-c2-entrar .entrar-reclamo .icono { width: 26px; height: 26px; stroke-width: 2.3; }
.cx-core-c2-entrar .entrar-campo input { border-color: var(--sc-border-strong); border-radius: 8px; }
.cx-core-c2-entrar .entrar-sso { grid-template-columns: 30px 242px; column-gap: 20px; min-height: 68px; }
.cx-core-c2-entrar .entrar-ms { width: 30px; height: 30px; }
.cx-core-c2-entrar .entrar-sso small { display: block; font-size: 11px; line-height: 13px; }
.cx-core-c2-entrar .entrar-tarjeta { border-radius: 8px; box-shadow: var(--sc-shadow-card); padding-bottom: 38px; }
.cx-core-c2-entrar .entrar-soporte { font-size: 12px; line-height: 16px; }

/* === CX-SHARED3 === */
/* Radio y sombra de las superficies compartidas: la esquina del mockup
   equivale a unos seis píxeles en el primer viewport. */
:root { --sc-r-card: 6px; --sc-shadow-card: 0 1px 3px rgba(10, 15, 30, 0.05); }
/* La segunda mitad del título conserva la tinta de marca y el peso ligero. */
.cx-shared3 .titulo-pantalla .h1-marca { font-weight: 400; }

/* Tres renglones con sitio reservado: el texto de ausencia no agranda la
   tarjeta ni desplaza los filtros en paneles con cuatro KPI estrechos. */
.cx-shared3 .kpis.tira-kpi .kpi {
  height: 94px;
  min-height: 94px;
  grid-template-rows: 32px 28px 16px;
  row-gap: 0;
  padding: 8px 10px;
  border-radius: var(--sc-r);
  border-color: var(--sc-border-strong);
  box-shadow: var(--sc-shadow-card);
}
.cx-shared3 .kpis.tira-kpi .kpi .rotulo { align-self: center; font-size: 12px; line-height: 16px; }
.cx-shared3 .kpis.tira-kpi .kpi .cifra { font-size: 27px; line-height: 28px; align-self: center; }
.cx-shared3 .kpis.tira-kpi .kpi .var, .cx-shared3 .kpis.tira-kpi .kpi .meta.micro {
  align-self: center; font-size: 11px; line-height: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-shared3 .pv .kpis.tira-kpi { margin-top: 13px; margin-bottom: 19px; }
.cx-shared3 .pv .kpis.tira-kpi .kpi { height: 101px; min-height: 101px; }
.cx-shared3 .fcx-fac .kpis.tira-kpi { margin-top: 18px; margin-bottom: 26px; }
.cx-shared3 .fcx-fac .kpis.tira-kpi .kpi { height: 91px; min-height: 91px; }
.cx-shared3 .ocx-obras .kpis.tira-kpi { margin-top: 23px; }
.cx-shared3 .ocx-obras .kpis.tira-kpi .kpi { height: 92px; min-height: 92px; }

/* Un contorno visual y un único selector de tamaño. El botón sigue enviando
   el formulario GET sin JavaScript; la flecha queda dentro del mismo control. */
.cx-shared3 .pie-tabla .por-pagina {
  gap: 0; height: 32px; border: var(--sc-line) solid var(--sc-border-strong);
  border-radius: var(--sc-r); background: var(--sc-surface);
}
.cx-shared3 .pie-tabla .por-pagina select {
  min-height: 30px; height: 30px; width: 108px; padding: 0 4px 0 10px;
  border: 0; background: transparent; font-size: var(--sc-fs-sm);
}
.cx-shared3 .pie-tabla .por-pagina button {
  min-height: 30px; height: 30px; width: 24px; padding: 0;
  border: 0; background: transparent; color: var(--sc-text-muted);
}
.cx-shared3 .pie-tabla .por-pagina:focus-within { outline: var(--sc-focus-w) solid var(--sc-focus-color); outline-offset: var(--sc-focus-offset); }

/* Los filtros de lista comparten la medida de 34 px y la superficie suave. */
.cx-shared3 .sol-filtros :is(select, input), .cx-shared3 .pv-filtros :is(select, input),
.cx-shared3 .fo-filtros :is(.fo-select, .fo-buscar), .cx-shared3 .scx-stock :is(select, input) {
  border-color: var(--sc-border-strong); border-radius: var(--sc-r);
  background-color: var(--sc-surface); font-size: var(--sc-fs-sm);
}
.cx-shared3 .pv-filtros .pv-desp { border-color: var(--sc-border-strong); }
.cx-shared3 .barra .quien .org { font-size: 11px; }
.cx-shared3 .lateral > .lateral-textura { height: 616px; }

/* La escala de lectura de filas y metadatos era un paso menor que la del PNG. */
.cx-shared3 .sol-rejilla table.tsolicitudes, .cx-shared3 .pv .pv-tabla,
.cx-shared3 .fo .fo-tabla { font-size: var(--sc-fs-sm); }
.cx-shared3 .fo-det-nav > *, .cx-shared3 .sol-rejilla .sol-panel-desc { font-size: var(--sc-fs-body); }

/* El título de Proveedores ocupa 235 x 32 px en el PNG: con 42 px y
   tracking corto, Segoe UI conserva esa anchura y recupera la altura. */
.cx-shared3 .titulo-pantalla h1 {
  font-size: 42px;
  line-height: 48px;
  letter-spacing: -.025em;
}
.cx-shared3 .titulo-pantalla .subtitulo { font-size: 16px; line-height: 21px; margin-top: 2px; }
.cx-shared3 .titulo-pantalla .h1-marca { font-weight: 400; }
.cx-shared3 :is(.ccx-negociacion, .ccx-correo) .titulo-pantalla .h1-marca { font-weight: 700; }
.cx-shared3 .sol-rejilla .titulo-pantalla { margin-bottom: 24px; }
.cx-shared3 .fcx-fac .kpis.tira-kpi { margin-top: 9px; }

/* Búsqueda y utilidades: 38 px de alto, anchura propia y anclaje 17 px
   antes que la captura heredada. Flex permite reducirla en pantallas menores. */
.cx-shared3 .barra .buscador { flex-basis: 530px; height: 38px; margin-left: 30px; }
.cx-shared3 .barra .buscador input { height: 36px; font-size: 13px; }
.cx-shared3 .barra .entorno { height: 27px; }
.cx-shared3 .barra .avatar { width: 32px; height: 32px; }
.cx-shared3 .barra .quien b { font-size: 13px; line-height: 16px; }
.cx-shared3 .barra .quien .org { font-size: 11px; line-height: 14px; }

/* La etiqueta larga de Stock conserva una línea sin encoger los iconos. */
.cx-shared3 .lateral nav a, .cx-shared3 .lateral .nav-off {
  font-size: 14px; letter-spacing: -.025em; white-space: nowrap;
}
.cx-shared3 .lateral nav .ic { flex: 0 0 20px; }

/* Lectura y contornos de los componentes reutilizados. */
.cx-shared3 .kpis.tira-kpi .kpi { border-radius: var(--sc-r-card); }
.cx-shared3 .kpis.tira-kpi .kpi-icono { width: 46px; height: 46px; }
.cx-shared3 .kpis.tira-kpi .kpi-icono .ic { width: 22px; height: 22px; }
.cx-shared3 .kpis.tira-kpi .kpi .rotulo { font-size: 13px; line-height: 17px; }
.cx-shared3 .kpis.tira-kpi .kpi .cifra { font-size: 26px; }
.cx-shared3 .kpis.tira-kpi .kpi .var,
.cx-shared3 .kpis.tira-kpi .kpi .meta.micro { font-size: 11px; }
.cx-shared3 .pie-tabla .tam-pagina { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 12px; }
.cx-shared3 .pie-tabla .por-pagina { width: 130px; height: 34px; }
.cx-shared3 .pie-tabla .por-pagina select { flex: 1; width: 0; height: 32px; }
.cx-shared3 .pie-tabla .por-pagina button { height: 32px; }
.cx-shared3 :is(.sol-filtros, .pv-filtros, .fo-filtros) :is(select, input) {
  border-color: var(--sc-border-strong); border-radius: var(--sc-r); min-height: 34px;
}
@media (max-width: 1100px) {
  .cx-shared3 .barra .buscador { margin-left: 12px; }
  .cx-shared3 .titulo-pantalla h1 { font-size: 36px; line-height: 42px; }
}

/* Ronda 8: buscador x=471..925 en el PNG de Solicitudes; la captura
   anterior lo dibujaba x=460..936. Entorno y utilidades conservan su hueco. */
.cx-shared3 .barra .buscador { flex: 0 1 455px; margin-left: 41px; height: 32px; }
.cx-shared3 .barra .buscador input { height: 30px; }
.cx-shared3 .barra .entorno {
  flex: 0 0 110px; max-width: 110px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.cx-shared3 .barra .campana { margin-left: 10px; }
.cx-shared3 .barra .barra-icono { width: 32px; height: 32px; margin-left: 12px; justify-content: center; }
.cx-shared3 .barra .modulos > summary { width: 32px; height: 32px; margin-left: 12px; justify-content: center; }
.cx-shared3 .barra .yo { min-width: 0; margin-left: 5px; padding-left: 12px; }
.cx-shared3 .barra .quien { min-width: 0; max-width: 102px; overflow: hidden; }
.cx-shared3 .barra .quien :is(b, .org) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) {
  .cx-shared3 .barra .buscador { margin-left: 12px; }
}

/* === CX-FAC7 === */
.fcx-fac .fo-lista { min-height: 432px; margin-top: -19px; margin-bottom: 10px; }
.fcx-fac .fo-lista, .fcx-fac .fo-detalle { border: 1px solid var(--sc-border); box-shadow: var(--sc-shadow-card); }
.fcx-fac .fo-tabla-facturas { table-layout: fixed; }
.fcx-fac .fo-tabla-facturas .fo-col-sel { width: 38px; }
.fcx-fac .fo-tabla-facturas .fo-col-factura { width: 110px; }
.fcx-fac .fo-tabla-facturas .fo-col-proveedor { width: 90px; }
.fcx-fac .fo-tabla-facturas .fo-col-pedido { width: 115px; }
.fcx-fac .fo-tabla-facturas .fo-col-albaran { width: 115px; }
.fcx-fac .fo-tabla-facturas .fo-col-obra { width: 157px; }
.fcx-fac .fo-tabla-facturas .fo-col-importe { width: 100px; }
.fcx-fac .fo-tabla-facturas .fo-col-fecha { width: 112px; }
.fcx-fac .fo-tabla-facturas .fo-col-estado { width: 125px; }
.fcx-fac .fo-tabla-facturas .fo-col-cotejo { width: 158px; }
.fcx-fac .fo-tabla-facturas .fo-col-acciones { width: 57px; }
.fcx-fac .fo-lista .fo-tabla { margin-top: -1px; }
.fcx-fac .fo-lista .fo-fila-vacia td { height: 260px; text-align: center; }
.fcx-fac .fo-detalle { min-height: 350px; }
.fcx-fac .fo-det-cab { height: 76px; position: relative; padding-top: 8px; padding-bottom: 8px; }
.fcx-fac .fo-det-botones { position: absolute; top: 12px; right: 15px; }
.fcx-fac .fo-detalle-vacio .fo-det-botones { grid-template-columns: auto auto 32px; }
.fcx-fac .fo-detalle-vacio .fo-boton-vacio-mas { grid-column: 3; grid-row: 2; min-width: 32px; padding: 0; }
.fcx-fac .fo-det-nav { padding-top: 0; }
.fcx-fac .fo-det-nav > * { padding-top: 7px; padding-bottom: 7px; }
.fcx-fac .fo-det-main { padding-top: 0; position: relative; }
.fcx-fac .fo-det-h { margin-bottom: 4px; }
.fcx-fac .fo-det-h > div:first-child { transform: translateY(-6px); }
.fcx-fac .fo-det-chips { position: absolute; top: 0; right: 330px; gap: 8px; }
.fcx-fac .fo-det-chips .fo-chip { min-height: 24px; font-size: 11px; line-height: 16px; padding: 3px 10px; }
.fcx-fac .fo-tres th { padding-top: 4px; padding-bottom: 4px; line-height: 13px; }
.fcx-fac .fo-tres .fo-sub { line-height: 13px; }
.fcx-fac .fo-alta:not(:target):not(.fcx-alta-error) { display: none; }
.fcx-fac .fo-alta:target { display: block; scroll-margin-top: 24px; }
.fcx-fac .fo-detalle-vacio .fo-det-botones .fo-boton[aria-disabled="true"] {
  background: var(--sc-neutral-bg); border-color: var(--sc-border); color: var(--sc-text-muted);
}
.fcx-fac .fo-detalle-vacio .fo-det-botones .ico { color: var(--sc-text-muted); }
.fcx-fac .fo-detalle-vacio .fo-det-chips .fo-chip {
  background: var(--sc-neutral-bg); color: var(--sc-text-muted);
}
.fcx-fac .fo-detalle-vacio .fo-det-chips .fo-punto { background: var(--sc-text-faint); }
@media (max-width: 720px) {
  .fcx-fac .fo-det-cab { height: auto; min-height: 76px; padding-bottom: 12px; }
  .fcx-fac .fo-det-botones { position: static; }
  .fcx-fac .fo-det-chips { position: static; }
}
/* Densidad de factura: el texto se conserva en el DOM y en title. */
.fcx-fac .fo-tabla-facturas th, .fcx-fac .fo-tabla-facturas td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 6px; font-size: 11px; line-height: 18px; }
.fcx-fac .fo-tabla-facturas td { height: 31px; max-height: 31px; }
.fcx-fac .fo-tabla-facturas td > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcx-fac .fo-tabla-facturas .fo-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; padding-right: 6px; font-size: 10px; }
.fcx-fac .fo-tabla-facturas .fo-col-obra { width: 120px; }
.fcx-fac .fo-tabla-facturas .fo-col-pedido, .fcx-fac .fo-tabla-facturas .fo-col-albaran { width: 96px; }
.fcx-fac .fo-tabla-facturas .fo-col-fecha { width: 96px; }
.fcx-fac .fo-tabla-facturas .fo-col-estado { width: 116px; }
.fcx-fac .fo-tabla-facturas .fo-col-cotejo { width: 152px; }
.fcx-fac .fo-tabla-facturas .fo-col-factura { width: 116px; }
.fcx-fac .fo-tabla-facturas .fo-col-proveedor { width: 115px; }
.fcx-fac .fo-tabla-facturas .fo-col-acciones { width: 52px; }
.fcx-fac .fo-tabla-facturas .fo-id { font-weight: 600; }
.fcx-fac .fo-lista { min-height: 472px; }
.fcx-fac .fo-lista .fo-pie { min-height: 58px; padding-top: 8px; }
.fcx-fac .fo-pie .fo-select { width: 130px; min-height: 32px; }
.fcx-fac .fo-det-cuerpo { grid-template-columns: 175px minmax(0, 1fr); }
.fcx-fac .fo-det-main { padding-left: 13px; padding-top: 10px; }
.fcx-fac .fo-det-h { min-height: 56px; margin-bottom: 10px; }
.fcx-fac .fo-det-h > div:first-child { transform: none; }
.fcx-fac .fo-det-h h2 { font-size: 16px; font-weight: 600; line-height: 20px; }
.fcx-fac .fo-tres .fo-prod b { font-weight: 600; }
.fcx-fac .fo-tres td { font-size: 11px; }
.fcx-fac .fo-acciones { transform: translateY(-8px); }

.fcx-fac .fo-lista { min-height: 430px; }
.fcx-fac .fo-det-cab { height: 64px; }
.fcx-fac .fo-det-h { min-height: 45px; margin-bottom: 0; }
.fcx-fac .fo-lista { min-height: 420px; margin-bottom: 18px; }
.fcx-fac .fo-tabla-facturas td { height: 29px; max-height: 29px; padding-top: 2px; padding-bottom: 2px; }
.fcx-fac .fo-tabla-facturas tr.fo-marcada td { background: var(--sc-danger-bg); }
.fcx-fac .fo-det-botones { width: 302px; grid-template-columns: 138px 116px 32px; grid-auto-rows: 32px; gap: 8px; z-index: 2; }
.fcx-fac .fo-det-botones { top: 14px; }
.fcx-fac .fo-det-botones > :nth-child(2) { grid-column: 2 / 4; }
.fcx-fac .fo-det-botones > :nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
.fcx-fac .fo-det-botones > :nth-child(4) { grid-column: 3; grid-row: 2; }
.fcx-fac .fo-det-botones .fo-boton { min-width: 0; height: 32px; padding-left: 8px; padding-right: 8px; }
.fcx-fac .fo-boton-mas { width: 32px; height: 32px; }
.fcx-fac .fo-tres .fo-miniatura { width: 40px; height: 40px; border: 1px solid var(--sc-border); }
.fcx-fac .fo-tres .fo-prod { gap: 12px; }
.fcx-fac .fo-tres td { height: 50px; }
.fcx-fac .fo-tres .fo-det-accion { width: 32px; text-align: center; }
.fcx-fac .fo-tres .fo-linea-mas { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--sc-text-muted); }
.fcx-fac .fo-tres .fo-linea-mas .ico { width: 16px; height: 16px; }
.fcx-fac .fo-det-h { min-height: 51px; }

/* Ronda 8: anchuras medidas sobre la tabla y el cajón del PNG de factura. */
.fcx-fac .fo-tabla-facturas .fo-col-sel { width: 34px; }
.fcx-fac .fo-tabla-facturas .fo-col-factura { width: 123px; }
.fcx-fac .fo-tabla-facturas .fo-col-proveedor { width: 149px; }
.fcx-fac .fo-tabla-facturas .fo-col-pedido { width: 100px; }
.fcx-fac .fo-tabla-facturas .fo-col-albaran { width: 100px; }
.fcx-fac .fo-tabla-facturas .fo-col-obra { width: 130px; }
.fcx-fac .fo-tabla-facturas .fo-col-importe { width: 98px; }
.fcx-fac .fo-tabla-facturas .fo-col-fecha { width: 101px; }
.fcx-fac .fo-tabla-facturas .fo-col-estado { width: 120px; }
.fcx-fac .fo-tabla-facturas .fo-col-cotejo { width: 156px; }
.fcx-fac .fo-tabla-facturas .fo-col-acciones { width: 58px; }
.fcx-fac .fo-tabla-facturas .fo-id { font-weight: 450; }
.fcx-fac .fo-acciones > .fo-boton:first-child { min-width: 167px; }
.fcx-fac .fo-acciones > .fo-boton:nth-child(2) { min-width: 160px; }
.fcx-fac .fo-det-tit p:first-child { flex-wrap: nowrap; gap: 12px; }
.fcx-fac .fo-det-num { font-size: 20px; font-weight: 700; flex: none; }
.fcx-fac .fo-det-prov { font-size: 12px; font-weight: 400; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcx-fac .fo-det-nav > .on { background: color-mix(in srgb, var(--sc-brand) 3.5%, var(--sc-surface)); }
.fcx-fac .fo-tres td { height: 56px; }
.fcx-fac .fo-detalle { min-height: 354px; }

/* === CX-CAT7 === */
.ccx-catalogo .cat-heroe {
  width: 74%; top: -32px; background: var(--sc-surface); overflow: hidden;
}
.ccx-catalogo .cat-heroe img { position: absolute; inset: 0 auto 0 0; width: 81%; height: 100%; object-fit: cover; object-position: center; }
.ccx-catalogo .cat-cabecera { min-height: 128px; }
.ccx-catalogo .cat-heroe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, transparent 66%, var(--sc-nav-bg) 78%); }
.ccx-catalogo .cat-heroe p { position: relative; z-index: 1; }
.ccx-catalogo .cat-heroe p { border-bottom: 0; }
.ccx-catalogo .cat-heroe p::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 8px; background: var(--sc-brand); }
.ccx-catalogo .cat-teselas { grid-template-columns: .88fr repeat(6, 1fr); }
.ccx-catalogo .cat-tesela { min-height: 96px; }
.ccx-catalogo .cat-tico { margin-bottom: 2px; }
.ccx-catalogo .cat-tico .ico { width: 34px; height: 34px; stroke-width: 1.8; }
.ccx-catalogo .cat-foto { background: var(--sc-bg); border: 1px solid var(--sc-border-strong); border-radius: 50%; }
.ccx-catalogo .cat-foto::after { content: "—"; font-size: 15px; color: var(--sc-text-faint); }
.ccx-catalogo .cat-prod b { display: block; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; }
.ccx-catalogo .cat-tabla th:nth-child(2) { width: 23%; }
.ccx-catalogo .cat-tabla th:nth-child(3) { width: 11%; }
.ccx-catalogo .cat-tabla th:nth-child(4) { width: 11%; }
.ccx-catalogo .cat-tabla th:nth-child(5) { width: 11%; }
.ccx-catalogo .cat-tabla td { height: 51px; }
.ccx-catalogo .cat-lista { margin-top: -6px; }
.ccx-catalogo .cat-lista .fo-filtros { margin-bottom: 3px; }
.ccx-catalogo .cat-tabla { margin-top: -5px; }
.ccx-catalogo .cat-anadir.fo-boton { border-radius: 4px; min-height: 34px; }
.ccx-catalogo .fo-boton.rojo { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); }
.ccx-catalogo .kpis.tira-kpi > * { min-height: 90px; padding-top: 12px; padding-bottom: 10px; }
.ccx-catalogo .kpis.tira-kpi strong { font-size: 23px; line-height: 28px; }
.ccx-catalogo .ccx-pie-catalogo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 44px; padding: 5px 8px; font-size: 11px; color: var(--sc-text-muted); }
.ccx-catalogo .ccx-pie-catalogo nav { display: flex; align-items: center; gap: 6px; }
.ccx-catalogo .ccx-pie-catalogo nav .pag { min-width: 28px; min-height: 28px; display: inline-flex; justify-content: center; align-items: center; border-radius: 5px; text-decoration: none; }
.ccx-catalogo .ccx-pie-catalogo nav .pag.actual { background: var(--sc-brand); color: var(--sc-on-brand); }
.ccx-catalogo .ccx-pie-catalogo nav .ccx-flecha { min-width: 34px; min-height: 34px; border: 1px solid var(--sc-border); border-radius: 4px; background: var(--sc-surface); font-size: 19px; }
.ccx-catalogo .ccx-pie-catalogo nav .ccx-flecha[aria-disabled="true"] { color: var(--sc-text-faint); background: var(--sc-surface-sunk); }
.ccx-catalogo .ccx-pie-catalogo .ccx-por-pagina { justify-self: end; display: flex; align-items: center; gap: 14px; }
.ccx-catalogo .ccx-pie-catalogo .ccx-tamano { justify-self: end; min-width: 122px; padding: 7px 10px; border: 1px solid var(--sc-border-strong); border-radius: 5px; text-align: left; }
.ccx-negociacion { gap: 9px; }
.ccx-negociacion .neg-ventajas { margin-bottom: 7px; }
.ccx-negociacion .titulo-pantalla h1 { font-size: 36px; line-height: 39px; }
.ccx-negociacion .subtitulo { font-size: 15px; line-height: 20px; }
.ccx-negociacion .neg-prov { height: 95px; min-height: 95px; padding: 8px 15px; grid-template-columns: 66px minmax(0,1fr) auto auto; gap: 14px; }
.ccx-negociacion .neg-logo { width: 64px; height: 64px; }
.ccx-negociacion .neg-prov-nom b { font-size: 17px; line-height: 21px; }
.ccx-negociacion .neg-prov .neg-sub { max-width: 560px; font-size: 11px; line-height: 14px; }
.ccx-negociacion .neg-contacto { margin-top: 3px; gap: 3px 18px; font-size: 11px; }
.ccx-negociacion .neg-stats div { padding: 0 12px; }
.ccx-negociacion .neg-prov { grid-template-columns: 66px minmax(0,1fr) 318px auto; }
.ccx-negociacion .neg-stats div { width: 106px; padding: 0 7px; }
.ccx-negociacion .neg-stats div:first-child::before { content: "↑"; position: absolute; margin-left: -13px; color: var(--sc-text-faint); }
.ccx-negociacion .neg-sol { min-height: 125px; padding: 10px 14px; }
.ccx-negociacion .neg-sol-cab { margin-bottom: 5px; }
.ccx-negociacion .neg-sol-id { font-size: 17px; line-height: 20px; }
.ccx-negociacion .neg-sol-prod { font-size: 12px; line-height: 16px; }
.ccx-negociacion .neg-campos dt, .ccx-negociacion .neg-campos dd { font-size: 11px; line-height: 15px; }
.ccx-negociacion .neg-cola { margin-top: 5px; font-size: 10px; }
.ccx-negociacion .neg-card:not(.neg-prov):not(.neg-sol) { padding: 10px 12px; }
.ccx-negociacion .neg-cab { margin-bottom: 6px; min-height: 20px; }
.ccx-negociacion .neg-cab h2, .ccx-negociacion .neg-tres .neg-cab h2 { font-size: 13px; line-height: 17px; font-weight: 600; }
.ccx-negociacion .neg-rejilla { gap: 10px; min-height: 600px; }
.ccx-negociacion .neg-col { gap: 10px; }
.ccx-negociacion .neg-oferta { min-height: 250px; }
.ccx-negociacion .neg-comparativa { min-height: 250px; }
.ccx-negociacion .neg-contra { min-height: 188px; }
.ccx-negociacion .neg-recomendacion { min-height: 341px; }
.ccx-negociacion .neg-acciones { flex: 1 1 auto; min-height: 249px; display: flex; flex-direction: column; }
.ccx-negociacion .neg-acciones .neg-botones { flex: 1; justify-content: space-between; }
.ccx-negociacion .neg-cajas div { padding: 7px 9px; }
.ccx-negociacion .neg-cajas b { font-size: 19px; line-height: 24px; }
.ccx-negociacion .neg-tabla td { height: 28px; padding-top: 2px; padding-bottom: 2px; }
.ccx-negociacion .neg-comp { table-layout: fixed; }
.ccx-negociacion .neg-comp th:first-child, .ccx-negociacion .neg-comp td:first-child { width: 132px; }
.ccx-negociacion .neg-comp td:first-child { line-height: 16px; overflow: hidden; text-overflow: ellipsis; }
.ccx-negociacion .neg-objetivos { margin: 6px 0; gap: 4px; }
.ccx-negociacion .neg-args { padding: 7px 10px; }
.ccx-negociacion .neg-vacio { padding: 16px 0; margin-bottom: 6px; border: 0; border-radius: 0; }
.ccx-negociacion .neg-caja-texto { min-height: 34px; border-color: var(--sc-border); border-radius: 4px; }
.ccx-negociacion .neg-botones { gap: 5px; }
.ccx-negociacion .neg-botones .boton.neg-off { min-height: 30px; }
.ccx-negociacion .neg-botones .boton.sec { background: var(--sc-surface-sunk); border-color: var(--sc-surface-sunk); border-radius: 4px; }
.ccx-negociacion .neg-botones .boton .ic { margin-right: 8px; }
.ccx-negociacion .neg-estado { border-radius: 8px; min-width: 126px; justify-content: center; }
.ccx-negociacion .boton.neg-prim { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); }
.ccx-negociacion .boton.neg-ok { background: var(--sc-ok-fg); border-color: var(--sc-ok-fg); color: var(--sc-on-brand); opacity: 1; }
.ccx-correo .titulo-pantalla h1 { font-size: 36px; line-height: 40px; }
.ccx-correo .neg-ventajas { margin-bottom: 12px; }
.ccx-correo .neg-tres { grid-template-columns: 372fr 538fr 284fr; }
.ccx-correo .neg-tres { min-height: 820px; }
.ccx-correo .neg-buzon, .ccx-correo .neg-conv { min-height: 820px; }
.ccx-correo .neg-col { min-height: 820px; }
.ccx-correo .neg-col .neg-card { flex: 1 1 0; padding: 10px 12px; }
.ccx-correo .ccx-carril-vacio { display: grid; grid-template-rows: 207px 167px 79px 197px 130px; gap: 10px; }
.ccx-correo .ccx-carril-vacio .neg-card { min-height: 0; padding: 10px 12px; overflow: hidden; }
.ccx-correo .neg-col .neg-cab { margin-bottom: 4px; }
.ccx-correo .neg-col .neg-vacio { padding: 16px; margin: 0; font-size: 11px; border: 0; text-align: left; }
.ccx-correo .neg-cab h2 { font-size: 13px; }
.ccx-correo .ccx-aviso-correo { margin: 0 0 10px; font-size: 11px; line-height: 16px; color: var(--sc-text-muted); }
.ccx-correo .ccx-conv-cab-vacia { display: flex; align-items: center; gap: 10px; min-height: 65px; padding-bottom: 9px; border-bottom: 1px solid var(--sc-border); }
.ccx-correo .neg-conv { padding-top: 15px; }
.ccx-correo .ccx-conv-cab-vacia { min-height: 52px; align-items: flex-start; }
.ccx-correo .neg-conv-cab { align-items: flex-start; }
.ccx-correo .ccx-conv-cab-vacia > div:nth-child(2) { flex: 1; min-width: 0; }
.ccx-correo .ccx-conv-cab-vacia .neg-conv-nom { display: block; font-size: 15px; line-height: 20px; }
.ccx-correo .ccx-conv-cab-vacia .neg-sub { display: block; font-size: 11px; }
.ccx-correo .ccx-conv-cab-vacia .neg-conv-bot .boton { min-height: 32px; padding: 4px 8px; }
.ccx-correo .ccx-aviso-correo { margin: 0; width: 18px; height: 18px; border: 1px solid var(--sc-border); border-radius: 50%; text-align: center; font-size: 12px; line-height: 16px; }
.ccx-correo .neg-buscar { display: grid; grid-template-columns: 1fr 34px; gap: 8px; margin-bottom: 8px; }
.ccx-correo .ccx-busqueda { min-width: 0; }
.ccx-correo .ccx-busqueda .neg-caja-texto { min-width: 0; width: 100%; }
.ccx-correo .neg-buscar select { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.ccx-correo .neg-filtrar { width: 34px; padding: 6px; }
.ccx-correo .neg-pestanas { gap: 5px; }
.ccx-correo .neg-pestanas a, .ccx-correo .neg-pest-off { min-height: 28px; padding: 4px 6px; }
.ccx-correo .neg-redactar-correo { padding-top: 6px; gap: 3px; margin-bottom: -15px; }
.ccx-correo .neg-tabs-resp { gap: 12px; border-bottom: 1px solid var(--sc-border); }
.ccx-correo .neg-tabs-resp .neg-pest-off { border: 0; border-radius: 0; background: transparent; min-height: 34px; padding: 4px 10px; }
.ccx-correo .neg-tabs-resp .neg-pest-off.activa { border-bottom: 3px solid var(--sc-brand); color: var(--sc-brand); }
.ccx-correo .neg-redactar-pie .ccx-editor-tool { min-width: 28px; min-height: 28px; padding: 4px; }
.ccx-correo .neg-area { border-color: var(--sc-border); border-radius: 4px; }
.ccx-correo .neg-redactar-pie .boton.neg-off { min-height: 32px; }
.ccx-correo .neg-area { min-height: 41px; }
.ccx-correo .neg-sugeridas { padding: 10px 12px; background: var(--sc-violet-bg); border: 1px solid var(--sc-border); border-radius: 6px; }
.ccx-correo .neg-sugeridas b { color: var(--sc-violet-fg); }
.ccx-correo .neg-sugeridas b { margin-bottom: 4px; }
.ccx-correo .neg-sugeridas div { flex-wrap: nowrap; gap: 4px; }
.ccx-correo .neg-sugeridas .chip { min-height: 25px; font-size: 10px; padding: 2px 5px; white-space: nowrap; }
.ccx-correo .ccx-nueva { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); opacity: 1; min-height: 36px; }
.ccx-correo .neg-redactar-pie .boton.neg-prim { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); }
.ccx-correo .ccx-nueva::after { content: "⌄"; padding-left: 9px; margin-left: 7px; border-left: 1px solid var(--sc-on-brand); }
@media (max-width: 1100px) {
  .ccx-correo .neg-tres, .ccx-correo .neg-buzon, .ccx-correo .neg-conv, .ccx-correo .neg-col { min-height: 0; }
  .ccx-correo .ccx-carril-vacio { display: flex; }
  .ccx-negociacion .neg-prov { height: auto; }
  .ccx-negociacion .neg-oferta, .ccx-negociacion .neg-comparativa, .ccx-negociacion .neg-contra, .ccx-negociacion .neg-recomendacion, .ccx-negociacion .neg-acciones { min-height: 0; }
}


/* Ronda 8: ajustes medidos en las tres capturas 1448 × 1086. */
.ccx-catalogo .cat-heroe { width: 74%; top: -32px; }
.ccx-catalogo .cat-heroe img { width: 81%; object-position: 55% center; }
.ccx-catalogo .cat-tesela b { font-size: 13px; font-weight: 600; line-height: 16px; text-transform: none; }
.ccx-catalogo .cat-tesela b::first-letter { text-transform: uppercase; }
.ccx-catalogo .cat-tesela > span:last-child { font-size: 11px; font-weight: 400; line-height: 15px; }
.ccx-catalogo .cat-tico .ico { width: 28px; height: 28px; }
.ccx-catalogo .cat-tabla td { height: 53px; }
.ccx-catalogo .ccx-pie-catalogo nav .pag:not(.actual) { color: var(--sc-text-muted); }
.ccx-catalogo .ccx-pie-catalogo nav .ccx-flecha:not([aria-disabled="true"]) { color: var(--sc-text-muted); }
.ccx-catalogo .ccx-tamano { display: inline-flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 32px; padding-right: 7px; }
.ccx-catalogo .ccx-chevron { font-size: 17px; line-height: 12px; color: var(--sc-text-muted); }
.ccx-catalogo .cat-prod { gap: 11px; }
.ccx-catalogo .cat-foto { width: 48px; height: 38px; }
.ccx-catalogo .cat-tabla { table-layout: fixed; margin-top: -5px; }
.ccx-catalogo .cat-tabla :is(th, td):nth-child(1) { width: 38px; }
.ccx-catalogo .cat-tabla :is(th, td):nth-child(2) { width: 22%; }
.ccx-catalogo .cat-tabla :is(th, td):nth-child(3) { width: 11%; }
.ccx-catalogo .cat-tabla :is(th, td):nth-child(4) { width: 11%; }
.ccx-catalogo .cat-tabla :is(th, td):nth-child(5) { width: 11%; }
.ccx-catalogo .cat-tabla :is(th, td):nth-child(6) { width: 12%; }
.ccx-catalogo .cat-tabla :is(th, td):nth-child(7) { width: 13%; }
.ccx-catalogo .cat-tabla td:nth-child(2) { padding-left: 28px; }
.ccx-catalogo .cat-prod > span:last-child { min-width: 0; }
.ccx-catalogo .cat-prod b { max-width: 180px; }
.ccx-catalogo .ccx-tamano { min-width: 100px; }
.ccx-catalogo .ccx-por-pagina { gap: 18px; }
.ccx-negociacion .neg-fila2 { margin-top: 4px; }
.ccx-negociacion .neg-accion { transform: translateY(-14px); }
.ccx-negociacion .neg-estado.verde { background: var(--sc-ok-bg); color: var(--sc-ok-fg); }
.ccx-negociacion .neg-estado.verde::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-ok-fg); margin-right: 7px; }
.ccx-negociacion .neg-campos { padding: 2px 0; }
.ccx-negociacion .neg-contra { display: flex; flex-direction: column; }
.ccx-negociacion .neg-contra .neg-centro { margin: auto -12px -10px; min-height: 27px; padding-top: 3px; border-top: 1px solid var(--sc-border); }
.ccx-negociacion .neg-contra .neg-centro .neg-off { display: inline-flex; align-items: center; justify-content: center; min-height: 27px; border: 1px solid var(--sc-border); border-radius: 4px; padding: 3px 10px; }
.ccx-negociacion .neg-contra .neg-centro .neg-off::after { content: "→"; color: inherit; margin-left: 6px; }
.ccx-negociacion .neg-comp th { padding-left: 4px; padding-right: 4px; font-size: 10px; }
.ccx-negociacion .neg-comp th:first-child, .ccx-negociacion .neg-comp td:first-child { width: 136px; }
.ccx-negociacion .neg-comp td:first-child { max-width: 136px; white-space: nowrap; }
.ccx-negociacion .neg-par .boton { padding-left: 8px; padding-right: 8px; white-space: nowrap; font-size: 11px; }
.ccx-negociacion .neg-par .boton .ic { margin-right: 6px; }
.ccx-negociacion .ccx-cola-detalle { position: relative; font-size: 11px; color: var(--sc-text-muted); }
.ccx-negociacion .ccx-cola-detalle summary { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; cursor: pointer; border: 1px solid var(--sc-border); border-radius: 5px; background: var(--sc-surface); list-style: none; }
.ccx-negociacion .ccx-cola-detalle summary::-webkit-details-marker { display: none; }
.ccx-negociacion .ccx-cola-detalle ul { position: absolute; z-index: 5; top: 34px; right: 0; display: flex; flex-direction: column; gap: 5px; min-width: 180px; margin: 0; padding: 10px 20px; border: 1px solid var(--sc-border); border-radius: 5px; background: var(--sc-surface); box-shadow: var(--sc-shadow-card); }
.ccx-negociacion .neg-args { padding: 12px; }
.ccx-negociacion .ccx-enviar-dividido, .ccx-correo .ccx-enviar-dividido { min-height: 32px; padding-right: 0; overflow: hidden; }
.ccx-negociacion .ccx-enviar-dividido::after, .ccx-correo .ccx-enviar-dividido::after { content: "⌄"; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; width: 26px; margin-left: 8px; border-left: 1px solid var(--sc-on-brand); font-size: 13px; }
.ccx-correo .titulo-accion { transform: translateY(-14px); }
.ccx-correo .ccx-nueva { width: 210px; justify-content: space-between; white-space: nowrap; padding-left: 12px; padding-right: 0; font-size: 12px; }
.ccx-correo .neg-buzon .neg-cab { margin-bottom: 7px; }
.ccx-correo .neg-buzon .neg-buscar { margin-top: 0; margin-bottom: 1px; }
.ccx-correo .neg-buzon .neg-pestanas { margin-bottom: 10px; }
.ccx-correo .neg-conv { padding-top: 7px; }
.ccx-correo .neg-conv > .neg-vacio { padding: 16px 0; border: 0; text-align: left; }
.ccx-correo .neg-tabs-resp .neg-pest-off.activa { min-width: 80px; }
.ccx-correo .neg-sugeridas { margin-bottom: 9px; padding: 10px; }
.ccx-correo .neg-sugeridas div { gap: 8px; }
.ccx-correo .neg-sugeridas .chip { min-height: 25px; border: 1px solid var(--sc-border-control); border-radius: 4px; }
.ccx-correo .neg-buzon .neg-hic .ic { fill: var(--sc-brand); stroke: var(--sc-brand); }
@media (max-width: 1100px) {
  .ccx-correo .titulo-accion, .ccx-negociacion .neg-accion { transform: none; }
  .ccx-catalogo .cat-tabla { min-width: 980px; }
}
.ccx-catalogo .cat-cabecera .titulo-pantalla { position: relative; z-index: 2; }
.ccx-catalogo .cat-heroe::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--sc-surface) 0%, transparent 45%); }

/* === CX-APAGADO === */
.cx-apagado .boton.neg-off.neg-prim,
.cx-apagado .boton.neg-off.neg-ok { opacity: .62; cursor: not-allowed; }
.cx-apagado .neg-redactar-pie .boton.neg-off.neg-prim { opacity: .62; }

/* === CX-CORE-A6 === */
.cx-a6-nueva { margin-top: -11px; position: relative; top: 3px; }
.cx-a6-nueva .ns-izq, .cx-a6-nueva .ns-der { gap: 11px; }
.cx-a6-nueva .ns-izq > .ns-seccion:first-child { height: 203px; }
.cx-a6-nueva .ns-izq > .ns-seccion:nth-child(3) { min-height: 179px; position: relative; }
.cx-a6-nueva .ns-seccion, .cx-a6-nueva .ns-lado, .cx-a6-lista .sol-card { border-radius: 6px; box-shadow: var(--sc-shadow-card); }
.cx-a6-nueva .ns-seccion, .cx-a6-nueva .ns-lado { padding: 12px 16px; }
.cx-a6-nueva .ns-cab { margin-bottom: 8px; }
.cx-a6-nueva .ns-rejilla-campos { grid-template-columns: 1.08fr 1fr 1fr; gap: 8px 18px; }
.cx-a6-nueva .ns-rejilla-campos .ns-campo > label, .cx-a6-nueva .ns-rejilla-campos .ns-rot { margin: 2px 0 4px; font-size: 12px; }
.cx-a6-nueva .ns-rejilla-campos input, .cx-a6-nueva .ns-rejilla-campos select, .cx-a6-nueva .ns-rejilla-campos .ns-valor { min-height: 40px; height: 40px; font-size: 12px; border-color: var(--sc-border); }
.cx-a6-nueva .ns-persona { padding: 3px 8px; }
.cx-a6-nueva .ns-persona .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-a6-nueva .cx-a6-destino { display: flex; gap: 5px; }
.cx-a6-nueva .cx-a6-destino select { flex: 0 0 70px; padding: 4px; }
.cx-a6-nueva .cx-a6-destino input { min-width: 0; flex: 1; }
.cx-a6-nueva .cx-a6-destino input[name=ubicacion_stock] { display: none; }
.cx-a6-nueva .cx-a6-destino:has(option[value=STOCK]:checked) input[name=obra] { display: none; }
.cx-a6-nueva .cx-a6-destino:has(option[value=STOCK]:checked) input[name=ubicacion_stock] { display: block; }
.cx-a6-nueva .ns-linea { grid-template-columns: 20px minmax(0,1fr) 115px 70px 65px 98px 86px 64px; gap: 7px; padding: 6px 5px; }
.cx-a6-nueva .ns-linea input { min-height: 32px; }
.cx-a6-nueva .ns-th { padding: 7px 5px; }
.cx-a6-nueva .ns-lineas { margin-top: 4px; }
.cx-a6-nueva .ns-izq > .ns-seccion:nth-child(2) { min-height: 348px; }
.cx-a6-nueva .ns-izq > .ns-seccion:nth-child(2) .ns-lineas { min-height: 225px; }
.cx-a6-nueva .ns-anadir { min-height: 46px; margin: 8px 0 0; padding: 7px 12px; border-radius: 6px; }
.cx-a6-nueva .ns-cab-acc { gap: 8px; }
.cx-a6-nueva .ns-cab-acc > * { min-height: 32px; }
.cx-a6-nueva .ns-dos textarea, .cx-a6-nueva .ns-dos .ns-soltar { min-height: 74px; height: 74px; }
.cx-a6-nueva .ns-dos .ns-soltar { width: 100%; justify-content: center; font-size: 12px; }
.cx-a6-nueva .ns-par { padding: 6px 0; }
.cx-a6-nueva .ns-total { margin-top: 7px; padding: 9px 12px; min-height: 40px; }
.cx-a6-nueva .ns-lado h3 { margin-bottom: 7px; }
.cx-a6-nueva .ns-lado .meta { font-size: 11px; }
.cx-a6-nueva .ns-lado.cx-a6-prov .sol-prov { margin: 5px 0 8px; padding: 5px; min-height: 58px; }
.cx-a6-nueva .cx-a6-prov > label { display: block; margin: 4px 0 2px; font-size: 11px; color: var(--sc-text-muted); }
.cx-a6-nueva .cx-a6-prov > select { height: 30px; min-height: 30px; padding: 3px 8px; font-size: 12px; border-color: var(--sc-border); }
.cx-a6-nueva .cx-a6-prov .cx-a6-elegir { margin: 3px 0; font-size: 11px; }
.cx-a6-nueva .cx-a6-prov .cx-a6-elegir summary { color: var(--sc-brand); cursor: pointer; padding: 3px 0; }
.cx-a6-nueva .cx-a6-prov .cx-a6-elegir label { display: block; margin: 3px 0; color: var(--sc-text-muted); }
.cx-a6-nueva .cx-a6-prov .cx-a6-elegir select { width: 100%; min-height: 28px; height: 28px; padding: 3px 8px; font-size: 11px; }
.cx-a6-nueva .cx-a6-prov { height: 277px; }
.cx-a6-nueva .cx-a6-prov .sol-prov { min-height: 54px; }
.cx-a6-nueva .cx-a6-prov .ns-ver { min-height: 30px; margin-top: 7px; }
.cx-a6-nueva .ns-par2 { padding: 2px 0; }
.cx-a6-nueva .ns-par2 .ns-valor { min-height: 26px; padding: 3px 8px; }
.cx-a6-nueva .ns-siguiente p { margin: 0 0 0 34px; line-height: 16px; }
.cx-a6-nueva .ns-der > .ns-lado:first-child { height: 218px; }
.cx-a6-nueva .ns-der > .ns-lado:nth-child(3) { min-height: 218px; }
.cx-a6-nueva .cx-a6-flujo-cab { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cx-a6-nueva .cx-a6-flujo-cab > .ns-valor { min-height: 28px; padding: 4px 8px; flex: 0 1 310px; }
.cx-a6-nueva .cx-a6-flujo-cab > :last-child { margin-left: auto; min-height: 27px; }
.cx-a6-nueva .ns-etapas { margin-top: 10px; }
.cx-a6-nueva .ns-izq > .ns-seccion:last-child { min-height: 129px; position: relative; padding-top: 6px; }
.cx-a6-nueva .ns-izq > .ns-seccion:last-child .ns-cab { margin-bottom: 1px; }
.cx-a6-nueva .cx-a6-modalidad { position: absolute; left: 480px; top: 41px; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; color: var(--sc-text-muted); }
.cx-a6-nueva .cx-a6-modalidad select { min-height: 28px; height: 28px; padding: 3px 8px; font-size: 11px; }
.cx-a6-lista .sol-filtros select, .cx-a6-lista .sol-filtros input { border: 1px solid var(--sc-border); border-radius: 5px; min-height: 31px; height: 31px; }
.cx-a6-lista .sol-filtros { gap: 8px 10px; }
.cx-a6-lista .sol-filtros { margin-bottom: 8px; }
.cx-a6-lista .sol-mas { border-color: var(--sc-border); border-radius: 5px; min-height: 31px; height: 31px; }
.cx-a6-lista .tsolicitudes col.c-desc { width: 112px; }
.cx-a6-lista .tsolicitudes col.c-sol { width: 91px; }
.cx-a6-lista .tsolicitudes col.c-obra { width: 65px; }
.cx-a6-lista .tsolicitudes col.c-id { width: 106px; }
.cx-a6-lista .tsolicitudes col.c-prov { width: 99px; }
.cx-a6-lista .tsolicitudes td, .cx-a6-lista .tsolicitudes th { font-size: 11px; }
.cx-a6-lista .tsolicitudes td { height: 47px; }
.cx-a6-lista .sol-tabla { margin-top: -3px; }
.cx-a6-lista .sol-panel-tit { font-size: 21px; line-height: 27px; margin-top: 19px; }
.cx-a6-lista .sol-panel-desc { font-size: 13px; line-height: 18px; min-height: 36px; margin-bottom: 13px; }
.cx-a6-lista .sol-tabs { gap: 17px; font-size: 12px; }
.cx-a6-lista .sol-card { margin-bottom: 12px; padding: 11px 13px; }
.cx-a6-lista .sol-card:nth-of-type(1) { height: 274px; }
.cx-a6-lista .sol-card:nth-of-type(2) { height: 141px; }
.cx-a6-lista .sol-card:nth-of-type(3) { height: 103px; }
.cx-a6-lista .sol-card:nth-of-type(4) { height: 168px; }
.cx-a6-lista .sol-card h3 { margin-bottom: 6px; }
.cx-a6-lista .sol-datos { gap: 3px 17px; }
.cx-a6-lista .sol-dato { height: 48px; padding-bottom: 1px; }
.cx-a6-lista .sol-prov { min-height: 64px; }
.cx-a6-lista .sol-card .sol-prov { min-height: 54px; }
.cx-a6-lista .sol-prov .sol-logo { flex-basis: 60px; height: 60px; }
.cx-a6-lista .sol-cambiar { margin-top: 2px; min-height: 27px; }
.cx-a6-lista .sol-panel-acc { gap: 8px; padding-top: 18px; }
.cx-a6-lista .sol-panel-acc > :first-child { flex: 0 0 132px; justify-content: center; min-height: 40px; }
.cx-a6-lista .sol-panel-acc > :nth-child(2) { flex: 0 0 104px; justify-content: center; min-height: 40px; }
.cx-a6-lista .sol-panel-acc > .solo-icono { flex: 0 0 46px; }
@media(max-width:1100px) { .cx-a6-nueva .ns-rejilla-campos { grid-template-columns: repeat(2,minmax(0,1fr)); } .cx-a6-nueva .cx-a6-modalidad { position: static; margin-top: 8px; } }
@media(max-width:720px) { .cx-a6-nueva .ns-rejilla-campos { grid-template-columns: 1fr; } .cx-a6-nueva .ns-lineas { overflow-x: auto; } .cx-a6-nueva .ns-linea { min-width: 780px; } }


/* Ajustes medidos en los dos cuerpos a 1448 × 1086. */
.cx-a6-nueva .cx-a6-destino { height: 42px; align-items: center; gap: 0; border: 1px solid var(--sc-border); border-radius: 6px; overflow: hidden; }
.cx-a6-nueva .cx-a6-destino select { flex: 0 0 70px; height: 40px; min-height: 40px; border: 0; border-right: 1px solid var(--sc-border); border-radius: 0; }
.cx-a6-nueva .cx-a6-obra-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; color: var(--sc-text-muted); }
.cx-a6-nueva .cx-a6-obra-ico .ic { width: 18px; height: 18px; }
.cx-a6-nueva .cx-a6-destino input { border: 0; height: 40px; min-height: 40px; padding-left: 2px; }
.cx-a6-nueva .cx-a6-destino:focus-within { outline: 2px solid var(--sc-brand); outline-offset: 2px; }
.cx-a6-nueva .ns-rejilla-campos .cx-a6-modalidad { position: relative; left: auto; top: auto; display: block; margin: 2px 0 0; font-size: 10px; line-height: 12px; }
.cx-a6-nueva .cx-a6-modalidad summary { cursor: pointer; color: var(--sc-text-muted); }
.cx-a6-nueva .cx-a6-modalidad select { position: absolute; z-index: 3; width: 180px; top: 15px; left: 0; min-height: 32px; background: var(--sc-surface); box-shadow: var(--sc-shadow-card); }
.cx-a6-nueva .ns-linea { grid-template-columns: 20px minmax(0,1fr) 115px 70px 65px 98px 86px 64px; gap: 7px; }
.cx-a6-nueva .ns-linea input { border: 1px solid var(--sc-border); border-radius: 6px; min-height: 33px; height: 33px; padding: 5px 8px; }
.cx-a6-nueva .ns-linea input:focus-visible { border-color: var(--sc-brand); outline: 2px solid var(--sc-brand); outline-offset: 1px; }
.cx-a6-nueva .ns-soltar { background: var(--sc-surface); border: 1px dashed var(--sc-border); }
.cx-a6-nueva .cx-a6-flujo-cab > .cx-a6-detalle { margin-left: auto; color: var(--sc-brand); border: 0; background: none; font-size: 12px; padding: 0; }
.cx-a6-nueva .cx-a6-prov { position: relative; }
.cx-a6-nueva .cx-a6-prov .cx-a6-elegir { position: absolute; top: 10px; right: 14px; margin: 0; max-width: 145px; z-index: 2; }
.cx-a6-nueva .cx-a6-prov .cx-a6-elegir summary { border: 1px solid var(--sc-border); border-radius: 5px; padding: 4px 7px; background: var(--sc-surface); font-size: 11px; }
.cx-a6-nueva .cx-a6-prov .cx-a6-elegir[open] { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: 6px; padding: 4px; box-shadow: var(--sc-shadow-card); max-width: 240px; }
.cx-a6-lista .sol-mas { width: 124px; }
.cx-a6-lista .sol-prov { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 10px; align-items: center; }
.cx-a6-lista .sol-prov .sol-logo { flex-basis: auto; width: 48px; height: 48px; }
.cx-a6-lista .sol-prov-identidad { min-width: 0; }
.cx-a6-lista .sol-coincidencia { font-size: 10px; color: var(--sc-text-muted); white-space: nowrap; align-self: start; }
.cx-a6-lista .sol-card:nth-of-type(4) { height: 168px; }
.cx-a6-lista .sol-panel { display: flex; flex-direction: column; }
.cx-a6-lista .sol-panel-acc { margin-top: auto; }
.cx-a6-lista .tsolicitudes td:nth-child(4),
.cx-a6-lista .tsolicitudes td:nth-child(5),
.cx-a6-lista .tsolicitudes td:nth-child(6) {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-a6-lista .tsolicitudes td:nth-child(5) { display: table-cell; }
.cx-a6-lista .tsolicitudes .sol-desc { line-height: 15px; max-height: 31px; }
.cx-a6-lista .tsolicitudes .chip.prov { vertical-align: middle; white-space: nowrap; }
.cx-a6-lista .sol-panel-acc > .solo-icono { width: 46px; }
.cx-a6-nueva .ns-acc { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.cx-a6-nueva .ns-quitar { width: 28px; min-height: 28px; padding: 4px; }
.cx-a6-nueva .ns-quitar:disabled { opacity: .55; }
.cx-a6-nueva .ns-quitar-inactivo { display: inline-flex; align-items: center; justify-content: center; color: var(--sc-brand); opacity: .55; }
.cx-a6-nueva .cx-a6-campo-icono { position: relative; }
.cx-a6-nueva .cx-a6-campo-icono > .ic { position: absolute; width: 18px; height: 18px; left: 12px; top: 11px; color: var(--sc-text-muted); pointer-events: none; }
.cx-a6-nueva .cx-a6-campo-icono > :is(input, .ns-valor) { padding-left: 40px; }
.cx-a6-nueva .ns-asa { width: 22px; text-align: center; font-size: 18px; color: var(--sc-text-muted); }
.cx-a6-nueva .ns-izq > .ns-seccion:last-child .ns-etapas { gap: 0; }
.cx-a6-nueva .ns-izq > .ns-seccion:last-child .ns-etapas li { gap: 14px; }
.cx-a6-nueva .ns-dos textarea { border: 1px solid var(--sc-border); border-radius: 6px; }
.cx-a6-lista .sol-adjuntos { padding: 10px 13px; }
.cx-a6-lista .sol-adjuntos h3 { margin-bottom: 7px; }
.cx-a6-lista .sol-adjuntos-ver { margin-left: auto; font-size: 11px; color: var(--sc-text-muted); }
.cx-a6-lista .sol-panel-acc { align-items: center; }
.cx-a6-lista .sol-panel-acc > :first-child { background: var(--sc-brand); color: var(--sc-on-brand); opacity: .6; }
.cx-a6-lista .sol-panel-acc > :nth-child(2) { background: var(--sc-surface); }
.cx-a6-lista .sol-acciones-menu { position: relative; margin-left: auto; }
.cx-a6-lista .sol-acciones-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 40px; }
.cx-a6-lista .sol-acciones-menu summary::-webkit-details-marker { display: none; }
.cx-a6-lista .sol-acciones-menu summary:focus-visible { outline: 2px solid var(--sc-brand); }
.cx-a6-lista .sol-acciones-opciones { position: absolute; right: 0; bottom: 43px; z-index: 5; width: 210px; padding: 10px; background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: 6px; box-shadow: var(--sc-shadow-card); font-size: 12px; }
.cx-a6-lista .sol-acciones-opciones a { color: var(--sc-brand); }
.cx-a6-lista .sol-acciones-opciones > * { display: block; padding: 5px 3px; }
@media(max-width:720px) { .cx-a6-nueva .ns-linea { min-width: 780px; } .cx-a6-nueva .cx-a6-prov .cx-a6-elegir { position: static; max-width: none; } }
.cx-a6-lista .tsolicitudes col.c-id { width: 84px; }
.cx-a6-lista .tsolicitudes col.c-desc { width: 135px; }
.cx-a6-lista .tsolicitudes .sol-id { overflow: hidden; text-overflow: ellipsis; }
.cx-a6-lista .tsolicitudes .sol-desc { max-width: 135px; }
.cx-a6-lista .sol-mas { border: 1px solid var(--sc-border-strong); }
.cx-a6-lista .sol-panel-acc { padding-bottom: 4px; }
.cx-a6-lista .sol-panel > .sol-card:first-of-type { margin-top: 2px; }
.cx-a6-lista .cx-a6-adjuntos-vacios { display: grid; gap: 0; margin-top: 7px; color: var(--sc-text-muted); font-size: 11px; }
.cx-a6-lista .cx-a6-adjuntos-vacios span { display: block; height: 25px; padding: 4px 8px 4px 31px; border-top: 1px solid var(--sc-border); }
.cx-a6-nueva .cx-a6-destino { display: grid; grid-template-columns: 42px 27px minmax(0,1fr); position: relative; gap: 0; }
.cx-a6-nueva .cx-a6-destino select { grid-column: 1; width: 42px; font-size: 0; color: transparent; }
.cx-a6-nueva .cx-a6-destino select:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: -2px; }
.cx-a6-nueva .cx-a6-destino::after { content: "⌄"; position: absolute; right: 11px; top: 8px; color: var(--sc-text-muted); font-size: 15px; pointer-events: none; }
.cx-a6-nueva .cx-a6-obra-ico { grid-column: 2; width: 27px; }
.cx-a6-nueva .cx-a6-obra-campo { grid-column: 3; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.cx-a6-nueva .cx-a6-obra-campo input { height: 21px; min-height: 21px; width: 100%; padding: 0 5px; font-size: 12px; }
.cx-a6-nueva .cx-a6-obra-campo small { padding-left: 5px; line-height: 13px; color: var(--sc-text-muted); font-size: 10px; }
.cx-a6-nueva .cx-a6-destino:has(option[value=STOCK]:checked) .cx-a6-obra-campo { display: none; }
.cx-a6-nueva .cx-a6-destino input[name=ubicacion_stock] { grid-column: 3; }
.cx-a6-nueva .ns-linea { grid-template-columns: 20px minmax(205px,1fr) 115px 70px 65px 98px 86px 64px; }
.cx-a6-nueva .ns-acc { min-width: 64px; }
.cx-a6-nueva .ns-dos .ns-soltar { display: flex; flex-wrap: wrap; align-content: center; gap: 3px 8px; }
.cx-a6-nueva .ns-soltar > span { display: block; }
.cx-a6-nueva .ns-soltar b { color: var(--sc-brand); font-weight: 600; }
.cx-a6-nueva .ns-soltar small { display: block; flex-basis: 100%; font-size: 10px; color: var(--sc-text-muted); }
/* B1.2 · la carga real del alta: crece con su contenido en vez de desbordar. */
.cx-a6-nueva .ns-dos .ns-soltar.ns-subir { height: auto; min-height: 74px; padding: 6px 8px; }
.cx-a6-nueva .ns-subir input[type=file] { min-width: 0; max-width: 100%; font-size: 11px; }
.cx-a6-nueva .cx-a6-limite { position: absolute; bottom: 9px; right: 16px; color: var(--sc-text-muted); font-size: 10px; }
.cx-a6-nueva .cx-a6-modalidad { font-size: 11px; line-height: 15px; margin-top: 4px; }
.cx-a6-nueva .cx-a6-prov .cx-a6-elegir { position: static; max-width: none; margin: 4px 0 8px; }
.cx-a6-nueva .cx-a6-prov .cx-a6-elegir summary { list-style: none; border: 0; background: none; padding: 0; }
.cx-a6-nueva .cx-a6-prov .cx-a6-elegir summary::-webkit-details-marker { display: none; }
.cx-a6-nueva .cx-a6-prov .cx-a6-elegir summary:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; }
.cx-a6-nueva .cx-a6-prov .cx-a6-elegir .sol-prov { margin: 0; cursor: pointer; display: flex; align-items: center; color: var(--sc-text); }
.cx-a6-nueva .cx-a6-elegir-indicador { margin-left: auto; font-size: 15px; color: var(--sc-brand); }
.cx-a6-nueva .cx-a6-prov .cx-a6-elegir[open] { position: relative; top: auto; right: auto; max-width: none; padding: 0; box-shadow: none; }
.cx-a6-nueva .cx-a6-elegir-campos { position: absolute; top: 64px; right: 0; z-index: 4; width: 240px; padding: 8px; background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: 6px; box-shadow: var(--sc-shadow-card); }
.cx-a6-entrar .entrar-campo input { background: var(--sc-surface); border: 1px solid var(--sc-border-strong); border-radius: 8px; }
.cx-a6-entrar .entrar-hero { transform: translateY(-4px); line-height: 46px; }
.cx-a6-entrar .entrar-copy { margin-top: 15px; }
.cx-a6-entrar .entrar-ayuda { column-gap: 22px; }
.cx-a6-entrar .entrar-ayuda > div + div { padding-left: 22px; }
.cx-a6-entrar .entrar-soporte { font-size: 11px; line-height: 15px; }
.cx-a6-entrar .entrar-sso { min-height: 66px; height: 66px; }
.cx-a6-entrar .entrar-pie { padding-bottom: 13px; }

/* Ronda 8: medidas del montaje de 1448 × 1086, solo cuerpos de CX-CORE-A5. */
.cx-a6-nueva { grid-template-columns: minmax(0, 1fr) 344px; gap: 12px; margin-right: 2px; }
.cx-a6-lista .sol-tabla { margin-top: 5px; min-height: 630px; }
.cx-a6-lista .sol-tabla .tw { overflow: visible; }
.cx-a6-lista .tsolicitudes { width: 100%; min-width: 0; font-size: 10px; }
.cx-a6-lista .tsolicitudes col.c-sel { width: 26px; }
.cx-a6-lista .tsolicitudes col.c-id { width: 88px; }
.cx-a6-lista .tsolicitudes col.c-desc { width: 113px; }
.cx-a6-lista .tsolicitudes col.c-obra { width: 51px; }
.cx-a6-lista .tsolicitudes col.c-sol { width: 70px; }
.cx-a6-lista .tsolicitudes col.c-prov { width: 87px; }
.cx-a6-lista .tsolicitudes col.c-imp { width: 88px; }
.cx-a6-lista .tsolicitudes col.c-fecha { width: 67px; }
.cx-a6-lista .tsolicitudes col.c-est { width: 102px; }
.cx-a6-lista .tsolicitudes col.c-prio { width: 65px; }
.cx-a6-lista .tsolicitudes col.c-mas { width: 34px; }
.cx-a6-lista .tsolicitudes th { height: 40px; padding: 5px 4px; font-size: 10px; line-height: 13px; white-space: nowrap; }
.cx-a6-lista .tsolicitudes td { height: 47px; padding: 3px 4px; }
.cx-a6-lista .tsolicitudes .sol-desc { max-width: 113px; line-height: 15px; }
.cx-a6-lista .tsolicitudes td:nth-child(4),
.cx-a6-lista .tsolicitudes td:nth-child(5) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-a6-lista .tsolicitudes .sol-mas-fila { text-align: center; }
.cx-a6-lista .tsolicitudes .sol-mas-fila a { width: 28px; }
.cx-a6-lista .sol-datos { row-gap: 19px; }
.cx-a6-lista .sol-dato { padding-bottom: 6px; }
.cx-a6-lista .sol-cambiar { min-height: 29px; height: 29px; padding: 3px 12px; color: var(--sc-brand); border-color: var(--sc-brand); }
.cx-a6-lista .sol-panel-acc .sol-acciones-menu summary { width: 46px; }
.cx-a6-lista .sol-adjuntos h3 .ic { width: 20px; height: 20px; }

.cx-a6-nueva .ns-th { height: 36px; min-height: 36px; align-items: center; padding-top: 4px; padding-bottom: 4px; white-space: nowrap; }
.cx-a6-nueva .ns-th span { font-size: 10px; line-height: 13px; }
.cx-a6-nueva .ns-linea { grid-template-columns: 20px minmax(195px, 1fr) 106px 72px 66px 94px 99px 56px; }
.cx-a6-nueva .ns-linea input { min-height: 33px; height: 33px; font-size: 12px; padding: 5px 10px; }
.cx-a6-nueva .ns-dos { grid-template-columns: minmax(0, 395fr) minmax(0, 410fr); gap: 18px; }
.cx-a6-nueva .cx-a6-flujo-cab > .ns-valor { width: 310px; max-width: 100%; }
.cx-a6-nueva .ns-etapas { margin-top: 22px; }
.cx-a6-nueva .ns-izq > .ns-seccion:last-child { padding-bottom: 16px; }
.cx-a6-nueva .ns-par { padding: 4px 0; }
.cx-a6-nueva .ns-total { margin-top: 7px; margin-bottom: 12px; }
.cx-a6-nueva .cx-a6-detalle { display: inline-flex; align-items: center; gap: 6px; }
.cx-a6-nueva .cx-a6-detalle .ic { width: 14px; height: 14px; }

/* forge-login-visual · medido en tinta contra el PNG a 1448x1086: a 42x71 el
   símbolo salía un 17 % mayor (37x67 frente a 32x57) y empujaba 12 px el titular. */
.cx-a6-entrar .entrar-diamante { width: 36px; height: 61px; }
.cx-a6-entrar .entrar-marca { grid-template-columns: 36px auto; column-gap: 12px; }
/* Triángulo: tinta 59x52 en y=160 frente a 62x55 en y=153 del PNG. Solo
   escritorio: el móvil (DS201) tiene su propio triángulo de 44 px. */
@media (min-width: 1101px) {
  .cx-a6-entrar .entrar-titular { grid-template-columns: 67px auto; column-gap: 17px; margin-top: 46px; }
  .cx-a6-entrar .entrar-triangulo { width: 67px; height: 59px; }
}
.cx-a6-entrar .entrar-palabra { font-size: 25px; line-height: 30px; }
.cx-a6-entrar .entrar-lema { font-size: 11px; line-height: 13px; }
.cx-a6-entrar .entrar-form label { font-size: 16px; font-weight: 600; }
.cx-a6-entrar .entrar-form button { font-size: 18px; font-weight: 600; }
.cx-a6-entrar .entrar-campo .icono { width: 23px; height: 23px; }
.cx-a6-entrar .entrar-campo .entrar-ojo .icono { width: 22px; height: 22px; }
.cx-a6-entrar .entrar-reclamo .circulo { width: 50px; height: 50px; }
.cx-a6-entrar .entrar-reclamo .icono { width: 28px; height: 28px; }
.cx-a6-entrar .entrar-copy { max-width: 345px; }
.cx-a6-entrar .entrar-tarjeta { min-height: 671px; margin-top: 38px;   /* tarjeta en y=313 con el símbolo a 36x61 */
  border-radius: 10px; box-shadow: var(--sc-shadow-pop); }
.cx-a6-entrar .entrar-ayuda { margin-top: 40px; }
.cx-a6-entrar .entrar-o { font-size: 15px; gap: 16px; }
/* El pie del mockup sobresale de la tarjeta: «Aviso legal» en x=433 y «Contacto»
   acaba en x=749 (antes 391 y 697). */
.cx-a6-entrar .entrar-pie { max-width: 610px; padding-bottom: 5px; }
@media (min-width: 1101px) {
  /* La columna deja 602 px de contenido: el pie sale 82 px por la derecha. */
  .cx-a6-entrar .entrar-pie { max-width: 684px; margin-right: -82px; position: relative; z-index: 1; }
  .cx-a6-entrar .entrar-tarjeta { margin-top: 44px; }   /* el titular sube 6 px */
  /* Tinta de «Artemis Compras» 308 px frente a 332 y de «Acceso a tu cuenta»
     279 frente a 265: la fuente del sistema no es la del PNG; se iguala el ancho. */
  .cx-a6-entrar .entrar-producto { font-size: 43px; }
  .cx-a6-entrar .entrar-tarjeta h1 { font-size: 30.5px; }
}
.cx-a6-entrar .entrar-legales { gap: 18px; }
.cx-a6-entrar .entrar-reclamos { margin-top: 55px; }
/* Ronda 8 · ajustes del cuerpo tras comparar las tres capturas a 1448 × 1086. */
.cx-a6-cabecera .titulo-pantalla h1 { font-size: 34px; line-height: 40px; font-weight: 700; }
.cx-a6-cabecera { margin-bottom: 8px; }
.cx-a6-cabecera .titulo-accion { position: relative; top: 7px; gap: 8px; }
.cx-a6-cabecera .titulo-accion > * { padding-left: 13px; padding-right: 13px; }
.cx-a6-nueva .ns-rejilla-campos { row-gap: 4px; }
.cx-a6-nueva .ns-izq > .ns-seccion:first-child { padding-bottom: 15px; }
.cx-a6-nueva .ns-rejilla-campos .cx-a6-modalidad { margin-top: 2px; }
.cx-a6-nueva .ns-linea { grid-template-columns: 20px minmax(175px,1fr) 126px 74px 68px 96px 99px 56px; }
.cx-a6-nueva .ns-prod .ns-foto { flex-basis: 42px; width: 42px; height: 42px; }
.cx-a6-nueva .ns-dos { grid-template-columns: minmax(0, 415fr) minmax(0, 390fr); }
.cx-a6-nueva .cx-a6-flujo-cab .ns-valor { display: inline-flex; align-items: center; justify-content: space-between; gap: 7px; white-space: nowrap; overflow: hidden; font-size: 11px; }
.cx-a6-nueva .cx-a6-chevron { color: var(--sc-text-muted); font-size: 16px; line-height: 15px; }
.cx-a6-nueva .ns-prod input:focus { border-color: var(--sc-brand); outline: 2px solid var(--sc-brand-soft); outline-offset: 2px; }
.cx-a6-lista .tsolicitudes td.sol-id { padding-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-a6-lista .tsolicitudes td.sol-id a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-a6-lista .tsolicitudes td:nth-child(9) .chip { display: inline-block; max-width: 100%; padding-left: 6px; padding-right: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.cx-a6-lista .tsolicitudes td:nth-child(10) { padding-left: 8px; }
.cx-a6-lista .sol-card .sol-prov { min-height: 66px; align-items: start; }
.cx-a6-lista .sol-prov-identidad { padding-top: 3px; }
.cx-a6-lista .sol-prov-identidad .meta { font-size: 10px; line-height: 15px; }
.cx-a6-lista .sol-coincidencia { width: 86px; min-height: 22px; padding: 3px 7px; text-align: center; border-radius: var(--sc-r-pill); background: var(--sc-surface-sunk); color: var(--sc-text-muted); }
.cx-a6-lista .sol-tabs { gap: 8px; font-size: 11px; overflow: visible; padding-left: 2px; padding-right: 2px; }
.cx-a6-lista .sol-tabs > * { flex: 0 0 auto; }
.cx-a6-lista .sol-adjuntos { min-height: 126px; }
.cx-a6-lista .cx-a6-adjuntos-vacios { display: flex; align-items: center; min-height: 36px; padding: 10px 16px; border-top: 1px solid var(--sc-border); margin-top: 9px; }
.cx-a6-entrar .entrar-der { padding-left: 40px; }
.cx-a6-entrar .entrar-copy { max-width: 335px; }
.cx-a6-entrar .entrar-reclamos { margin-top: 40px; }
.cx-a6-entrar .entrar-tarjeta { padding-bottom: 32px; }
.cx-a6-entrar .entrar-sso { grid-template-rows: 22px 32px; }
.cx-a6-entrar .entrar-sso > span { line-height: 17px; }
.cx-a6-entrar .entrar-sso small { margin-top: 4px; font-size: 10px; line-height: 11px; }

/* === CX-APAGADO2 === */
.cx-apagado .boton.neg-off.neg-prim,
.cx-apagado .boton.neg-off.neg-ok { opacity: .62; cursor: not-allowed; }
.cx-apagado .neg-redactar-pie .boton.neg-off.neg-prim { opacity: .62; }
.cx-core-b5 .ap-editar[aria-disabled="true"],
.cx-core-b5 .ap-mas-enlace[aria-disabled="true"],
.fcx-fac .fo-ver.off[aria-disabled="true"],
.pcx-detail .pv-mas.off[aria-disabled="true"],
.rcx-lista .rc-mas.off[aria-disabled="true"],
.ccx-correo .neg-pest-off.activa[aria-disabled="true"] { color: var(--sc-text-muted); opacity: .7; cursor: not-allowed; }
.ccx-catalogo .fo-boton.rojo[aria-disabled="true"],
.fcx-fac .fo-boton.rojo[aria-disabled="true"],
.ocx-obras .fo-boton.rojo[aria-disabled="true"],
.ocx-360 .fo-boton.rojo[aria-disabled="true"],
.scx-notificaciones .fo-boton.rojo[aria-disabled="true"],
.rcx-lista .rc-rapida-roja.off[aria-disabled="true"],
.rcx-det .rc-rapida-roja.off[aria-disabled="true"] { background: var(--sc-neutral-bg); border-color: var(--sc-border); color: var(--sc-text-muted); cursor: not-allowed; }
.ocx-obras .fo-ver.off[aria-disabled="true"],
.ocx-360 .fo-ver.off[aria-disabled="true"],
.scx-notificaciones .fo-ver.off[aria-disabled="true"] { color: var(--sc-text-muted); opacity: .7; cursor: not-allowed; }

/* === CX-OPS-10 === */

/* Ajustes exclusivos de los cuerpos de stock, incidencias y notificaciones. */
.scx-stock .inc-card { box-shadow: var(--sc-shadow-none); border-radius: 8px; }
.scx-stock .inc-fila.f1 { min-height: 243px; }
.scx-stock .inc-fila.f2 { min-height: 207px; }
.scx-stock .inc-fila.f3 { min-height: 202px; }
.scx-stock .inc-rapidas .inc-accion-1 { background: var(--sc-neutral-bg); border-color: var(--sc-border); color: var(--sc-text-muted); opacity: 1; }
.scx-stock .scx-actualizar { display: inline-block; margin-top: 8px; font-size: var(--sc-fs-micro); color: var(--sc-link); }
.scx-stock .scx-actualizar:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; }
.scx-stock .inc-acciones-lista { gap: 3px; }
.scx-stock .inc-acciones-lista .inc-accion { min-height: 34px; padding-inline: 13px; }
.scx-stock .inc-rapidas { min-height: 268px; }
.scx-stock .inc-actividad-card { min-height: 258px; }
.scx-stock .inc-etiquetas { min-height: 134px; }

.scx-incidencias .inc-rejilla { grid-template-columns: minmax(0,1fr) 390px; align-items: stretch; margin-top: -4px; }
.scx-incidencias .inc-lista { display: flex; flex-direction: column; min-height: 759px; }
.scx-incidencias .inc-lista .pie-tabla { margin-top: auto; }
.scx-incidencias .scx-inc-vacia { padding: 32px 12px; text-align: center; color: var(--sc-text-muted); font-size: var(--sc-fs-sm); }
.scx-incidencias .inc-panel { min-height: 759px; }
.scx-incidencias .scx-inc-panel-cab { display: flex; align-items: center; gap: 10px; padding: 2px 4px 16px; border-bottom: 1px solid var(--sc-border); }
.scx-incidencias .scx-inc-panel-mensaje { padding: 28px 8px; color: var(--sc-text-muted); font-size: var(--sc-fs-sm); }
.scx-incidencias .scx-inc-panel-mensaje h2 { margin: 0 0 8px; font-size: 16px; color: var(--sc-text); }
.scx-incidencias .inc-filtros { grid-template-columns: minmax(190px, 2.8fr) repeat(4,minmax(0,1fr)) auto; }

.scx-notificaciones .fo-lista { display: flex; flex-direction: column; min-height: 780px; }
.scx-notificaciones .fo-lista .fo-pie { margin-top: auto; }
.scx-notificaciones .fo-aside .fo-lado:last-child { min-height: 246px; }
.scx-notificaciones .cat-recientes { gap: 3px; }
.scx-notificaciones .scx-av-vacia { padding: 32px 8px; text-align: center; color: var(--sc-text-muted); }
@media (max-width: 1100px) {
  .scx-incidencias .inc-rejilla { grid-template-columns: minmax(0,1fr); }
  .scx-incidencias .inc-lista, .scx-incidencias .inc-panel,
  .scx-notificaciones .fo-lista { min-height: 0; }
}


.scx-stock .pbanda-foto { width: 748px; }
.scx-stock .pbanda-img { object-fit: fill; }
.scx-stock .tira-kpi .kpi { height: 94px; min-height: 94px; padding: 6px 12px; box-shadow: var(--sc-shadow-none); }
.scx-stock .tira-kpi .kpi .meta.micro { font-size: 11px; line-height: 13px; }
.scx-stock .tira-kpi .kpi:nth-child(1) .kpi-icono,
.scx-stock .tira-kpi .kpi:nth-child(2) .kpi-icono,
.scx-stock .tira-kpi .kpi:nth-child(3) .kpi-icono,
.scx-stock .tira-kpi .kpi:nth-child(5) .kpi-icono { color: var(--sc-ok-fg); background: var(--sc-ok-bg); }
.scx-stock .inc-rapidas .inc-accion-1 { width: 100%; min-height: 36px; }
.scx-stock .scx-stock-detalle { margin-top: 8px; font-size: var(--sc-fs-sm); }
.scx-stock .scx-stock-detalle summary { display: inline-block; cursor: pointer; color: var(--sc-link); padding: 2px 0; }
.scx-stock .scx-stock-detalle summary:focus-visible { outline: var(--sc-focus-w) solid var(--sc-focus-color); }
.scx-stock .inc-card { box-shadow: var(--sc-shadow-none); }
.scx-incidencias .tira-kpi .kpi:nth-child(4) .kpi-icono { color: var(--sc-ok-fg); background: var(--sc-ok-bg); }
.scx-incidencias .inc-lista, .scx-incidencias .inc-panel { min-height: 759px; }
.scx-incidencias .inc-lista, .scx-incidencias .inc-panel { box-shadow: var(--sc-shadow-none); }
.scx-notificaciones .kpis.tira-kpi { margin-top: 10px; }
.scx-notificaciones .tira-kpi .kpi { height: 94px; min-height: 94px; padding-top: 8px; padding-bottom: 8px; }
.scx-notificaciones .tira-kpi .kpi:nth-child(3) .kpi-icono { color: var(--sc-warn-fg); background: var(--sc-warn-bg); }
.scx-notificaciones .tira-kpi .kpi:nth-child(4) .kpi-icono { color: var(--sc-neutral-fg); background: var(--sc-surface-sunk); }
.scx-notificaciones .titulo-pantalla .fo-boton.rojo { min-width: 198px; justify-content: center; }
.scx-notificaciones .fo-lista, .scx-notificaciones .fo-aside .fo-lado { box-shadow: var(--sc-shadow-none); }
@media (max-width: 1100px) {
  .scx-stock .tira-kpi .kpi, .scx-notificaciones .tira-kpi .kpi { height: auto; min-height: 94px; }
}

/* Ajustes medidos sobre los tres cuerpos de CX-OPS-3. */
.scx-stock .inc-card { border-radius: 6px; }
.scx-stock .inc-stk { margin-top: 1px; }
.scx-stock .inc-stk-der { gap: 10px; }
.scx-stock .inc-fila.f3 { min-height: 203px; }
.scx-stock .inc-rapidas { position: relative; min-height: 268px; height: 268px; padding: 8px 12px; }
.scx-stock .inc-rapidas h2 { margin-bottom: 5px; }
.scx-stock .inc-rapidas .acciones-bajo-titulo { margin-bottom: 4px; }
.scx-stock .inc-actividad-card { min-height: 258px; }
.scx-stock .inc-rapidas .inc-accion[aria-disabled="true"] { color: var(--sc-text); opacity: 1; font-weight: 500; }
.scx-stock .scx-stock-opciones { position: relative; margin-top: 18px; z-index: 4; }
.scx-stock .scx-stock-opciones > summary { list-style: none; display: inline-block; cursor: pointer; font-size: 11px; line-height: 15px; color: var(--sc-link); }
.scx-stock .scx-stock-opciones > summary::-webkit-details-marker { display: none; }
.scx-stock .scx-stock-opciones > summary:focus-visible { outline: var(--sc-focus-w) solid var(--sc-focus-color); }
.scx-stock .scx-stock-opciones > div { position: absolute; top: 20px; right: 0; width: min(500px, 80vw); max-height: 520px; overflow: auto; padding: 12px; background: var(--sc-surface); border: var(--sc-line) solid var(--sc-border); border-radius: 6px; box-shadow: var(--sc-shadow-pop); }
.scx-stock .scx-stock-opciones .scx-stock-detalle { margin-top: 10px; }
.scx-stock .scx-stock-opciones .scx-stock-detalle .inc-card { padding: 8px; }
.scx-stock .inc-conteos .inc-mini th:nth-child(1) { width: 8%; }
.scx-stock .inc-conteos .inc-mini th:nth-child(2) { width: 28%; }
.scx-stock .inc-conteos .inc-mini th:nth-child(3) { width: 16%; }
.scx-stock .inc-conteos .inc-mini th:nth-child(4) { width: 10%; }
.scx-stock .inc-conteos .inc-mini th:nth-child(5) { width: 12%; }
.scx-stock .inc-conteos .inc-mini th:nth-child(6) { width: 10%; }
.scx-stock .inc-conteos .inc-mini th:nth-child(7) { width: 16%; }
.scx-stock .inc-snapshots .inc-mini th:nth-child(1) { width: 12%; }
.scx-stock .inc-snapshots .inc-mini th:nth-child(2) { width: 29%; }
.scx-stock .inc-snapshots .inc-mini th:nth-child(3) { width: 22%; }
.scx-stock .inc-snapshots .inc-mini th:nth-child(4) { width: 17%; }
.scx-stock .inc-snapshots .inc-mini th:nth-child(5) { width: 20%; }

.scx-incidencias .inc-lista { position: relative; }
.scx-incidencias .inc-lista, .scx-incidencias .inc-panel { min-height: 759px; }
.scx-incidencias .inc-lista .pie-tabla { min-height: 68px; display: flex; align-items: center; }
.scx-incidencias .scx-inc-pie-vacio { position: absolute; right: 12px; bottom: 11px; width: 56%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--sc-text-muted); font-size: var(--sc-fs-micro); }
.scx-incidencias .scx-inc-pie-vacio > span:nth-child(1) { margin-left: auto; }
.scx-incidencias .scx-inc-pie-vacio > span:nth-child(3) { margin-right: auto; }
.scx-incidencias .scx-inc-pie-vacio > span:nth-child(-n+3),
.scx-incidencias .scx-inc-pie-vacio > b { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: var(--sc-line) solid var(--sc-border); border-radius: 4px; }
.scx-incidencias .scx-inc-pie-vacio > b { background: var(--sc-brand); color: var(--sc-on-brand); }
.scx-incidencias .scx-inc-pie-vacio > span:last-child { padding: 6px 8px; border: var(--sc-line) solid var(--sc-border); border-radius: 4px; }
.scx-incidencias .inc-filtros select, .scx-incidencias .inc-filtros .inc-falso { border-color: var(--sc-border); border-radius: 4px; min-height: 36px; }
.scx-incidencias .inc-filtros button { border-color: var(--sc-border); border-radius: 4px; min-height: 36px; white-space: nowrap; }
.scx-incidencias .scx-inc-ayuda { position: relative; }
.scx-incidencias .scx-inc-ayuda summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; cursor: pointer; color: var(--sc-text-muted); }
.scx-incidencias .scx-inc-ayuda summary::-webkit-details-marker { display: none; }
.scx-incidencias .scx-inc-ayuda summary .ic { width: 16px; height: 16px; }
.scx-incidencias .scx-inc-ayuda p { position: absolute; top: 18px; right: 0; z-index: 5; width: 250px; margin: 0; padding: 10px; background: var(--sc-surface); border: var(--sc-line) solid var(--sc-border); border-radius: 4px; box-shadow: var(--sc-shadow-pop); font-size: var(--sc-fs-micro); }

.scx-notificaciones .fo-aside { margin-top: -9px; }
.scx-notificaciones .fo-aside .fo-lado:first-child { padding-bottom: 9px; }
.scx-notificaciones .fo-aside .fo-lado:nth-child(3) { min-height: 178px; }
.scx-notificaciones .fo-principal .kpis.tira-kpi { margin-top: 20px; }
.scx-notificaciones .fo-lista { min-height: 766px; }
.scx-notificaciones .scx-av-accion { display: inline-flex; align-items: center; gap: 6px; }
.scx-notificaciones .scx-av-ayuda { position: relative; }
.scx-notificaciones .scx-av-ayuda summary { list-style: none; display: inline-flex; cursor: pointer; color: var(--sc-text-muted); }
.scx-notificaciones .scx-av-ayuda summary::-webkit-details-marker { display: none; }
.scx-notificaciones .scx-av-ayuda summary .ico { width: 16px; height: 16px; }
.scx-notificaciones .scx-av-ayuda p { position: absolute; top: 24px; right: 0; z-index: 5; width: 250px; margin: 0; padding: 10px; background: var(--sc-surface); border: var(--sc-line) solid var(--sc-border); border-radius: 4px; box-shadow: var(--sc-shadow-pop); font-size: var(--sc-fs-micro); }
.scx-notificaciones .scx-av-ajuste { display: inline-flex; align-items: center; margin-right: 0; color: var(--sc-text-muted); }
.scx-notificaciones .scx-av-ajuste .ico { width: 16px; height: 16px; }
.scx-notificaciones .cat-filtros-av .fo-buscar { flex-basis: 310px; }
.scx-notificaciones .cat-barra { background: var(--sc-brand-soft); }
.scx-notificaciones .fo-mostrar .fo-select { width: 112px; }
.scx-stock .inc-fila.f2 { grid-template-columns: minmax(0, 500fr) minmax(0, 422fr); }
.scx-notificaciones .cat-rapida.fo-rapida { min-height: 64px; margin-bottom: 4px; }
.scx-notificaciones .cat-rico { width: 42px; height: 42px; }
.scx-notificaciones .fo-aside .fo-lado:first-child { padding-top: 10px; padding-bottom: 6px; }
.scx-notificaciones .cat-barras li { grid-template-columns: 32px minmax(0, 1fr) 115px 24px; }
.scx-notificaciones .fo-aside .fo-lado:nth-child(3) { min-height: 178px; padding: 8px 12px; }
.scx-notificaciones .fo-aside .fo-lado:nth-child(3) > h2 { margin-bottom: 4px; }
.scx-notificaciones .fo-donut-fila { grid-template-columns: 140px minmax(0, 1fr); gap: 10px; }
.scx-notificaciones .fo-donut { width: 140px; height: 140px; border-width: 19px; }
.scx-notificaciones .cat-tabla-av td { height: 62px; padding-top: 2px; padding-bottom: 2px; }
.scx-notificaciones .cat-filtros-av .fo-select,
.scx-notificaciones .cat-filtros-av .fo-buscar { min-height: 36px; border: var(--sc-line) solid var(--sc-border); border-radius: 5px; background: var(--sc-surface); }
@media (max-width: 1100px) {
  .scx-stock .scx-stock-opciones > div { right: 0; width: min(500px, 70vw); }
  .scx-incidencias .scx-inc-pie-vacio { width: 65%; }
  .scx-incidencias .inc-lista, .scx-incidencias .inc-panel { min-height: 0; }
  .scx-notificaciones .fo-aside { margin-top: 0; }
  .scx-notificaciones .fo-aside .fo-lado:nth-child(3) { min-height: 0; }
}


.scx-stock .inc-actividad-card > .inc-vacia { padding: 18px 8px; text-align: left; }
.scx-stock .inc-actividad-card .scx-stock-detalle { margin-top: 18px; }
.scx-stock > .scx-stock-detalle { display: block; margin-top: 60px; }
.scx-stock .inc-rapidas .inc-accion-1 { background: var(--sc-neutral-bg); border-color: var(--sc-border); color: var(--sc-text-muted); border-radius: 5px; }
.scx-stock .inc-acciones-lista .inc-accion { min-height: 35px; border: 1px solid var(--sc-border); border-radius: 5px; gap: 10px; }
.scx-stock .inc-acciones-lista .inc-accion .ic, .scx-stock .inc-rapidas .inc-accion-1 .ic { width: 18px; height: 18px; stroke-width: 1.9; }
.scx-stock .inc-chips { gap: 8px; }
.scx-stock .inc-chips .chip:first-child { color: var(--sc-info-fg); background: var(--sc-info-bg); }
.scx-incidencias .inc-panel .sol-panel-tit { margin-top: 10px; margin-bottom: 6px; }
.scx-incidencias .inc-panel .sol-panel-desc { margin-bottom: 15px; }
.scx-incidencias .inc-dato .rot { font-size: 11px; font-weight: 500; color: var(--sc-text-muted); }
.scx-incidencias .inc-dato .val { font-size: 12px; }
.scx-incidencias .inc-acciones .boton.sec { border-color: var(--sc-border); border-radius: 4px; min-height: 34px; }
.scx-incidencias .inc-filtros { grid-template-columns: minmax(265px, 2.8fr) repeat(4,minmax(0,1fr)) auto; gap: 8px; }
.scx-notificaciones .fo-aside .fo-lado:nth-child(1) { height: 242px; min-height: 242px; }
.scx-notificaciones .fo-aside .fo-lado:nth-child(2) { height: 268px; min-height: 268px; }
.scx-notificaciones .fo-aside .fo-lado:nth-child(3) { height: 178px; min-height: 178px; }
.scx-stock .inc-card-cab .inc-ver[aria-disabled="true"],
.scx-stock .inc-etiquetas .inc-ver[aria-disabled="true"] { color: var(--sc-text-muted); opacity: .7; }
.scx-stock .inc-card-cab .inc-abrir[aria-disabled="true"] { background: var(--sc-neutral-bg); border-color: var(--sc-border); color: var(--sc-text-muted); opacity: 1; }
.scx-notificaciones .titulo-pantalla .fo-boton[aria-disabled="true"] { background: var(--sc-neutral-bg); border-color: var(--sc-border); color: var(--sc-text-muted); opacity: 1; }
.scx-notificaciones .fo-ver[aria-disabled="true"] { color: var(--sc-text-muted); opacity: .7; }
.scx-incidencias .inc-acciones .boton[aria-disabled="true"] { background: var(--sc-neutral-bg); border-color: var(--sc-border); color: var(--sc-text-muted); opacity: 1; }
.scx-incidencias .inc-cab-acc .boton[aria-disabled="true"] { background: var(--sc-neutral-bg); border-color: var(--sc-border); color: var(--sc-text-muted); opacity: 1; }
.scx-notificaciones .fo-aside .fo-lado:nth-child(4) { height: 248px; min-height: 248px; }
.scx-notificaciones .cat-recientes a { display: grid; grid-template-columns: 28px minmax(0,1fr) 16px; align-items: center; min-height: 35px; padding: 0; }
.scx-notificaciones .cat-flecha { display: block; width: 16px; text-align: center; font-size: 17px; }
.scx-notificaciones .cat-barra { height: 21px; border-radius: 2px; }
.scx-notificaciones .cat-barra > span { background: linear-gradient(90deg, var(--sc-brand), var(--sc-brand-hover)); }
.scx-notificaciones .cat-rico { width: 40px; height: 40px; }
.scx-notificaciones .cat-rico .ico { width: 20px; height: 20px; stroke-width: 1.9; }
/* Ronda 8: jerarquía y medidas de los tres cuerpos, sin alterar el kit. */
.scx-incidencias .tira-kpi .kpi,
.scx-notificaciones .tira-kpi .kpi { grid-template-rows: 31px 18px 16px; row-gap: 1px; }
.scx-incidencias .tira-kpi .kpi .cifra,
.scx-notificaciones .tira-kpi .kpi .cifra { grid-row: 1; font-size: 29px; line-height: 31px; }
.scx-incidencias .tira-kpi .kpi .rotulo,
.scx-notificaciones .tira-kpi .kpi .rotulo { grid-row: 2; font-size: 13px; line-height: 18px; font-weight: 500; }
.scx-incidencias .tira-kpi .kpi .meta.micro,
.scx-notificaciones .tira-kpi .kpi .meta.micro { grid-row: 3; font-size: 11px; line-height: 16px; }
.scx-incidencias .tira-kpi .kpi-icono,
.scx-notificaciones .tira-kpi .kpi-icono,
.scx-stock .tira-kpi .kpi-icono { width: 48px; height: 48px; }
.scx-incidencias .tira-kpi .kpi-icono .ic,
.scx-notificaciones .tira-kpi .kpi-icono .ic,
.scx-stock .tira-kpi .kpi-icono .ic { width: 24px; height: 24px; stroke-width: 2; }
.scx-stock .inc-fila.f1 { grid-template-columns: minmax(0, 670fr) minmax(0, 252fr); }
.scx-stock .inc-etiquetas .inc-card-cab { padding-bottom: 0; border-bottom: 0; margin-bottom: 8px; }
.scx-stock .inc-card .inc-vacia { font-size: 12px; line-height: 18px; padding-top: 26px; }
.scx-stock .inc-actividad-card > .inc-vacia { text-align: center; }
.scx-stock .inc-mini th,
.scx-incidencias .tincidencias th,
.scx-notificaciones .cat-tabla-av th { background: var(--sc-bg); height: 35px; font-size: 12px; font-weight: 500; }
.scx-incidencias .inc-cab-acc { gap: 12px; }
.scx-incidencias .inc-cab-acc .boton { min-height: 38px; }
.scx-incidencias .inc-cab-acc .boton:last-child { min-width: 172px; justify-content: center; }
.scx-incidencias .inc-datos .inc-fila3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.scx-incidencias .inc-datos .inc-fila3:nth-child(3) .inc-dato { min-height: 48px; }
.scx-incidencias .inc-datos .inc-fila3:nth-child(3) .inc-dato .val { min-height: 23px; }
.scx-incidencias .inc-evidencias { margin-bottom: 14px; }
.scx-incidencias .inc-acciones { margin-top: 0; }
.scx-incidencias .inc-panel .sol-tabs { justify-content: space-between; gap: 8px; font-size: 12px; }
.scx-incidencias .tincidencias .scx-inc-prov-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 15px; }
.scx-notificaciones .titulo-pantalla .fo-boton.rojo { min-width: 198px; min-height: 40px; }
.scx-notificaciones .cat-barras li { grid-template-columns: 32px minmax(0, 1fr) 114px 24px; column-gap: 8px; }
.scx-notificaciones .fo-donut-fila { gap: 22px; }
.scx-notificaciones .cat-recientes .cat-aico { width: 34px; height: 34px; border-radius: var(--sc-r-dot); display: inline-flex; align-items: center; justify-content: center; }
.scx-notificaciones .cat-recientes .cat-aico .ico { width: 19px; height: 19px; }
.scx-notificaciones .cat-recientes a { grid-template-columns: 34px minmax(0,1fr) 16px; column-gap: 11px; }
.scx-notificaciones .cat-tabla-av td:nth-child(2) b { font-size: 13px; font-weight: 600; line-height: 16px; }
.scx-notificaciones .cat-tabla-av td:nth-child(2) .cat-sub { font-size: 12px; line-height: 16px; }
.scx-stock .inc-verif { margin-top: 0; }
.scx-stock .pbanda h1 { letter-spacing: -.045em; transform: translateY(-4px); }
.scx-stock .inc-fila.f3 { min-height: 208px; }
.scx-incidencias .tincidencias tr.elegida td { background: var(--sc-info-bg); }
.scx-incidencias .tincidencias input[type=checkbox] { accent-color: var(--sc-info-fg); }
.scx-incidencias .tincidencias input[type=checkbox]:disabled { opacity: 1; }
.scx-incidencias .tincidencias td { height: 56px; padding-top: 2px; padding-bottom: 2px; line-height: 14px; }
.scx-incidencias .inc-datos .inc-fila3:first-child { grid-template-columns: 1.35fr .85fr .8fr; min-height: 76px; }
.scx-incidencias .inc-prov-fila { align-items: center; gap: 5px; }
.scx-incidencias .inc-logo { flex-basis: 30px; width: 30px; height: 30px; }
.scx-incidencias .inc-prov-fila > span:last-child { max-width: 130px; }
.scx-incidencias .inc-prov-fila b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 14px; }
.scx-incidencias .inc-acciones { column-gap: 10px; }
.scx-notificaciones .cat-tabla-av td { height: 59px; }
.scx-notificaciones .cat-tabla-av th:nth-child(2),
.scx-notificaciones .cat-tabla-av td:nth-child(2) { width: 39%; }
.scx-notificaciones .cat-tabla-av th:nth-child(3),
.scx-notificaciones .cat-tabla-av td:nth-child(3) { width: 13%; }
.scx-notificaciones .fo-aside { row-gap: 12px; }
.scx-notificaciones .fo-aside .fo-lado:nth-child(2) { height: 260px; min-height: 260px; }
.scx-notificaciones .fo-aside .fo-lado:nth-child(3) { height: 178px; min-height: 178px; }
@media (max-width: 1100px) {
  .scx-incidencias .inc-rejilla { grid-template-columns: minmax(0,1fr); }
  .scx-notificaciones .fo-aside .fo-lado { height: auto !important; min-height: 0 !important; }
}


/* Ronda 10: solo los cuerpos; stock conserva la versión que ganó al juez. */
.scx-notificaciones .cat-tabla-av { table-layout: fixed; }
.scx-notificaciones .cat-tabla-av :is(th, td):nth-child(1) { width: 4%; }
.scx-notificaciones .cat-tabla-av :is(th, td):nth-child(2) { width: 38%; }
.scx-notificaciones .cat-tabla-av :is(th, td):nth-child(3) { width: 12%; }
.scx-notificaciones .cat-tabla-av :is(th, td):nth-child(4) { width: 12%; }
.scx-notificaciones .cat-tabla-av :is(th, td):nth-child(5) { width: 13%; }
.scx-notificaciones .cat-tabla-av :is(th, td):nth-child(6) { width: 12%; }
.scx-notificaciones .cat-tabla-av :is(th, td):nth-child(7) { width: 9%; }
.scx-notificaciones .cat-ref { white-space: nowrap; font-size: 11px; }
.scx-notificaciones .cat-cuando { white-space: nowrap; font-size: 11px; line-height: 15px; }
.scx-notificaciones .cat-alerta { max-width: none; gap: 9px; }
.scx-notificaciones .cat-tabla-av .cat-texto { font-size: 11px; line-height: 15px; }
.scx-notificaciones .cat-tabla-av td:nth-child(2) b { font-size: 12px; line-height: 16px; }
.scx-notificaciones .cat-barra { background: var(--sc-danger-bg); }
.scx-notificaciones .fo-donut-fila { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
.scx-notificaciones .fo-donut { width: 120px; height: 120px; border-width: 17px; }
.scx-notificaciones .fo-aside .fo-lado:nth-child(3) { height: 178px; min-height: 178px; }
.scx-incidencias .inc-panel .sol-panel-tit { font-size: 18px; font-weight: 700; line-height: 24px; margin-bottom: 7px; }
.scx-incidencias .inc-datos :is(.inc-fila3, .inc-fila2) { border-bottom: 1px solid var(--sc-border-strong); padding-top: 10px; padding-bottom: 11px; }
.scx-incidencias .inc-datos .inc-fila3:nth-child(3) { align-items: start; }
.scx-incidencias .inc-datos .inc-fila3:nth-child(3) .inc-dato .val { min-height: 24px; justify-content: center; }
.scx-incidencias .inc-datos .inc-fila3:nth-child(3) .inc-dato .rot { min-height: 16px; }
.scx-incidencias .inc-datos .inc-importe { font-size: 13px; line-height: 20px; font-weight: 500; }
.scx-incidencias .inc-panel .sol-tabs [aria-current] { padding-left: 8px; padding-right: 8px; margin-left: -8px; }
.scx-incidencias .tincidencias tr.elegida td { background: var(--sc-info-bg); }
.scx-incidencias .tincidencias input[type=checkbox]:checked { accent-color: var(--sc-info-fg); }

/* === CX-PEDIDO9 === */
.cx-pedido .pd-id { position: relative; top: 5px; }
.cx-pedido .pd-botones a.boton,
.cx-pedido .pd-c-lin a.pd-prim { opacity: 1; font-weight: 600; background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); }
.cx-pedido .pd-botones a.sec { background: var(--sc-surface); border-color: var(--sc-border); color: var(--sc-text); }
.cx-pedido .pd-fila3 { grid-template-columns: 331px 239px minmax(0, 1fr); gap: 8px; }
.cx-pedido .pd-fila3 > .pd-card { min-height: 205px; padding: 14px 16px; }
.cx-pedido .pd-quien { min-height: 54px; margin-bottom: 12px; }
.cx-pedido .pd-quien b { font-size: 15px; font-weight: 700; }
.cx-pedido .pd-quien .meta,
.cx-pedido .pd-contacto { font-size: 13px; }
.cx-pedido .pd-logo { min-height: 46px; }
.cx-pedido .pd-avatar { width: 46px; height: 46px; }
.cx-pedido .pd-card-cab h2 { font-size: 14px; }
.cx-pedido .pd-card-ico svg { width: 21px; height: 21px; stroke-width: 2; }
.cx-pedido .pd-c-lin { min-height: 0; padding: 8px 14px 9px; }
.cx-pedido .pd-c-lin .pd-card-cab { min-height: 32px; margin-bottom: 0; }
.cx-pedido .pd-tabla { margin: 0; }
.cx-pedido .pd-c-lin .pd-tabla th { height: 30px; padding-top: 0; padding-bottom: 0; }
.cx-pedido .pd-c-lin .pd-tabla td { height: 43px; padding-top: 0; padding-bottom: 0; }
.cx-pedido .pd-c-lin .pd-tabla td.num { white-space: nowrap; }
.cx-pedido .pd-c-lin .pd-tabla td.num .meta { display: inline; margin-left: 4px; }
.cx-pedido .pd-c-lin .pd-tabla td.num .meta::before { content: "· "; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(3),
.cx-pedido .pd-c-lin .pd-tabla td:nth-child(3) { width: 210px; }
.cx-pedido .pd-prod { gap: 8px; }
.cx-pedido .pd-prod > div { min-width: 0; width: 185px; }
.cx-pedido .pd-prod b { font-size: 12px; line-height: 15px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-pedido .pd-prod .meta { font-size: 11px; line-height: 13px; }
.cx-pedido .pd-mini { width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 4px; display: grid; place-items: center; background: var(--sc-neutral-bg); color: var(--sc-text-muted); font-size: 15px; font-weight: 600; }
.cx-pedido .pd-c-lin .chip { min-height: 24px; padding: 3px 10px; font-size: 11px; font-weight: 500; }
.cx-pedido .pd-fila2 { align-items: start; grid-template-columns: 1.025fr 1fr; gap: 12px; }
.cx-pedido .pd-c-asig,
.cx-pedido .pd-c-tot { height: 172px; padding: 8px 12px; }
.cx-pedido .pd-c-asig .pd-card-cab,
.cx-pedido .pd-c-tot .pd-card-cab { min-height: 25px; margin-bottom: 4px; }
.cx-pedido .pd-c-asig .pd-compacta th,
.cx-pedido .pd-c-asig .pd-compacta td { height: 21px; padding: 1px 6px; line-height: 18px; font-size: 12px; }
.cx-pedido .pd-c-asig .pd-compacta td .meta { display: inline; font-size: 11px; }
.cx-pedido .pd-c-asig .aviso { margin: 4px 0 0; font-size: 11px; line-height: 14px; }
.cx-pedido .cx-core-c2-reparto { margin-top: 2px; }
.cx-pedido .cx-core-c2-reparto summary { min-height: 23px; border: 0; padding: 1px 6px; background: transparent; color: var(--sc-warn-fg); font-size: 11px; }
.cx-pedido .pd-c-tot .pd-importes dt,
.cx-pedido .pd-c-tot .pd-importes dd { padding: 0; font-size: 12px; line-height: 22px; }
.cx-pedido .pd-c-tot .pd-total-pedido { margin-top: 2px; min-height: 31px; padding: 2px 8px; background: var(--sc-brand-soft); }
.cx-pedido .pd-linea-t li { min-height: 42px; padding-bottom: 2px; font-size: 12px; line-height: 16px; }
.cx-pedido .pd-linea-t b { font-weight: 600; }
.cx-pedido .pd-linea-t li > div { min-width: 0; }
.cx-pedido .cx-core-c2-traza { display: inline-block; margin-left: 8px; vertical-align: baseline; }
.cx-pedido .cx-core-c2-traza summary,
.cx-pedido .cx-core-c2-anteriores summary { color: var(--sc-link); cursor: pointer; font-size: 11px; }
.cx-pedido .cx-core-c2-traza p { max-width: 370px; margin: 4px 0; overflow-wrap: anywhere; color: var(--sc-text-muted); font-size: 11px; }
.cx-pedido .cx-core-c2-anteriores { margin-top: 3px; }
.cx-pedido .cx-core-c2-anteriores ol { margin-top: 8px; }
.cx-pedido .pd-c-hist,
.cx-pedido .pd-c-docs { height: 185px; padding: 8px 14px; }
.cx-pedido .pd-c-hist .pd-card-cab,
.cx-pedido .pd-c-docs .pd-card-cab { min-height: 27px; margin-bottom: 4px; }
.cx-pedido .pd-c-hist .meta,
.cx-pedido .pd-c-docs .meta { font-size: 11px; line-height: 14px; }
.cx-pedido .pd-c-docs { display: flex; flex-direction: column; }
.cx-pedido .pd-docs { margin-bottom: 3px; }
.cx-pedido .pd-docs li { min-height: 34px; padding: 0; gap: 7px; }
.cx-pedido .pd-doc-dato { min-width: 0; flex: 1; }
.cx-pedido .pd-doc-dato b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.cx-pedido .pd-doc-enlace { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; color: var(--sc-brand); }
.cx-pedido .pd-doc-enlace:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; }
.cx-pedido .pd-doc-controles { display: flex; gap: 4px; }
.cx-pedido .pd-doc-control { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--sc-border); border-radius: 4px; color: var(--sc-text-muted); }
.cx-pedido .pd-pdf { font-size: 18px; }
.cx-pedido .pd-soltar { margin-top: auto; min-height: 31px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 2px 8px; font-size: 11px; line-height: 13px; }
.cx-pedido .pd-soltar small { display: block; font-size: 10px; }
.cx-pedido .cx-core-c2-upload { font-size: 23px; line-height: 1; color: var(--sc-text-muted); }
/* B8.3 · la carga real de documentos del pedido: en varias filas si no cabe. */
.cx-pedido .pd-subir { flex-wrap: wrap; padding: 6px 8px; }
/* Con documentos reales la tarjeta crece: la altura fija del mockup los cortaba. */
.cx-pedido .pd-c-docs:has(.pd-docs li, .pd-subir) { height: auto; min-height: 185px; }
.cx-pedido .pd-subir label { display: flex; align-items: center; gap: 8px; }
.cx-pedido .pd-subir input[type=file] { min-width: 0; max-width: 100%; font-size: 11px; }
.cx-pedido .cx-core-c2-doc-vacio { border: 0; background: none; padding: 8px 0; }
.cx-pedido .pd-carril { position: relative; top: -7px; gap: 12px; }
.cx-pedido .pd-r-estado { height: 332px; padding: 12px 14px; }
/* B6.2 · el aviso de «recepción completa, falta X» crece la tarjeta: la altura
   fija del mockup la haría desbordar sobre «Resumen económico». */
.cx-pedido .pd-r-estado:has(.pd-pendiente) { height: auto; }
.pd-pendiente { margin: 8px 0; font-size: 13px; line-height: 1.35; }
.pd-pendiente b { display: block; margin-bottom: 2px; }
.pd-pendiente .boton, .pd-pendiente .pd-enlace { display: inline-flex; margin-top: 6px; }
.cx-pedido .pd-r-estado .pd-card-cab { margin-bottom: 5px; transform: translateY(-4px); }
.cx-pedido .pd-estado { margin-bottom: 9px; padding: 10px; }
.cx-pedido .pd-acciones { gap: 5px; }
.cx-pedido .pd-acciones .pd-acc { min-height: 35px; }
.cx-pedido .pd-acciones .sec { background: var(--sc-surface); border-color: var(--sc-border); }
.cx-pedido .pd-r-res { min-height: 202px; padding: 10px 14px; }
.cx-pedido .pd-r-res .pd-card-cab { margin-bottom: 4px; }
.cx-pedido .pd-r-res .pd-importes { font-size: 12px; }
.cx-pedido .pd-r-res .pd-importes dt,
.cx-pedido .pd-r-res .pd-importes dd { padding: 4px 0; }
.cx-pedido .pd-r-info { min-height: 300px; padding: 10px 14px; }
.cx-pedido .pd-r-info .pd-card-cab { margin-bottom: 4px; }
.cx-pedido .pd-r-info .pd-info { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; font-size: 12px; }
.cx-pedido .pd-r-info .pd-info dt,
.cx-pedido .pd-r-info .pd-info dd { padding: 4px 0; }
.cx-pedido .pd-r-info .pd-info dt { padding: 4px 0; }
.cx-pedido .pd-r-info .pd-info dd { overflow-wrap: anywhere; }
.cx-pedido .pd-r-info .pd-notas { margin-top: 8px; padding-top: 6px; min-height: 51px; }
.cx-pedido .pd-info-extra { margin-top: 6px; color: var(--sc-text-muted); font-size: 11px; }
.cx-pedido .pd-info-extra dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; margin: 5px 0 0; }
.cx-pedido .pd-info-extra dd { margin: 0; text-align: right; }
.cx-pedido .pd-r-etq { height: 101px; }
@media (max-width: 1100px) { .cx-pedido .pd-fila3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 700px) { .cx-pedido .pd-fila3 { grid-template-columns: minmax(0, 1fr); } }


.cx-pedido .titulo-pantalla { position: relative; top: -14px; }
.cx-pedido .titulo-pantalla h1 { font-size: 36px; line-height: 40px; font-weight: 700; }
.cx-pedido .pd-id { top: -9px; }
.cx-pedido .pd-copiar { width: 19px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--sc-text-muted); }
.cx-pedido .pd-copiar .ic { width: 16px; height: 16px; }
.cx-pedido .pd-id > .chip { min-height: 24px; padding: 4px 8px; }
.cx-pedido .pd-c-lin .pd-tabla { width: 100%; table-layout: fixed; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(1) { width: 4%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(2) { width: 3%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(3) { width: 26%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(4) { width: 13%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(5) { width: 10%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(6) { width: 11%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(7) { width: 5%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(8) { width: 12%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(9) { width: 13%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(10) { width: 3%; }
.cx-pedido .pd-c-lin .pd-tabla input[type=checkbox] { appearance: none; width: 15px; height: 15px; min-width: 15px; min-height: 15px; border: 1px solid var(--sc-border-strong); border-radius: 3px; margin: 0; background: var(--sc-surface); opacity: 1; vertical-align: middle; }
.cx-pedido .pd-c-lin .pd-tabla td.sel, .cx-pedido .pd-c-lin .pd-tabla th.sel { text-align: center; }
.cx-pedido .pd-mini { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; background: transparent; }
.cx-pedido .pd-prod > div { width: auto; flex: 1; }
.cx-pedido .pd-c-lin .pd-tabla td:nth-child(4) { overflow: hidden; text-overflow: ellipsis; }
.cx-pedido .pd-doc-control .ic { width: 16px; height: 16px; stroke-width: 1.5; }
.cx-pedido .pd-pdf { width: 27px; height: 29px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 5px; background: var(--sc-brand-soft); }
.cx-pedido .pd-pdf .ic { width: 16px; height: 16px; }
.cx-pedido .pd-link-off { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--sc-brand); opacity: .55; cursor: not-allowed; }
.cx-pedido .pd-link-off .ic { width: 14px; height: 14px; }
.cx-pedido .pd-ver-todos { margin-left: auto; }
.cx-pedido .pd-off[aria-disabled=true], .cx-pedido .pd-doc-control[aria-disabled=true] { cursor: not-allowed; }
.cx-pedido .pd-fila3 { margin-top: -3px; }
.cx-pedido .pd-id > .chip { display: inline-flex; align-items: center; gap: 4px; }
.cx-pedido .pd-id > .chip::before { content: "•"; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; font-size: 12px; line-height: 1; }
.cx-pedido .pd-id > .chip.verde::before { content: "✓"; }
.cx-pedido .pd-id > .chip.naranja::before { content: "◷"; }
.cx-pedido .pd-id > .chip.rojo::before { content: "×"; }
.cx-pedido .pd-id > .chip.azul::before { content: "◷"; }

.cx-pedido .pd-icono,
.cx-pedido .pd-icono-vacio { width: 20px; height: 20px; flex: 0 0 20px; display: inline-grid; place-items: center; }
.cx-pedido .pd-icono svg { width: 18px; height: 18px; stroke-width: 1.8; }
.cx-pedido .pd-botones .boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cx-pedido .pd-botones .pd-icono { width: 18px; height: 18px; flex-basis: 18px; }
.cx-pedido .pd-botones .pd-icono svg { width: 17px; height: 17px; }
.cx-pedido .pd-entrega { gap: 8px; }
.cx-pedido .pd-entrega .pd-dato { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 9px; }
.cx-pedido .pd-entrega .pd-dato > div { min-width: 0; }
.cx-pedido .pd-entrega .pd-icono { color: var(--sc-text-muted); margin-top: 1px; }
.cx-pedido .pd-entrega .pd-dato .rot { font-size: 11px; line-height: 14px; }
.cx-pedido .pd-entrega .pd-dato .val { font-size: 12px; line-height: 17px; }
.cx-pedido .pd-direccion { margin: 0 0 0 28px; font-size: 12px; line-height: 17px; color: var(--sc-text-muted); }
.cx-pedido .pd-prod b { line-height: 13px; }
.cx-pedido .pd-prod .meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-pedido .pd-prod > div { width: auto; }
.cx-pedido .pd-c-lin .pd-tabla td { height: 43px; padding-top: 2px; padding-bottom: 2px; }
.cx-pedido .pd-c-asig .cx-core-c2-reparto { margin-top: 2px; }
.cx-pedido .pd-estado { align-items: flex-start; gap: 12px; }
.cx-pedido .pd-check { width: 32px; height: 32px; flex: 0 0 32px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--sc-warn-fg); color: var(--sc-on-brand); }
.cx-pedido .pd-estado.verde .pd-check { background: var(--sc-ok-fg); color: var(--sc-on-brand); }
.cx-pedido .pd-estado.naranja .pd-check { background: var(--sc-warn-fg); color: var(--sc-on-brand); }
.cx-pedido .pd-estado.azul .pd-check { background: var(--sc-info-fg); color: var(--sc-on-brand); }
.cx-pedido .pd-estado.rojo .pd-check { background: var(--sc-danger-fg); color: var(--sc-on-brand); }
.cx-pedido .pd-check svg { width: 18px; height: 18px; stroke-width: 2.5; }
.cx-pedido .pd-estado b { font-size: 14px; line-height: 18px; font-weight: 700; }
.cx-pedido .pd-acciones .pd-acc { display: inline-flex; align-items: center; gap: 11px; padding-left: 16px; }
.cx-pedido .pd-acciones .pd-icono { width: 18px; height: 18px; flex-basis: 18px; }
.cx-pedido .pd-acciones .pd-icono svg { width: 18px; height: 18px; }
.cx-pedido .pd-acciones .pd-off { opacity: .6; background: var(--sc-neutral-bg); border-color: var(--sc-border); color: var(--sc-text-muted); }
.cx-pedido .pd-acciones .pd-off.pd-prim { background: var(--sc-neutral-bg); border-color: var(--sc-border); color: var(--sc-text-muted); }
.cx-pedido .pd-botones .pd-off.pd-prim,
.cx-pedido .pd-c-lin .pd-off.pd-prim { opacity: .85; background: var(--sc-neutral-bg); border-color: var(--sc-border-strong); color: var(--sc-text-muted); }
.cx-pedido .pd-botones .pd-off.pd-prim { min-width: 130px; min-height: 38px; justify-content: center; border-radius: 5px; }
.cx-pedido .cx-core-c2-traza { width: 20px; margin-left: 3px; }
.cx-pedido .cx-core-c2-traza summary { color: var(--sc-text-muted); opacity: .5; line-height: 14px; }
.cx-pedido .cx-core-c2-traza:hover summary,
.cx-pedido .cx-core-c2-traza:focus-within summary { opacity: 1; }
.cx-pedido .cx-core-c2-traza summary:focus-visible { outline: 2px solid var(--sc-link); outline-offset: 2px; }
.cx-pedido .pd-r-info .pd-sociedad { margin-top: 3px; }
.cx-pedido .pd-r-info .pd-sociedad .pd-dato { display: flex; gap: 6px; margin: 0; font-size: 11px; line-height: 14px; }
.cx-pedido .pd-r-info .pd-sociedad .rot { display: inline; font-size: 11px; line-height: 14px; }
.cx-pedido .pd-r-info .pd-sociedad .rot::after { content: ":"; }
.cx-pedido .pd-r-info .pd-sociedad .val { display: inline; font-size: 11px; line-height: 14px; }
.cx-pedido .pd-r-info .pd-sociedad .pd-icono-vacio { display: none; }


/* Cuerpo de ficha: iconos, historial, documentos y botones sin acción. */
.cx-pedido .pd-c-asig .pd-card-ico .ic, .cx-pedido .pd-c-tot .pd-card-ico .ic, .cx-pedido .pd-r-etq .pd-card-ico .ic { width: 20px; height: 20px; stroke-width: 1.9; }
.cx-pedido .pd-r-etq .pd-card-cab h2 { display: inline-flex; align-items: center; gap: 10px; }
.cx-pedido .pd-c-hist { position: relative; }
.cx-pedido .pd-c-hist .pd-linea-t li { min-height: 39px; }
.cx-pedido .pd-c-hist .pd-linea-t li > time { margin-left: auto; text-align: right; font-size: 11px; }
.cx-pedido .cx-core-c2-anteriores { position: absolute; top: 9px; right: 14px; margin: 0; }
.cx-pedido .cx-core-c2-anteriores summary { width: 20px; height: 20px; text-align: center; font-size: 17px; line-height: 17px; color: var(--sc-text-muted); }
.cx-pedido .cx-core-c2-anteriores[open] { z-index: 2; padding: 6px; background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: 5px; box-shadow: var(--sc-shadow-card); }
.cx-pedido .cx-core-c2-upload { display: inline-flex; width: 23px; height: 22px; align-items: center; justify-content: center; }
.cx-pedido .cx-core-c2-upload .ic { width: 22px; height: 20px; stroke-width: 1.8; }
.cx-pedido .pd-soltar { min-height: 37px; margin-left: 1px; margin-right: 1px; border: 1px dashed var(--sc-border-strong); border-radius: 5px; background: var(--sc-surface-sunk); }
.cx-pedido .pd-c-lin .pd-card-cab .pd-prim.pd-off { min-width: 132px; min-height: 29px; margin-right: -6px; border-radius: 4px; }
.cx-pedido .pd-c-lin .pd-card-cab .pd-prim.pd-off { background: var(--sc-neutral-bg); border-color: var(--sc-border-strong); color: var(--sc-text-muted); opacity: .85; }
.cx-pedido .pd-c-lin .pd-tabla .chip.naranja { background: var(--sc-warn-bg); color: var(--sc-warn-fg); }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(3) { width: 23%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(4) { width: 13%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(5) { width: 10%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(6) { width: 12%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(7) { width: 7%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(8) { width: 11%; }
.cx-pedido .pd-c-lin .pd-tabla th:nth-child(9) { width: 14%; }
.cx-pedido .pd-c-lin .pd-tabla td:nth-child(5) .meta { display: block; margin-left: 0; font-size: 10px; line-height: 12px; }
.cx-pedido .pd-c-lin .pd-tabla td:nth-child(5) .meta::before { content: none; }
.cx-pedido .pd-c-lin .pd-tabla td:nth-child(3),
.cx-pedido .pd-c-lin .pd-tabla td:nth-child(4) { font-size: 12px; }
.cx-pedido .pd-c-lin .pd-prod b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-pedido .pd-entrega { grid-template-columns: minmax(0, 1fr) 177px; }
.cx-pedido .pd-entrega .pd-dato .rot { font-size: 10px; line-height: 13px; }
.cx-pedido .pd-c-lin .pd-prod { min-width: 0; gap: 10px; }
.cx-pedido .pd-prod b { line-height: 15px; }
.cx-pedido .cx-core-c2-traza summary { list-style: none; font-size: 10px; }
.cx-pedido .cx-core-c2-traza summary::marker, .cx-pedido .cx-core-c2-anteriores summary::marker { content: ""; }
.cx-pedido .cx-core-c2-traza summary::-webkit-details-marker, .cx-pedido .cx-core-c2-anteriores summary::-webkit-details-marker { display: none; }
.cx-pedido .pd-r-etq { height: 107px; }
.cx-pedido .pd-r-etq .chip { min-height: 27px; padding: 5px 10px; border-radius: 14px; }
.cx-pedido .pd-c-docs .pd-soltar { background: var(--sc-surface); }
.cx-pedido .pd-c-tot .pd-total-pedido { background: color-mix(in srgb, var(--sc-brand-soft) 97%, var(--sc-brand) 3%); }

/* === CX-OBR11 === */
.ocx-obras .fo-lista { min-height: 670px; display: flex; flex-direction: column; }
.ocx-obras .fo-lista .fo-pie { margin-top: auto; min-height: 50px; padding-top: 0; }
.ocx-obras .fo-aside .fo-lado:nth-child(4) { flex: 1; min-height: 258px; }
.ocx-obras .fo-aside { min-height: 880px; }
.ocx-obras .fo-aside .fo-lado:nth-child(4) .vacio { min-height: 178px; }
.ocx-obras .fo-donut { width: 122px; height: 122px; }
.ocx-obras .fo-donut-fila { grid-template-columns: 122px minmax(0, 1fr); }
.ocx-obras .fo-compras-cab { cursor: help; }
.ocx-obras .fo-compras-cab::after { content: " ⓘ"; font-size: 13px; line-height: 1; color: var(--sc-text-muted); }
.ocx-obras .fo-nota { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.ocx-obras .fo-nota:focus-within, .ocx-obras .fo-nota[open] { position: relative; width: auto; height: auto; overflow: visible; }
.ocx-obras .fo-nota summary { width: 16px; height: 16px; }
.ocx-360 .fo-360-cab { position: relative; }
.ocx-360 .fo-360-metadatos { position: absolute; left: 435px; top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ocx-360 .fo-360-fechas { margin: 0; font-size: 11px; color: var(--sc-text-muted); }
.ocx-360 .fo-360-tit h1 { font-size: 34px; line-height: 40px; font-weight: 700; }
.ocx-360 .fo-consumo > .fo-nota { top: 11px; right: 14px; }
.ocx-360 .fo-consumo > .fo-nota summary { width: 16px; height: 16px; overflow: hidden; }
.ocx-360 .fo-consumo > .fo-nota summary .ico { width: 15px; height: 15px; }
.ocx-360 .fo-mat .fo-ref { font-size: 11px; white-space: nowrap; }
.ocx-360 .fo-mat .fo-ref b { font-weight: 600; }
.ocx-360 .fo-pedido-sec { display: inline; margin-left: 8px; font-size: 10px; line-height: 12px; color: var(--sc-text-muted); }
.ocx-360 .fo-pedido-sec a { color: var(--sc-text-muted); }
.ocx-360 .fo-estado-consumo { display: inline-flex; align-items: center; min-width: 70px; min-height: 17px; padding: 0 6px; border-radius: var(--sc-r-pill); background: var(--sc-neutral-bg); color: var(--sc-text-muted); font-size: 11px; }
.ocx-360 .fo-mat td { height: 27px; }
.ocx-360 .fo-360-graf > .fo-caja { min-height: 245px; }
.ocx-360 .fo-lienzo { height: 175px; }
.ocx-360 .fo-fases { min-height: 180px; }
.ocx-360 .fo-consumo { min-height: 272px; }
.ocx-360 .fo-mat td { height: 23px; padding-top: 1px; padding-bottom: 1px; line-height: 14px; }
.ocx-360 .fo-estado-consumo { min-width: 0; min-height: 18px; padding: 0; border-radius: 0; background: transparent; font-size: 12px; }
.ocx-360 .fo-360-graf > .fo-caja { min-height: 260px; }
.ocx-360 .fo-lienzo { height: 190px; }
.ocx-360 .fo-fases { min-height: 195px; }
.ocx-360 .fo-filtros-360 .fo-select:has(.ico)::after { content: none; }
.ocx-360 .fo-filtros-360 .fo-select:has(.ico) { justify-content: flex-start; gap: 8px; }
.ocx-360 .fo-filtros-360 .fo-select:has(.ico) .ico { width: 14px; height: 14px; }
.ocx-360 .fo-consumo { position: relative; }
.ocx-360 .fo-consumo > .fo-nota { position: absolute; margin: 0; }
.ocx-360 .fo-ver.off, .ocx-obras .fo-ver.off { color: var(--sc-text-muted); }
.ocx-360 .fo-ver::after, .ocx-obras .fo-ver::after { content: "→"; display: inline-block; margin-left: 8px; font-size: 16px; line-height: 12px; vertical-align: middle; }
.ocx-obras .fo-filtros-obra > .fo-boton { min-width: 110px; }
.ocx-obras .fo-filtros-obra > .fo-boton .ico { width: 16px; height: 16px; }

/* La tabla no puede crecer más allá de la tarjeta por el contenido de una celda. */
.ocx-obras .fo-tabla-obras { table-layout: fixed; width: 100%; }
.ocx-obras .fo-tabla-obras .fo-col-sel { width: 4%; }
.ocx-obras .fo-tabla-obras .fo-col-obra { width: 16%; }
.ocx-obras .fo-tabla-obras .fo-col-codigo { width: 12%; }
.ocx-obras .fo-tabla-obras .fo-col-cliente { width: 5%; }
.ocx-obras .fo-tabla-obras .fo-col-responsable { width: 9%; }
.ocx-obras .fo-tabla-obras .fo-col-estado { width: 8%; }
.ocx-obras .fo-tabla-obras .fo-col-presupuesto { width: 11%; }
.ocx-obras .fo-tabla-obras .fo-col-compras { width: 10%; }
.ocx-obras .fo-tabla-obras .fo-col-facturas { width: 10%; }
.ocx-obras .fo-tabla-obras .fo-col-ejecucion { width: 9%; }
.ocx-obras .fo-tabla-obras .fo-col-acciones { width: 6%; }
.ocx-obras .fo-tabla-obras th, .ocx-obras .fo-tabla-obras td { overflow: hidden; text-overflow: ellipsis; }
.ocx-obras .fo-tabla-obras th { font-size: 11px; padding-left: 3px; padding-right: 3px; }
.ocx-obras .fo-tabla-obras td { height: 48px; font-size: 12px; line-height: 15px; }
.ocx-obras .fo-tabla-obras .fo-obra { max-width: none; }
.ocx-obras .fo-tabla-obras .fo-obra b { font-size: 12px; font-weight: 600; }
.ocx-obras .fo-tabla-obras .fo-avance { width: 55px; height: 8px; }
.ocx-obras .fo-filtros-obra { gap: 10px; margin-top: -12px; margin-bottom: 20px; }
.ocx-obras .fo-filtros-obra .fo-buscar { flex: 0 0 300px; min-height: 32px; }
.ocx-obras .fo-filtros-obra .fo-campo { flex: 0 0 101px; }
.ocx-obras .fo-filtros-obra .fo-campo .fo-select { min-height: 32px; }
.ocx-obras .fo-filtros-obra > .fo-boton { min-height: 32px; }
.ocx-obras .fo-aside .fo-lado:nth-child(1) { min-height: 216px; }
.ocx-obras .fo-aside .fo-lado:nth-child(2),
.ocx-obras .fo-aside .fo-lado:nth-child(3) { min-height: 198px; }
.ocx-obras .fo-aside .fo-lado:nth-child(4) .vacio { min-height: 0; }
.ocx-obras .fo-aside .fo-lado:nth-child(4) .vacio,
.ocx-360 .fo-lienzo .vacio,
.ocx-360 .fo-fases .vacio { border: 0; border-radius: 0; padding: 18px; background: transparent; }
.ocx-obras .fo-donut { width: 124px; height: 124px; border-width: 19px; }
.ocx-obras .fo-donut-fila { grid-template-columns: 124px minmax(0, 1fr); }
.ocx-obras .fo-lista { min-height: 715px; }
.ocx-obras .fo-lista .fo-pie { min-height: 62px; }
.ocx-360 .fo-360-graf > .fo-caja:first-child > h2 { min-height: 40px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ocx-360 .fo-360-graf .fo-h-der { position: static; margin-left: auto; white-space: nowrap; }
.ocx-360 .fo-lienzo { border-top: 0; border-bottom: 0; }
.ocx-360 .fo-filtros-360 { gap: 10px; }
.ocx-360 .fo-filtros-360 .fo-buscar { flex: 0 0 350px; }
.ocx-360 .fo-filtros-360 .fo-select { min-width: 142px; }
.ocx-360 .fo-mat { table-layout: fixed; }
.ocx-360 .fo-mat th:nth-child(1) { width: 8%; }
.ocx-360 .fo-mat th:nth-child(2) { width: 18%; }
.ocx-360 .fo-mat th:nth-child(3) { width: 9%; }
.ocx-360 .fo-mat th:nth-child(4) { width: 5%; }
.ocx-360 .fo-mat th:nth-child(5), .ocx-360 .fo-mat th:nth-child(6) { width: 9%; }
.ocx-360 .fo-mat th:nth-child(7) { width: 6%; }
.ocx-360 .fo-mat th:nth-child(8) { width: 9%; }
.ocx-360 .fo-mat th:nth-child(9) { width: 11%; }
.ocx-360 .fo-mat th:nth-child(10) { width: 13%; }
.ocx-360 .fo-mat th:nth-child(11) { width: 3%; }
.ocx-360 .fo-mat td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocx-360 .fo-mat td:nth-child(2) { min-width: 170px; }
.ocx-360 .kpis.tira-kpi { margin-bottom: 4px; }
.ocx-360 .fo-360-graf { margin-bottom: 8px; }
.ocx-360 .fo-360-graf > .fo-caja { min-height: 259px; }
.ocx-360 .fo-lienzo { height: 180px; }

.ocx-obras .fo-filtros-obra .fo-buscar, .ocx-obras .fo-filtros-obra .fo-campo .fo-select, .ocx-obras .fo-filtros-obra > .fo-boton { min-height: 34px; }
.ocx-obras .fo-lista .fo-mostrar .fo-select { width: 125px; min-height: 34px; }
.ocx-obras .fo-aside .fo-lado:nth-child(2) { min-height: 194px; }
.ocx-obras .fo-aside .fo-lado:nth-child(3) { min-height: 194px; }
.ocx-obras .fo-tabla-obras .fo-codigo .proc { display: inline; margin-left: 5px; font-size: 11px; color: var(--sc-text-muted); vertical-align: baseline; }
@media (max-width: 1100px) { .ocx-360 .fo-360-metadatos { position: static; margin: 8px 0 0 16px; } }

/* === CX-PRV11 === */
.pcx-list .tira-kpi { margin-top: -5px; margin-bottom: 18px; gap: 10px; }
.pcx-list .tira-kpi .kpi { height: 100px; min-height: 100px; padding-top: 10px; padding-bottom: 8px; }
.pcx-list .pv-filtros { gap: 9px; margin: 0 0 12px; }
.pcx-list .pv-tabla .barra-tabla { padding-bottom: 5px; }
.pcx-list .pd-tabla th { padding-top: 3px; padding-bottom: 3px; }
.pcx-list .pd-tabla td { height: 53px; vertical-align: middle; font-size: 12px; }
.pcx-list .pv-prov a { font-size: 13px; font-weight: 600; }
.pcx-list .pv-prov .meta { font-size: 11px; line-height: 15px; }
.pcx-list .pv-est .chip, .pcx-list .pd-tabla .acc { vertical-align: middle; }
.pcx-list .pv-filtros .ancho-buscador { flex: 1 1 350px; }
.pcx-list .pv-mas-wrap { display: inline-flex; align-items: stretch; }
.pcx-list .pv-mas-wrap .pv-mas { min-width: 114px; min-height: 38px; justify-content: center; border: 1px solid var(--sc-border-strong); border-radius: 5px; background: white; color: var(--sc-text); padding: 0 9px; }
.pcx-list .pd-tabla { table-layout: fixed; }
.pcx-list .pd-tabla th.sel, .pcx-list .pd-tabla td.sel { width: 34px; }
.pcx-list .pd-tabla th:nth-child(2) { width: 19%; }
.pcx-list .pd-tabla th:nth-child(3) { width: 10%; }
.pcx-list .pd-tabla th:nth-child(4) { width: 9%; }
.pcx-list .pd-tabla th:nth-child(5) { width: 9%; }
.pcx-list .pd-tabla th:nth-child(6) { width: 17%; }
.pcx-list .pd-tabla th:nth-child(7) { width: 12%; }
.pcx-list .pd-tabla th:nth-child(8) { width: 11%; }
.pcx-list .pv-prov { gap: 6px; min-width: 0; }
.pcx-list .pv-logo { width: 32px; }
.pcx-list .pv-prov > div { min-width: 0; }
.pcx-list .pv-prov a { overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.pcx-list .pv-cond .proc { display: block; font-size: 10px; color: var(--sc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcx-list .pv-est .pv-homologa { margin: 0; padding: 3px 9px; font-size: 11px; white-space: nowrap; }
.pcx-list .pv-est form { margin-top: 3px; }
.pcx-detail .pv-fila1 { margin-top: -5px; }
.pcx-detail .pv-fila1 .pv-card { height: 247px; min-height: 247px; }
.pcx-detail .pv-identidad { grid-template-rows: 84px minmax(0, 1fr); padding-top: 13px; padding-bottom: 11px; }
.pcx-detail .pv-resumen { background: transparent; border-left: 1px solid var(--sc-border); border-radius: 0; padding: 2px 8px 0 16px; font-size: 12px; line-height: 1.4; }
.pcx-detail .pv-resumen .meta { font-size: 12px; line-height: 1.35; }
.pcx-detail .pv-datos { gap: 4px 18px; }
.pcx-detail .tira-kpi { gap: 9px; margin: 0 0 10px; }
.pcx-detail .tira-kpi .kpi { height: 92px; min-height: 92px; padding-top: 10px; padding-bottom: 8px; }
.pcx-detail .pv-fila3 { margin: 10px 0; }
.pcx-detail .pv-fila3 .pv-card { min-height: 300px; }
.pcx-detail .pv-fila-baja .pv-card { min-height: 220px; }
.pcx-detail .pv-vacio { padding: 16px 18px; font-size: 12px; line-height: 1.4; }
.pcx-detail .pv-resumen { width: 256px; background: var(--sc-surface-sunk); border: 0; border-radius: 6px; padding: 17px 18px; line-height: 1.45; }
.pcx-detail .pv-vacio { border: 0; border-radius: 0; background: transparent; padding: 7px 0; margin: 0; gap: 4px; font-size: 12px; line-height: 1.4; }
.pcx-detail .pv-vacio b { font-size: 12px; font-weight: 600; }
.pcx-detail .pv-cobertura .pv-vacio + .pv-vacio { border-top: 1px solid var(--sc-border); padding-top: 13px; margin-top: 10px; }
.pcx-detail .pv-incidencias .pv-vacio + .pv-vacio { border-top: 1px solid var(--sc-border); padding-top: 13px; margin-top: 10px; }
.pcx-detail .pv-fila-baja .pv-card { min-height: 220px; }
.pcx-detail .pcx-actividad { margin-top: 12px; font-size: 12px; }
.pcx-detail .pcx-actividad li { min-height: 62px; }
.pcx-alta .pn-cabecera { align-items: center; min-height: 72px; padding-right: 0; }
.pcx-alta .pn-cabecera h1 { font-size: 28px; line-height: 34px; }
.pcx-alta .pn-cabecera p { font-size: 13px; white-space: nowrap; }
.pcx-alta .pcx-actions { display: flex; align-items: center; gap: 9px; flex: none; }
.pcx-alta .pcx-actions > * { height: 38px; min-height: 38px; padding: 0 13px; border-radius: 5px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.pcx-alta .pcx-actions .pcx-primary { background: var(--sc-brand); color: var(--sc-on-brand); border: 1px solid var(--sc-brand); font-weight: 600; }
.pcx-alta .pcx-actions [aria-disabled="true"] { opacity: .68; cursor: not-allowed; }
.pcx-alta .pn-reticula { grid-template-columns: repeat(3, minmax(0, 1fr)) 292px; grid-template-rows: 89px 159px 150px 143px 220px 130px auto; gap: 9px 11px; margin-top: -2px; }
.pcx-alta .pn-tarjeta, .pcx-alta .pn-pasos { padding: 10px 15px; min-width: 0; }
.pcx-alta .pn-pasos { grid-column: 1/4; grid-row: 1; height: 89px; min-height: 0; padding: 17px 18px; }
.pcx-alta .pn-pasos li { gap: 10px; font-size: 12px; }
.pcx-alta .pn-pasos b { width: 30px; height: 30px; flex-basis: 30px; }
.pcx-alta .pn-pasos div { min-width: 0; white-space: nowrap; }
.pcx-alta .pn-legal { grid-column: 1/4; grid-row: 2; min-height: 159px; }
.pcx-alta .pn-direccion { grid-column: 1/4; grid-row: 3; min-height: 150px; }
.pcx-alta .pn-contacto { grid-column: 1/4; grid-row: 4; height: 143px; min-height: 143px; position: relative; }
.pcx-alta .pcx-pay { grid-column: 1; grid-row: 5; height: 220px; }
.pcx-alta .pcx-cats { grid-column: 2; grid-row: 5; height: 220px; }
.pcx-alta .pn-comercial { grid-column: 3; grid-row: 5; height: 220px; }
.pcx-alta .pcx-evidence { grid-column: 1/3; grid-row: 6; min-height: 130px; }
.pcx-alta .pcx-catalog { grid-column: 3; grid-row: 6; min-height: 130px; }
.pcx-alta .pcx-state { grid-column: 4; grid-row: 1; height: 141px; }
.pcx-alta .pcx-dupes { grid-column: 4; grid-row: 2; margin-top: 53px; height: 281px; }
.pcx-alta .pcx-validation { grid-column: 4; grid-row: 4; margin-top: 19px; height: 225px; }
.pcx-alta .pn-siguientes { grid-column: 4; grid-row: 5/7; margin-top: 103px; min-height: 235px; }
.pcx-alta .pn-pie { grid-column: 1/4; grid-row: 7; border: 0; padding: 4px 12px; }
.pcx-alta .pn-pie p { margin: 0; font-size: 11px; }
.pcx-alta h2 { border: 0; padding: 0; display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 14px; }
.pcx-alta h2 .ico { width: 18px; height: 18px; flex: none; color: var(--sc-brand); }
.pcx-alta .pcx-legal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) 140px; grid-template-rows: repeat(2, 45px); gap: 8px 12px; }
.pcx-alta .pcx-legal-grid > :nth-child(3) { grid-column: 1; grid-row: 2; }
.pcx-alta .pcx-legal-grid > :nth-child(4) { grid-column: 2; grid-row: 2; }
.pcx-alta .pcx-legal-grid > :nth-child(5) { grid-column: 2; grid-row: 2; margin-left: 50%; }
.pcx-alta .pcx-legal-grid > :nth-child(4) { width: 48%; }
.pcx-alta .pcx-legal-grid .pcx-upload { grid-column: 3; grid-row: 1/3; }
.pcx-alta .pcx-address-grid { display: grid; grid-template-columns: 2fr .65fr 1fr 1fr; gap: 8px 12px; }
.pcx-alta .pcx-address-grid > :nth-child(5), .pcx-alta .pcx-address-grid > :nth-child(6), .pcx-alta .pcx-address-grid > :nth-child(7) { grid-column: span 1; }
.pcx-alta .pcx-address-grid > :nth-child(5) { grid-column: 1; }
.pcx-alta .pcx-address-grid > :nth-child(6) { grid-column: 2/4; }
.pcx-alta .pcx-address-grid > :nth-child(7) { grid-column: 4; }
.pcx-alta .pn-campo label, .pcx-alta .pcx-label { font-size: 11px; line-height: 16px; display: block; margin: 0; color: var(--sc-text-muted); }
.pcx-alta .pn-campo input, .pcx-alta .pn-campo textarea, .pcx-alta .pcx-disabled { height: 32px; min-height: 32px; padding: 5px 8px; font-size: 12px; line-height: 18px; border: 1px solid var(--sc-border-strong); border-radius: 5px; background: white; }
.pcx-alta .pcx-disabled { display: flex; align-items: center; width: 100%; color: var(--sc-text-muted); background: white; opacity: 1; }
.pcx-alta .pcx-select { justify-content: space-between; }
.pcx-alta .pcx-select::after { content: "⌄"; font-size: 17px; line-height: 12px; color: var(--sc-text-muted); }
.pcx-alta .pcx-disabled::placeholder { color: var(--sc-text-muted); opacity: 1; }
.pcx-alta .pn-requerido { color: var(--sc-brand); margin-left: 2px; }
.pcx-alta .pcx-upload { border: 1px dashed var(--sc-border-strong); border-radius: 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 12px; color: var(--sc-text-muted); padding: 8px; }
.pcx-alta .pcx-upload small { display: block; font-size: 10px; margin-top: 6px; }
.pcx-alta .pcx-add { position: absolute; right: 14px; top: 8px; border: 1px solid var(--sc-border-strong); padding: 3px 10px; font-size: 11px; border-radius: 4px; }
.pcx-alta .pcx-contact-head, .pcx-alta .pcx-contact-row { display: grid; grid-template-columns: 1.1fr 1fr 1.5fr 1fr 1fr; gap: 7px; align-items: center; padding: 5px 9px; font-size: 11px; }
.pcx-alta .pcx-contact-head { background: var(--sc-surface-sunk); color: var(--sc-text-muted); }
.pcx-alta .pcx-contact-row { min-height: 40px; border-bottom: 1px solid var(--sc-border); }
.pcx-alta .pcx-contact-row .pn-campo label { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.pcx-alta .pcx-contact-row input { width: 100%; }
.pcx-alta .pcx-pay .pn-campo, .pcx-alta .pcx-cats .pn-campo { margin-bottom: 6px; }
.pcx-alta .pcx-pay-row { display: grid; grid-template-columns: .75fr 1.45fr .8fr; gap: 6px; }
.pcx-alta .pcx-pay-row .pn-campo { min-width: 0; }
.pcx-alta .pcx-pay-row .pcx-label { white-space: nowrap; font-size: 10px; }
.pcx-alta .pcx-pay-row .pcx-disabled { padding: 4px; }
.pcx-alta .pcx-dupe-note { margin: 0 0 10px; padding: 10px; }
.pcx-alta .pcx-dupe-results { border-top: 1px solid var(--sc-border); min-height: 145px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--sc-text-muted); font-size: 12px; }
.pcx-alta .pn-comercial textarea { height: 70px; }
.pcx-alta .pcx-evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcx-alta .pcx-evidence h2 { grid-column: 1/-1; margin-bottom: 0; }
.pcx-alta .pcx-evidence .pcx-upload { min-height: 65px; }
.pcx-alta .pcx-docs { font-size: 12px; color: var(--sc-text-muted); align-self: center; }
.pcx-alta .pcx-state dl { display: grid; grid-template-columns: 1fr auto; gap: 5px; font-size: 11px; margin: 8px 0; }
.pcx-alta .pcx-state dt { color: var(--sc-text-muted); }
.pcx-alta .pcx-state dd { margin: 0; }
.pcx-alta .pcx-dupes p, .pcx-alta .pcx-validation li, .pcx-alta .pn-siguientes li { font-size: 11px; line-height: 1.4; }
.pcx-alta .pcx-dupes p { padding: 12px; background: var(--sc-warn-bg); border-radius: 5px; }
.pcx-alta .pcx-validation ul { list-style: none; margin: 0; padding: 0; }
.pcx-alta .pcx-validation li { padding: 4px 0 4px 20px; position: relative; }
.pcx-alta .pcx-validation li::before { content: "○"; color: var(--sc-text-muted); position: absolute; left: 0; }
.pcx-alta .pn-siguientes ol { margin: 8px 0 0; }
.pcx-alta .pn-siguientes li { padding-bottom: 8px; }
.pcx-list .pv-filtros .ancho-buscador { position: relative; }
.pcx-list .pv-filtros .ancho-buscador .ico { position: absolute; left: 12px; top: 11px; width: 16px; height: 16px; color: var(--sc-text-muted); }
.pcx-list .pv-filtros .ancho-buscador input { padding-left: 40px; }
.pcx-list .pcx-batch { display: inline-flex; align-items: center; gap: 6px; border-color: var(--sc-border-strong); border-radius: 6px; }
.pcx-list .pcx-batch .ico { width: 16px; height: 16px; }
.pcx-list .pv-desp label { margin-right: 10px; padding-right: 10px; }
.pcx-list .pd-tabla th:nth-child(2) { width: 16%; }
.pcx-list .pd-tabla th:nth-child(6) { width: 16%; }
.pcx-list .pd-tabla th { font-size: 12px; font-weight: 500; }
.pcx-list .pd-tabla td { font-size: 13px; }
.pcx-list .pv-prov a { font-size: 14px; line-height: 18px; }
.pcx-list .pv-prov .meta, .pcx-list .pd-tabla td .meta { font-size: 12px; line-height: 16px; }
.pcx-list .pv-cond .proc { font-size: 11px; }
.pcx-list .pv-est .chip { font-size: 12px; font-weight: 500; }
.pcx-list .pd-tabla input[type="checkbox"], .pcx-list .pv-sel input[type="checkbox"] { width: 16px; height: 16px; border-radius: 3px; }
.pcx-list .pv-tabla .pie-tabla { min-height: 78px; padding: 12px 8px; }
.pcx-list .pv-tabla .paginador { display: flex; align-items: center; gap: 8px; }
.pcx-list .pcx-page-arrow { width: 36px; height: 36px; min-height: 36px; border: 1px solid var(--sc-border-strong); border-radius: 5px; background: var(--sc-surface); color: var(--sc-text-muted); font-size: 19px; }
.pcx-detail .pv-fila1 { margin-top: 5px; }
.pcx-detail .pv-fila1 .pv-card { height: 246px; min-height: 246px; }
.pcx-detail .pv-identidad { grid-template-rows: 84px minmax(0, 1fr); }
.pv.pcx-detail .kpis.tira-kpi { margin-bottom: 14px; }
.pv.pcx-detail .kpis.tira-kpi .kpi { height: 92px; min-height: 92px; }
.pcx-detail .pv-fila3 { margin-top: 0; }
.pcx-detail .tira-kpi .kpi .cifra { font-size: 24px; line-height: 29px; }
.pcx-detail .tira-kpi .kpi .rotulo { font-size: 12px; font-weight: 500; }
.pcx-detail .tira-kpi .kpi .nota { font-size: 12px; }
.pcx-detail .pv-card-cab { display: flex; align-items: center; gap: 8px; }
.pcx-detail .pv-card-cab h2 { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 18px; }
.pcx-detail .pv-card-cab .pv-mas { flex: none; margin-left: auto; font-size: 12px; }
.pcx-detail .pv-mas.off { color: var(--sc-brand); opacity: .65; font-weight: 500; }
.pcx-detail .pv-mas .ico { width: 14px; height: 14px; }
.pcx-detail .pv-actividad .pv-card-cab h2 { font-size: 13px; white-space: nowrap; }
.pcx-detail .pv-fila-baja { margin-top: 12px; }
.pcx-detail .pv-eval .pv-card-cab { margin-bottom: 10px; }
.pcx-detail .pv-criterios { gap: 3px; }
.pcx-detail .pv-criterios li { font-size: 12px; min-height: 20px; }
.pcx-detail .pv-eval .pv-pie-card { margin-top: 8px; }
.pcx-detail .pv-barra { height: 8px; }
.pcx-detail .pcx-orders { table-layout: fixed; width: 100%; font-size: 11px; }
.pcx-detail .pcx-orders col:nth-child(1) { width: 19%; }
.pcx-detail .pcx-orders col:nth-child(2) { width: 18%; }
.pcx-detail .pcx-orders col:nth-child(3) { width: 21%; }
.pcx-detail .pcx-orders col:nth-child(4) { width: 19%; }
.pcx-detail .pcx-orders col:nth-child(5) { width: 23%; }
.pcx-detail .pcx-orders th, .pcx-detail .pcx-orders td { width: auto; min-width: 0; padding: 4px 3px; font-size: 11px; }
.pcx-detail .pcx-orders th:nth-child(3), .pcx-detail .pcx-orders td:nth-child(3) { width: auto; }
.pcx-detail .pcx-orders th:nth-child(2), .pcx-detail .pcx-orders td:nth-child(2) { width: auto; }
.pcx-detail .pcx-orders th:first-child, .pcx-detail .pcx-orders td:first-child { width: auto; }
.pcx-detail .pcx-orders th:last-child, .pcx-detail .pcx-orders td:last-child { white-space: nowrap; }
.pcx-alta .pcx-evidence { grid-column: 1/4; grid-template-columns: 1.5fr 1fr; width: 62%; justify-self: start; }
.pcx-alta .pcx-evidence .pcx-upload { max-width: 100%; }
.pcx-alta .pcx-catalog { grid-column: 1/4; grid-row: 6; width: calc(38% - 12px); justify-self: end; }
.pcx-alta .pn-campo label, .pcx-alta .pcx-label { font-size: 12px; line-height: 17px; }
.pcx-alta .pn-campo input, .pcx-alta .pn-campo textarea, .pcx-alta .pcx-disabled { font-size: 14px; }
.pcx-alta h2 { font-size: 15px; }
.pcx-alta .pn-ayuda, .pcx-alta .pcx-dupes p, .pcx-alta .pcx-validation li, .pcx-alta .pn-siguientes li { font-size: 12px; }
.pcx-alta .pcx-upload .ico { width: 28px; height: 28px; margin-bottom: 8px; color: var(--sc-text-muted); }
.pcx-alta .pcx-state { position: relative; }
.pcx-alta .pcx-state h2 { padding-right: 84px; }
.pcx-alta .pcx-state-badge { position: absolute; top: 10px; right: 13px; display: inline-flex; align-items: center; justify-content: center; min-width: 80px; height: 28px; border-radius: 99px; background: var(--sc-brand-soft); color: var(--sc-brand); font-size: 12px; font-weight: 500; }
.pcx-alta .pcx-dupe-note { display: flex; gap: 10px; align-items: flex-start; }
.pcx-alta .pcx-dupe-note .ico { width: 18px; height: 18px; flex: none; color: var(--sc-warn-fg); }
.pcx-alta .pn-siguientes ol { list-style: none; padding-left: 25px; margin-top: 12px; border-left: 2px solid var(--sc-border-strong); }
.pcx-alta .pn-siguientes li { position: relative; min-height: 54px; padding: 0 0 12px 14px; }
.pcx-alta .pn-siguientes li::before { content: ""; position: absolute; left: -33px; top: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sc-text-muted); background: var(--sc-surface); }
.pcx-alta .pn-siguientes li:first-child::before { background: var(--sc-brand); border-color: var(--sc-brand); }
.pcx-alta .pcx-counter { display: block; text-align: right; color: var(--sc-text-muted); font-size: 11px; line-height: 13px; }
@media (max-width: 1100px) {
  .pcx-alta .pn-cabecera { flex-wrap: wrap; }
  .pcx-alta .pn-cabecera p { white-space: normal; }
  .pcx-alta .pcx-actions { flex-wrap: wrap; }
  .pcx-alta .pn-reticula { display: flex; flex-direction: column; }
  .pcx-alta .pn-reticula > * { width: 100%; height: auto; min-height: 0; margin: 0; }
  .pcx-alta .pcx-legal-grid, .pcx-alta .pcx-address-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; }
  .pcx-alta .pcx-legal-grid > *, .pcx-alta .pcx-address-grid > * { grid-column: auto !important; grid-row: auto !important; width: auto !important; margin: 0 !important; }
}

/* Medidas de la tabla del mockup: 53 px por fila y proveedor a una línea. */
.pcx-list .pv-filtros { gap: 10px; flex-wrap: nowrap; }
.pcx-list .pv-filtros .ancho-buscador { flex: 0 0 365px; width: 365px; }
.pcx-list .pv-desp { flex: none; min-width: 0; }
.pcx-list .pv-desp:nth-of-type(2) { width: 150px; }
.pcx-list .pv-desp:nth-of-type(3) { width: 182px; }
.pcx-list .pv-desp:nth-of-type(4) { width: 156px; }
.pcx-list .pv-desp:nth-of-type(5) { width: 170px; }
.pcx-list .pv-mas-wrap { flex: 0 0 135px; }
.pcx-list .pv-mas-wrap .pv-mas { width: 135px; min-width: 0; }
.pcx-list .pd-tabla th:nth-child(2) { width: 19%; }
.pcx-list .pd-tabla th:nth-child(3) { width: 10%; }
.pcx-list .pd-tabla th:nth-child(4) { width: 8%; }
.pcx-list .pd-tabla th:nth-child(5) { width: 8%; }
.pcx-list .pd-tabla th:nth-child(6) { width: 16%; }
.pcx-list .pd-tabla th:nth-child(7) { width: 10%; }
.pcx-list .pd-tabla th:nth-child(8) { width: 11%; }
.pcx-list .pd-tabla th:nth-child(9) { width: 12%; }
.pcx-list .pd-tabla td { height: 53px; padding-top: 4px; padding-bottom: 4px; }
.pcx-list .pv-prov { gap: 8px; }
.pcx-list .pv-prov .pv-logo { flex: 0 0 56px; width: 56px; height: 32px; border: 1px solid var(--sc-border); border-radius: 4px; background: var(--sc-surface-sunk); color: var(--sc-text-muted); font-size: 11px; font-weight: 600; }
.pcx-list .pv-prov > div { width: calc(100% - 64px); }
.pcx-list .pv-prov a, .pcx-list .pv-prov .meta { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcx-list .pv-prov a { font-size: 12px; line-height: 16px; }
.pcx-list .pv-prov .meta { font-size: 11px; line-height: 15px; }
.pcx-list .pd-tabla td .pd-no { font-size: 12px; font-style: normal; }
.pcx-list .pd-tabla td .pv-nota { display: inline-flex; width: 62px; min-width: 0; height: 24px; align-items: center; justify-content: center; }
.pcx-list .pv-tabla .barra-tabla .izq { gap: 8px; }
.pcx-list .pv-tabla .barra-tabla .pv-sel { margin-right: 8px; }
.pcx-list .pv-tabla .barra-tabla .pcx-batch { height: 34px; min-height: 34px; border: 1px solid var(--sc-border); border-radius: 4px; background: var(--sc-surface); padding: 0 11px; }
.pcx-list .pv-tabla .pie-tabla select { border: 1px solid var(--sc-border); border-radius: 4px; height: 32px; min-height: 32px; }
.pcx-list .pcx-page-arrow { border-color: var(--sc-border); width: 32px; height: 32px; min-height: 32px; }
/* La ficha mantiene el dato de cada pedido y le da una columna útil. */
.pcx-detail .pv-fila-baja { grid-template-columns: minmax(0, 41fr) minmax(0, 27fr) minmax(0, 32fr); gap: 11px; }
.pcx-detail .pv-fila-baja .pv-card { height: 215px; min-height: 215px; overflow: auto; }
.pcx-detail .pv-fila3:not(.pv-fila-baja) { margin-bottom: 10px; }
.pcx-detail .pv-fila-baja { margin-top: 10px; }
.pcx-detail .pv-eval .pv-nota { display: flex; gap: 8px; background: transparent; border-radius: 0; padding: 0; margin-bottom: 8px; }
.pcx-detail .pv-eval .pv-cifra { display: inline-flex; align-items: baseline; justify-content: center; min-width: 98px; height: 36px; padding: 2px 10px; border-radius: 5px; }
.pcx-detail .pv-eval .pv-nota .chip { flex: none; }
.pcx-detail .pv-eval .pv-ultima { margin-left: auto; }
.pcx-detail .pv-resumen { background: var(--sc-surface-sunk); }
.pcx-detail .pv-mas.off { color: var(--sc-brand); opacity: 1; }
.pcx-detail .pv-acciones .boton.sec { border-color: var(--sc-border); }
.pcx-detail .pv-acciones .ico { width: 18px; height: 18px; }
.pcx-detail .pcx-orders col:nth-child(1) { width: 20%; }
.pcx-detail .pcx-orders col:nth-child(2) { width: 17%; }
.pcx-detail .pcx-orders col:nth-child(3) { width: 21%; }
.pcx-detail .pcx-orders col:nth-child(4) { width: 19%; }
.pcx-detail .pcx-orders col:nth-child(5) { width: 23%; }
.pcx-detail .pcx-orders th, .pcx-detail .pcx-orders td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Alta: el grupo de acciones sigue el título; los campos ocupan el ancho del mockup. */
.pcx-alta .pn-cabecera { align-items: flex-start; }
.pcx-alta .pcx-actions { align-self: flex-start; margin-top: 0; }
.pcx-alta .pcx-actions > * { gap: 8px; border-color: var(--sc-border); }
.pcx-alta .pcx-actions .ico { width: 17px; height: 17px; }
.pcx-alta .pcx-actions .pcx-factu { background: var(--sc-text-muted); color: var(--sc-on-brand); border-color: var(--sc-text-muted); opacity: 1; }
.pcx-alta .pcx-legal-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px; }
.pcx-alta .pcx-legal-grid > :nth-child(2) { grid-column: 2; }
.pcx-alta .pcx-legal-grid .pcx-upload { background: var(--sc-surface-sunk); }
.pcx-alta .pcx-address-grid { grid-template-columns: minmax(0, 2fr) minmax(0, .65fr) minmax(0, 1fr) minmax(0, 1fr); }
.pcx-alta .pcx-address-grid > :nth-child(5) { grid-column: 1; }
.pcx-alta .pcx-address-grid > :nth-child(6) { grid-column: 2/4; }
.pcx-alta .pcx-address-grid > :nth-child(7) { grid-column: 4; }
.pcx-alta .pcx-contact-empty { display: flex; align-items: center; min-height: 32px; padding: 5px 8px; border: 1px solid var(--sc-border); border-radius: 4px; color: var(--sc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcx-alta .pcx-contact-principal { justify-content: center; }
.pcx-alta .pcx-dupe-results { min-height: 105px; }
.pcx-alta .pcx-dupes { height: 281px; }
.pcx-alta .pcx-validation { margin-top: 0; }
.pcx-alta .pn-siguientes li { min-height: 45px; padding-bottom: 7px; }
.pcx-alta .pn-siguientes li p { margin: 2px 0 0; font-size: 11px; line-height: 14px; }
.pcx-alta .pcx-cats .pn-campo { margin-bottom: 4px; }
.pcx-alta .pcx-cats .pn-campo:last-child .pcx-disabled { min-height: 60px; align-items: flex-start; }
.pcx-alta .pcx-evidence .pcx-upload { min-height: 76px; background: var(--sc-surface-sunk); }
@media (max-width: 1200px) { .pcx-list .pv-filtros { flex-wrap: wrap; } }
.pcx-list .pcx-cond-detalle { display: inline-block; margin-left: 5px; position: relative; vertical-align: middle; }
.pcx-list .pcx-cond-detalle summary { list-style: none; cursor: pointer; color: var(--sc-text-muted); font-size: 11px; }
.pcx-list .pcx-cond-detalle summary::-webkit-details-marker { display: none; }
.pcx-list .pcx-cond-detalle .proc { position: absolute; z-index: 2; right: 0; top: 20px; width: 195px; padding: 8px; border: 1px solid var(--sc-border); border-radius: 4px; background: var(--sc-surface); box-shadow: var(--sc-shadow-card); white-space: normal; }

/* === DESPLEGABLES · el popover «ⓘ» de condiciones en `/proveedores` (`.pcx-list
   .pcx-cond-detalle .proc`) tapaba el botón «ⓘ» y el enlace de la fila
   siguiente de la tabla (confirmado con Playwright a 1366x900, 390x844 y
   360x800: la caja de 195 px que se abre hacia abajo, con las filas a
   ~52-53 px de alto, siempre invade la fila de debajo).

   Corrección tras revisión: la premisa de z-index de la primera versión de
   este bloque era falsa. La cabecera FIJA de esta tabla es el `th`
   genérico (línea ~649, `position: sticky; top: 0; z-index: 1`), no la
   regla de la línea ~1169 (esa es `.lateral` en móvil, la navegación
   lateral que se apila; z-index 30). El popover, con z-index 2, YA estaba
   por encima del `th`. Subirlo a 35 no arreglaba nada real y abría un
   solape nuevo: por encima de la barra superior fija (`.barra`, z-index 20)
   y de esa navegación lateral móvil (30), el popover se pintaba encima de
   ellas al hacer scroll. Se deja en un valor entre el `th` (1) y la barra
   (20) para no repetir el error.

   La causa real, y el único arreglo que hacía falta: sin `name`, cada fila
   abre su propio `<details>` y, con varias filas abiertas a la vez, los
   popovers se apilan unos sobre otros. El HTML ya lleva `name="pcx-cond"`
   (ver `app/plantilla.py`, tabla de proveedores): con el mismo `name`,
   Chrome trata todos los `<details>` de la tabla como un acordeón
   exclusivo -- abrir uno cierra los demás, sin una línea de JS. Motores sin
   soporte de `name` en `<details>` simplemente vuelven al comportamiento de
   antes (se degradan, no rompen).

   Queda sin arreglar, por ser un límite de arquitectura (sin JS no hay
   forma de anclar el panel al viewport ni voltearlo hacia arriba cuando no
   cabe abajo): la invasión de UNA fila sobre el borde superior de la
   siguiente, geometría de 195x90 px sobre filas de 52 px. Ver
   `/var/tmp/artemis/desplegables/INFORME.md`. No se le pone `max-height` ni
   scroll: el contenido real (una línea de texto) nunca lo necesita, y
   añadirlo sin motivo no habría cambiado nada visible. */
.pcx-list .pcx-cond-detalle .proc {
  z-index: 5;
}

.pcx-list .pcx-cond-detalle:not([open]) .proc { display: none; }
.pcx-detail .pv-fila3:not(.pv-fila-baja) { margin-top: -5px; }
.pcx-alta .pcx-validation { margin-top: 19px; }
.pcx-alta .pn-direccion h2 { margin-bottom: 6px; }
.pcx-alta .pcx-address-grid { row-gap: 4px; }

/* Ronda 8: columnas y componentes del cuerpo, medidos a 1448 px. */
.pcx-list .pd-tabla { width: 100%; table-layout: fixed; }
.pcx-list .pd-tabla th, .pcx-list .pd-tabla td { box-sizing: border-box; padding-left: 8px; padding-right: 8px; }
.pcx-list .pd-tabla th { white-space: nowrap; }
.pcx-list .pd-tabla th:nth-child(1) { width: 3%; }
.pcx-list .pd-tabla th:nth-child(2) { width: 17%; }
.pcx-list .pd-tabla th:nth-child(3) { width: 10%; }
.pcx-list .pd-tabla th:nth-child(4) { width: 9%; }
.pcx-list .pd-tabla th:nth-child(5) { width: 9%; }
.pcx-list .pd-tabla th:nth-child(6) { width: 18%; }
.pcx-list .pd-tabla th:nth-child(7) { width: 11%; }
.pcx-list .pd-tabla th:nth-child(8) { width: 12%; }
.pcx-list .pd-tabla th:nth-child(9) { width: 11%; }
.pcx-list .pv-prov { gap: 11px; }
.pcx-list .pv-prov a { font-size: 13px; font-weight: 600; line-height: 16px; }
.pcx-list .pv-prov .meta { font-size: 12px; line-height: 15px; }
.pcx-list .pv-tabla .pie-tabla select { background: var(--sc-surface); opacity: 1; }

.pcx-detail .pv-fila-baja { grid-template-columns: minmax(0, 418fr) minmax(0, 377fr) minmax(0, 400fr); gap: 12px; }
.pcx-detail .pv-actividad .pv-card-cab { gap: 16px; }
.pcx-detail .pv-actividad .pv-card-cab h2 { font-size: 14px; }
.pcx-detail .pv-actividad .pv-mas { min-width: 66px; }
.pcx-detail .pv-contacto b { font-size: 14px; font-weight: 600; line-height: 17px; }
.pcx-detail .pv-contact-role { font-size: 11px; line-height: 15px; color: var(--sc-text-muted); }
.pcx-detail .pv-contact-line { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; }
.pcx-detail .pv-contact-line .ico { width: 12px; height: 12px; }
.pcx-detail .pv-contacto .chip { min-height: 19px; margin-top: 2px; }
.pcx-detail .pv-incidencias .pv-tabla { table-layout: fixed; }
.pcx-detail .pv-incidencias .pv-tabla th:nth-child(1) { width: 24%; }
.pcx-detail .pv-incidencias .pv-tabla th:nth-child(2) { width: 22%; }
.pcx-detail .pv-incidencias .pv-tabla th:nth-child(3) { width: 35%; }
.pcx-detail .pv-incidencias .pv-tabla th:nth-child(4) { width: 19%; }
.pcx-detail .pv-incidencias .pv-tabla td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcx-detail .pv-eval .pv-cifra { font-size: 26px; font-weight: 700; }
.pcx-detail .pv-eval .pv-cifra small { font-size: 14px; }
.pcx-detail .pv-card-cab .ico { width: 20px; height: 20px; }

.pcx-alta .pcx-actions > * { height: 36px; min-height: 36px; gap: 10px; font-size: 13px; font-weight: 500; }
.pcx-alta .pcx-actions .ico { width: 16px; height: 16px; }
.pcx-alta .pcx-legal-grid .pcx-upload { height: 130px; transform: translateY(-29px); background: var(--sc-surface); border-width: 1px; border-style: dashed; }
.pcx-alta .pcx-address-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 12px; }
.pcx-alta .pcx-address-grid > :nth-child(1) { grid-column: 1/6; }
.pcx-alta .pcx-address-grid > :nth-child(2) { grid-column: 6/8; }
.pcx-alta .pcx-address-grid > :nth-child(3) { grid-column: 8/11; }
.pcx-alta .pcx-address-grid > :nth-child(4) { grid-column: 11/13; }
.pcx-alta .pcx-address-grid > :nth-child(5) { grid-column: 1/5; }
.pcx-alta .pcx-address-grid > :nth-child(6) { grid-column: 5/9; }
.pcx-alta .pcx-address-grid > :nth-child(7) { grid-column: 9/13; }
.pcx-alta .pcx-contact-head, .pcx-alta .pcx-contact-row { grid-template-columns: 1.1fr 1.2fr 1.55fr 1.05fr 1fr 36px; gap: 8px; }
.pcx-alta .pcx-contact-principal { justify-self: center; width: 16px; height: 16px; border: 1.5px solid var(--sc-brand); border-radius: 50%; position: relative; }
.pcx-alta .pcx-contact-principal::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sc-brand); }
.pcx-alta .pcx-contact-menu { justify-self: center; color: var(--sc-text); font-size: 18px; }
.pcx-alta .pcx-pay-row { grid-template-columns: 76px 112px minmax(0, 1fr); gap: 6px; }
.pcx-alta .pcx-pay-row .pcx-label { white-space: nowrap; line-height: 17px; }
.pcx-alta .pcx-validation li { padding: 3px 0 3px 25px; line-height: 20px; }
.pcx-alta .pcx-validation li::before { content: ""; width: 15px; height: 15px; border: 1.5px solid var(--sc-border-control); border-radius: 50%; top: 5px; left: 0; }
.pcx-alta .pcx-evidence { grid-template-columns: 268px minmax(0, 1fr); column-gap: 22px; }
.pcx-alta .pcx-evidence .pcx-upload { background: var(--sc-surface); }
.pcx-alta .pn-siguientes h2 .ico, .pcx-alta .pcx-validation h2 .ico { width: 20px; height: 20px; }
@media (max-width: 1100px) {
  .pcx-detail .pv-fila-baja { grid-template-columns: minmax(0, 1fr); }
  .pcx-alta .pcx-address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcx-alta .pcx-address-grid > * { grid-column: auto !important; }
  .pcx-alta .pcx-legal-grid .pcx-upload { transform: none; height: 130px; }
}
.pcx-list .pd-tabla th:nth-child(2) { width: 17%; }
.pcx-list .pd-tabla th:nth-child(3) { width: 10%; }
.pcx-list .pd-tabla th:nth-child(4) { width: 9%; }
.pcx-list .pd-tabla th:nth-child(5) { width: 9%; }
.pcx-list .pd-tabla th:nth-child(6) { width: 18%; }
.pcx-list .pd-tabla th:nth-child(7) { width: 11%; }
.pcx-list .pd-tabla th:nth-child(8) { width: 12%; }
.pcx-list .pd-tabla th:nth-child(9) { width: 11%; }
.pcx-list .pv-prov > div { width: calc(100% - 67px); }
.pcx-list .pv-prov a { font-size: 13px; }
.pcx-list .pv-prov .meta { font-size: 12px; }
.pcx-list .pcx-score-empty { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 62px; height: 26px; padding: 0 7px; border-radius: 99px; background: var(--sc-neutral-bg); color: var(--sc-text-muted); font-size: 13px; font-weight: 600; }
.pcx-list .pcx-score-empty > span { font-size: 14px; }
.pcx-list .pv-filtros .ancho-buscador input, .pcx-list .pv-desp { min-height: 38px; height: 38px; border-radius: 4px; }
.pcx-list .pv-desp select { min-height: 36px; font-size: 12px; }
.pcx-list .pd-tabla td.acciones-fila { white-space: nowrap; }
.pcx-list .pd-tabla td.acciones-fila .acc:first-child { width: 50px; height: 32px; }
.pcx-list .pd-tabla td.acciones-fila > * + * { margin-left: 12px; }
.pcx-detail .pv-contacto { grid-template-columns: 40px minmax(0, 1fr) 112px; }
.pcx-detail .pv-botones { width: 112px; justify-content: flex-end; gap: 6px; padding-right: 16px; }
.pcx-detail .pv-botones .pv-icono { width: 30px; height: 30px; flex: 0 0 30px; }
.pcx-detail .pv-cobertura .pcx-coverage { width: 100%; table-layout: fixed; margin-top: 2px; }
.pcx-detail .pv-cobertura .pcx-coverage th { height: 26px; font-size: 11px; }
.pcx-detail .pv-cobertura .pcx-coverage td { height: 31px; }
.pcx-detail .pv-cobertura .pcx-coverage-empty { padding-left: 16px; font-size: 12px; color: var(--sc-text-muted); }
.pcx-detail .pv-pedidos .pv-tabla, .pcx-detail .pv-incidencias .pv-tabla { margin-top: 4px; }
.pcx-detail .pv-pedidos .pv-tabla th, .pcx-detail .pv-incidencias .pv-tabla th { height: 26px; }
.pcx-detail .pcx-orders col:nth-child(1) { width: 18%; }
.pcx-detail .pcx-orders col:nth-child(2) { width: 18%; }
.pcx-detail .pcx-orders col:nth-child(3) { width: 26%; }
.pcx-detail .pcx-orders col:nth-child(4) { width: 18%; }
.pcx-detail .pcx-orders col:nth-child(5) { width: 20%; }
.pcx-detail .pcx-orders td:nth-child(3) .chip { white-space: nowrap; font-size: 10px; padding-left: 5px; padding-right: 5px; }
.pcx-detail .pv-incidencias .pv-tabla th:nth-child(1) { width: 25%; }
.pcx-detail .pv-incidencias .pv-tabla th:nth-child(2) { width: 23%; }
.pcx-detail .pv-incidencias .pv-tabla th:nth-child(3) { width: 27%; }
.pcx-detail .pv-incidencias .pv-tabla th:nth-child(4) { width: 25%; }
.pcx-detail .pv-incidencias .pv-tabla td:last-child .chip { font-size: 10px; white-space: nowrap; padding-left: 5px; padding-right: 5px; }
.pcx-alta .pcx-actions .pcx-factu { background: var(--sc-text-faint); border-color: var(--sc-text-faint); opacity: .58; }
.pcx-alta .pcx-evidence .pcx-upload { width: 268px; height: 76px; min-height: 76px; border-radius: 4px; }
.pcx-alta .pcx-evidence .pcx-upload .ico { width: 24px; height: 24px; margin-bottom: 2px; }
.pcx-alta .pcx-evidence .pcx-upload b { font-size: 11px; font-weight: 500; line-height: 14px; }
.pcx-alta .pcx-evidence .pcx-upload small { font-size: 10px; margin-top: 2px; }
.pcx-alta .pcx-contact-head { min-height: 27px; padding: 5px 12px; }
.pcx-alta .pcx-contact-row { min-height: 31px; padding: 2px 12px; }
.pcx-alta .pcx-contact-row input, .pcx-alta .pcx-contact-empty { height: 28px; min-height: 28px; border-color: transparent; background: transparent; padding-left: 2px; font-size: 12px; }
.pcx-alta .pcx-contact-row input:focus-visible { border-color: var(--sc-brand); background: var(--sc-surface); }
.pcx-alta .pcx-contact-row + .pn-ayuda { margin-top: 4px; font-size: 12px; }
.pcx-alta .pn-campo label, .pcx-alta .pcx-label { font-size: 12px; line-height: 16px; }
.pcx-alta .pn-ayuda, .pcx-alta .pcx-docs, .pcx-alta .pcx-validation li, .pcx-alta .pn-siguientes li { font-size: 12px; line-height: 16px; }
.pcx-alta .pn-tarjeta h2 { font-size: 14px; font-weight: 600; }
.pcx-alta .pn-pasos { display: grid; grid-template-columns: 245px 227px 258px 1fr; }
.pcx-alta .pn-pasos li { min-width: 0; }
.pcx-alta .pn-siguientes li::before { width: 14px; height: 14px; border-width: 1.5px; }
.pcx-detail .pcx-orders td:nth-child(3), .pcx-detail .pv-incidencias .pv-tabla td:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcx-detail .pcx-orders td:nth-child(3) .chip, .pcx-detail .pv-incidencias .pv-tabla td:last-child .chip { display: inline-block; max-width: 100%; white-space: nowrap; line-height: 18px; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; }
.pcx-detail .pcx-facts { margin: 8px 0 0; font-size: 11px; line-height: 15px; color: var(--sc-text-muted); }
.pcx-detail .pcx-extra { margin-top: 10px; font-size: 11px; line-height: 15px; color: var(--sc-text-muted); }
.pcx-detail .pcx-extra summary { cursor: pointer; }
.pcx-detail .pcx-extra p { margin: 4px 0; }

/* Ajustes de cuerpo medidos en el PNG de 1448 × 1086. */
.pcx-list .pv-filtros .ancho-buscador { flex: 0 0 405px; width: 405px; }
.pcx-list .pv-desp:nth-of-type(2) { width: 142px; }
.pcx-list .pv-desp:nth-of-type(3) { width: 168px; }
.pcx-list .pv-desp:nth-of-type(4) { width: 148px; }
.pcx-list .pv-desp:nth-of-type(5) { width: 160px; }
.pcx-list .pd-tabla th:nth-child(2) { width: 17%; }
.pcx-list .pd-tabla th:nth-child(3) { width: 10%; }
.pcx-list .pd-tabla th:nth-child(4) { width: 9%; }
.pcx-list .pd-tabla th:nth-child(5) { width: 9%; }
.pcx-list .pd-tabla th:nth-child(6) { width: 18%; }
.pcx-list .pd-tabla th:nth-child(7) { width: 11%; }
.pcx-list .pd-tabla th:nth-child(8) { width: 12%; }
.pcx-list .pd-tabla th:nth-child(9) { width: 11%; }
.pcx-list .pv-tabla .pie-tabla { min-height: 68px; padding-bottom: 16px; }
.pcx-list .pv-tabla .pie-tabla select { height: 34px; min-height: 34px; }
.pcx-list .pd-tabla th { height: 36px; }
.pcx-list .pd-tabla td { height: 52px; }
.pcx-detail .pv-dato { font-size: 13px; line-height: 18px; }
.pcx-detail .pv-dato .meta { font-size: 12px; font-weight: 500; line-height: 17px; }
.pcx-detail .pv-contact-role, .pcx-detail .pv-contact-line { font-size: 12px; line-height: 17px; }
.pcx-detail .pv-eval .pv-cifra { font-size: 28px; line-height: 32px; }
.pcx-detail .pv-eval .pv-cifra small { font-size: 14px; }
.pcx-alta .pcx-legal-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px; column-gap: 12px; }
.pcx-alta .pcx-legal-grid > :nth-child(4) { width: 43%; }
.pcx-alta .pcx-legal-grid > :nth-child(5) { margin-left: 45%; }
.pcx-alta .pcx-address-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 12px; }
.pcx-alta .pcx-address-grid > :nth-child(1) { grid-column: 1/6; }
.pcx-alta .pcx-address-grid > :nth-child(2) { grid-column: 6/8; }
.pcx-alta .pcx-address-grid > :nth-child(3) { grid-column: 8/11; }
.pcx-alta .pcx-address-grid > :nth-child(4) { grid-column: 11/13; }
.pcx-alta .pcx-address-grid > :nth-child(5) { grid-column: 1/5; }
.pcx-alta .pcx-address-grid > :nth-child(6) { grid-column: 5/9; }
.pcx-alta .pcx-address-grid > :nth-child(7) { grid-column: 9/13; }
.pcx-alta .pn-campo label, .pcx-alta .pcx-label { font-size: 13px; line-height: 17px; font-weight: 500; }
.pcx-alta .pn-campo input, .pcx-alta .pn-campo textarea { font-size: 13px; font-weight: 400; }
.pcx-alta .pcx-disabled { font-size: 13px; }
.pcx-alta .pcx-state dl, .pcx-alta .pcx-dupes p, .pcx-alta .pcx-validation li, .pcx-alta .pn-siguientes li { font-size: 13px; }
.pcx-alta .pcx-add { display: inline-flex; align-items: center; min-height: 29px; padding: 0 11px; border: 1px solid var(--sc-border-strong); font-size: 12px; font-weight: 500; }
.pcx-alta .pcx-cats .pn-campo:last-child .pcx-disabled { min-height: 50px; height: 50px; }
.pcx-alta .pn-siguientes { padding-right: 18px; }
.pcx-alta .pn-siguientes li { min-height: 47px; }
.pcx-alta .pn-siguientes li p { font-size: 11px; line-height: 14px; }
.pcx-alta .pn-pasos li:last-child div { white-space: normal; padding-right: 8px; }
.pcx-alta .pn-pasos { grid-template-columns: 240px 220px 248px minmax(0, 1fr); }
.pcx-alta .pn-pasos li:last-child div { padding-right: 0; font-size: 12px; line-height: 16px; }
.pcx-alta .pn-pasos li:last-child small { font-size: 11px; line-height: 14px; }
.pcx-alta .pcx-contact-principal[aria-checked="false"] { border-color: var(--sc-border-control); }
.pcx-alta .pcx-contact-principal[aria-checked="false"]::after { display: none; }
.pcx-alta .pcx-validation li::before { background: var(--sc-neutral-bg); border-color: var(--sc-border-control); }
.pcx-list .pv-mas-wrap [aria-disabled="true"] { background: var(--sc-neutral-bg); color: var(--sc-text-muted); opacity: .72; }
.pcx-detail .pv-acciones .boton.off:not(.sec) { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); opacity: .58; }
.pcx-detail .pv-mas.off { color: var(--sc-text-muted); opacity: .8; }
.pcx-list .pv-filtros .ancho-buscador { flex: 0 0 365px; width: 365px; }
.pcx-list .pv-desp:nth-of-type(2) { width: 153px; }
.pcx-list .pv-desp:nth-of-type(3) { width: 163px; }
.pcx-list .pv-desp:nth-of-type(4) { width: 153px; }
.pcx-list .pv-desp:nth-of-type(5) { width: 163px; }
.pcx-list .pv-mas-wrap { flex: 1 1 115px; }
.pcx-list .pv-mas-wrap .pv-mas { width: 100%; }
.pcx-list .pd-tabla th:nth-child(2) { width: 20%; }
.pcx-list .pd-tabla th:nth-child(6) { width: 15%; }
.pcx-list .pd-tabla th:nth-child(7) { width: 9%; }
.pcx-list .pd-tabla th:nth-child(8) { width: 11%; }
.pcx-list .pd-tabla th:nth-child(9) { width: 9%; }
.pcx-list .pv-prov > div { width: calc(100% - 59px); }
.pcx-list .pv-prov .pv-logo { flex: 0 0 52px; width: 52px; height: 32px; background: var(--sc-surface); }
.pcx-list .pv-prov a { max-width: 100%; }
.pcx-list .pcx-score-empty { height: 24px; padding: 0 10px; }
.pcx-list .pv-tabla .pie-tabla { min-height: 58px; padding: 12px 8px; }
.pcx-detail .pv-identidad .pv-logo { font-size: 36px; font-weight: 700; }
.pcx-detail .pv-resumen { background: var(--sc-prv-resumen-bg); border-radius: 4px; padding: 16px; }
.pcx-detail .pv-botones { width: 118px; padding-right: 10px; }
.pcx-detail .pv-botones .pv-icono { width: 32px; height: 32px; flex-basis: 32px; }
.pcx-detail .pcx-orders td:nth-child(3) .chip { max-width: none; overflow: visible; text-overflow: clip; }
.pcx-detail .pcx-orders td:nth-child(3) { overflow: visible; text-overflow: clip; }
.pcx-alta .pn-cabecera h1 { color: var(--sc-text); font-weight: 700; }
.pcx-alta .pn-cabecera h1 span { color: var(--sc-text); font-weight: 400; }
.pcx-alta .pn-pasos [aria-current] div { border-top-width: 2px; border-top-color: var(--sc-brand); }
.pcx-alta .pn-pasos li:first-child div { max-width: 76px; }
.pcx-alta .pcx-dupes { display: flex; flex-direction: column; }
.pcx-alta .pcx-dupe-results { flex: 1 1 auto; min-height: 0; }
.pcx-alta .pcx-dupe-more { flex: none; min-height: 32px; margin-top: 12px; border: 1px solid var(--sc-border-strong); border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; }
.pcx-alta .pcx-validation h2 .ico { color: var(--sc-text-muted); }
.pcx-alta .pcx-validation li { line-height: 22px; padding-top: 0; padding-bottom: 0; }
.pcx-alta .pcx-validation li:nth-child(6) { margin-top: 11px; }
.pcx-alta .pcx-evidence .pcx-upload { border-style: dashed; border-color: var(--sc-border-strong); }
.pcx-alta .pcx-docs { border-left: 1px solid var(--sc-border); padding-left: 16px; }
.pcx-alta .pcx-legal-grid .pcx-upload .ico { width: 26px; height: 26px; }
.pcx-alta .pn-contacto .pn-ayuda { min-height: 19px; }
.pcx-alta .pcx-dupe-more .ico { width: 16px; height: 16px; flex: none; }
.pcx-alta .pcx-dupe-more { justify-content: center; }
.pcx-list .pd-tabla th:nth-child(2) { width: 18.5%; }
.pcx-list .pd-tabla th:nth-child(3) { width: 10%; }
.pcx-list .pd-tabla th:nth-child(4) { width: 8%; }
.pcx-list .pd-tabla th:nth-child(5) { width: 9%; }
.pcx-list .pd-tabla th:nth-child(6) { width: 15%; }
.pcx-list .pd-tabla th:nth-child(7) { width: 13%; }
.pcx-list .pd-tabla th:nth-child(8) { width: 12%; }
.pcx-list .pd-tabla th:nth-child(9) { width: 10%; }
.pcx-detail .pcx-orders { table-layout: fixed; }
.pcx-detail .pcx-orders col:nth-child(1) { width: 17%; }
.pcx-detail .pcx-orders col:nth-child(2) { width: 16%; }
.pcx-detail .pcx-orders col:nth-child(3) { width: 31%; }
.pcx-detail .pcx-orders col:nth-child(4) { width: 17%; }
.pcx-detail .pcx-orders col:nth-child(5) { width: 19%; }
.pcx-detail .pcx-orders td:nth-child(3) { white-space: normal; }
.pcx-detail .pcx-orders td:nth-child(3) .chip { display: inline; white-space: normal; font-size: 9px; line-height: 12px; padding: 2px 3px; }
.pcx-list .pd-tabla th:nth-child(2) { width: 21%; }
.pcx-list .pd-tabla th:nth-child(5) { width: 8%; }
.pcx-list .pd-tabla th:nth-child(6) { width: 13%; }
.pcx-list .pd-tabla th:nth-child(7) { width: 12%; }
.pcx-list .pd-tabla th:nth-child(8) { width: 11%; }
.pcx-detail .pcx-orders col:nth-child(1) { width: 16%; }
.pcx-detail .pcx-orders col:nth-child(2) { width: 12%; }
.pcx-detail .pcx-orders col:nth-child(3) { width: 38%; }
.pcx-detail .pcx-orders col:nth-child(4) { width: 16%; }
.pcx-detail .pcx-orders col:nth-child(5) { width: 18%; }
.pcx-detail .pcx-orders td:nth-child(3) { white-space: nowrap; }
.pcx-detail .pcx-orders td:nth-child(3) .chip { white-space: nowrap; font-size: 9px; }


/* Ajustes de ficha y alta medidos en prv10; el listado conserva main. */
.pcx-alta .pcx-legal-grid .pcx-upload { height: 94px; max-height: 94px; top: 0; }
.pcx-alta .pcx-legal-grid .pcx-upload small { margin-top: 4px; }
.pcx-detail .pv-mas.off { color: var(--sc-text-muted); opacity: .65; }
.pcx-detail .pv-cobertura, .pcx-detail .pv-cert { display: flex; flex-direction: column; }
.pcx-detail .pv-cobertura .pv-pie-card, .pcx-detail .pv-cert .pv-pie-card { margin-top: auto; padding-bottom: 10px; }
.pcx-detail .pcx-orders col:nth-child(3) { width: 28%; }
.pcx-detail .pcx-orders col:nth-child(5) { width: 22%; }
.pcx-detail .pcx-orders th, .pcx-detail .pcx-orders td { padding: 4px 3px; font-size: 10px; }
.pcx-detail .pcx-orders th { white-space: normal; line-height: 12px; }
.pcx-detail .pcx-orders td:nth-child(2), .pcx-detail .pcx-orders td:nth-child(5) { white-space: nowrap; overflow: visible; text-overflow: clip; }
.pcx-detail .pcx-orders td:nth-child(3) { white-space: normal; overflow: visible; }
.pcx-detail .pcx-orders td:nth-child(3) .chip { white-space: normal; line-height: 11px; }
.pcx-detail .pcx-orders td:nth-child(3) .chip { white-space: nowrap; line-height: 18px; }
.pcx-detail .pv-card-cab > .ico { width: 19px; height: 19px; flex: none; color: var(--sc-brand); }
.pcx-alta .pcx-legal-grid { position: relative; width: calc(100% - 152px); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px; }
.pcx-alta .pcx-legal-grid > :nth-child(1) { grid-column: 1/4; grid-row: 1; }
.pcx-alta .pcx-legal-grid > :nth-child(2) { grid-column: 4/7; grid-row: 1; }
.pcx-alta .pcx-legal-grid > :nth-child(3) { grid-column: 1/3; grid-row: 2; }
.pcx-alta .pcx-legal-grid > :nth-child(4) { grid-column: 3/5; grid-row: 2; width: auto; }
.pcx-alta .pcx-legal-grid > :nth-child(5) { grid-column: 5/7; grid-row: 2; margin: 0; }
.pcx-alta .pcx-legal-grid .pcx-upload { position: absolute; left: calc(100% + 12px); top: 0; width: 140px; height: 130px; transform: none; }
.pcx-alta .pcx-address-grid { grid-template-columns: 360fr 126fr 190fr 163fr; }
.pcx-alta .pcx-address-grid > :nth-child(1) { grid-column: 1; }
.pcx-alta .pcx-address-grid > :nth-child(2) { grid-column: 2; }
.pcx-alta .pcx-address-grid > :nth-child(3) { grid-column: 3; }
.pcx-alta .pcx-address-grid > :nth-child(4) { grid-column: 4; }
.pcx-alta .pn-siguientes li { min-height: 46px; padding-bottom: 4px; }
.pcx-alta .pn-siguientes li p { max-width: 220px; font-size: 11px; line-height: 14px; }
.pcx-alta .pcx-validation li { min-height: 20px; line-height: 20px; padding-top: 0; padding-bottom: 0; }
.pcx-alta .pcx-evidence .pcx-upload { border-style: dashed; border-width: 1px; }
.pcx-alta .pcx-legal-grid .pcx-upload { height: 94px; }
.pcx-alta .pcx-address-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pcx-alta .pcx-address-grid > :nth-child(1) { grid-column: 1 / span 5; grid-row: 1; }
.pcx-alta .pcx-address-grid > :nth-child(2) { grid-column: 6 / span 2; grid-row: 1; }
.pcx-alta .pcx-address-grid > :nth-child(3) { grid-column: 8 / span 3; grid-row: 1; }
.pcx-alta .pcx-address-grid > :nth-child(4) { grid-column: 11 / span 2; grid-row: 1; }
.pcx-alta .pcx-address-grid > :nth-child(5) { grid-column: 1 / span 4; grid-row: 2; }
.pcx-alta .pcx-address-grid > :nth-child(6) { grid-column: 5 / span 4; grid-row: 2; }
.pcx-alta .pcx-address-grid > :nth-child(7) { grid-column: 9 / span 4; grid-row: 2; }
/* === CX-CORE-A9 === */
.cx-core-a9-solicitud .ns-rejilla-campos { row-gap: 1px; }
.cx-core-a9-solicitud .ns-cab { margin-bottom: 5px; }
.cx-core-a9-solicitud .ns-cab-acc .boton { background: var(--sc-surface); border-color: var(--sc-border); min-height: 32px; font-size: 11px; font-weight: 600; }
.cx-core-a9-solicitud .ns-izq > .ns-seccion:last-child { min-height: 122px; padding-bottom: 16px; margin-top: 1px; }
.cx-core-a9-solicitud .ns-etapas { margin-top: 18px; }
.cx-core-a9-solicitud .ns-dos { grid-template-columns: minmax(0, 415fr) minmax(0, 390fr); gap: 18px; }
.cx-core-a9-solicitud .ns-anadir { border-color: var(--sc-border); border-width: 1px; }
.cx-core-a9-solicitud .ns-seccion, .cx-core-a9-solicitud .ns-lado { box-shadow: var(--sc-shadow-card); border-color: var(--sc-border); }

/* === CX-REC-9 === */
.rcx-lista .rc-principal .kpis.tira-kpi { margin-top: 21px; }
.rcx-lista .rc-carril { margin-top: -8px; }
.rcx-lista .rc-carril .rc-bloque:nth-child(1) { min-height: 384px; }
.rcx-lista .rc-carril .rc-bloque:nth-child(2) { min-height: 348px; }
.rcx-detalle .rc-franja { margin-top: 21px; }
.rcx-detalle .rc-discrepancias { min-height: 184px; }
.rcx-detalle .rc-franja { gap: 4px; background: transparent; border: 0; box-shadow: none; }
.rcx-detalle .rc-franja .rc-celda { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: 6px; box-shadow: 0 2px 6px rgb(20 35 60 / 5%); min-height: 132px; }
.rcx-detalle .rc-celda + .rc-celda { border-left: 1px solid var(--sc-border); }
.rcx-detalle .rc-celda-cab { font-weight: 600; }
.rcx-detalle .rc-celda-cab .ico { width: 18px; height: 18px; }
.rcx-detalle .rc-mini { width: 36px; height: 36px; }
.rcx-detalle .rc-tabla-det { table-layout: auto; }
.rcx-detalle .rc-tabla-det .rc-prod { min-width: 195px; }
.rcx-detalle .rc-lineas { min-height: 350px; }
.rcx-detalle .rc-parciales { min-height: 185px; }
.rcx-detalle .rc-notas-card { min-height: 168px; }
.rcx-detalle .rc-notas-card .rc-vacio { padding: 16px 0; }
.rcx-detalle .rcx-visor { height: 230px; display: flex; align-items: center; justify-content: center; margin-top: 8px; border: 1px solid var(--sc-border); border-radius: 6px; background: var(--sc-surface-sunk); color: var(--sc-text-muted); font-size: 13px; }
.rcx-detalle .rcx-archivo { min-height: 50px; display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px; border: 1px solid var(--sc-border); border-radius: 6px; font-size: 12px; }
.rcx-detalle .rcx-archivo input { width: 170px; min-width: 0; font-size: 11px; }
.rcx-detalle .rcx-albaran-num { display: flex; flex-direction: column; gap: 5px; padding: 10px 0 0; font-size: 12px; }
.rcx-detalle .rcx-albaran-num input { min-height: 34px; }
.rcx-detalle .rcx-registro { margin-top: 12px; font-size: 12px; }
.rcx-detalle .rcx-registro summary, .rcx-detalle .rcx-nota-editor summary { cursor: pointer; color: var(--sc-info-fg); }
.rcx-detalle .rcx-cantidades { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 10px 0; }
.rcx-detalle .rcx-cantidad { display: flex; flex-direction: column; gap: 4px; }
.rcx-detalle .rcx-cantidad input { width: 100%; max-width: 120px; min-height: 32px; }
.rcx-detalle .rcx-nota-editor { margin-top: 4px; font-size: 12px; }
.rcx-detalle .rc-notas-card { position: relative; }
.rcx-detalle .rcx-nota-editor summary { position: absolute; top: 10px; right: 12px; display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.rcx-detalle .rcx-nota-editor summary::-webkit-details-marker { display: none; }
.rcx-detalle .rcx-nota-editor[open] { padding-top: 8px; }
.rcx-detalle .rcx-nota-editor label { display: block; margin-top: 8px; }
.rcx-detalle .rcx-nota-editor input { width: 100%; margin-top: 4px; }
.rcx-lista .rcx-sin-recepciones { min-height: 230px; display: flex; align-items: center; justify-content: center; color: var(--sc-text-muted); font-size: 13px; }
.rcx-lista .rcx-pendientes { margin-top: 12px; padding: 12px 14px; }
.rcx-lista .rcx-pendientes h2 { margin: 0 0 8px; font-size: 15px; }
.rcx-lista .rcx-pedidos { overflow-x: auto; }
.rcx-lista .rcx-pedidos .rc-tabla { min-width: 850px; }
.rcx-lista .rc-principal .tira-kpi .kpi .rotulo { white-space: normal; overflow: visible; text-overflow: clip; font-size: 12px; font-weight: 400; }
.rcx-lista .rc-principal .tira-kpi .kpi { gap: 8px; }
@media (max-width: 1100px) { .rcx-detalle .rc-franja { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.rcx-detalle .rcx-archivo #alb { flex: 1; width: 110px; min-width: 95px; min-height: 34px; }
.rcx-detalle .rcx-archivo #foto { width: 105px; }
.rcx-detalle .rcx-archivo label:not(.oculto-visual) { white-space: nowrap; }
.rcx-detalle .rc-albaran { padding: 10px 12px; }
.rcx-detalle .rcx-visor { height: 224px; margin-top: 6px; }
.rcx-detalle .rcx-archivo { min-height: 48px; margin-top: 8px; }
.rcx-lista .rc-principal .tira-kpi .kpi { column-gap: 8px; row-gap: 2px; padding: 5px 10px; min-height: 96px; }
.rcx-lista .rc-principal .kpis.tira-kpi { margin-bottom: 9px; }
.rcx-lista .rc-filtros { border-color: var(--sc-border); box-shadow: var(--sc-shadow-card); }
.rcx-lista .rc-listado { min-height: 600px; display: flex; flex-direction: column; }
.rcx-lista .rc-listado .rc-pie { margin-top: auto; }
.rcx-lista .rc-mas-filtros, .rcx-lista .rc-exportar {
  border-color: var(--sc-border); border-radius: 5px; min-height: 36px;
}
.rcx-lista .rc-listado .tw, .rcx-detalle .rc-lineas .tw,
.rcx-detalle .rc-parciales .tw { border: 0; border-radius: 0; box-shadow: none; margin: 0; background: transparent; }
.rcx-lista .rc-listado .rc-tabla-caja { border: 0; border-radius: 0; box-shadow: none; }
.rcx-lista .rc-pie { grid-template-columns: 290px minmax(0,1fr) auto; }
.rcx-lista .rc-paginas { justify-self: start; }
.rcx-detalle .rc-celda-cab.rc-celda-disco { gap: 10px; }
.rcx-detalle .rc-franja .rc-celda { height: 132px; min-height: 0; padding: 10px 12px; }
.rcx-detalle .rc-celda-disco .ico { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--sc-danger-bg); color: var(--sc-brand); flex: none; }
.rcx-detalle .rc-lineas .rc-tabla th { padding-top: 5px; padding-bottom: 5px; }
.rcx-detalle .rc-discrepancias { background: var(--sc-brand-soft); border-color: var(--sc-brand-border); }
.rcx-detalle .rc-discrepancias .rc-vacio { min-height: 42px; display: flex; align-items: center; padding: 0 12px; }
.rcx-detalle .rc-rapidas-det .rc-card-cab > .ico { color: var(--sc-brand); width: 20px; height: 20px; }
.rcx-detalle .rcx-archivo { position: relative; padding: 7px 12px; }
.rcx-detalle .rcx-archivo-ico { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--sc-brand); background: var(--sc-danger-bg); border-radius: 5px; flex: none; }
.rcx-detalle .rcx-archivo-ico .ico { width: 20px; height: 20px; }
.rcx-detalle .rcx-archivo-texto { display: flex; flex: 1; flex-direction: column; min-width: 0; font-weight: 600; }
.rcx-detalle .rcx-archivo-texto small { font-weight: 400; color: var(--sc-text-muted); }
.rcx-detalle .rcx-adjuntar { margin-left: auto; }
.rcx-detalle .rcx-adjuntar summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border-color: var(--sc-border); font-size: 12px; }
.rcx-detalle .rcx-adjuntar summary::-webkit-details-marker { display: none; }
/* Albarán del proveedor · los campos van EN EL FLUJO de su tarjeta. Antes eran un
   popover (`position: absolute; z-index: 4; top: 100%`) que caía encima de la
   tarjeta siguiente, «Discrepancias detectadas»: la tapaba entera y, en Brave,
   era ella la que tapaba el campo «Nº de albarán» (ni clic ni Tab llegaban) a
   1680, 1366, 390 y 360. Abierto, el `<details>` baja a su propia fila y la
   tarjeta crece: nada queda debajo de otra cosa. */
.rcx-detalle .rcx-archivo { flex-wrap: wrap; }
.rcx-detalle .rcx-adjuntar[open] { flex: 1 1 100%; text-align: right; }
.rcx-detalle .rcx-adjuntar-campos { margin-top: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: 6px; font-size: 12px; text-align: left; }
.rcx-detalle .rcx-adjuntar-campos #alb, .rcx-detalle .rcx-adjuntar-campos #foto { width: 100%; }
.rcx-detalle .rcx-adjuntar-campos input { width: 100%; min-height: 34px; font-size: 12px; }
.rcx-detalle .rcx-cantidades-titulo { font-weight: 600; margin-top: 6px; }
.rcx-detalle .rcx-adjuntar-campos .rcx-cantidades { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; }
.rcx-detalle .rcx-adjuntar-campos .rcx-cantidad { min-width: 0; white-space: normal; }
@media (max-width: 700px) { .rcx-lista .rc-pie { grid-template-columns: 1fr; gap: 8px; } .rcx-detalle .rcx-adjuntar-campos .rcx-cantidades { grid-template-columns: 1fr; } }

/* Cuerpo de recepción: acciones y filtros de la lista. */
.rcx-lista .rc-registrar { display: inline-flex; gap: 0; height: 44px; min-height: 44px; padding: 0; margin-top: 16px; font-size: 13px; }
.rcx-lista .rcx-registrar-texto { display: inline-flex; align-items: center; gap: 9px; padding: 0 12px; height: 100%; }
.rcx-lista .rcx-registrar-texto .ico { width: 16px; height: 16px; }
.rcx-lista .rcx-registrar-menu { width: 40px; height: 100%; display: inline-flex; align-items: center; justify-content: center; border-left: 1px solid var(--sc-on-brand); font-size: 18px; }
.rcx-lista .rc-filtro:last-child .rc-select { justify-content: flex-start; gap: 8px; }
.rcx-lista .rc-filtro:last-child .rc-select::after { margin-left: auto; }
.rcx-lista .rc-filtro:last-child .rc-select .ico { width: 16px; height: 16px; }
.rcx-lista .rc-acc { min-width: 122px; }
.rcx-lista .rc-icono { width: 32px; height: 32px; margin-left: 6px; vertical-align: middle; }
.rcx-lista .rc-icono .ico { width: 16px; height: 16px; }
.rcx-lista .rcx-referencia { color: var(--sc-info-fg); font-size: 12px; font-weight: 500; }

/* Cuerpo del detalle: seis resúmenes con rótulo y valor alineados. */
.rcx-detalle .rc-acciones { gap: 10px; transform: translateY(6px); }
.rcx-detalle .rc-acciones .boton, .rcx-detalle .rc-acciones button { min-height: 42px; height: 42px; padding: 0 12px; font-size: 12px; border: 1px solid var(--sc-border); border-radius: 6px; }
.rcx-detalle .rc-acciones .rc-solo { padding: 0 9px !important; }
.rcx-detalle .rc-acciones .rc-marcar { padding: 0 14px; }
.rcx-detalle .rc-franja .rc-celda { padding: 10px 8px; }
.rcx-detalle .rc-celda-cab { min-height: 34px; height: 34px; gap: 4px; margin-bottom: 3px; white-space: nowrap; font-size: 11px; line-height: 17px; font-weight: 600; letter-spacing: -.015em; }
.rcx-detalle .rc-celda-cab.rc-celda-disco { gap: 4px; }
.rcx-detalle .rc-celda-cab .ico, .rcx-detalle .rc-celda-disco .ico { width: 30px; height: 30px; padding: 5px; flex: none; border-radius: 50%; background: var(--sc-danger-bg); color: var(--sc-brand); }
.rcx-detalle .rc-celda > :not(.rc-celda-cab) { font-size: 12px; line-height: 17px; }
.rcx-detalle .rc-celda .micro { font-size: 11px; line-height: 16px; }
.rcx-detalle .rc-fechas { font-size: 11px; line-height: 16px; gap: 2px 4px; }
.rcx-detalle .rc-tabla-det td { height: 54px; }
.rcx-detalle .rc-mini { width: 38px; height: 38px; }
.rcx-detalle .rc-prod { gap: 12px; }
.rcx-detalle .rc-prod .rc-mini .ico { width: 21px; height: 21px; }
.rcx-detalle .rcx-visor { padding: 14px 26px; }
.rcx-detalle .rcx-hoja { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--sc-surface); box-shadow: var(--sc-shadow-card); border: 1px solid var(--sc-border); }
.rcx-detalle .rcx-hoja p { color: var(--sc-text-muted); }
.rcx-detalle .rc-albaran .rc-exportar, .rcx-detalle .rc-notas-card .rc-exportar { min-height: 38px; border: 1px solid var(--sc-border); border-radius: 6px; }
@media (max-width: 1100px) { .rcx-detalle .rc-celda-cab { white-space: normal; height: auto; } }

/* Densidad de la semilla: cada dato se conserva en el DOM y en title. */
.rcx-lista .rc-tabla { table-layout: fixed; font-size: 12px; line-height: 17px; }
.rcx-lista .rc-tabla th { font-size: 11px; padding: 8px 4px; }
.rcx-lista .rc-tabla td { height: 45px; padding: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rcx-lista .rc-tabla .rcx-cortar { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rcx-lista .rc-tabla .rcx-col-sel { width: 3.5%; }
.rcx-lista .rc-tabla .rcx-col-alb { width: 12%; }
.rcx-lista .rc-tabla .rcx-col-prov { width: 13.5%; }
.rcx-lista .rc-tabla .rcx-col-pedido { width: 8.5%; }
.rcx-lista .rc-tabla .rcx-col-obra { width: 10%; }
.rcx-lista .rc-tabla .rcx-col-estado { width: 10%; }
.rcx-lista .rc-tabla .rcx-col-bultos { width: 5%; }
.rcx-lista .rc-tabla .rcx-col-fecha { width: 10.5%; }
.rcx-lista .rc-tabla .rcx-col-resp { width: 11%; }
.rcx-lista .rc-tabla .rcx-col-acc { width: 16%; }
.rcx-lista .rc-acc { min-width: 0; padding-left: 0; padding-right: 0; }
.rcx-lista .rc-icono { width: 30px; height: 30px; margin-left: 3px; }
.rcx-lista .rc-icono .ico { width: 16px; height: 16px; }
.rcx-lista .rc-rapidas .rc-rapida:not(.rc-rapida-roja) { background: var(--sc-surface-sunk); border-color: var(--sc-border-strong); border-radius: 5px; }
.rcx-lista .rc-carril .rc-mas { color: var(--sc-brand); font-size: 12px; }
.rcx-lista .rc-carril .rc-mas .ico { width: 12px; height: 12px; }
.rcx-detalle .rc-lineas .rc-tabla-det { table-layout: fixed; font-size: 12px; line-height: 16px; }
.rcx-detalle .rc-lineas .rc-tabla-det th { font-size: 11px; }
.rcx-detalle .rc-lineas .rc-tabla-det th:nth-child(1) { width: 4%; }
.rcx-detalle .rc-lineas .rc-tabla-det th:nth-child(2) { width: 36%; }
.rcx-detalle .rc-lineas .rc-tabla-det th:nth-child(3) { width: 14%; }
.rcx-detalle .rc-lineas .rc-tabla-det th:nth-child(4),
.rcx-detalle .rc-lineas .rc-tabla-det th:nth-child(5),
.rcx-detalle .rc-lineas .rc-tabla-det th:nth-child(6) { width: 11%; }
.rcx-detalle .rc-lineas .rc-tabla-det th:nth-child(7) { width: 13%; }
.rcx-detalle .rc-lineas .rc-tabla-det td { height: 48px; padding-top: 3px; padding-bottom: 3px; }
.rcx-detalle .rc-prod { gap: 8px; min-width: 0; }
.rcx-detalle .rc-prod .rcx-prod-texto { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 12px; line-height: 16px; }
.rcx-detalle .rc-mini, .rcx-detalle .rc-disc .rc-mini { width: 34px; height: 34px; background: transparent; }
.rcx-detalle .rc-prod .rc-mini .ico, .rcx-detalle .rc-disc .rc-mini .ico { width: 19px; height: 19px; }
.rcx-detalle .rc-parciales .rc-tabla-det { font-size: 12px; line-height: 16px; }
.rcx-detalle .rc-parciales .rc-tabla-det td { height: 43px; padding-top: 3px; padding-bottom: 3px; }
.rcx-detalle .rc-parciales .rc-tabla-det td:nth-child(6) { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcx-detalle .rcx-visor { padding-left: 15px; padding-right: 15px; }
.rcx-detalle .rc-celda-cab { font-size: 12px; font-weight: 600; }
.rcx-detalle .rc-celda-cab .ico, .rcx-detalle .rc-celda-disco .ico { width: 34px; height: 34px; padding: 7px; }
.rcx-detalle .rc-discrepancias .rc-disc li { min-height: 50px; }
@media (max-width: 1100px) {
  .rcx-lista .rc-tabla { min-width: 890px; }
  .rcx-detalle .rc-lineas .rc-tabla-det { min-width: 700px; }
}
.rcx-lista .rc-principal .tira-kpi .kpi-icono { width: 46px; height: 46px; }
.rcx-lista .rc-principal .tira-kpi .kpi:nth-child(n+3) .kpi-icono { background: var(--sc-ok-bg); color: var(--sc-ok-fg); }
.rcx-lista .rc-principal .tira-kpi .kpi-icono .ic { width: 24px; height: 24px; }
.rcx-lista .rc-principal .tira-kpi .kpi .cifra { font-size: 27px; line-height: 31px; font-weight: 700; }
.rcx-lista .rc-principal .tira-kpi .kpi .rotulo { font-size: 12px; font-weight: 500; line-height: 16px; }
.rcx-lista .rc-principal .tira-kpi .kpi .meta.micro { font-size: 11px; line-height: 15px; }
.rcx-lista .rc-registrar { min-height: 36px; height: 36px; padding: 0 14px; }
.rcx-lista .rc-mas-filtros .ico { width: 16px; height: 16px; margin-right: 8px; }
.rcx-lista .rc-carril .rc-h { font-size: 14px; line-height: 20px; font-weight: 650; }
.rcx-lista .rc-tabla { table-layout: fixed; font-size: 12px; line-height: 16px; }
.rcx-lista .rc-tabla th { font-size: 11px; line-height: 16px; }
.rcx-lista .rc-tabla td { height: 45px; font-size: 12px; line-height: 16px; }
.rcx-lista .rc-tabla .chip { min-height: 24px; font-size: 11px; }
.rcx-lista .rcx-col-sel { width: 3%; }
.rcx-lista .rcx-col-alb { width: 12%; }
.rcx-lista .rcx-col-prov { width: 14%; }
.rcx-lista .rcx-col-pedido { width: 8%; }
.rcx-lista .rcx-col-obra { width: 10%; }
.rcx-lista .rcx-col-estado { width: 8%; }
.rcx-lista .rcx-col-bultos { width: 5%; }
.rcx-lista .rcx-col-fecha { width: 10%; }
.rcx-lista .rcx-col-resp { width: 15%; }
.rcx-lista .rcx-col-acc { width: 15%; }
.rcx-lista .rc-tabla .rc-prov { max-width: none; }
.rcx-lista .rc-tabla td:nth-child(5), .rcx-lista .rc-tabla td:nth-child(9) { white-space: normal; overflow-wrap: anywhere; }
.rcx-lista .rc-tabla .rcx-cortar { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; }
.rcx-detalle .titulo-pantalla .h1-marca { font-size: inherit; font-weight: 700; }
.rcx-detalle .rc-celda { font-size: 13px; line-height: 18px; }
.rcx-detalle .rc-celda .meta { font-size: 12px; line-height: 17px; }
.rcx-detalle .rc-fechas { font-size: 12px; line-height: 17px; }
.rcx-detalle .rc-tabla-det { font-size: 12px; line-height: 17px; }
.rcx-detalle .rc-tabla-det td { font-size: 12px; line-height: 17px; }
.rcx-detalle .rc-prod { gap: 11px; }
.rcx-detalle .rc-mini { flex: 0 0 36px; width: 36px; height: 36px; }
.rcx-detalle .rc-mini .ico { width: 23px; height: 23px; }
.rcx-detalle .rc-recibida { color: var(--sc-info-fg); font-weight: 600; font-size: 13px; }
.rcx-detalle .rc-albaran .rc-exportar, .rcx-detalle .rcx-adjuntar .boton { min-height: 33px; height: 33px; padding: 0 12px; font-size: 12px; }
.rcx-detalle .rc-albaran .rc-exportar .ico, .rcx-detalle .rcx-adjuntar .ico { width: 16px; height: 16px; }
.rcx-detalle .rc-notas-card .rc-card-cab > .ico { width: 20px; height: 20px; color: var(--sc-brand); }
.rcx-detalle .rc-discrepancias { height: 184px; min-height: 184px; overflow: hidden; }
.rcx-detalle .rc-disc { max-height: 132px; overflow-y: auto; padding-right: 3px; }
.rcx-detalle .rc-cuenta { background: var(--sc-danger-bg); color: var(--sc-brand); font-size: 13px; }
.rcx-detalle .rc-rapidas-det { min-height: 133px; }
.rcx-detalle .rc-parciales { height: 188px; min-height: 188px; overflow: hidden; }
.rcx-detalle .rc-parciales .tw { max-height: 130px; overflow-y: auto; }
.rcx-lista .rc-tabla td.rc-prov { white-space: normal; }
.rcx-detalle .rc-parciales .tw { max-height: 130px; overflow-y: auto; }
.rcx-detalle .rc-rapidas-det { min-height: 165px; }

/* Ronda 8: anchuras y estados exclusivos de las dos vistas de recepción. */
.rcx-lista .rc-filtros { margin-top: 2px; margin-bottom: 9px; padding-bottom: 15px; }
.rcx-lista .rc-listado { min-height: 602px; }
.rcx-lista .rc-tabla .rcx-col-sel { width: 3.4%; }
.rcx-lista .rc-tabla .rcx-col-alb { width: 10.9%; }
.rcx-lista .rc-tabla .rcx-col-prov { width: 10.9%; }
.rcx-lista .rc-tabla .rcx-col-pedido { width: 10.9%; }
.rcx-lista .rc-tabla .rcx-col-obra { width: 11.4%; }
.rcx-lista .rc-tabla .rcx-col-estado { width: 9.7%; }
.rcx-lista .rc-tabla .rcx-col-bultos { width: 5.7%; }
.rcx-lista .rc-tabla .rcx-col-fecha { width: 11.4%; }
.rcx-lista .rc-tabla .rcx-col-resp { width: 10.3%; }
.rcx-lista .rc-tabla .rcx-col-acc { width: 15.4%; }
.rcx-lista .rc-tabla th:nth-child(8) { white-space: normal; }
.rcx-lista .rcx-orden { display: inline-block; margin-left: 4px; font-size: 13px; line-height: 10px; color: var(--sc-text-muted); }
.rcx-lista .rc-mas-filtros .ico { width: 18px; height: 18px; }
.rcx-lista .rc-paginas { gap: 8px; }
.rcx-lista .rc-paginas .pag { width: 32px; min-width: 32px; height: 32px; border-radius: 5px; }

.rcx-detalle .rc-franja { grid-template-columns: 205fr 185fr 170fr 195fr 240fr 190fr; }
.rcx-detalle .rc-franja .rc-celda { min-width: 0; }
.rcx-detalle .rc-lineas .rc-tabla-det th:nth-child(2) { width: 38%; }
.rcx-detalle .rc-lineas .rc-tabla-det th:nth-child(3) { width: 12%; }
.rcx-detalle .rc-prod .rcx-prod-texto { flex: 1; max-width: 100%; margin-right: 12px; }
.rcx-detalle .rc-lineas .rc-tabla-det td.num { color: var(--sc-text-muted); font-size: 12px; font-weight: 400; }
.rcx-detalle .rc-lineas .rc-tabla-det td.rc-rojo { color: var(--sc-brand); font-weight: 600; }
.rcx-detalle .rc-parciales .rc-tabla-det { table-layout: fixed; }
.rcx-detalle .rc-parciales .rc-tabla-det th:nth-child(1) { width: 4%; }
.rcx-detalle .rc-parciales .rc-tabla-det th:nth-child(2) { width: 14%; }
.rcx-detalle .rc-parciales .rc-tabla-det th:nth-child(3) { width: 16%; }
.rcx-detalle .rc-parciales .rc-tabla-det th:nth-child(4) { width: 24%; }
.rcx-detalle .rc-parciales .rc-tabla-det th:nth-child(5) { width: 18%; }
.rcx-detalle .rc-parciales .rc-tabla-det th:nth-child(6) { width: 24%; }
.rcx-detalle .rc-parciales .rc-tabla-det td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcx-detalle .rc-notas li { grid-template-columns: 36px minmax(0, 1fr) 150px 24px; min-height: 48px; }
.rcx-detalle .rcx-nota-meta { display: flex; flex-direction: column; color: var(--sc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcx-detalle .rcx-nota-menu { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; color: var(--sc-text-muted); background: var(--sc-neutral-bg); opacity: .65; }
.rcx-detalle .rcx-nota-menu .ico { width: 16px; height: 16px; }
.rcx-detalle .rc-albaran { padding-top: 7px; }
.rcx-detalle .rc-albaran .rc-card-cab { margin-bottom: 5px; }
.rcx-detalle .rcx-visor { margin-top: 0; }
.rcx-detalle .rc-discrepancias { display: flex; flex-direction: column; height: 184px; min-height: 184px; padding-bottom: 9px; }
.rcx-detalle .rc-discrepancias .rc-card-cab { flex: 0 0 35px; margin-bottom: 5px; }
.rcx-detalle .rc-disc { flex: 0 0 102px; min-height: 0; max-height: 102px; overflow-y: scroll; scrollbar-gutter: stable; scrollbar-color: var(--sc-border-strong) var(--sc-surface-sunk); }
.rcx-detalle .rc-disc li { min-height: 48px; }
.rcx-detalle .rc-disc li > div { min-width: 0; }
.rcx-detalle .rc-disc li b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rcx-detalle .rcx-disc-pista { margin: 2px 0 0; font-size: 10px; line-height: 12px; color: var(--sc-text-muted); text-align: right; }
.rcx-lista .rcx-chip, .rcx-detalle .rcx-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 10px; border-radius: 12px; font-size: 11px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.rcx-lista .rcx-chip.verde, .rcx-detalle .rcx-chip.verde { background: var(--sc-ok-bg); color: var(--sc-ok-fg); }
.rcx-lista .rcx-chip.naranja, .rcx-detalle .rcx-chip.naranja { background: var(--sc-warn-bg); color: var(--sc-warn-fg); }
.rcx-detalle .rcx-chip.rojo { background: var(--sc-danger-bg); color: var(--sc-brand); }
.rcx-detalle .rc-lineas .chip.est { min-height: 24px; padding: 0 10px; border-radius: 12px; font-size: 11px; font-weight: 500; }
.rcx-detalle .rc-lineas .chip.est::before { display: none; }
@media (max-width: 1100px) { .rcx-detalle .rc-franja { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ajustes de lectura medidos en el cuerpo de las dos vistas. */
.rcx-lista .rc-tabla { font-size: 12.5px; line-height: 16px; }
.rcx-lista .rc-tabla th { font-size: 11.5px; line-height: 16px; padding-right: 3px; padding-left: 3px; }
.rcx-lista .rc-tabla td { font-size: 12.5px; line-height: 16px; padding-right: 3px; padding-left: 3px; }
.rcx-lista .rc-tabla .rcx-col-alb { width: 13%; }
.rcx-lista .rc-tabla .rcx-col-prov { width: 11%; }
.rcx-lista .rc-tabla .rcx-col-pedido { width: 9%; }
.rcx-lista .rc-tabla .rcx-col-obra { width: 10%; }
.rcx-lista .rc-tabla .rcx-col-estado { width: 9%; }
.rcx-lista .rc-tabla .rcx-col-bultos { width: 5%; }
.rcx-lista .rc-tabla .rcx-col-fecha { width: 11.5%; }
.rcx-lista .rc-tabla .rcx-col-resp { width: 10%; }
.rcx-lista .rc-tabla .rcx-col-acc { width: 18.5%; }
.rcx-lista .rc-tabla .rcx-referencia { white-space: nowrap; font-size: 11.5px; letter-spacing: -.025em; }
.rcx-lista .rc-acc { text-align: left; }
.rcx-lista .rc-icono { width: 28px; height: 28px; margin-left: 4px; border: 1px solid var(--sc-border-strong); border-radius: 6px; }
.rcx-lista .rc-icono.off { background: var(--sc-surface-sunk); }
.rcx-lista .rc-icono.off .ico { width: 15px; height: 15px; }
.rcx-lista .rc-tabla th:nth-child(8) { white-space: nowrap; }
.rcx-lista .rcx-orden { margin-left: 5px; }
.rcx-lista .rc-principal .tira-kpi .kpi:nth-child(3) { column-gap: 6px; }
.rcx-lista .rc-principal .tira-kpi .kpi:nth-child(3) .rotulo { font-size: 11.5px; white-space: nowrap; }
.rcx-detalle .rc-lineas .rc-tabla-det td { font-size: 12.5px; line-height: 17px; }
.rcx-detalle .rc-lineas .rc-tabla-det th { font-size: 11.5px; }
.rcx-detalle .rc-prod .rcx-prod-texto { font-size: 12.5px; line-height: 17px; }
.rcx-detalle .rc-prod .rc-mini { flex: 0 0 36px; width: 36px; height: 36px; background: var(--sc-surface-sunk); border: 1px solid var(--sc-border); border-radius: 6px; }
.rcx-detalle .rc-prod .rc-mini .ico { width: 21px; height: 21px; }
.rcx-detalle .rc-disc .chip.est { min-height: 24px; padding: 0 9px; font-size: 10.5px; }
.rcx-detalle .rc-disc .chip.est::before { display: none; }
.rcx-detalle .rc-notas .rc-bola-aviso .ico { fill: currentColor; stroke: var(--sc-surface); stroke-width: 1.2; }
.rcx-detalle .rc-albaran { padding-top: 12px; }
.rcx-detalle .rcx-visor { height: 228px; }

/* Pasada 2: medidas del cuerpo sobre el PNG de 1448 × 1086. */
.rcx-lista .rc-tabla th, .rcx-lista .rc-tabla td { padding-left: 8px; padding-right: 8px; }
.rcx-lista .rc-tabla .rcx-col-sel { width: 3.2%; }
.rcx-lista .rc-tabla .rcx-col-alb { width: 12.5%; }
.rcx-lista .rc-tabla .rcx-col-prov { width: 11.7%; }
.rcx-lista .rc-tabla .rcx-col-pedido { width: 9.8%; }
.rcx-lista .rc-tabla .rcx-col-obra { width: 10.3%; }
.rcx-lista .rc-tabla .rcx-col-estado { width: 9%; }
.rcx-lista .rc-tabla .rcx-col-bultos { width: 5.2%; }
.rcx-lista .rc-tabla .rcx-col-fecha { width: 10.5%; }
.rcx-lista .rc-tabla .rcx-col-resp { width: 11%; }
.rcx-lista .rc-tabla .rcx-col-acc { width: 16.8%; }
.rcx-lista .rc-tabla td:nth-child(5), .rcx-lista .rc-tabla td:nth-child(9) { white-space: nowrap; }
.rcx-lista .rc-tabla .rcx-cortar { display: block; white-space: nowrap; text-overflow: ellipsis; }
.rcx-lista .rc-tabla td.rc-prov { white-space: nowrap; }
.rcx-lista .rc-tabla .rc-acc, .rcx-lista .rc-tabla th.rc-acc { padding-left: 2px; padding-right: 0; white-space: nowrap; }
.rcx-lista .rc-icono { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 3px; background: var(--sc-surface); }
.rcx-lista .rc-icono.off { background: var(--sc-surface-sunk); color: var(--sc-text-faint); }
.rcx-lista .rc-icono.rc-alerta.off { color: var(--sc-danger-fg); opacity: .55; }
.rcx-lista .rc-carril .rc-vacio { margin: 20px 16px 0; padding: 0; font-size: 12px; line-height: 17px; }
.rcx-lista .rc-carril .rc-mas { display: inline-flex; align-items: center; gap: 7px; }
.rcx-lista .rc-paginas { justify-self: center; }
.rcx-lista .rc-paginas .pag { width: 36px; min-width: 36px; height: 36px; }
.rcx-lista .rc-rapidas .rc-rapida-roja.off { background: var(--sc-surface-sunk); color: var(--sc-text-faint); border-color: var(--sc-border-strong); }
.rcx-lista .rc-rapidas .rc-rapida-roja.off .ico { opacity: .65; }
.rcx-detalle .rc-lineas .rc-prod .rc-mini, .rcx-detalle .rc-disc .rc-mini { width: 40px; height: 40px; flex: 0 0 40px; background: var(--sc-surface-sunk); border: 1px solid var(--sc-border); border-radius: 6px; }
.rcx-detalle .rc-prod .rcx-prod-texto { font-size: 12px; font-weight: 500; line-height: 17px; }
.rcx-detalle .rc-parciales .rc-card-cab { margin-bottom: 0; }
.rcx-detalle .rc-notas li { grid-template-columns: 36px minmax(0, 1fr) 170px 24px; }
.rcx-detalle .rc-notas li b { font-size: 12px; font-weight: 500; }
.rcx-detalle .rc-notas li .meta, .rcx-detalle .rcx-nota-meta { font-size: 11px; }
.rcx-detalle .rc-discrepancias { height: 190px; min-height: 190px; padding-top: 4px; padding-bottom: 4px; }
.rcx-detalle .rc-discrepancias .rc-card-cab { flex-basis: 32px; height: 32px; margin-bottom: 2px; }
.rcx-detalle .rc-discrepancias .rc-disc { flex: 1 1 auto; max-height: 132px; gap: 4px; }
.rcx-detalle .rc-discrepancias .rc-disc li { min-height: 60px; grid-template-columns: 40px minmax(0,1fr) auto 18px; gap: 7px; }
.rcx-detalle .rcx-disc-flecha { font-size: 24px; color: var(--sc-text-muted); line-height: 1; }
.rcx-detalle .rcx-disc-pista { font-size: 11px; line-height: 14px; }
.rcx-detalle .rc-rapidas-det .rc-rapida-roja.off { background: var(--sc-surface-sunk); color: var(--sc-text-faint); border-color: var(--sc-border-strong); }

/* === CX-CORE-A10 === */
.cx-core-a10-lista .sol-tabla { margin-top: 9px; }
.cx-core-a10-lista .tsolicitudes tr.elegida td { background: var(--sc-surface); }
.cx-core-a10-lista .cx-a10-detalle-abierto { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; vertical-align: middle; border: 1px solid var(--sc-brand); border-radius: 3px; background: var(--sc-brand); color: var(--sc-on-brand); }
.cx-core-a10-lista .cx-a10-detalle-abierto .ic { width: 13px; height: 13px; stroke-width: 2.5; }
.cx-core-a10-lista .sol-tabs { gap: 4px; }
.cx-core-a10-lista .sol-tabs > * { padding-left: 6px; padding-right: 6px; }
.cx-core-a10-lista .sol-tabs [aria-current] { padding-left: 9px; padding-right: 9px; }
.cx-core-a10-lista .sol-prov { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; }
.cx-core-a10-lista .sol-prov .sol-logo { width: 56px; height: 56px; }
.cx-core-a10-lista .sol-prov-identidad b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 17px; max-height: 34px; }
.cx-core-a10-lista .sol-coincidencia { width: auto; min-width: 32px; padding-left: 8px; padding-right: 8px; }
.cx-core-a10-lista .sol-panel-acc > :nth-child(2)[aria-disabled="true"] { border-color: var(--sc-brand); color: var(--sc-brand); opacity: .55; background: var(--sc-surface); }
.cx-core-a10-lista .sol-panel-acc > :first-child[aria-disabled="true"] { opacity: .58; }

/* === CX-CORE-B8 === */
.cx-core-b8.ap-rejilla .ap-cajon { height: calc(100vh - var(--sc-header-h)); overflow: hidden; }
.cx-core-b8.ap-rejilla .ap-cajon-cuerpo { overflow-y: auto; min-height: 0; padding-bottom: 4px; gap: 8px; }
.cx-core-b8.ap-rejilla .ap-cajon-pie { flex: none; padding: 8px 10px; min-height: 59px; position: relative; }
.cx-core-b8.ap-rejilla .ap-decision { margin: 0; }
.cx-core-b8.ap-rejilla .ap-botonera { grid-template-columns: 1fr 1fr 1.32fr 38px; gap: 6px; }
.cx-core-b8.ap-rejilla .ap-botonera button, .cx-core-b8.ap-rejilla .ap-botonera .boton,
.cx-core-b8.ap-rejilla .ap-botonera a { min-height: 36px; border-radius: 5px; font-size: 12px; }
.cx-core-b8.ap-rejilla .ap-botonera a { display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--sc-border-strong); text-decoration: none; color: var(--sc-text); }
.cx-core-b8.ap-rejilla .ap-botonera a.ap-rechazar { color: var(--sc-brand); border-color: var(--sc-brand); }
.cx-core-b8.ap-rejilla .ap-nota { display: none; position: absolute; bottom: 100%; left: 0; right: 0;
  padding: 12px; background: var(--sc-surface); border-top: 1px solid var(--sc-border-strong);
  box-shadow: var(--sc-shadow-card); }
.cx-core-b8.ap-rejilla .ap-nota:target { display: block; }
.cx-core-b8.ap-rejilla .ap-nota label { display: block; font-size: 12px; }
.cx-core-b8.ap-rejilla .ap-nota input { min-height: 34px; }
.cx-core-b8.ap-rejilla .ap-nota > div { display: flex; align-items: center; gap: 7px; }
.cx-core-b8.ap-rejilla .ap-nota button { min-height: 34px; }
.cx-core-b8.ap-rejilla .ap-cajon-tit { margin-top: 10px; }
.cx-core-b8.ap-rejilla .ap-cajon-sub { margin-bottom: 10px; min-height: 38px; }
.cx-core-b8.ap-rejilla .ap-ia-nota { font-size: 11px; color: var(--sc-text-muted); }
.cx-core-b8.ap-rejilla .ap-bloque { padding: 9px 11px; border-radius: 6px; }
.cx-core-b8.ap-rejilla .ap-bloque h3 { font-size: 13px; line-height: 18px; }
.cx-core-b8.ap-rejilla .ap-dl { grid-template-columns: 34% 1fr; row-gap: 7px; font-size: 12px; line-height: 16px; }
.cx-core-b8.ap-rejilla .ap-dl dt { font-size: 11px; }
.cx-core-b8.ap-rejilla .ap-dl dd { font-size: 12px; }
.cx-core-b8.ap-rejilla .ap-persona b { font-size: 13px; }
.cx-core-b8.ap-rejilla .ap-arts { font-size: 11px; }
.cx-core-b8.ap-rejilla .ap-arts td { height: 35px; }
.cx-core-b8.ap-rejilla .ap-bloque:has(.ap-arts) { min-height: 158px; }
.cx-core-b8.ap-rejilla .ap-prov-card { background: var(--sc-surface); min-height: 128px; border-radius: 6px; }
.cx-core-b8.ap-rejilla .ap-bloque:has(.ap-comparativa) { min-height: 188px; }
.cx-core-b8.ap-rejilla .ap-prov-card.vacia { background: var(--sc-surface); }
.cx-core-b8.ap-rejilla .ap-prov-card b { font-size: 12px; overflow-wrap: anywhere; }
.cx-core-b8.ap-rejilla .ap-prov-card .meta { font-size: 11px; }
.cx-core-b8.ap-rejilla .ap-prov-cifra { margin-top: 4px; }
.cx-core-b8.ap-rejilla .ap-impacto { font-size: 13px; }
.cx-core-b8.ap-rejilla .ap-barra { margin-top: 10px; }
.cx-core-b8.ap-rejilla .ap-pareja .ap-bloque { height: 99px; overflow: hidden; }
.cx-core-b8.ap-rejilla .ap-comentarios { min-height: 64px; }
.cx-core-b8.ap-rejilla .ap-comentarios p { margin: 7px 0 0; font-size: 12px; }
.cx-core-b8.ap-rejilla .ap-kpi { border-radius: 6px; }
.cx-core-b8.ap-rejilla .ap-filtros .ap-select, .cx-core-b8.ap-rejilla .ap-filtros .ap-mas-filtros,
.cx-core-b8.ap-rejilla .ap-buscar { min-height: 34px; border-color: var(--sc-border); border-radius: 5px; }
.cx-core-b8.ap-rejilla .ap-filtros { height: 34px; }
.cx-core-b8.ap-rejilla .ap-buscar input { height: 32px; min-height: 0; padding: 0; }
.cx-core-b8.ap-rejilla .ap-tabla td { font-size: 12px; }
.cx-core-b8.ap-rejilla .ap-pie { min-height: 53px; padding-top: 8px; padding-bottom: 8px; }

.cx-core-b8.kb-rejilla .kb-kpi { min-height: 80px; border-radius: 6px; }
.cx-core-b8.kb-rejilla .kb-kpi .cifra { font-size: 23px; line-height: 26px; }
.cx-core-b8.kb-rejilla .kb-kpi .ap-kpi-ico { width: 39px; height: 39px; }
.cx-core-b8.kb-rejilla .kb-kpi .ap-kpi-ico .ico { width: 23px; height: 23px; }
.cx-core-b8.kb-rejilla .kb-kpis { margin: -9px 0 8px; }
.cx-core-b8.kb-rejilla .kb-kpi:last-child .cifra { font-size: 19px; white-space: nowrap; }
.cx-core-b8.kb-rejilla .kb-filtros { grid-template-columns: 1fr 1fr 1fr 1.6fr auto 36px; }
.cx-core-b8.kb-rejilla .kb-filtros select, .cx-core-b8.kb-rejilla .kb-filtros input,
.cx-core-b8.kb-rejilla .kb-filtrar { min-height: 34px; border-color: var(--sc-border); border-radius: 5px; }
.cx-core-b8.kb-rejilla .kb-menu-filtros { position: relative; align-self: end; }
.cx-core-b8.kb-rejilla .kb-menu-filtros summary { display: flex; align-items: center; justify-content: center;
  width: 36px; height: 34px; border: 1px solid var(--sc-border); border-radius: 5px; cursor: pointer;
  background: var(--sc-surface); list-style: none; }
.cx-core-b8.kb-rejilla .kb-menu-filtros summary::-webkit-details-marker { display: none; }
.cx-core-b8.kb-rejilla .kb-menu-filtros > a { position: absolute; right: 0; top: 36px; z-index: 3;
  width: 150px; padding: 9px; background: var(--sc-surface); border: 1px solid var(--sc-border);
  box-shadow: var(--sc-shadow-card); text-decoration: none; font-size: 12px; }
.cx-core-b8.kb-rejilla .kb-col-cab .ico { width: 17px; height: 17px; }
.cx-core-b8.kb-rejilla .kb-col-cab h2 { font-size: 12px; }
.cx-core-b8.kb-rejilla .kb-col { padding-left: 0; padding-right: 0; }
.cx-core-b8.kb-rejilla .kb-enlace { min-height: 150px; padding: 8px; gap: 4px; font-size: 12px; line-height: 15px; }
.cx-core-b8.kb-rejilla .kb-num { display: block; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px; line-height: 16px; }
.cx-core-b8.kb-rejilla .kb-linea { min-height: 15px; }
.cx-core-b8.kb-rejilla .kb-linea > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cx-core-b8.kb-rejilla .kb-importe { font-size: 14px; line-height: 18px; margin-top: 2px; }
.cx-core-b8.kb-rejilla .kb-enlace .kb-chip, .cx-core-b8.kb-rejilla .kb-enlace .kb-alerta { margin-top: auto; }
.cx-core-b8.kb-rejilla .kb-cajon .kb-proveedor-marca { display: flex; align-items: center; gap: 9px; min-height: 69px;
  border-bottom: 1px solid var(--sc-border); margin-bottom: 8px; }
.cx-core-b8.kb-rejilla .kb-proveedor-iniciales { display: inline-flex; align-items: center; justify-content: center;
  width: 45px; height: 45px; border-radius: 6px; background: var(--sc-neutral-bg);
  color: var(--sc-text); font-size: 17px; font-weight: 700; }
.cx-core-b8.kb-rejilla .kb-proveedor-marca > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cx-core-b8.kb-rejilla .kb-proveedor-marca b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.cx-core-b8.kb-rejilla .kb-proveedor-marca small { color: var(--sc-text-muted); }
.cx-core-b8.kb-rejilla .kb-bloque:has(.kb-dl) { min-height: 370px; }
.cx-core-b8.kb-rejilla .kb-bloque:has(.kb-arts) { min-height: 174px; margin-top: 7px; }
.cx-core-b8.kb-rejilla .kb-pasos li { min-width: 0; }
.cx-core-b8.kb-rejilla .kb-paso-bola { width: 27px; height: 27px; }
.cx-core-b8.kb-rejilla .kb-paso-bola .ico { width: 15px; height: 15px; }
.cx-core-b8.kb-rejilla .kb-pasos b { font-size: 11px; line-height: 13px; }
.cx-core-b8.kb-rejilla .kb-arts li { grid-template-columns: 25px minmax(0, 1fr) auto 17px; min-height: 33px; }
.cx-core-b8.kb-rejilla .kb-art-ico { display: inline-flex; width: 24px; height: 24px; align-items: center;
  justify-content: center; border-radius: 5px; background: var(--sc-neutral-bg); }
.cx-core-b8.kb-rejilla .kb-art-ico .ico { width: 15px; height: 15px; }
.cx-core-b8.kb-rejilla .kb-art-nombre { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cx-core-b8.kb-rejilla .kb-ver { margin-top: 16px; min-height: 34px; }
.cx-core-b8.ap-rejilla .ap-cajon-tit { font-size: 20px; font-weight: 600; line-height: 25px; margin: 10px 20px 3px; }
.cx-core-b8.ap-rejilla .ap-cajon-sub { font-size: 13px; line-height: 18px; margin: 0 20px 10px; min-height: 36px; }
.cx-core-b8.ap-rejilla .ap-editar { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--sc-brand); font-size: 12px; font-weight: 400; padding: 0 2px; }
.cx-core-b8.ap-rejilla .ap-editar .ico { width: 14px; height: 14px; }
.cx-core-b8.ap-rejilla .ap-art-producto { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cx-core-b8.ap-rejilla .ap-art-miniatura { width: 30px; height: 30px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 5px; background: var(--sc-neutral-bg);
  color: var(--sc-text-muted); }
.cx-core-b8.ap-rejilla .ap-art-miniatura .ico { width: 18px; height: 18px; }
.cx-core-b8.ap-rejilla .ap-art-texto { min-width: 0; display: flex; flex-direction: column; line-height: 15px; }
.cx-core-b8.ap-rejilla .ap-art-texto b { font-weight: 500; }
.cx-core-b8.ap-rejilla .ap-art-texto small { font-size: 10px; color: var(--sc-text-muted); }
.cx-core-b8.ap-rejilla .ap-arts td { height: 40px; }
.cx-core-b8.ap-rejilla .ap-cajon-cuerpo { padding-top: 12px; }
.cx-core-b8.ap-rejilla .ap-dl { row-gap: 4px; }
.cx-core-b8.ap-rejilla .ap-ia-nota { margin: 7px 0 0; font-size: 11px; line-height: 14px; }
.cx-core-b8.kb-rejilla .kb-tablero { height: 694px; overflow-x: auto; }
.cx-core-b8.kb-rejilla .kb-col { min-height: 0; height: 694px; }
.cx-core-b8.kb-rejilla .kb-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.cx-core-b8.kb-rejilla .kb-crear { flex: none; margin-top: auto; min-height: 34px; }
.cx-core-b8.kb-rejilla .kb-vacia { border: 0; background: transparent; padding: 14px 10px; text-align: left; }
.cx-core-b8.kb-rejilla .kb-num { max-width: calc(100% - 16px); white-space: normal; overflow: visible;
  text-overflow: clip; overflow-wrap: anywhere; line-height: 14px; min-height: 28px; }
.cx-core-b8.kb-rejilla .kb-menu { right: 4px; top: 6px; }
.cx-core-b8.kb-rejilla .kb-progreso { display: flex; flex-direction: column; gap: 5px;
  width: 100%; color: var(--sc-text-muted); font-size: 11px; line-height: 12px; }
.cx-core-b8.kb-rejilla .kb-barra { display: block; order: 2; width: 100%; height: 5px;
  border-radius: 5px; background: var(--sc-neutral-bg); overflow: hidden; }
.cx-core-b8.kb-rejilla .kb-barra.sin-datos > span { width: 0; }
.cx-core-b8.kb-rejilla .kb-paso-bola .ico { width: 14px; height: 14px; }
.cx-core-b8.kb-rejilla .kb-bloque h3 .kb-cajon-menu { margin-left: auto; display: inline-flex;
  width: 24px; height: 24px; align-items: center; justify-content: center; }
.cx-core-b8.kb-rejilla .kb-art-ico { width: 30px; height: 30px; }
.cx-core-b8.kb-rejilla .kb-arts li { grid-template-columns: 30px minmax(0, 1fr) auto 17px; gap: 8px; min-height: 40px; }
.cx-core-b8.kb-rejilla .kb-bloque:has(.kb-dl) { margin-top: 10px; min-height: 367px; }
@media (max-width: 1100px) {
  .cx-core-b8.ap-rejilla .ap-cajon { height: auto; min-height: 0; overflow: visible; }
  .cx-core-b8.ap-rejilla .ap-cajon-cuerpo { overflow: visible; }
  .cx-core-b8.kb-rejilla .kb-filtros { grid-template-columns: 1fr 1fr; }
}

/* Ronda 5: anatomía de los bloques del cuerpo, medida a 1448 × 1086. */
.cx-core-b8.ap-rejilla .ap-dl { row-gap: 4px; line-height: 17px; }
.cx-core-b8.ap-rejilla .ap-dl dd { font-size: 13px; line-height: 17px; }
.cx-core-b8.ap-rejilla .ap-dl dd b { font-weight: 600; }
.cx-core-b8.ap-rejilla .ap-bloque:has(.ap-comparativa) h3 { min-height: 20px; }
.cx-core-b8.ap-rejilla .ap-bloque:has(.ap-comparativa) .ap-mas-enlace { white-space: nowrap; }
.cx-core-b8.ap-rejilla .ap-comentario-vacio { display: flex; align-items: center; gap: 9px;
  min-height: 44px; color: var(--sc-text-muted); font-size: 12px; }
.cx-core-b8.ap-rejilla .ap-comentario-vacio .ap-av { width: 27px; height: 27px; }
.cx-core-b8.ap-rejilla .ap-comentarios { min-height: 84px; }
.cx-core-b8.ap-rejilla .ap-botonera { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr) 40px; gap: 7px; }
.cx-core-b8.ap-rejilla .ap-botonera button, .cx-core-b8.ap-rejilla .ap-botonera .boton,
.cx-core-b8.ap-rejilla .ap-botonera a { min-height: 39px; }

.cx-core-b8.kb-rejilla .kb-col-cab { min-height: 57px; background: var(--sc-surface-sunk);
  padding: 8px 7px 6px; border-radius: 6px 6px 0 0; }
.cx-core-b8.kb-rejilla .kb-col-cab h2 { overflow: visible; white-space: normal; line-height: 15px; }
.cx-core-b8.kb-rejilla .kb-suma { align-self: end; }
.cx-core-b8.kb-rejilla .kb-num { min-height: 29px; max-height: 29px; overflow: hidden; }
.cx-core-b8.kb-rejilla .kb-prov { min-height: 29px; max-height: 29px; overflow: hidden; align-items: flex-start; }
.cx-core-b8.kb-rejilla .kb-prov > span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden; }
.cx-core-b8.kb-rejilla .kb-enlace { min-height: 150px; }
.cx-core-b8.kb-rejilla .kb-vista { min-height: 32px; }
.cx-core-b8.kb-rejilla .kb-vista.on { min-width: 90px; }
.cx-core-b8.kb-rejilla .kb-vista + .kb-vista { min-width: 74px; }
.cx-core-b8.kb-rejilla .kb-vista .ico { width: 16px; height: 16px; }
.cx-core-b8.kb-rejilla .kb-general { padding-bottom: 12px; }
.cx-core-b8.kb-rejilla .kb-bloque.kb-general:has(.kb-dl) { min-height: 240px; margin-top: 10px; }
.cx-core-b8.kb-rejilla .kb-cajon .kb-proveedor-marca { display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; max-width: 150px; min-height: 0; border: 0; margin: 0; }
.cx-core-b8.kb-rejilla .kb-proveedor-marca .kb-proveedor-iniciales { width: 23px; height: 23px;
  flex: none; border-radius: 4px; font-size: 10px; }
.cx-core-b8.kb-rejilla .kb-proveedor-marca a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-core-b8.kb-rejilla .kb-transporte { margin: 0 8px; padding: 16px; border: 1px solid var(--sc-border-strong);
  border-radius: 7px; }
.cx-core-b8.kb-rejilla .kb-transporte h3 { margin-bottom: 12px; }
.cx-core-b8.kb-rejilla .kb-transporte .kb-info { margin-top: 10px; }

/* Densidad medida con la semilla de diez pendientes: diez filas de 48 px. */
.cx-core-b8.ap-rejilla .ap-pestanas nav { gap: 4px; }
.cx-core-b8.ap-rejilla .ap-pestanas nav > * { padding-left: 12px; padding-right: 12px; }
.cx-core-b8.ap-rejilla .ap-tabla { table-layout: fixed; min-width: 0; }
.cx-core-b8.ap-rejilla .ap-tabla th:nth-child(1), .cx-core-b8.ap-rejilla .ap-tabla td:nth-child(1) { width: 4%; }
.cx-core-b8.ap-rejilla .ap-tabla th:nth-child(2), .cx-core-b8.ap-rejilla .ap-tabla td:nth-child(2) { width: 10%; }
.cx-core-b8.ap-rejilla .ap-tabla th:nth-child(3), .cx-core-b8.ap-rejilla .ap-tabla td:nth-child(3) { width: 18%; }
.cx-core-b8.ap-rejilla .ap-tabla th:nth-child(4), .cx-core-b8.ap-rejilla .ap-tabla td:nth-child(4) { width: 12%; }
.cx-core-b8.ap-rejilla .ap-tabla th:nth-child(5), .cx-core-b8.ap-rejilla .ap-tabla td:nth-child(5) { width: 15%; }
.cx-core-b8.ap-rejilla .ap-tabla th:nth-child(6), .cx-core-b8.ap-rejilla .ap-tabla td:nth-child(6) { width: 10%; }
.cx-core-b8.ap-rejilla .ap-tabla th:nth-child(7), .cx-core-b8.ap-rejilla .ap-tabla td:nth-child(7) { width: 10%; }
.cx-core-b8.ap-rejilla .ap-tabla th:nth-child(8), .cx-core-b8.ap-rejilla .ap-tabla td:nth-child(8) { width: 8%; }
.cx-core-b8.ap-rejilla .ap-tabla th:nth-child(9), .cx-core-b8.ap-rejilla .ap-tabla td:nth-child(9) { width: 5%; }
.cx-core-b8.ap-rejilla .ap-tabla th:nth-child(10), .cx-core-b8.ap-rejilla .ap-tabla td:nth-child(10) { width: 8%; }
.cx-core-b8.ap-rejilla .ap-tabla th { height: 40px; padding: 4px; font-size: 10px; line-height: 12px; }
.cx-core-b8.ap-rejilla .ap-tabla td { box-sizing: border-box; height: 49px; max-height: 49px; padding: 4px; font-size: 11px; line-height: 15px; overflow: hidden; }
.cx-core-b8.ap-rejilla .ap-tabla .ap-desc { max-width: none; }
.cx-core-b8.ap-rejilla .ap-desc > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cx-core-b8.ap-rejilla .ap-id, .cx-core-b8.ap-rejilla .ap-quien { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-core-b8.ap-rejilla .ap-prov { max-width: 100%; padding: 2px 5px; }
.cx-core-b8.ap-rejilla .ap-revisar { gap: 2px; font-size: 10px; }
.cx-core-b8.ap-rejilla .ap-revisar .ico { width: 11px; height: 11px; }
.cx-core-b8.ap-rejilla .ap-dl { grid-template-columns: 105px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; }
.cx-core-b8.ap-rejilla .ap-bloque:has(.ap-arts) { min-height: 0; }
.cx-core-b8.ap-rejilla .ap-bloque:has(.ap-arts) .ap-total { margin-bottom: 7px; }
.cx-core-b8.ap-rejilla .ap-cajon-cuerpo { padding-bottom: 64px; }
.cx-core-b8.ap-rejilla .ap-prov-card { min-height: 110px; }
.cx-core-b8.ap-rejilla .ap-prov-card.vacia { justify-content: flex-start; }
.cx-core-b8.ap-rejilla .ap-prov-card.vacia b { min-height: 38px; }
.cx-core-b8.ap-rejilla .ap-prov-card.vacia .ap-prov-cifra { margin-top: 2px; }

/* Seis carriles dentro del ancho medido: referencia en una línea y tarjetas compactas. */
.cx-core-b8.kb-rejilla .kb-vistas { margin-top: 2px; margin-bottom: 6px; }
.cx-core-b8.kb-rejilla .kb-tablero { gap: 5px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cx-core-b8.kb-rejilla .kb-col { gap: 4px; }
.cx-core-b8.kb-rejilla .kb-col-cab { padding: 6px 5px 4px; }
.cx-core-b8.kb-rejilla .kb-enlace { padding: 7px 6px; min-height: 142px; }
.cx-core-b8.kb-rejilla .kb-num { max-width: calc(100% - 13px); min-height: 16px; max-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; font-size: 12px; font-weight: 700; line-height: 16px; }
.cx-core-b8.kb-rejilla .kb-prov { min-height: 28px; max-height: 28px; }
.cx-core-b8.kb-rejilla .kb-prov > span { font-size: 12px; line-height: 14px; overflow-wrap: normal; }
.cx-core-b8.kb-rejilla .kb-vacia { padding: 12px 10px; font-size: 12px; line-height: 17px; }
.cx-core-b8.kb-rejilla .kb-cajon .kb-proveedor-marca { max-width: 100%; gap: 8px; }
.cx-core-b8.kb-rejilla .kb-proveedor-marca .kb-proveedor-iniciales { width: 32px; height: 32px; font-size: 11px; }
.cx-core-b8.kb-rejilla .kb-proveedor-marca a { color: var(--sc-text); text-decoration: none; font-size: 13px; font-weight: 600; }
.cx-core-b8.kb-rejilla .kb-proveedor-marca a:hover { text-decoration: underline; }
.cx-core-b8.kb-rejilla .kb-bloque.kb-general:has(.kb-dl) { min-height: 367px; }
.cx-core-b8.kb-rejilla .kb-dl { grid-auto-rows: 29px; align-items: center; row-gap: 0; }
.cx-core-b8.kb-rejilla .kb-dl dt, .cx-core-b8.kb-rejilla .kb-dl dd { height: 29px; display: flex; align-items: center; border-bottom: 1px solid var(--sc-border); }
.cx-core-b8.kb-rejilla .kb-dl dd { justify-content: flex-end; }
.cx-core-b8.kb-rejilla .kb-transporte { padding: 6px 12px; }
.cx-core-b8.kb-rejilla .kb-transporte h3 { margin-bottom: 6px; }
.cx-core-b8.kb-rejilla .kb-transporte .kb-info { padding: 8px; font-size: 11px; line-height: 15px; }
.cx-core-b8.kb-rejilla .kb-bloque:has(.kb-arts) { min-height: 0; margin-top: 0; }
.cx-core-b8.kb-rejilla .kb-ver { margin-top: 16px; }
.cx-core-b8.kb-rejilla .kb-pasos { position: relative; column-gap: 0; }
.cx-core-b8.kb-rejilla .kb-pasos::before { content: ""; position: absolute; left: 13%; right: 13%; top: 13px; height: 2px; background: var(--sc-border-strong); }
.cx-core-b8.kb-rejilla .kb-pasos li { position: relative; gap: 8px; }
.cx-core-b8.kb-rejilla .kb-paso-bola { background: var(--sc-neutral-bg); border-color: var(--sc-neutral-bg); }


/* Ronda 8: ajuste del cuerpo contra los PNG a 1448 × 1086. */
.cx-core-b8.ap-rejilla .ap-tabla th { background: var(--sc-surface-sunk); font-size: 11px; font-weight: 500; line-height: 14px; padding-left: 8px; padding-right: 8px; }
.cx-core-b8.ap-rejilla .ap-tabla td { font-size: 12px; line-height: 15px; padding-left: 8px; padding-right: 8px; }
.cx-core-b8.ap-rejilla .ap-tabla tr.ap-marcada td { box-shadow: inset 0 1px var(--sc-brand-soft), inset 0 -1px var(--sc-brand-soft); }
.cx-core-b8.ap-rejilla .ap-tabla tr.ap-marcada td:first-child { box-shadow: inset 2px 0 var(--sc-brand), inset 0 1px var(--sc-brand-soft), inset 0 -1px var(--sc-brand-soft); }
.cx-core-b8.ap-rejilla .ap-dl { grid-template-columns: 150px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.cx-core-b8.ap-rejilla .ap-dl dt, .cx-core-b8.ap-rejilla .ap-dl dd { align-self: start; }
.cx-core-b8.ap-rejilla .ap-bloque { border-color: var(--sc-border); border-radius: 5px; padding: 11px 12px; }
.cx-core-b8.ap-rejilla .ap-prov-card { border-color: var(--sc-border); border-radius: 5px; padding: 10px; }
.cx-core-b8.ap-rejilla .ap-bloque:has(.ap-arts) { min-height: 165px; }
.cx-core-b8.kb-rejilla .kb-col-cab { grid-template-columns: 14px minmax(0, 1fr) 20px; column-gap: 4px; }
.cx-core-b8.kb-rejilla .kb-col-cab .ico { width: 14px; height: 14px; }
.cx-core-b8.kb-rejilla .kb-col-cab h2 { font-size: 11px; line-height: 14px; white-space: nowrap; }
.cx-core-b8.kb-rejilla .kb-cuenta { min-width: 20px; padding-left: 3px; padding-right: 3px; text-align: center; }
.cx-core-b8.kb-rejilla .kb-dl dt, .cx-core-b8.kb-rejilla .kb-dl dd { border-bottom-color: transparent; font-size: 12px; font-weight: 400; }
.cx-core-b8.kb-rejilla .kb-dl dd b { font-weight: 500; }
.cx-core-b8.kb-rejilla .kb-transporte { background: var(--sc-surface-sunk); border-color: var(--sc-border); padding: 12px; }
.cx-core-b8.kb-rejilla .kb-paso-bola { width: 28px; height: 28px; }
.cx-core-b8.kb-rejilla .kb-paso-bola .ico { width: 14px; height: 14px; }
.cx-core-b8.kb-rejilla .kb-pasos { font-size: 11px; }
.cx-core-b8.kb-rejilla .kb-ver { min-height: 32px; border-radius: 4px; }
.cx-core-b8.kb-rejilla .kb-bloque:has(.kb-arts) { min-height: 166px; }

/* Pasada 1: medidas del cuerpo frente a los PNG de 1448 × 1086. */
.cx-core-b8.ap-rejilla .ap-principal { background: linear-gradient(var(--sc-bg), var(--sc-surface)); }
.cx-core-b8.ap-rejilla .ap-kpi { min-height: 88px; align-items: flex-start; padding: 15px 12px 10px; gap: 10px; }
.cx-core-b8.ap-rejilla .ap-kpi > div { min-height: 61px; }
.cx-core-b8.ap-rejilla .ap-kpi .cifra { font-size: 20px; line-height: 24px; }
.cx-core-b8.ap-rejilla .ap-kpi .rotulo { font-size: 11px; line-height: 13px; }
.cx-core-b8.ap-rejilla .ap-kpi-pie { margin-top: auto; min-height: 12px; font-size: 10px; line-height: 12px; }
.cx-core-b8.ap-rejilla .ap-comparativa { padding-top: 10px; }
.cx-core-b8.ap-rejilla .ap-prov-card { position: relative; min-height: 114px; padding: 15px 12px 10px; gap: 5px; }
.cx-core-b8.ap-rejilla .ap-prov-card.elegido { border-width: 1px; box-shadow: none; }
.cx-core-b8.ap-rejilla .ap-prov-card.elegido > .ap-chip { position: absolute; top: -10px; left: 10px; min-width: 100px; height: 20px; box-sizing: border-box; text-align: center; padding: 2px 7px; }
.cx-core-b8.ap-rejilla .ap-prov-card b { min-height: 30px; line-height: 15px; }
.cx-core-b8.ap-rejilla .ap-prov-cifra { font-size: 14px; line-height: 18px; margin-top: 0; }
.cx-core-b8.ap-rejilla .ap-pareja .ap-bloque { height: auto; min-height: 104px; overflow: visible; padding-bottom: 12px; }
.cx-core-b8.ap-rejilla .ap-pareja .ap-bloque .meta { line-height: 14px; }
.cx-core-b8.ap-rejilla .ap-comentarios h3 { padding-right: 12px; }
.cx-core-b8.ap-rejilla .ap-comentarios .ap-mas-enlace { margin-right: 4px; }
.cx-core-b8.ap-rejilla .ap-editar[aria-disabled="true"],
.cx-core-b8.ap-rejilla .ap-mas-enlace[aria-disabled="true"],
.cx-core-b8.ap-rejilla .ap-flujos[aria-disabled="true"] { color: var(--sc-text-muted); opacity: .7; cursor: not-allowed; }
.cx-core-b8.kb-rejilla .kb-kpi { min-height: 80px; align-items: flex-start; padding: 14px 9px; gap: 8px; }
.cx-core-b8.kb-rejilla .kb-kpi .cifra,
.cx-core-b8.kb-rejilla .kb-kpi:last-child .cifra { font-size: 18px; line-height: 21px; }
.cx-core-b8.kb-rejilla .kb-kpi .rotulo { font-size: 11px; line-height: 13px; }
.cx-core-b8.kb-rejilla .kb-kpi .ap-kpi-ico { width: 40px; height: 40px; }
.cx-core-b8.kb-rejilla .kb-kpi .ap-kpi-ico .ico { width: 20px; height: 20px; }
.cx-core-b8.kb-rejilla .kb-col-cab { grid-template-columns: 14px auto minmax(0, 1fr); justify-content: start; column-gap: 6px; }
.cx-core-b8.kb-rejilla .kb-col-cab h2 { font-size: 11px; }
.cx-core-b8.kb-rejilla .kb-cuenta { justify-self: start; min-width: 18px; height: 18px; line-height: 16px; border-radius: 9px; padding: 0 6px; }
.cx-core-b8.kb-rejilla .kb-suma { grid-column: 1 / -1; }
.cx-core-b8.kb-rejilla .kb-tarjeta.on { border: 1px solid var(--sc-info-border); box-shadow: none; border-radius: 5px; }
.cx-core-b8.kb-rejilla .kb-bloque.kb-general { border: 1px solid var(--sc-border); border-radius: 6px; padding: 14px 15px 12px; background: var(--sc-surface); }
.cx-core-b8.kb-rejilla .kb-bloque.kb-general:has(.kb-dl) { min-height: 0; margin-top: 12px; }
.cx-core-b8.kb-rejilla .kb-dl { grid-auto-rows: 29px; }
.cx-core-b8.kb-rejilla .kb-dl dt, .cx-core-b8.kb-rejilla .kb-dl dd { height: 29px; }
.cx-core-b8.kb-rejilla .kb-transporte { margin-top: 0; }
.cx-core-b8.kb-rejilla .kb-bloque:has(.kb-arts) { margin-top: 12px; }
.cx-core-b8.kb-rejilla .kb-cajon { min-height: 0; height: calc(100vh - var(--sc-header-h) - 68px); }
.cx-core-b8.kb-rejilla .kb-crear.off { background: var(--sc-neutral-bg); color: var(--sc-text-muted); }

/* Pasada 2: alturas de tarjetas y arranques medidos con PIL. */
.cx-core-b8.kb-rejilla .kb-kpis { margin-top: -17px; }
.cx-core-b8.kb-rejilla .kb-bloque.kb-general:has(.kb-dl) { min-height: 373px; margin-top: 0; box-sizing: border-box; }
.cx-core-b8.kb-rejilla .kb-bloque:has(.kb-arts) { margin-top: 0; }
.cx-core-b8.ap-rejilla .ap-comparativa { padding-top: 0; }
.cx-core-b8.ap-rejilla .ap-prov-card { min-height: 145px; }
.cx-core-b8.ap-rejilla .ap-prov-identidad { display: flex; align-items: center; gap: 5px; min-height: 35px; }
.cx-core-b8.ap-rejilla .ap-prov-identidad b { min-height: 0; font-size: 11px; line-height: 14px; }
.cx-core-b8.ap-rejilla .ap-prov-iniciales { display: inline-flex; flex: 0 0 25px; width: 25px; height: 25px; align-items: center; justify-content: center; border-radius: 4px; background: var(--sc-neutral-bg); color: var(--sc-text-muted); font-size: 10px; font-weight: 700; }
.cx-core-b8.ap-rejilla .ap-prov-card .meta { line-height: 14px; }

/* Pasada 3: compensación de los bordes que aún diferían en 7–11 px. */
.cx-core-b8.kb-rejilla .kb-vistas { margin-bottom: 13px; }
.cx-core-b8.ap-rejilla .ap-bloque:has(.ap-dl) { padding-bottom: 0; }
.cx-core-b8.ap-rejilla .ap-bloque:has(.ap-arts) { min-height: 168px; }
.cx-core-b8.ap-rejilla .ap-pareja .ap-bloque { height: 99px; min-height: 99px; box-sizing: border-box; padding: 8px 10px 7px; overflow: visible; }
.cx-core-b8.ap-rejilla .ap-pareja .ap-bloque h3 { margin-bottom: 3px; }
.cx-core-b8.ap-rejilla .ap-impacto { margin-bottom: 3px; line-height: 17px; }
.cx-core-b8.ap-rejilla .ap-barra { height: 7px; margin: 4px 0; }
.cx-core-b8.ap-rejilla .ap-pareja .ap-bloque > .meta { margin: 2px 0 0; font-size: 10px; line-height: 12px; }

/* Ronda 8 · tabla de 735 px y estados del tablero medidos en los PNG. */
.cx-core-b8.ap-rejilla .ap-col-sel { width: 4%; }
.cx-core-b8.ap-rejilla .ap-col-id { width: 11%; }
.cx-core-b8.ap-rejilla .ap-col-desc { width: 14%; }
.cx-core-b8.ap-rejilla .ap-col-quien { width: 10%; }
.cx-core-b8.ap-rejilla .ap-col-prov { width: 12%; }
.cx-core-b8.ap-rejilla .ap-col-importe { width: 10%; }
.cx-core-b8.ap-rejilla .ap-col-fecha { width: 11%; }
.cx-core-b8.ap-rejilla .ap-col-prio { width: 10%; }
.cx-core-b8.ap-rejilla .ap-col-riesgo { width: 7%; }
.cx-core-b8.ap-rejilla .ap-col-acciones { width: 11%; }
.cx-core-b8.ap-rejilla .ap-tabla th, .cx-core-b8.ap-rejilla .ap-tabla td { width: auto; }
.cx-core-b8.ap-rejilla .ap-tabla tr.ap-marcada td { background: var(--sc-brand-soft); box-shadow: inset 0 1px var(--sc-brand-border), inset 0 -1px var(--sc-brand-border); }
.cx-core-b8.ap-rejilla .ap-tabla tr.ap-marcada td:first-child { border-radius: 6px 0 0 6px; box-shadow: inset 1px 0 var(--sc-brand-border), inset 0 1px var(--sc-brand-border), inset 0 -1px var(--sc-brand-border); }
.cx-core-b8.ap-rejilla .ap-tabla tr.ap-marcada td:last-child { border-radius: 0 6px 6px 0; box-shadow: inset -1px 0 var(--sc-brand-border), inset 0 1px var(--sc-brand-border), inset 0 -1px var(--sc-brand-border); }
.cx-core-b8.ap-rejilla .ap-kpi .rotulo { font-weight: 400; line-height: 13px; }
.cx-core-b8.ap-rejilla .ap-kpi-pie { padding-top: 4px; }
.cx-core-b8.ap-rejilla .ap-ia-nota { margin: 0 12px 3px; font-size: 10px; line-height: 13px; }
.cx-core-b8.ap-rejilla .ap-comentarios h3 .ico { width: 16px; height: 16px; stroke-width: 1.5; }
.cx-core-b8.kb-rejilla .kb-cuenta { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--sc-neutral-bg); font-size: 10px; font-weight: 600; }
.cx-core-b8.kb-rejilla .kb-tarjeta.on { border-color: var(--sc-info-fg); box-shadow: 0 0 0 1px var(--sc-info-border), 0 0 0 2px var(--sc-info-bg); }
.cx-core-b8.kb-rejilla .kb-barra.p10 > span, .cx-core-b8.kb-rejilla .kb-barra.p20 > span,
.cx-core-b8.kb-rejilla .kb-barra.p30 > span, .cx-core-b8.kb-rejilla .kb-barra.p40 > span,
.cx-core-b8.kb-rejilla .kb-barra.p50 > span, .cx-core-b8.kb-rejilla .kb-barra.p60 > span,
.cx-core-b8.kb-rejilla .kb-barra.p70 > span, .cx-core-b8.kb-rejilla .kb-barra.p80 > span,
.cx-core-b8.kb-rejilla .kb-barra.p90 > span, .cx-core-b8.kb-rejilla .kb-barra.p100 > span { background: var(--sc-ok-fg); }
.cx-core-b8.kb-rejilla .kb-pasos .hecho .kb-paso-bola, .cx-core-b8.kb-rejilla .kb-pasos .actual .kb-paso-bola { background: var(--sc-ok-fg); border-color: var(--sc-ok-fg); color: var(--sc-on-brand); }
.cx-core-b8.kb-rejilla .kb-pasos li:not(.hecho):not(.actual) .kb-paso-bola { color: var(--sc-text-muted); }
.cx-core-b8.kb-rejilla .kb-pasos .kb-paso-fecha { min-height: 12px; }
.cx-core-b8.kb-rejilla .kb-ver .ico { width: 14px; height: 14px; margin-left: 8px; }
.cx-core-b8.ap-rejilla .ap-tabla { border-collapse: separate; border-spacing: 0; }
.cx-core-b8.kb-rejilla .kb-pasos li:not(.hecho):not(.actual) .kb-paso-bola { border: 1px solid var(--sc-border-control); background: var(--sc-surface); }
.cx-core-b8.kb-rejilla .kb-pasos::before { z-index: 0; }
.cx-core-b8.kb-rejilla .kb-paso-bola { position: relative; z-index: 1; flex: none; }
.cx-core-b8.kb-rejilla .kb-crear.off { color: var(--sc-text-muted); background: var(--sc-surface-sunk); }
.cx-core-b8.kb-rejilla .kb-crear.off .ico { color: var(--sc-text-faint); }

/* === CX-OBR13 === */
.ocx-obras .fo-lista { min-height: 670px; display: flex; flex-direction: column; }
.ocx-obras .fo-lista .fo-pie { margin-top: auto; min-height: 50px; padding-top: 0; }
.ocx-obras .fo-aside .fo-lado:nth-child(4) { flex: 1; min-height: 258px; }
.ocx-obras .fo-aside { min-height: 880px; }
.ocx-obras .fo-aside .fo-lado:nth-child(4) .vacio { min-height: 178px; }
.ocx-obras .fo-donut { width: 122px; height: 122px; }
.ocx-obras .fo-donut-fila { grid-template-columns: 122px minmax(0, 1fr); }
.ocx-obras .fo-compras-cab { cursor: help; }
.ocx-obras .fo-compras-cab::after { content: " ⓘ"; font-size: 13px; line-height: 1; color: var(--sc-text-muted); }
.ocx-obras .fo-nota { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.ocx-obras .fo-nota:focus-within, .ocx-obras .fo-nota[open] { position: relative; width: auto; height: auto; overflow: visible; }
.ocx-obras .fo-nota summary { width: 16px; height: 16px; }
.ocx-360 .fo-360-cab { position: relative; }
.ocx-360 .fo-360-metadatos { position: absolute; left: 435px; top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ocx-360 .fo-360-fechas { margin: 0; font-size: 11px; color: var(--sc-text-muted); }
.ocx-360 .fo-360-tit h1 { font-size: 34px; line-height: 40px; font-weight: 700; }
.ocx-360 .fo-consumo > .fo-nota { top: 11px; right: 14px; }
.ocx-360 .fo-consumo > .fo-nota summary { width: 16px; height: 16px; overflow: hidden; }
.ocx-360 .fo-consumo > .fo-nota summary .ico { width: 15px; height: 15px; }
.ocx-360 .fo-mat .fo-ref { font-size: 11px; white-space: nowrap; }
.ocx-360 .fo-mat .fo-ref b { font-weight: 600; }
.ocx-360 .fo-pedido-sec { display: inline; margin-left: 8px; font-size: 10px; line-height: 12px; color: var(--sc-text-muted); }
.ocx-360 .fo-pedido-sec a { color: var(--sc-text-muted); }
.ocx-360 .fo-estado-consumo { display: inline-flex; align-items: center; min-width: 70px; min-height: 17px; padding: 0 6px; border-radius: var(--sc-r-pill); background: var(--sc-neutral-bg); color: var(--sc-text-muted); font-size: 11px; }
.ocx-360 .fo-mat td { height: 27px; }
.ocx-360 .fo-360-graf > .fo-caja { min-height: 245px; }
.ocx-360 .fo-lienzo { height: 175px; }
.ocx-360 .fo-fases { min-height: 180px; }
.ocx-360 .fo-consumo { min-height: 272px; }
.ocx-360 .fo-mat td { height: 23px; padding-top: 1px; padding-bottom: 1px; line-height: 14px; }
.ocx-360 .fo-estado-consumo { min-width: 0; min-height: 18px; padding: 0; border-radius: 0; background: transparent; font-size: 12px; }
.ocx-360 .fo-360-graf > .fo-caja { min-height: 260px; }
.ocx-360 .fo-lienzo { height: 190px; }
.ocx-360 .fo-fases { min-height: 195px; }
.ocx-360 .fo-filtros-360 .fo-select:has(.ico)::after { content: none; }
.ocx-360 .fo-filtros-360 .fo-select:has(.ico) { justify-content: flex-start; gap: 8px; }
.ocx-360 .fo-filtros-360 .fo-select:has(.ico) .ico { width: 14px; height: 14px; }
.ocx-360 .fo-consumo { position: relative; }
.ocx-360 .fo-consumo > .fo-nota { position: absolute; margin: 0; }
.ocx-360 .fo-ver.off, .ocx-obras .fo-ver.off { color: var(--sc-text-muted); }
.ocx-360 .fo-ver::after, .ocx-obras .fo-ver::after { content: "→"; display: inline-block; margin-left: 8px; font-size: 16px; line-height: 12px; vertical-align: middle; }
.ocx-obras .fo-filtros-obra > .fo-boton { min-width: 110px; }
.ocx-obras .fo-filtros-obra > .fo-boton .ico { width: 16px; height: 16px; }

/* La tabla no puede crecer más allá de la tarjeta por el contenido de una celda. */
.ocx-obras .fo-tabla-obras { table-layout: fixed; width: 100%; }
.ocx-obras .fo-tabla-obras .fo-col-sel { width: 4%; }
.ocx-obras .fo-tabla-obras .fo-col-obra { width: 16%; }
.ocx-obras .fo-tabla-obras .fo-col-codigo { width: 12%; }
.ocx-obras .fo-tabla-obras .fo-col-cliente { width: 5%; }
.ocx-obras .fo-tabla-obras .fo-col-responsable { width: 9%; }
.ocx-obras .fo-tabla-obras .fo-col-estado { width: 8%; }
.ocx-obras .fo-tabla-obras .fo-col-presupuesto { width: 11%; }
.ocx-obras .fo-tabla-obras .fo-col-compras { width: 10%; }
.ocx-obras .fo-tabla-obras .fo-col-facturas { width: 10%; }
.ocx-obras .fo-tabla-obras .fo-col-ejecucion { width: 9%; }
.ocx-obras .fo-tabla-obras .fo-col-acciones { width: 6%; }
.ocx-obras .fo-tabla-obras th, .ocx-obras .fo-tabla-obras td { overflow: hidden; text-overflow: ellipsis; }
.ocx-obras .fo-tabla-obras th { font-size: 11px; padding-left: 3px; padding-right: 3px; }
.ocx-obras .fo-tabla-obras td { height: 48px; font-size: 12px; line-height: 15px; }
.ocx-obras .fo-tabla-obras .fo-obra { max-width: none; }
.ocx-obras .fo-tabla-obras .fo-obra b { font-size: 12px; font-weight: 600; }
.ocx-obras .fo-tabla-obras .fo-avance { width: 55px; height: 8px; }
.ocx-obras .fo-filtros-obra { gap: 10px; margin-top: -12px; margin-bottom: 20px; }
.ocx-obras .fo-filtros-obra .fo-buscar { flex: 0 0 300px; min-height: 32px; }
.ocx-obras .fo-filtros-obra .fo-campo { flex: 0 0 101px; }
.ocx-obras .fo-filtros-obra .fo-campo .fo-select { min-height: 32px; }
.ocx-obras .fo-filtros-obra > .fo-boton { min-height: 32px; }
.ocx-obras .fo-aside .fo-lado:nth-child(1) { min-height: 216px; }
.ocx-obras .fo-aside .fo-lado:nth-child(2),
.ocx-obras .fo-aside .fo-lado:nth-child(3) { min-height: 198px; }
.ocx-obras .fo-aside .fo-lado:nth-child(4) .vacio { min-height: 0; }
.ocx-obras .fo-aside .fo-lado:nth-child(4) .vacio,
.ocx-360 .fo-lienzo .vacio,
.ocx-360 .fo-fases .vacio { border: 0; border-radius: 0; padding: 18px; background: transparent; }
.ocx-obras .fo-donut { width: 124px; height: 124px; border-width: 19px; }
.ocx-obras .fo-donut-fila { grid-template-columns: 124px minmax(0, 1fr); }
.ocx-obras .fo-lista { min-height: 715px; }
.ocx-obras .fo-lista .fo-pie { min-height: 62px; }
.ocx-360 .fo-360-graf > .fo-caja:first-child > h2 { min-height: 40px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ocx-360 .fo-360-graf .fo-h-der { position: static; margin-left: auto; white-space: nowrap; }
.ocx-360 .fo-lienzo { border-top: 0; border-bottom: 0; }
.ocx-360 .fo-filtros-360 { gap: 10px; }
.ocx-360 .fo-filtros-360 .fo-buscar { flex: 0 0 350px; }
.ocx-360 .fo-filtros-360 .fo-select { min-width: 142px; }
.ocx-360 .fo-mat { table-layout: fixed; }
.ocx-360 .fo-mat th:nth-child(1) { width: 8%; }
.ocx-360 .fo-mat th:nth-child(2) { width: 18%; }
.ocx-360 .fo-mat th:nth-child(3) { width: 9%; }
.ocx-360 .fo-mat th:nth-child(4) { width: 5%; }
.ocx-360 .fo-mat th:nth-child(5), .ocx-360 .fo-mat th:nth-child(6) { width: 9%; }
.ocx-360 .fo-mat th:nth-child(7) { width: 6%; }
.ocx-360 .fo-mat th:nth-child(8) { width: 9%; }
.ocx-360 .fo-mat th:nth-child(9) { width: 11%; }
.ocx-360 .fo-mat th:nth-child(10) { width: 13%; }
.ocx-360 .fo-mat th:nth-child(11) { width: 3%; }
.ocx-360 .fo-mat td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocx-360 .fo-mat td:nth-child(2) { min-width: 170px; }
.ocx-360 .kpis.tira-kpi { margin-bottom: 4px; }
.ocx-360 .fo-360-graf { margin-bottom: 8px; }
.ocx-360 .fo-360-graf > .fo-caja { min-height: 259px; }
.ocx-360 .fo-lienzo { height: 180px; }

.ocx-obras .fo-filtros-obra .fo-buscar, .ocx-obras .fo-filtros-obra .fo-campo .fo-select, .ocx-obras .fo-filtros-obra > .fo-boton { min-height: 34px; }
.ocx-obras .fo-lista .fo-mostrar .fo-select { width: 125px; min-height: 34px; }
.ocx-obras .fo-aside .fo-lado:nth-child(2) { min-height: 194px; }
.ocx-obras .fo-aside .fo-lado:nth-child(3) { min-height: 194px; }
.ocx-obras .fo-tabla-obras .fo-codigo .proc { display: inline; margin-left: 5px; font-size: 11px; color: var(--sc-text-muted); vertical-align: baseline; }
@media (max-width: 1100px) { .ocx-360 .fo-360-metadatos { position: static; margin: 8px 0 0 16px; } }

/* Ficha de obra: distribución elegida en CX-OBR12, sin alterar la lista. */
.ocx-360 .fo-360-fichas { grid-template-columns: 25fr 25fr 28fr 22fr; }
.ocx-360 .fo-360-fichas .fo-ficha:nth-child(3) { gap: 18px; }
.ocx-360 .fo-360-fichas .fo-anillo,
.ocx-360 .fo-360-fichas .fo-anillo svg { width: 72px; height: 72px; }
.ocx-360 .fo-360-fichas .fo-ficha:nth-child(3) > div { gap: 5px; }
.ocx-360 .fo-360-fichas .fo-ficha:nth-child(3) .fo-avance-titulo { font-size: 12px; color: var(--sc-text-muted); }
.ocx-360 .fo-360-fichas .fo-ficha:nth-child(3) .fo-avance-estado { font-size: 12px; line-height: 16px; }
.ocx-360 .fo-360-fichas { margin-bottom: 7px; }
.ocx-360 .fo-360-pest { margin-bottom: 6px; }
.ocx-360 .kpis.tira-kpi { margin-bottom: 10px; }
.ocx-360 .fo-360-graf { grid-template-columns: minmax(0, 59fr) minmax(0, 41fr); }
.ocx-360 .fo-360-graf > .fo-caja > h2 > .ico { width: 20px; height: 20px; flex: none; }
.ocx-360 .fo-consumo { min-height: 315px; }
.ocx-360 .fo-filtros-360 .fo-select { min-width: 165px; }
.ocx-360 .fo-filtros-360 .fo-select:has(.ico) { min-width: 145px; }
.ocx-360 .fo-filtros-360 > .fo-select:nth-child(3) { min-width: 179px; }
.ocx-360 .fo-360-graf { margin-bottom: 10px; }
.ocx-360 .fo-360-graf > .fo-caja { min-height: 264px; }
.ocx-360 .fo-360-fichas .fo-ficha { height: 107px; min-height: 107px; overflow: hidden; }
.ocx-360 .fo-360-fichas .fo-ficha:nth-child(4) .meta.micro { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
@media (max-width: 1100px) {
  .ocx-360 .fo-360-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ocx-360 .fo-360-graf { grid-template-columns: minmax(0, 1fr); }
}

/* === forge-activar-visual · la tarjeta de activación dentro del marco de /entrar ===
   Todo cuelga de `.entrar-activar`: /entrar no cambia. Sin ojo en la clave,
   el hueco de 52 px de la derecha sobra; la pista va donde /entrar pone el
   «¿Has olvidado…?». */
.entrar-activar .entrar-campo input[type=password] { padding-right: var(--sc-4); }
.entrar-activar .entrar-pista {
  margin: 10px 0 0;
  font: 500 var(--sc-fs-entrar-meta)/var(--sc-lh-entrar-meta) var(--sc-font);
  color: var(--sc-text-muted);
}

/* === DS200 · carriles y controles dentro del viewport === */
@media (max-width: 900px) {
  .lateral nav { overflow-x: auto; }
  /* Chromium cuenta celdas anchas en html.scrollWidth aun dentro de .tw. */
  .tw { contain: paint; }
  .cx-a6-lista .sol-tabla .tw { overflow-x: auto; }
  .sol-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-filtro:last-of-type, .sol-mas { grid-column: auto; width: auto; }
  .ap-pestanas, .ap-pest-cajon, .fo-pestanas { overflow-x: auto; }
  .scx-stock .inc-fila.f1, .scx-stock .inc-fila.f2, .scx-stock .inc-fila.f3 {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .scx-incidencias .inc-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scx-incidencias .inc-filtros .sol-buscar { grid-column: 1 / -1; }
  .barra-tabla > * { min-width: 0; flex-wrap: wrap; }
}


/* === DESPLEGABLES · «Dar de baja» (`.pv-baja-menu`, ficha de proveedor,
   forge-baja-proveedor @b9694c4) llegó a `integ-v18` sin NINGUNA regla
   propia (revisión 660, punto 10). Primera versión de este bloque lo
   arreglaba solo por debajo de 700px; el punto 10 volvió como BLOQUEANTE
   confirmado en navegador real (Brave) a 1680, 1366, 390 y 360: el
   formulario (motivo + «Confirmar baja») quedaba tapado por la sección
   «Evaluación del proveedor» siguiente, y un clic real no llegaba -- la
   baja no se podía hacer. Se corrige EN TODOS los anchos, no solo móvil
   (el propio hallazgo obliga a no acotarlo a un `@media`).

   `.pv-baja-menu` es un `<details>` más dentro de `.pv-acciones` (la barra
   de acciones de la ficha, `display: flex; flex-wrap: wrap` por debajo de
   1100px, línea ~3557; en una sola fila con los demás botones por encima
   de 1100px). Sin una anchura propia al abrirse, comparte fila con los
   botones vecinos y el hueco que le queda a su formulario para crecer
   hacia abajo depende de cuánto midan ESOS vecinos y de cuánto margen
   quede hasta la sección siguiente -- con otra combinación de estados
   (menos botones apagados, un proveedor con nombre más largo, un aviso de
   error) ese margen se puede agotar y el panel, aunque en flujo normal,
   termina bajo el borde de la sección de abajo en vez de empujarla.

   El arreglo real: darle SIEMPRE su propia fila (`flex: 1 1 100%`), en
   cualquier ancho -- así su alto abierto ya no compite por espacio con
   nada de la misma fila y el flujo normal de abajo lo respeta siempre, sin
   depender de cuánto midan los botones vecinos ese día. Además se le quita
   la marca nativa del `<summary>` (ningún otro `<details>`-botón de la
   hoja la deja, `.barra summary`, `.pcx-cond-detalle summary`...; a éste
   se le olvidó) y se le da una caja propia para que no quede a ras del
   botón de arriba. */
.pv-acciones .pv-baja-menu { flex: 1 1 100%; }
.pv-acciones .pv-baja-menu summary { list-style: none; }
.pv-acciones .pv-baja-menu summary::-webkit-details-marker { display: none; }
.pv-acciones .pv-baja-menu .pv-accion-form {
  margin-top: 8px; padding: 10px;
  border: var(--sc-line) solid var(--sc-border); border-radius: var(--sc-r-card);
}


/* === DS201 · cantidad recibida junto a cada línea === */
.rcx-detalle .rc-lineas .rc-tabla-det:has(th:nth-child(8)) th:nth-child(2) { width: 27%; }
.rcx-detalle .rc-lineas .rc-tabla-det:has(th:nth-child(8)) th:nth-child(3) { width: 11%; }
.rcx-detalle .rc-lineas .rc-tabla-det:has(th:nth-child(8)) th:nth-child(4),
.rcx-detalle .rc-lineas .rc-tabla-det:has(th:nth-child(8)) th:nth-child(5),
.rcx-detalle .rc-lineas .rc-tabla-det:has(th:nth-child(8)) th:nth-child(6) { width: 10%; }
.rcx-detalle .rc-lineas .rc-tabla-det:has(th:nth-child(8)) th:nth-child(8) { width: 15%; }
.rcx-detalle .rc-lineas .rcx-cantidad input { max-width: 80px; box-sizing: border-box; }

/* === Administración de usuarios (`app/pantallas_usuarios.py`) ===
   Solo lo que las piezas comunes no traen. Un `fieldset` sin `min-width: 0`
   mide su contenido más largo y es la forma clásica de desbordar a 390 px. */
.usr fieldset.usr-roles { border: 0; padding: 0; margin: var(--sc-3) 0 0; min-width: 0; }
.usr fieldset.usr-roles legend { font: 500 var(--sc-fs-label)/var(--sc-lh-label) var(--sc-font); color: var(--sc-text-muted); padding: 0; margin-bottom: var(--sc-1); }
.usr .usr-clave code { font-size: var(--sc-fs-body); overflow-wrap: anywhere; user-select: all; }
.usr .usr-baja td { color: var(--sc-text-muted); }
.usr .usr-rastro td { overflow-wrap: anywhere; }

/* === forge-usuarios-panel · /usuario/<id>: lista + ficha, roles y permisos ===
   Escritorio primero (dos columnas, como el mockup de usuarios); lo de móvil va
   SOLO en `@media (max-width: …)`, al final de la hoja (tras DS201: ahí
   `test_ds201_no_toca_escritorio…` no deja entrar ni una regla de escritorio). La matriz
   y el ámbito son DATOS, no controles: casillas pintadas, sin `<input>`. */
.usr-rejilla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sc-4); align-items: start; }
.usr-rejilla > .caja { min-width: 0; margin: 0; }
.usr-lista .usr-tabla td .meta { display: block; }
.usr-lista .usr-tabla tr.usr-sel td { background: var(--sc-info-bg); }
.usr-cab { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sc-3); }
.usr-avatar { width: 56px; height: 56px; border-radius: var(--sc-r-pill); display: grid; place-items: center; background: var(--sc-neutral-bg); color: var(--sc-neutral-fg); font-weight: 600; }
.usr-quien h2 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-2); }
.usr-estado { background: var(--sc-ok-bg); color: var(--sc-ok-fg); }
.usr-estado.usr-off { background: var(--sc-danger-bg); color: var(--sc-danger-fg); }
.usr-datos { list-style: none; margin: var(--sc-1) 0 0; padding: 0; font-size: var(--sc-fs-sm); color: var(--sc-text-muted); }
.usr-cuenta { grid-column: 1 / -1; flex-wrap: wrap; }
.usr-panel h3, .usr-panel legend { font: 600 var(--sc-fs-body)/var(--sc-lh-body) var(--sc-font); color: var(--sc-text); margin: var(--sc-4) 0 var(--sc-2); }
.usr-chips { display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.usr-chip-rol { display: inline-flex; align-items: center; gap: var(--sc-2); min-height: var(--sc-tap-min); padding: 0 var(--sc-3); border: 1px solid var(--sc-brand-border); border-radius: var(--sc-r-pill); font-size: var(--sc-fs-sm); cursor: pointer; }
.usr-chip-rol:has(input:checked) { background: var(--sc-brand-soft); color: var(--sc-brand); font-weight: 600; }
.usr-ambito { list-style: none; margin: 0; padding: 0; }
.usr-ambito li { display: flex; align-items: center; gap: var(--sc-2); padding: var(--sc-1) 0; color: var(--sc-text-muted); }
.usr-ambito li.usr-actual { color: var(--sc-text); font-weight: 600; }
.usr-punto { width: 14px; height: 14px; flex: 0 0 14px; border-radius: var(--sc-r-pill); border: 2px solid var(--sc-text-faint); }
.usr-actual .usr-punto { border: 4px solid var(--sc-brand); }
.usr-detalle table.usr-tabla, table.usr-matriz { min-width: 0; }   /* 2-5 columnas: sin el suelo de 720 */
.usr-matriz { width: 100%; table-layout: fixed; }
.usr-matriz th, .usr-matriz td { padding: 6px var(--sc-2); height: auto; }
.usr-matriz th[scope="row"] { text-transform: none; letter-spacing: 0; background: none; font: 500 var(--sc-fs-sm)/var(--sc-lh-sm) var(--sc-font); color: var(--sc-text); }
.usr-chip-rol input { width: 16px; height: 16px; margin: 0; }
.usr-chips label.usr-chip-rol { margin: 0; }
.usr-matriz th[scope="col"]:not(:first-child), .usr-matriz td { text-align: center; }
.usr-matriz th[scope="col"]:first-child { width: 34%; }
.usr-p { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--sc-text-faint); border-radius: var(--sc-r-sm); font-size: 12px; line-height: 1; }
.usr-p-si { background: var(--sc-brand); border-color: var(--sc-brand); color: var(--sc-on-brand); }
.usr-p-no-existe { color: var(--sc-text-faint); }
.usr-info { margin-top: var(--sc-4); }
.usr-info > summary { cursor: pointer; font-weight: 600; }
.usr-guardar { justify-content: flex-end; margin-top: var(--sc-4); }
.lateral nav .nav-grupo-t { display: flex; align-items: center; gap: 20px; min-height: 38px; padding: 0 12px; border-left: 2px solid transparent; border-radius: var(--sc-r); font: 500 14px/18px var(--sc-font); color: var(--sc-nav-fg); }
.lateral nav .nav-grupo.abierto > .nav-grupo-t { background: var(--sc-nav-active-bg); border-left-color: var(--sc-nav-rail); color: var(--sc-nav-active-fg); font-weight: 600; }
.lateral nav .nav-sub { padding: var(--sc-1) 0 0 30px; }
.lateral nav .nav-sub a { min-height: 28px; gap: var(--sc-2); font-size: 12px; color: var(--sc-nav-faint); }
.lateral nav .nav-sub a::before { content: ""; width: 4px; height: 4px; border-radius: var(--sc-r-pill); background: currentColor; }
.lateral nav .nav-sub a[aria-current="page"] { background: none; border-left-color: transparent; color: var(--sc-nav-active-fg); }
.lateral nav .nav-sub a[aria-current="page"]::before { background: var(--sc-brand); }

/* === HAB · productos habituales: último precio de compra (orientativo) === */
.pv-habituales { margin: 10px 0; }
.hab-aviso { margin: 0 0 var(--sc-3); padding: 8px 10px; border-left: 3px solid var(--sc-border);
             background: var(--sc-surface-sunk); font-size: var(--sc-fs-micro); }
.hab-tabla { table-layout: auto; }
.hab-tabla td { white-space: normal; overflow: visible; text-overflow: clip; height: auto; }
.hab-tabla td.hab-desc { overflow-wrap: anywhere; }
.hab-mas > summary { cursor: pointer; margin: var(--sc-3) 0; }
@media (max-width: 700px) {
  /* A 390 px la tabla se apila: una tarjeta por producto, rótulo delante de cada dato. */
  .hab-tabla, .hab-tabla tbody, .hab-tabla tr, .hab-tabla td { display: block; width: 100%; }
  .hab-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hab-tabla tr { border-bottom: var(--sc-line) solid var(--sc-border); padding: 6px 0; }
  .hab-tabla td { border: 0; padding: 2px 0; text-align: left; }
  .hab-tabla td::before { content: attr(data-label) ": "; color: var(--sc-text-muted); }
}

/* FORGE-editar-proveedor · el formulario de edición: las tarjetas y campos del
   alta (`.pn147`), en una rejilla de dos columnas que baja a una en móvil. */
.pe-editar .pe-reticula { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-3); margin: var(--sc-3) var(--sc-4) 0; }
.pe-editar .pn-campo { margin-bottom: var(--sc-3); }
.pe-editar .pe-pie { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--sc-3); border-top: var(--sc-line) solid var(--sc-border-strong); padding-top: var(--sc-3); }
.pe-editar h2 { display: flex; align-items: center; gap: var(--sc-2); }
.pe-editar h2 .ico { width: var(--sc-5); height: var(--sc-5); flex: none; color: var(--sc-brand); }
.pe-editar input[readonly] { background: var(--sc-surface-sunk); color: var(--sc-text-muted); }
@media (max-width: 700px) {
  .pe-editar .pe-reticula { display: flex; flex-direction: column; margin: var(--sc-3) 0 0; }
  .pe-editar .pn-cabecera { flex-wrap: wrap; }
}

/* === DS201 · móvil: marca, imágenes, navegación y formularios (forge-movil2) ===
   Medido con `e2e_navegador/movil.py` a 390x844 y 360x800. Solo media queries:
   escritorio no cambia. Las reglas de pantalla (`.ccx-*`, `.pcx-*`, `.cx-a6-*`)
   van más abajo en la hoja que sus bloques móviles y los pisaban; aquí se
   repiten con el mismo selector para ganar por orden. */
@media (max-width: 1100px) {
  /* /entrar · la marca y el isotipo vuelven; la foto, como banda; el hero
     entre el formulario y el pie (antes caía DETRÁS del pie). La sección
     izquierda se disuelve (`contents`) para poder ordenar su pie al final
     sin mover el HTML de escritorio. */
  main.entrada.entrar { padding: var(--sc-6) var(--sc-4) var(--sc-4); background: var(--sc-bg); }
  .entrar { grid-template-columns: minmax(0, 1fr); }
  .entrar-izq { display: contents; }
  .entrar-izq > * { min-width: 0; }
  .entrar-der { margin: var(--sc-6) calc(-1 * var(--sc-4)) 0; }
  /* forge-login-visual · `.cx-a6-entrar .entrar-der { padding-left: 40px }`
     (escritorio, más abajo) ganaba aquí: la foto, con margen de -16 px, se
     quedaba a 24 px del borde izquierdo y el aside no era simétrico. */
  .cx-a6-entrar .entrar-der { padding-left: var(--sc-4); }
  .entrar-foto {
    display: block; position: static; width: calc(100% + 2 * var(--sc-4)); max-width: none;
    height: 240px; margin: calc(-1 * var(--sc-8)) calc(-1 * var(--sc-4)) var(--sc-6);
    object-fit: cover; object-position: right 28%;   /* la válvula, no el tramo blanco del fundido */
  }
  /* El hero sube 4 px (`.cx-a6-entrar .entrar-hero`) y pisaba «VIDAS». */
  .entrar-der .entrar-rotulo { margin-bottom: var(--sc-6); }
  .entrar-pie { order: 1; }
  /* El idioma iba en blanco sobre la foto de escritorio; apilado cae sobre claro. */
  .cx-core-c2-entrar .entrar-der .entrar-idioma { color: var(--sc-entrar-panel-fg); }
  /* /categorias · la foto de cabecera, como banda bajo el título. */
  .cat-heroe, .ccx-catalogo .cat-heroe {
    display: flex; position: relative; top: auto; right: auto; bottom: auto;
    width: auto; height: 150px; margin: var(--sc-3) 0 0; padding: var(--sc-4);
  }
  .ccx-catalogo .cat-heroe img { width: 100%; }
  .ccx-catalogo .cat-teselas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Correo, negociación y alta de proveedor: rejillas de escritorio a una columna. */
  .ccx-correo .neg-tres, .ccx-negociacion .neg-prov { grid-template-columns: minmax(0, 1fr); }
  .pcx-alta .pcx-actions { flex: 1 1 100%; min-width: 0; }
  .pcx-alta .pn-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .pcx-alta .pn-pasos div { white-space: normal; }
  .pcx-alta .pn-pasos li:first-child div { max-width: none; }
  .pcx-list .pv-filtros { flex-wrap: wrap; }
  .pcx-list .pv-filtros .ancho-buscador { flex: 1 1 100%; width: auto; }
  .sol-panel-cab { flex-wrap: wrap; }
  .sol-panel-cab b { white-space: normal; min-width: 0; }
  .sol-dato .val .chip { white-space: normal; }
  /* Nueva solicitud: la columna del formulario medía 8 px (0 px a 360). */
  .cx-a6-nueva { grid-template-columns: minmax(0, 1fr); margin-right: 0; }
  /* `:nth-child(n)` iguala la especificidad de `.ns-seccion:first-child { height: 203px }`
     (bloque 5397): sin ella, a una columna los campos de «Información general»
     (415 px) se salían de su caja y la sección de productos los tapaba. */
  .cx-a6-nueva .ns-izq > .ns-seccion:nth-child(n), .cx-a6-nueva .ns-der > .ns-lado, .cx-a6-nueva .cx-a6-prov {
    height: auto; min-height: 0;
  }
  /* Alta de proveedor: la rejilla legal medía 6 columnas de 15 px a 360. */
  .pcx-alta .pcx-legal-grid, .pcx-alta .pcx-address-grid {
    width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none;
  }
  .pcx-alta .pcx-legal-grid .pcx-upload {
    position: static; grid-column: 1 / -1 !important; width: auto; height: auto; max-height: none; min-height: 76px;
  }
  .pcx-alta .pcx-evidence { width: auto; grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .pcx-alta .pcx-evidence .pcx-upload { width: auto; }
  .ccx-correo .neg-pestanas, .ccx-correo .neg-sugeridas div { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  /* El menú de módulos se anclaba a la derecha de su icono y salía por la
     izquierda (x=-146): se ancla a la barra, a lo ancho. */
  .barra { position: relative; }
  .barra .modulos { position: static; }
  .barra .modulos-menu { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; }
  /* La textura del lateral medía 208 px: en la franja apilada dejaba un corte vertical. */
  .lateral > .lateral-textura, .cx-shared3 .lateral > .lateral-textura { width: 100%; height: 100%; object-fit: cover; }
  /* La franja apilada (marca + carril) medía 135 px y seguía pegada arriba al
     desplazar: tapaba el 16-17 % del viewport y el primer campo visible. En el
     móvil se va con la página; la barra y el menú de módulos siguen arriba.
     `relative`, no `static`: la textura absoluta sigue anclada a la franja. */
  .lateral { position: relative; top: auto; }
  /* /stock · la foto de la banda, bajo el texto. */
  .pbanda-foto, .scx-stock .pbanda-foto, .inc-banda .pbanda-foto {
    display: block; position: relative; width: auto; height: 140px; margin-top: var(--sc-4);
  }
  .scx-stock .pbanda-img { object-fit: cover; }
}
@media (max-width: 720px) {
  .cx-a6-nueva .ns-rejilla-campos { grid-template-columns: minmax(0, 1fr); }
  /* Las líneas ya se desplazan en su carril (min-width 780); sus rótulos
     ocultos (`position: absolute`) escapaban del carril y ensanchaban la página. */
  .cx-a6-nueva .ns-lineas { position: relative; }
  /* En el carril la línea conserva sus 8 columnas de escritorio: la regla
     genérica de apilar (producto a todo el ancho, cabecera fuera) mandaba la
     categoría a la columna de 20 px. */
  .cx-a6-nueva .ns-linea > .ns-prod { grid-column: auto; }
  .cx-a6-nueva .ns-linea.ns-th { display: grid; }
}
@media (max-width: 640px) {
  .ccx-catalogo .cat-teselas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcx-alta .pn-pasos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pcx-alta .pcx-legal-grid, .pcx-alta .pcx-address-grid { grid-template-columns: minmax(0, 1fr); }
  /* Contactos: la tabla de seis columnas se desplaza en su carril con su cabecera. */
  .pcx-alta .pn-contacto { overflow-x: auto; position: relative; }
  .pcx-alta .pcx-contact-head, .pcx-alta .pcx-contact-row { min-width: 560px; }
  .entrar-marca, .entrar-titular { display: grid; }
  /* «Artemis Compras» en una línea junto al triángulo, como el mockup: a 40 px
     partía en dos y dejaba «Compras» solo debajo. */
  .entrar-producto { font-size: 32px; line-height: 40px; }
  /* A 360 px el subtitular (24 px) y «Acceso a tu cuenta» (32 px) partían
     en tres y dos líneas; el mockup los pinta en dos y una. */
  .cx-core-c2-entrar .entrar-lead { font-size: 19px; line-height: 26px; }
  .cx-core-c2-entrar .entrar-tarjeta h1 { font-size: 27px; line-height: 34px; }
  .entrar-diamante, .entrar-triangulo { display: block; }
  .entrar-titular { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
  .entrar-triangulo { width: 44px; height: 39px; }
  .cx-a6-entrar .entrar-sso { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto; height: auto; padding-block: var(--sc-2); }
}

/* === QA becario P2 · la tira de secciones en móvil avisa de que sigue ===
   El borde derecho funde a transparente: la última sección visible se corta
   en degradado y se lee «hay más». El relleno final deja la última sección
   fuera del degradado cuando se llega al tope. Solo CSS y solo en el carril
   horizontal (<= 900 px); escritorio no cambia. */
@media (max-width: 900px) {
  .lateral nav ul {
    padding-right: 56px;
    -webkit-mask-image: linear-gradient(to right, var(--sc-nav-bg) calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, var(--sc-nav-bg) calc(100% - 56px), transparent);
  }
}

/* === forge-modalidad-tablero · `/tablero` sin scroll horizontal de página ===
   QA con Browser Use (staging, eventos 630 y 633): a 390x844 y 360x800 la
   `.tpedidos` (seis columnas de escritorio) empujaba `html.scrollWidth` por
   encima del viewport y toda la página se desplazaba en horizontal -el
   carril de la navegación ya vive DENTRO de su propio scroll (`.lateral nav
   ul`, regla de arriba) y no era la causa real-. Mismo criterio que
   `.hab-tabla`: por debajo de 700 px la tabla se apila en tarjetas, una fila
   por pedido, con el rótulo de cada celda delante (`data-label`, puesto en
   `_fila_pedido`). Escritorio (1366) no toca esta regla: vive solo dentro del
   `@media`. */
@media (max-width: 700px) {
  .tpedidos, .tpedidos tbody, .tpedidos tr, .tpedidos td { display: block; width: 100%; }
  .tpedidos thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  /* La cabecera de grupo («PEDIDO · 3») es un `<th>`, no un `<td>`: no lleva
     `data-label` -ya es el rótulo entero- y sigue como banda de ancho completo. */
  .tpedidos tbody th.grupo { display: block; width: 100%; white-space: normal; }
  .tpedidos tr {
    margin: 0 0 var(--sc-3);
    padding: var(--sc-2) 0;
    border-bottom: var(--sc-line) solid var(--sc-border);
  }
  .tpedidos tbody th.grupo { margin: var(--sc-3) 0 var(--sc-1); border-bottom: 0; padding: 0; }
  .tpedidos td { border: 0; padding: 3px 0; text-align: left; white-space: normal; }
  /* Revisión LOW-5: `.tpedidos td.ent { white-space: nowrap }` (regla de
     escritorio, más arriba en la hoja) es MÁS específica que `.tpedidos td`
     -dos clases contra una- y seguía ganando aquí dentro: «vencido ·
     comprometido AAAA-MM-DD» en una sola línea volvía a empujar el ancho a
     390/360. Se repite el selector completo para igualar la especificidad y
     ganar por orden. */
  .tpedidos td.ent { white-space: normal; }
  .tpedidos td::before { content: attr(data-label) ": "; color: var(--sc-text-muted); }
  .tpedidos td.nada { padding: var(--sc-2) 0; }
  .tpedidos td.nada::before { content: none; }
}

/* === forge-movil3 · la ficha de proveedor (`/proveedor/<id>`) tapaba sus
   propios datos en móvil ===
   `.pcx-detail .pv-fila1 .pv-card { height: 246px; ...}` y
   `.pcx-detail .pv-identidad { grid-template-rows: 84px minmax(0, 1fr); }`
   (más arriba, SIN `@media`: es la medida de escritorio, dos tarjetas de
   igual alto lado a lado) seguían fijando ese alto y esa rejilla en móvil.
   Con la identidad apilada en una columna (nombre, chip, datos, aviso de
   alta pendiente en Factu) el contenido real no cabía en 246 px: la fila de
   `.pv-datos` colapsaba a 0 y el aviso de Factu (`.pv-resumen`, con su ancho
   fijo de 256 px) quedaba flotando encima de «Ref. proveedor / Sitio web /
   Dirección» y, más abajo, de la tarjeta de Evaluación (QA remoto, ficha de
   un proveedor provisional pendiente de alta en Factu, 390 y 360 px).

   El apilado pasa a `flex column`: cada bloque mide su alto real y ya no
   depende de que la rejilla de escritorio le reparta una fila o una anchura
   fijas. Van DESPUÉS de esas reglas a propósito: misma especificidad
   (`.pcx-detail .algo`), y en cascada gana la última. */
@media (max-width: 1100px) {
  .pcx-detail .pv-fila1 .pv-card { height: auto; min-height: 0; }
  .pcx-detail .pv-identidad { display: flex; flex-direction: column; grid-template-rows: none; }
  .pcx-detail .pv-resumen { width: auto; }
  .pv-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-template-rows: none; }
  .pv-dir { grid-row: auto; grid-column: 1 / -1; }
  .pv-resumen { grid-column: auto; grid-row: auto; }
}

/* === DESPLEGABLES · VIS-01 (E2E-A) · `/solicitud` a 390 y 360 px: la tabla
   de líneas se salía de su tarjeta con un carril horizontal que cortaba la
   columna «Categoría» a la mitad, y el aviso «Máximo 1000 caracteres»
   quedaba flotando encima del texto de la zona de adjuntar archivos.

   1) `.cx-a6-limite` es `position: absolute; bottom: 9px; right: 16px`
      (línea ~5570) anclado a `.ns-seccion:nth-child(3)` -- la sección
      ENTERA de «Información adicional» (esa es la que lleva
      `position: relative`, línea ~5396), no al textarea. En escritorio la
      justificación y los adjuntos van en dos columnas (`.ns-dos`) y el
      aviso cae, por casualidad de la maqueta, cerca del textarea. En móvil
      `.ns-dos` se apila en una columna (regla genérica, línea ~4179): el
      textarea queda arriba y los adjuntos abajo, pero el aviso SIGUE
      anclado al fondo de la sección entera -- que ahora es mucho más alta
      -- y aterriza encima del texto de la zona de adjuntar. Se corta la
      dependencia del padre: por debajo de 700 px el aviso deja de ser
      absoluto y pasa a fluir justo debajo de su propio textarea.

   2) `.cx-a6-nueva .ns-linea` es una rejilla de 8 columnas estrechas
      (número, producto, categoría, cantidad, unidad, precio, importe,
      acciones); por debajo de 720 px el diseño existente la mete en un
      carril con scroll horizontal y `min-width: 780px` (línea ~5481) --
      cabe, pero exige desplazar, y la cabecera fija tapaba/cortaba la
      columna de categoría al hacerlo (QA-VIS-01). Por debajo de 700 px se
      apila como tarjeta, mismo patrón que ya usa `.hab-tabla` (línea
      ~7865, `@media (max-width: 700px)`, con `content: attr(data-label)`):
      cada campo lleva ahora su propio `data-cabecera` (ver
      `_ns_linea_editable`, `app/plantilla.py`) y se pinta como rótulo con
      `::before`. Sin carril, sin `min-width`, sin cabecera visual (cada
      campo ya lleva la suya). */
@media (max-width: 700px) {
  .cx-a6-nueva .cx-a6-limite {
    position: static; display: block; text-align: right; margin-top: 4px;
  }

  .cx-a6-nueva .ns-lineas { overflow-x: visible; }
  .cx-a6-nueva .ns-linea.ns-th { display: none; }
  .cx-a6-nueva .ns-linea:not(.ns-th) {
    display: flex; flex-direction: column; gap: 8px;
    min-width: 0; width: 100%; box-sizing: border-box;
    padding: 10px; border: var(--sc-line) solid var(--sc-border); border-radius: var(--sc-r-card);
    margin-bottom: 8px;
  }
  .cx-a6-nueva .ns-linea:not(.ns-th) > .ns-prod { grid-column: auto; }
  .cx-a6-nueva .ns-linea:not(.ns-th) > [data-cabecera] {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
  }
  .cx-a6-nueva .ns-linea:not(.ns-th) > [data-cabecera]::before {
    content: attr(data-cabecera); font-size: var(--sc-fs-micro); color: var(--sc-text-muted);
  }
  .cx-a6-nueva .ns-linea:not(.ns-th) > .ns-imp { text-align: left; }
  .cx-a6-nueva .ns-linea:not(.ns-th) > .ns-acc {
    display: flex; align-items: center; gap: 8px; justify-content: flex-start;
  }
}

/* === DESPLEGABLES · VIS-02 (E2E-A, Brave real, ~809 px) · el menú de
   módulos de la barra lateral (Resumen · Catálogo · Proveedores ·
   Solicitudes · Pedidos · Recepción · Factu…) pintaba DOS barras de scroll
   horizontal apiladas bajo la barra, entre 700 y 900 px de ancho.

   DS200 (línea ~7822) puso `.lateral nav { overflow-x: auto; }`. La
   navegación YA se desplaza en su propio carril desde antes (línea ~1177,
   `.lateral nav ul { overflow-x: auto; ... }`, el `<ul>` hijo de ese mismo
   `<nav>`). Con las dos reglas activas a la vez, `<nav>` Y su `<ul>` son
   contenedores de scroll horizontal independientes: dos barras, una
   encima de la otra. Confirmado con Playwright (`scrollWidth >
   clientWidth` en AMBOS elementos a 700, 809 y 900 px). El carril que
   importa es el del `<ul>` (lleva el degradado de aviso de más contenido,
   forge-movil3, línea ~7961); el de `<nav>` es el redundante. Se anula
   aquí, después de DS200, para ganar por orden con la misma
   especificidad, sin tocar la línea de DS200 (la puede estar usando otra
   pantalla, y esta rama no toca ficheros de otra rama). */
@media (max-width: 900px) {
  .lateral nav { overflow-x: visible; }
}

/* === MOVIL PEDIDO/RECEPCION · `/pedido/<id>` y `/recepcion/<id>` sin scroll
   horizontal de página a 390 y 360 (P0 MOB-vis-01/02) ===
   Tres causas medidas en el navegador (390x844, 360x800):
   1) Líneas del pedido: `.cx-pedido .pd-c-lin .pd-tabla` (diez columnas, `table-
      layout: fixed`) y `.pd-c-lin .pd-prod { min-width: 190px }` dejaban la
      tabla más ancha que la tarjeta; su pintura se recortaba y el estado de
      la línea quedaba fuera, pero su ancho mínimo seguía empujando
      `html.scrollWidth` (583 px en Brave).
   2) Recepción: `.rcx-detalle .rc-lineas .rc-tabla-det { min-width: 700px }`
      (bloque de <= 1100 px) sin carril propio: «Pedida», «Recibida»,
      «Pendiente», «Estado» y el campo «Llega ahora» quedaban fuera de la
      pantalla y la página se ensanchaba (496 px).
   3) `.cx-pedido .pd-fila2` (sin `@media`, más arriba) repetía las dos
      columnas de escritorio y ganaba al `1fr` móvil: Asignación e Impuestos
      a 179 px cada una, con su contenido recortado.
   Mismo criterio que `.hab-tabla` y `.tpedidos`: por debajo de 700 px cada
   fila es una tarjeta con el rótulo delante (`data-label`, puesto en
   `plantilla.ficha` y `pantallas_recepcion._lineas/_parciales`). Mismos
   selectores que las reglas de escritorio para ganar por orden; escritorio
   no cambia: todo va dentro del `@media`. */
@media (max-width: 700px) {
  .cx-pedido .pd-fila2 { grid-template-columns: minmax(0, 1fr); }
  .cx-pedido .pd-c-lin .pd-tabla, .cx-pedido .pd-c-lin .pd-tabla tbody,
  .cx-pedido .pd-c-lin .pd-tabla tr, .cx-pedido .pd-c-lin .pd-tabla td { display: block; width: 100%; }
  .cx-pedido .pd-c-lin .pd-tabla tr:first-child,
  .rcx-detalle .rc-lineas .rc-tabla-det thead, .rcx-detalle .rc-parciales .rc-tabla-det thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .cx-pedido .pd-c-lin .pd-tabla tr { padding: 6px 0; border-bottom: var(--sc-line) solid var(--sc-border); }
  /* `:nth-child(n)` iguala `.cx-pedido .pd-c-lin .pd-tabla td:nth-child(4)` (elipsis)
     y `td:nth-child(3) { width: 210px }` (el producto no llegaba al ancho). */
  .cx-pedido .pd-c-lin .pd-tabla td:nth-child(n) {
    width: 100%; height: auto; padding: 2px 0; border: 0; text-align: left; white-space: normal; overflow: visible;
  }
  .cx-pedido .pd-c-lin .pd-tabla td[data-label]::before { content: attr(data-label) ": "; color: var(--sc-text-muted); }
  .cx-pedido .pd-c-lin .pd-tabla td.sel { display: none; }
  .cx-pedido .pd-c-lin .pd-prod { min-width: 0; }
  .cx-pedido .pd-c-lin .pd-tabla td[data-label="Producto"]::before { display: block; }
  /* A lo ancho de la tarjeta, el nombre entero: sin el recorte a dos líneas de escritorio. */
  .cx-pedido .pd-c-lin .pd-prod b { display: block; -webkit-line-clamp: none; overflow: visible; }
  .rcx-detalle .rc-lineas .rc-tabla-det, .rcx-detalle .rc-parciales .rc-tabla-det,
  .rcx-detalle .rc-tabla-det tbody, .rcx-detalle .rc-tabla-det tr, .rcx-detalle .rc-tabla-det td {
    display: block; width: 100%; min-width: 0;
  }
  .rcx-detalle .rc-tabla-det tr { padding: 6px 0; border-bottom: var(--sc-line) solid var(--sc-border); }
  .rcx-detalle .rc-lineas .rc-tabla-det td, .rcx-detalle .rc-parciales .rc-tabla-det td {
    height: auto; padding: 2px 0; border: 0; text-align: left; white-space: normal;
  }
  .rcx-detalle .rc-tabla-det td[data-label]::before { content: attr(data-label) ": "; color: var(--sc-text-muted); }
  .rcx-detalle .rc-tabla-det .rcx-prod-texto { width: auto; white-space: normal; overflow: visible; }
  /* «+ Añadir nota» iba absoluto sobre la cabecera y tapaba «…de la recepción». */
  .rcx-detalle .rcx-nota-editor summary { position: static; }
}

/* === forge-usuarios-panel · móvil de /usuario/<id> y del grupo Configuración === */
@media (max-width: 1100px) {
  .usr-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  /* En el carril horizontal el rótulo del grupo sobra: queda su pantalla. */
  .lateral nav .nav-grupo { display: flex; }
  .lateral nav .nav-grupo-t { display: none; }
  .lateral nav .nav-sub { display: flex; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .lateral nav .nav-sub a { min-height: var(--sc-tap-touch); font-size: 14px; color: var(--sc-nav-fg); }
  .lateral nav .nav-sub a::before { display: none; }
  .lateral nav .nav-sub a[aria-current="page"] { border-bottom-color: var(--sc-nav-rail); }
}
@media (max-width: 700px) {
  /* Las dos tablas de personas se apilan: una tarjeta por cuenta. */
  .usr .usr-tabla, .usr .usr-tabla tbody, .usr .usr-tabla tr, .usr .usr-tabla td { display: block; width: 100%; }
  .usr .usr-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .usr .usr-tabla tr { border-bottom: var(--sc-line) solid var(--sc-border); padding: var(--sc-2) 0; }
  .usr .usr-tabla td { border: 0; padding: 2px 0; height: auto; white-space: normal; }
  .usr .usr-tabla td::before { content: attr(data-label) ": "; color: var(--sc-text-muted); }
  .usr-cab { grid-template-columns: 44px minmax(0, 1fr); }
  .usr-avatar { width: 44px; height: 44px; }
  .usr-matriz th[scope="col"]:first-child { width: 36%; }
  .usr-matriz th[scope="col"] { font-size: 10px; letter-spacing: 0; padding-inline: 2px; }
}

/* === forge-franja-movil · la franja de `/recepcion/<pedido>` en móvil ===
   A 360 px ganaba `@media (max-width: 1100px) { .rcx-detalle .rc-franja {
   grid-template-columns: repeat(2, ...) } }` (misma especificidad que la de
   6 columnas de escritorio, y va después): dos columnas de ~170 px con alto
   fijo de 132 px, y la píldora «Pendiente de recepción» (`nowrap`) salía de
   su tarjeta y pisaba la vecina (QA G-mobile-07). Hasta 700 px, una columna,
   alto real y la píldora parte línea dentro de su tarjeta. Va al final a
   propósito: misma especificidad, gana la última. */
@media (max-width: 700px) {
  .rcx-detalle .rc-franja { grid-template-columns: minmax(0, 1fr); }
  .rcx-detalle .rc-franja .rc-celda { height: auto; min-height: 0; }
  .rcx-detalle .rc-franja .rc-celda .chip { max-width: 100%; min-width: 0; white-space: normal; }
}