/* ========================================================================== sistema.css — sistema de diseño del rediseño (IGSS Compras) Es la ÚNICA hoja de estilos de la app (desde 2026-09-28 todas las pantallas usan esta estructura; custom.css y la rama vieja de base.html se borraron). base.html pone siempre y TODAS las reglas de este archivo viven bajo body.ui-v2 (salvo los @font-face y @keyframes, que solo declaran). Los nombres de clase viejos (.ui-panel, .ui-pildora-*, .ui-tabla, .tb-*) se re-pintan aquí sin tocar su HTML, porque varios JS arman ese mismo marcado; lo poco que las pantallas todavía tomaban de custom.css está en §21b. Los documentos PDF (A-01, Detalle, Listado) tienen su propio CSS y no usan este archivo. Clases nuevas: prefijo ds- (componentes) y ds-riel-/ds-barra (estructura). Estados forzados (para /estilo): .ds-f-hover, .ds-f-activo, .ds-f-foco junto a :hover, :active/seleccionado y :focus-visible; deshabilitado con [disabled], .disabled o aria-disabled="true". Índice 0. Fuentes locales (Inter y Plus Jakarta Sans, woff2 variables) 1. Tokens (color, radios, espacios, sombras, tipografía, medidas) 2. Base (tipografía, enlaces, foco, cifras tabulares) 3. Estructura: riel, submenús flotantes, nombre flotante, teléfono, barra superior flotante, área de contenido 4. Encabezado de página 5. Botones (primario deshabilitado: tinte claro del acento) 6. Chips y píldoras de filtro: barra de filtros, chips de estado, píldoras desplegables, panel de filtro (6d) y panel estándar de filtro y orden (6d-bis), "Quitar filtros", contador y conmutador de densidad 7. Píldoras de estado 8. Avisos en línea 9. Tarjetas de indicadores (KPI) 10. Paneles y tarjetas 11. Formularios 12. Pasos y zona de carga 13. Ícono de información (i) 14. Bootstrap dentro del ámbito (menús, pestañas, paginación, modal, panel lateral, popover, tooltip, insignias, alertas, acordeón) 15. Tablas: marco 16 px con encabezado fijo, densidades cómoda (52) y compacta (40), orden y embudos al pasar el mouse 16. Menú de acciones "⋯" 17. Estados vacíos 18. Aviso flotante (UI.estado y mensajes flash) 19. Barra flotante de selección 20. Diálogos pequeños (UI.confirmar y macro dialogo) 21. Compatibilidad con piezas viejas dentro de ui-v2 (21b: lo que todavía se tomaba de custom.css, que ya no se carga) 22. Movimiento reducido e impresión (22b: tablas y filtros) 23. Celdas compuestas y detalle: celda de dos líneas, número + estado, "+N", etiqueta, ícono de estado, select con anillo de atención, popover de detalle, diálogos compactos, barra de selección sobre la tabla, columnas fluidas (23j) y tablas parejas (23l) 24. Componentes de pantalla (fase "todo"): filtros del servidor (GET), tarjeta de sección, lista de datos, formularios (grilla, grupos, pie fijo, lateral), carga compacta, línea de tiempo, pestañas de página, paginación, página de error e inicio de sesión, extras de indicadores, avisos con acción, gráficos y utilidades 25. Piezas de las pantallas migradas (fase "todo", fundidas por el integrador): columnas y celdas de tabla, tablas con forma propia, filtros, indicadores, píldoras y marcas, tarjetas y plegables, formularios, carga de archivos, pie fijo, paneles y diálogos, avisos y textos, ficha y Detalle del SIAF, SIAF 182 (índice propio al inicio de §25) Fase "todo" (2026-09-26), reglas que valen para todo el archivo: - Texto que el navegador puede agrandar (Safari con zoom de página bajo sube el texto chico a 9 px de pantalla: 13 px -> 18 px al 50 %): interlineados SIN unidad, alturas de texto en em o como mínimos, topes de ancho en em/ch. Nunca height fija en px alrededor de texto. - Ancho del contenido: 125em (~1750 px) en tablas, centrado con la barra superior; "detalle" 86em y "formulario" 68em (base.html, ui_ancho). Tablas con columnas fluidas (23j), nunca anchos en px. Contraste (WCAG 2.x, MEDIDO con los valores de §1; Corrección 2 «Contraste, no color», 2026-10-01, que reemplaza al tono del Paso 5). Mínimos: 4.5:1 en todo texto normal; 3:1 en íconos de interfaz, bordes de foco, puntos y BORDES de controles y marcos (campos, chips, píldoras de filtro, botón secundario, tarjetas y tablas). Fondos, riel y bordes en grises NEUTROS (R = G = B). La misma medida, en vivo, en /estilo §2 «Contraste» (estilo.js) y la verifica tests/test_tono_color.py (también que esta tabla esté al día). Un solo acento, #1a6fa0: todo relleno con texto o marca blanca encima usa --ds-relleno-primario; --ds-acento (bordes, anillos, puntos, paso actual) vale lo mismo. El celeste #3aa6dd de la primera versión ya no se usa. #1d1d1d sobre #ffffff / #f3f3f3 / #e6e6e6 ........... 16.86 / 15.19 / 13.51:1 (texto (blanco / fondo / riel)) #1d1d1d sobre #ededed / #f0f0f0 / #ececec ........... 14.40 / 14.79 / 14.27:1 (texto (barra / encabezado y chip / hover)) #595959 sobre #ffffff / #f3f3f3 / #ededed ........... 7.00 / 6.31 / 5.98:1 (secundario (blanco / fondo / barra)) #595959 sobre #f0f0f0 / #e6e6e6 / #dadada ........... 6.15 / 5.61 / 5.01:1 (encabezado de tabla; riel) #595959 sobre #ebebeb / #e8f1f6 ..................... 5.88 / 6.12:1 (sobre gris; fila elegida) #454545 sobre #e6e6e6 / #dadada / #ebebeb ........... 7.68 / 6.86 / 8.04:1 (íconos/etiquetas del riel; neutro) #1a6fa0 sobre #ffffff / #f3f3f3 / #ededed ........... 5.49 / 4.95 / 4.69:1 (enlaces, lo activo) #1a6fa0 sobre #e8f1f6 / #dfebf2 ..................... 4.80 / 4.52:1 (riel activo; tinte al pasar) blanco sobre #1a6fa0 / #17628d / #155980 ............ 5.49 / 6.63 / 7.57:1 (primario, hover, presionado; riel activo y barra de selección, Paso 4) #1a6fa0 sobre #e6f4fb ............................... 4.89:1 (título de lo flotante en su franja, Paso 4) #1d1d1d sobre #e6f4fb / #e8f1f6 / #dfebf2 ........... 15.01 / 14.73 / 13.89:1 (texto en la franja; fila seleccionada; al pasar) #595959 sobre #e6f4fb / #dfebf2 ..................... 6.24 / 5.77:1 (secundario en la franja; fila seleccionada al pasar) blanco sobre #b02a20 / #991e14 / #841a11 ............ 6.57 / 8.23 / 9.83:1 (peligro lleno) #1c6b35 sobre #e7f8eb / #ffffff / #f5fcf7 ........... 5.94 / 6.55 / 6.29:1 (éxito: píldora / celda / fila) #7a4b00 sobre #fff3e2 / #ffffff / #fffaf3 ........... 6.76 / 7.41 / 7.14:1 (aviso: píldora / celda / fila) #b02a20 sobre #ffe9e8 / #ffffff / #fff5f5 ........... 5.65 / 6.57 / 6.14:1 (error: píldora / celda / fila) #155980 sobre #e8f1f6 / #ffffff ..................... 6.62 / 7.57:1 (info: píldora / celda) #454545 sobre #e0e0e0 / #d6d6d6 ..................... 7.26 / 6.60:1 (neutro al pasar / presionado) #8a8a8a sobre #ffffff / #f3f3f3 / #f0f0f0 ........... 3.45 / 3.11 / 3.03:1 (bordes de controles y marcos (3:1)) #6b6b6b sobre #ffffff / #e3e3e3 ..................... 5.33 / 4.15:1 (esos bordes al pasar (3:1)) #767676 sobre #ffffff / #f3f3f3 / #e6e6e6 ........... 4.54 / 4.09 / 3.64:1 (adorno (3:1)) #1a6fa0 sobre #ffffff / #f3f3f3 / #e6e6e6 ........... 5.49 / 4.95 / 4.40:1 (foco y bordes (3:1)) #2a9449 sobre #ffffff ............................... 3.87:1 (punto éxito (3:1)) #a86d00 sobre #ffffff / #e6e6e6 ..................... 4.33 / 3.47:1 (punto aviso (3:1)) #d63a2f sobre #ffffff ............................... 4.66:1 (punto error (3:1)) -> --ds-texto-3 SOLO para íconos de adorno, separadores "·" y deshabilitado (exento). Todo texto que dice algo ("No aplica", "—" de una celda, conteos, "(opcional)", marcadores de los campos (placeholder), el rótulo "Admin" del riel) va en --ds-texto-2. Deshabilitado (exento): blanco sobre --ds-relleno-primario-apagado y --ds-texto-3 sobre --ds-neutro-fondo. anillo de foco (--tb-anillo, §6): 2 px blanco + 2 px #1a6fa0. Excepción a "ningún color fuera de §1": los íconos SVG en data: URI (flecha de los selects en --ds-texto-2 y en acento, círculo blanco del interruptor, ✓ blanco y ✓ tenue de la cuadrícula 465); sus colores son los de esos tokens y la prueba vigila que no se aparten. ========================================================================== */ /* 0. Fuentes locales ====================================================== */ /* static/vendor/fuentes (fontsource, SIL OFL 1.1). Variables: un archivo por alfabeto cubre todos los pesos. Solo se descargan si se usan. */ @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../vendor/fuentes/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../vendor/fuentes/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../vendor/fuentes/inter-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../vendor/fuentes/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("../vendor/fuentes/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"), url("../vendor/fuentes/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("../vendor/fuentes/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../vendor/fuentes/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* 1. Tokens =============================================================== */ /* Corrección 2 (2026-10-01), CONTRASTE, NO COLOR (decisión del usuario; REEMPLAZA el «tono de color» del Paso 5, que teñía el riel de gris cálido y los bordes de cálido): los módulos no llevan fondo teñido; la jerarquía es de GRISES NEUTROS (R = G = B) para que cada objeto se distinga, y el único color es el acento y los estados. TODO color del archivo sale de aquí: fuera de §1 no hay hexadecimales ni rgba() sueltos (lo vigila tests/test_tono_color.py; las únicas excepciones son los íconos SVG en data: URI, que no pueden leer variables, listados al inicio del archivo). - Riel (barra lateral, sus submenús y el riel expandido): gris neutro un paso MÁS OSCURO que el contenido, con una línea a la derecha; activo = tinte del acento con ícono y etiqueta en el acento. - Contenido: gris claro; tarjetas, tablas, diálogos, paneles y campos en BLANCO con borde visible (--ds-borde-marco, 3:1 contra el fondo) y sombra mínima. - Encabezado de tabla: gris suave con texto gris oscuro; separadores de fila visibles; hover notorio. - Controles (campos, chips, píldoras de filtro, botón secundario): borde --ds-borde-fuerte (3:1 contra su fondo, criterio WCAG 1.4.11); chips y filtros inactivos con fondo gris claro (--ds-control-fondo). - UN solo acento, #1a6fa0, y sus tintes (mezclas con blanco, el % al lado): botón primario, selección, chips activos, enlaces y foco. - Estados (verde, ámbar, rojo, azul) solo en píldoras, avisos y sus marcas (punto, borde, fila teñida): fondo pastel y texto oscuro del mismo tono. Los colores de las series de los gráficos (ui.js) y de los productos de la cuadrícula 465 (sabana_465.js) no son acentos y no están aquí. */ body.ui-v2 { /* Noche 5 · 1 y 6: blanco de botones/insignias y la paleta del panel del inicio de sesión («Barras que responden») */ --ds-blanco: #ffffff; --ds-login-fondo: #0f3550; --ds-login-barra-viva: #7cc4ea; /* foco del ojo de la contraseña */ --ds-login-cumbre-1: #7cc4ea; /* «Cumbre» (2026-10-23): barra baja */ --ds-login-cumbre-2: #5aa9dc; /* barra media */ --ds-login-cumbre-3: #c7466f; /* barra alta, corinto */ --ds-login-cumbre-brillo-suave: rgba(199, 70, 111, 0.35); --ds-login-cumbre-brillo-fuerte: rgba(199, 70, 111, 0.75); /* Acento único #1a6fa0 y sus tintes */ --ds-acento: #1a6fa0; /* bordes, anillos, puntos, barras, paso actual (antes celeste #3aa6dd) */ --ds-acento-oscuro: #1a6fa0; /* texto en acento: enlaces, lo activo */ --ds-acento-claro: #e8f1f6; /* 10 %: fondo de lo activo (riel, chip-casilla, fila elegida, info) */ --ds-acento-claro-2: #dfebf2; /* 14 %: ese fondo al pasar o presionado */ --ds-acento-seleccion: #cddfea; /* 22 %: texto seleccionado, rango de la 465 */ --ds-acento-borde: #afcdde; /* 35 %: borde de lo teñido de acento */ --ds-acento-tenue: #f4f8fa; /* 5 %: columna o fila con foco de la 465, fila info */ --ds-acento-velo: rgba(26, 111, 160, 0.12); /* ✕ de una píldora de filtro activa, al pasar */ /* Relleno con texto blanco encima (botón primario, chip activo, casilla marcada, paso hecho): #1a6fa0, blanco 5.49:1. */ --ds-relleno-primario: #1a6fa0; --ds-relleno-primario-hover: #17628d; /* blanco 6.63:1 */ --ds-relleno-primario-activo: #155980; /* blanco 7.57:1 */ --ds-relleno-primario-apagado: #a3c5d9; /* 40 %: deshabilitado */ --ds-texto-sobre-relleno: #fff; /* texto o marca sobre un relleno lleno (primario, peligro, nombre flotante) */ --ds-texto-sobre-relleno-2: rgba(255, 255, 255, 0.9); /* conteo dentro de un chip lleno (4.9:1) */ --ds-conteo-sobre-relleno: rgba(0, 0, 0, 0.2); /* fondo del conteo de un botón primario (blanco 7.57:1) */ --ds-anillo: rgba(26, 111, 160, 0.25); /* anillo suave de foco de campos (con borde acento) */ --ds-anillo-fuerte: rgba(26, 111, 160, 0.45); /* anillo de la celda que se edita */ /* Noche 2 · Paso 4: el color va SOLO en lo ACTIVO, lo SELECCIONADO y lo FLOTANTE (los módulos y fondos siguen en grises neutros). */ --ds-riel-activo: var(--ds-relleno-primario); /* ítem activo del riel: relleno #1a6fa0, blanco 5.49:1 */ --ds-riel-activo-hover: var(--ds-relleno-primario-hover); /* ese ítem al pasar: blanco 6.63:1 */ --ds-flotante-franja: #e6f4fb; /* franja o encabezado de lo flotante (submenús, filtros, diálogos, paneles) */ --ds-flotante-titulo: var(--ds-acento-oscuro); /* su título: #1a6fa0 sobre la franja, 4.89:1 */ --ds-flotante-borde: var(--ds-acento-borde); /* borde azul suave de lo flotante (no es un control) */ --ds-fila-seleccionada: var(--ds-acento-claro); /* fila con la casilla marcada (el hover sigue gris) */ --ds-fila-seleccionada-hover: var(--ds-acento-claro-2); /* esa fila al pasar */ --ds-seleccion-fondo: var(--ds-relleno-primario); /* barra flotante de selección: blanco 5.49:1 */ --ds-seleccion-hover: var(--ds-relleno-primario-hover); /* un botón de esa barra al pasar: blanco 6.63:1 */ --ds-seleccion-separador: rgba(255, 255, 255, 0.45); /* línea entre el conteo y las acciones */ --ds-seleccion-apagado: rgba(255, 255, 255, 0.55); /* botón deshabilitado de la barra (exento) */ /* Superficies: grises NEUTROS (R = G = B), de más claro a más oscuro */ --ds-superficie: #fff; /* tarjetas, tablas, diálogos, paneles, campos */ --ds-fondo: #f3f3f3; /* área de contenido: gris claro */ --ds-encabezado-tabla: #f0f0f0; /* encabezado de tabla: gris suave dentro del marco blanco */ --ds-control-fondo: #f0f0f0; /* chips y píldoras de filtro INACTIVOS (con borde de control) */ --ds-barra-fondo: #ededed; /* barra superior: apenas más oscura que el fondo */ --ds-hover: #ececec; /* fila/elemento al pasar, sobre blanco (notorio) */ --ds-control-hover: #e3e3e3; /* chip o píldora de filtro inactivos, al pasar */ --ds-riel-fondo: #e6e6e6; /* barra lateral: un paso más oscura que el contenido */ --ds-riel-hover: #dadada; /* ítem del riel al pasar */ --ds-riel-borde: #cccccc; /* línea entre el riel y el contenido, separador "Admin" */ --ds-hover-fondo: rgba(0, 0, 0, 0.05); /* al pasar, sobre el fondo gris */ --ds-velo: #1d1d1d; /* fondo detrás de un diálogo o panel lateral (con su opacidad) */ /* Bordes y separadores: grises neutros. Los de CONTROLES y MARCOS, 3:1 contra su fondo (WCAG 1.4.11) */ --ds-borde-marco: #8a8a8a; /* marco de tarjetas, tablas, paneles e indicadores: 3.11:1 sobre el fondo */ --ds-borde-fuerte: #8a8a8a; /* campos, chips, píldoras de filtro, botón secundario: 3.45:1 sobre blanco */ --ds-borde-hover: #6b6b6b; /* esos bordes al pasar */ --ds-borde: #d4d4d4; /* separadores internos: encabezado de tabla, menús, secciones */ --ds-borde-suave: #e2e2e2; /* líneas entre filas (visibles) */ /* Texto (gris neutro) */ --ds-texto: #1d1d1d; --ds-texto-2: #595959; /* secundario: 5.6:1 o más en todas las superficies (un paso más oscuro) */ --ds-texto-3: #767676; /* SOLO adorno, deshabilitado, separadores: 3:1 o más */ --ds-neutro-hover: #e0e0e0; /* relleno gris al pasar (píldora gris en una fila, "⋯") */ --ds-neutro-activo: #d6d6d6; /* relleno gris presionado ("+N") */ /* Estados: fondo pastel / texto oscuro del mismo tono (tonos del sistema de macOS: verde #34c759, naranja #ff9f0a, rojo #ff3b30; azul = acento) */ --ds-exito-fondo: #e7f8eb; --ds-exito: #1c6b35; --ds-aviso-fondo: #fff3e2; --ds-aviso: #7a4b00; --ds-error-fondo: #ffe9e8; --ds-error: #b02a20; --ds-info-fondo: #e8f1f6; --ds-info: #155980; --ds-neutro-fondo: #ebebeb; --ds-neutro: #454545; /* bordes, fondos de hover, filas teñidas y puntos de cada estado */ --ds-exito-borde: #c2eecd; --ds-exito-borde-2: #aee9bd; --ds-exito-fondo-2: #d6f4de; --ds-exito-tenue: #f5fcf7; --ds-exito-punto: #2a9449; --ds-aviso-borde: #ffe2b6; --ds-aviso-borde-2: #ffd99d; --ds-aviso-fondo-2: #ffeac9; --ds-aviso-tenue: #fffaf3; --ds-aviso-punto: #a86d00; --ds-error-borde: #ffc4c1; --ds-error-borde-2: #ffb1ac; --ds-error-fondo-2: #ffdcda; --ds-error-tenue: #fff5f5; --ds-error-punto: #d63a2f; --ds-info-borde: var(--ds-acento-borde); --ds-info-tenue: var(--ds-acento-tenue); --ds-error-punto-oscuro: #9e1d17; --ds-aviso-anillo: rgba(168, 109, 0, 0.18); --ds-error-anillo: rgba(176, 42, 32, 0.16); /* botón de peligro lleno (blanco 6.57 / 8.23 / 9.83:1) */ --ds-peligro: var(--ds-error); --ds-peligro-hover: #991e14; --ds-peligro-activo: #841a11; /* Hoja de papel (acta en vivo y vista previa del Word): imita el documento impreso, por eso blanco, negro y el gris del encabezado de sus tablas no siguen el tono de la app */ --ds-hoja: #fff; --ds-hoja-tinta: #000; --ds-hoja-encabezado: #d9d9d9; --ds-hoja-marca: rgba(176, 42, 32, 0.13); /* marca de agua BORRADOR */ /* Forma */ --ds-radio-pildora: 999px; /* botones, chips, píldoras, buscador */ --ds-radio-campo: 12px; /* campos, menús desplegables, avisos */ --ds-radio-tarjeta: 16px; /* tarjetas, tablas, paneles */ --ds-radio-dialogo: 20px; /* diálogos, panel lateral, barra superior */ --ds-radio-item: 8px; /* ítems dentro de menús, nombre flotante */ /* Espacio: 4/8/12/16/24/32 */ --ds-e1: 4px; --ds-e2: 8px; --ds-e3: 12px; --ds-e4: 16px; --ds-e5: 24px; --ds-e6: 32px; --ds-margen-pagina: 32px; /* Sombras mínimas y neutras (negro con opacidad) */ --ds-sombra-tarjeta: 0 1px 2px rgba(0, 0, 0, 0.06); --ds-sombra-flotante: 0 4px 20px rgba(0, 0, 0, 0.06); --ds-sombra-pie: 0 -6px 14px -8px rgba(0, 0, 0, 0.18), 0 -1px 2px -1px rgba(0, 0, 0, 0.08); /* pies fijos: nada por debajo del borde inferior */ --ds-sombra-menu: 0 8px 28px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06); --ds-sombra-menu-fuerte: 0 8px 28px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06); /* menú "+N" */ --ds-sombra-panel: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04); /* panel de filtro */ --ds-sombra-dialogo: 0 24px 48px rgba(0, 0, 0, 0.16); /* diálogo, panel lateral */ --ds-sombra-dialogo-fuerte: 0 24px 48px rgba(0, 0, 0, 0.18); /* diálogo sobre diálogo */ --ds-sombra-flotante-fuerte: 0 18px 44px rgba(0, 0, 0, 0.20), 0 4px 12px rgba(0, 0, 0, 0.10); /* lo flotante (Paso 4) */ --ds-sombra-control: 0 1px 2px rgba(0, 0, 0, 0.08); /* opción elegida de la densidad */ --ds-sombra-segmento: 0 1px 2px rgba(0, 0, 0, 0.08); /* opción elegida de un segmento */ --ds-sombra-hoja: 0 1px 3px rgba(0, 0, 0, 0.12); /* hoja de la vista previa del Word */ --ds-transicion: 150ms ease; /* Tipografía */ --ds-fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ds-tam-titulo: 26px; /* título de página, 600 */ --ds-tam-seccion: 16px; /* título de sección o panel, 600 */ --ds-tam-cuerpo: 14px; /* cuerpo, subtítulo, contador */ --ds-tam-tabla: 13px; /* celdas */ --ds-tam-etiqueta: 12px; /* etiquetas y píldoras, 500 */ /* Medidas */ --ds-riel: max(144px, 10.28em); /* delgado: ícono 24 px + etiqueta de 12 px; em: crece si Safari agranda la letra (2026-09-28) */ --ds-riel-expandido: max(240px, 17.2em); /* 240 px; crece si el navegador agranda el texto (nombres enteros) */ --ds-ancho-riel: var(--ds-riel); --ds-alto-control: 40px; --ds-alto-chip: 36px; --ds-alto-buscador: 44px; --ds-alto-barra: 56px; /* buscador 44 + 6 arriba y abajo (fase "todo": menos cromo vertical) */ /* Ancho máximo del contenido (fase "todo"). En em de la letra del cuerpo (14 px): 125em = 1750 px en tablas; formularios 68em = 952; detalle 86em = 1204. En em y no en px: si el navegador agranda el texto (zoom de página bajo en Safari), la página aprovecha el ancho con él. */ --ds-ancho-datos: 125em; --ds-ancho-detalle: 86em; --ds-ancho-formulario: 68em; --ds-fila-comoda: 52px; --ds-fila-compacta: 40px; /* Alias de compatibilidad (nombres de la primera versión; los usan piezas viejas y los fragmentos que aún no se actualizan) */ --ds-acento-fuerte: var(--ds-acento-oscuro); --ds-acento-fuerte-hover: var(--ds-relleno-primario-hover); --ds-acento-fuerte-activo: var(--ds-relleno-primario-activo); --ds-acento-texto: var(--ds-acento-oscuro); --ds-acento-suave: var(--ds-acento-claro); --ds-acento-suave-2: var(--ds-acento-claro-2); --ds-acento-tinta: var(--ds-acento-oscuro); --ds-acento-anillo: var(--ds-anillo); --ds-superficie-2: var(--ds-neutro-fondo); --ds-superficie-hover: var(--ds-hover); --ds-borde-campo: var(--ds-borde-fuerte); --ds-tinta-oscura: var(--ds-texto); --ds-verde: var(--ds-exito); --ds-verde-suave: var(--ds-exito-fondo); --ds-verde-borde: var(--ds-exito-borde); --ds-verde-punto: var(--ds-exito-punto); --ds-ambar: var(--ds-aviso); --ds-ambar-suave: var(--ds-aviso-fondo); --ds-ambar-borde: var(--ds-aviso-borde); --ds-ambar-punto: var(--ds-aviso-punto); --ds-rojo: var(--ds-error); --ds-rojo-suave: var(--ds-error-fondo); --ds-rojo-borde: var(--ds-error-borde); --ds-rojo-punto: var(--ds-error-punto); --ds-rojo-hover: var(--ds-peligro-hover); --ds-gris: var(--ds-neutro); --ds-gris-suave: var(--ds-neutro-fondo); --ds-gris-borde: var(--ds-borde-fuerte); --ds-gris-punto: var(--ds-texto-3); --ds-radio-1: var(--ds-radio-item); --ds-radio-2: var(--ds-radio-campo); --ds-radio-3: var(--ds-radio-tarjeta); --ds-sombra-1: var(--ds-sombra-tarjeta); --ds-sombra-2: var(--ds-sombra-menu); --ds-texto-xs: var(--ds-tam-etiqueta); --ds-texto-sm: var(--ds-tam-tabla); --ds-texto-base: var(--ds-tam-cuerpo); --ds-texto-md: var(--ds-tam-seccion); --ds-texto-lg: var(--ds-tam-titulo); --ds-texto-xl: var(--ds-tam-titulo); --ds-esp-1: var(--ds-e1); --ds-esp-2: var(--ds-e2); --ds-esp-3: var(--ds-e3); --ds-esp-4: var(--ds-e4); --ds-esp-5: var(--ds-e5); --ds-esp-6: var(--ds-e6); --ds-esp-7: 48px; --ds-riel-delgado: var(--ds-riel); --ds-riel-ancho: var(--ds-riel-expandido); /* Bootstrap dentro del ámbito */ --bs-body-font-family: var(--ds-fuente); --bs-body-font-size: var(--ds-tam-cuerpo); --bs-body-line-height: 1.5; --bs-body-color: var(--ds-texto); --bs-body-color-rgb: 29, 29, 29; --bs-body-bg: var(--ds-fondo); --bs-emphasis-color: var(--ds-texto); --bs-secondary-color: var(--ds-texto-2); --bs-secondary-color-rgb: 89, 89, 89; --bs-tertiary-color: var(--ds-texto-3); --bs-secondary-bg: var(--ds-neutro-fondo); --bs-tertiary-bg: var(--ds-hover); --bs-heading-color: var(--ds-texto); --bs-primary: var(--ds-acento); --bs-primary-rgb: 26, 111, 160; --bs-primary-text-emphasis: var(--ds-acento-oscuro); --bs-primary-bg-subtle: var(--ds-acento-claro); --bs-primary-border-subtle: var(--ds-acento-borde); --bs-link-color: var(--ds-acento-oscuro); --bs-link-color-rgb: 26, 111, 160; --bs-link-hover-color: var(--ds-relleno-primario-activo); --bs-link-hover-color-rgb: 21, 89, 128; --bs-border-color: var(--ds-borde); --bs-border-color-translucent: rgba(0, 0, 0, 0.08); --bs-border-radius: var(--ds-radio-campo); --bs-border-radius-sm: var(--ds-radio-item); --bs-border-radius-lg: var(--ds-radio-tarjeta); --bs-border-radius-xl: var(--ds-radio-dialogo); --bs-border-radius-xxl: var(--ds-radio-dialogo); --bs-border-radius-pill: var(--ds-radio-pildora); --bs-focus-ring-color: var(--ds-anillo); --bs-box-shadow: var(--ds-sombra-menu); --bs-box-shadow-sm: var(--ds-sombra-tarjeta); --bs-success-rgb: 28, 107, 53; --bs-danger-rgb: 176, 42, 32; --bs-warning-rgb: 122, 75, 0; --bs-info-rgb: 21, 89, 128; } body.ui-v2.ds-riel-expandido { --ds-ancho-riel: var(--ds-riel-expandido); } /* Compatibilidad: primario oscuro ya es el valor por defecto (sin efecto) */ body.ui-v2.ds-primario-oscuro, body.ui-v2 .ds-primario-oscuro { --ds-relleno-primario: var(--ds-acento-oscuro); } /* Vista previa de la otra fuente (/estilo) */ body.ui-v2.ds-fuente-jakarta, body.ui-v2 .ds-fuente-jakarta { --ds-fuente: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --bs-body-font-family: var(--ds-fuente); font-family: var(--ds-fuente); } /* y al revés: la muestra de Inter sigue en Inter aunque la página use Jakarta */ body.ui-v2 .ds-fuente-inter { --ds-fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bs-body-font-family: var(--ds-fuente); font-family: var(--ds-fuente); } @media (max-width: 767.98px) { body.ui-v2, body.ui-v2.ds-riel-expandido { --ds-ancho-riel: 0px; --ds-margen-pagina: 16px; } } /* 2. Base ================================================================= */ body.ui-v2 { background-color: var(--ds-fondo); color: var(--ds-texto); font-family: var(--ds-fuente); font-size: var(--ds-tam-cuerpo); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body.ui-v2 h1, body.ui-v2 h2, body.ui-v2 h3, body.ui-v2 h4, body.ui-v2 h5, body.ui-v2 h6, body.ui-v2 .h1, body.ui-v2 .h2, body.ui-v2 .h3, body.ui-v2 .h4, body.ui-v2 .h5, body.ui-v2 .h6 { font-family: var(--ds-fuente); font-weight: 600; color: var(--ds-texto); letter-spacing: -0.011em; line-height: 1.3; text-transform: none; } body.ui-v2 h1, body.ui-v2 .h1 { font-size: var(--ds-tam-titulo); letter-spacing: -0.02em; } body.ui-v2 h2, body.ui-v2 .h2 { font-size: 18px; } body.ui-v2 h3, body.ui-v2 .h3 { font-size: var(--ds-tam-seccion); } body.ui-v2 h4, body.ui-v2 .h4, body.ui-v2 h5, body.ui-v2 .h5, body.ui-v2 h6, body.ui-v2 .h6 { font-size: var(--ds-tam-cuerpo); } body.ui-v2 b, body.ui-v2 strong, body.ui-v2 .fw-bold { font-weight: 600 !important; } body.ui-v2 small, body.ui-v2 .small { font-size: var(--ds-tam-tabla); } body.ui-v2 a { color: var(--ds-acento-oscuro); text-underline-offset: 2px; transition: color var(--ds-transicion); } body.ui-v2 a:hover { color: var(--ds-acento-fuerte-activo); } body.ui-v2 .text-muted, body.ui-v2 .text-secondary, body.ui-v2 .ds-texto-suave { color: var(--ds-texto-2) !important; } body.ui-v2 .ds-texto-apagado { color: var(--ds-texto-2) !important; } body.ui-v2 .text-uppercase { text-transform: none !important; } /* Cifras tabulares en todo lo que se compara en columna */ body.ui-v2 table, body.ui-v2 input, body.ui-v2 .ds-num, body.ui-v2 .ui-col-numerica, body.ui-v2 .ds-contador, body.ui-v2 .ds-kpi-valor, body.ui-v2 .ds-pildora, body.ui-v2 .badge { font-variant-numeric: tabular-nums; } body.ui-v2 .ds-num { white-space: nowrap; text-align: right; } /* Foco: visible solo con teclado */ body.ui-v2 :focus-visible { outline: 2px solid var(--ds-acento-oscuro); outline-offset: 2px; } body.ui-v2 :focus:not(:focus-visible) { outline: none; } body.ui-v2 ::selection { background: var(--ds-acento-seleccion); color: var(--ds-texto); } /* Solo visible en un estado del riel (textos del botón que lo alterna) */ body.ui-v2 .ds-solo-expandido { display: none !important; } body.ui-v2.ds-riel-expandido .ds-solo-expandido { display: inline-block !important; } body.ui-v2.ds-riel-expandido .ds-solo-contraido { display: none !important; } /* Saltar al contenido (visible solo con foco) */ body.ui-v2 .ds-saltar { position: fixed; top: 8px; left: 8px; z-index: 1090; padding: 8px 16px; border-radius: var(--ds-radio-pildora); background: var(--ds-superficie); color: var(--ds-acento-oscuro); box-shadow: var(--ds-sombra-menu); font-weight: 500; text-decoration: none; transform: translateY(calc(-100% - 48px)); /* oculto del todo: ni su sombra (28 px) asoma arriba */ transition: transform var(--ds-transicion); } body.ui-v2 .ds-saltar:focus { transform: none; } /* 3. Estructura =========================================================== */ body.ui-v2 .ds-app { display: flex; min-height: 100vh; } body.ui-v2 .ds-principal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } /* 3a. Riel: 144 px (crece en em con la letra) con ícono de 24 px y etiqueta completa de 12 px debajo (áreas de clic de 120×64, radio 12, separación 8) sobre el fondo gris; expandido 240 px con nombres. Íconos en #4b5563; activo = fondo acento claro con ícono y etiqueta en acento oscuro. ----------------------------------------- */ @media (min-width: 768px) { body.ui-v2 .ds-riel { position: sticky; top: 0; height: 100vh; flex: 0 0 var(--ds-ancho-riel); width: var(--ds-ancho-riel); z-index: 1030; transition: width var(--ds-transicion), flex-basis var(--ds-transicion); } } body.ui-v2 .ds-riel-interior { height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 0 12px 16px; /* fondo del riel aquí y no en .ds-riel: Bootstrap deja transparente .offcanvas-md en escritorio (!important). La línea de la derecha es una sombra interior: no ocupa ancho. */ background: var(--ds-riel-fondo); box-shadow: inset -1px 0 0 var(--ds-riel-borde); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; } body.ui-v2 .ds-riel-interior::-webkit-scrollbar { display: none; } /* La cabeza mide lo mismo que la barra superior: el botón de expandir queda a la altura de la barra. */ body.ui-v2 .ds-riel-cabeza { flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(var(--ds-e3) + var(--ds-alto-barra) + 2px); padding-top: var(--ds-e3); margin-bottom: var(--ds-e3); } body.ui-v2 .ds-riel-lista { flex: none; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } body.ui-v2 .ds-riel-li { position: relative; } body.ui-v2 .ds-riel-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: var(--ds-alto-control); padding: 0 12px 0 10px; border: 0; border-radius: var(--ds-radio-pildora); background: transparent; color: var(--ds-neutro); font: inherit; font-size: var(--ds-tam-tabla); font-weight: 500; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--ds-transicion), color var(--ds-transicion); } body.ui-v2 .ds-riel-icono { flex: none; width: 20px; font-size: 20px; line-height: 1; text-align: center; } body.ui-v2 .ds-riel-item:hover, body.ui-v2 .ds-riel-item.ds-f-hover, body.ui-v2 .ds-riel-item[data-ds-flyout][aria-expanded="true"] { background: var(--ds-riel-hover); color: var(--ds-texto); } /* activo (Noche 2 · Paso 4): relleno del acento con ícono y etiqueta BLANCOS, en el riel delgado, el expandido y el del teléfono (también al pasar o con su submenú abierto) */ body.ui-v2 .ds-riel-item.activo, body.ui-v2 .ds-riel-item.ds-f-activo { background: var(--ds-riel-activo); color: var(--ds-texto-sobre-relleno); } body.ui-v2 .ds-riel-item.activo:hover, body.ui-v2 .ds-riel-item.activo[aria-expanded="true"] { background: var(--ds-riel-activo-hover); color: var(--ds-texto-sobre-relleno); } body.ui-v2 .ds-riel-item.activo .ds-riel-flecha { color: var(--ds-texto-sobre-relleno); } body.ui-v2 .ds-riel-item.activo .ds-riel-punto { box-shadow: 0 0 0 2px var(--ds-riel-activo); } /* riel EXPANDIDO y del TELÉFONO con el grupo abierto en línea: el relleno va en el subítem de la página (un solo relleno a la vista); el grupo que lo contiene queda en el tinte del acento */ body.ui-v2.ds-riel-expandido .ds-riel-item.activo[data-ds-flyout][aria-expanded="true"] { background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); } body.ui-v2.ds-riel-expandido .ds-riel-item.activo[data-ds-flyout][aria-expanded="true"] .ds-riel-flecha { color: var(--ds-acento-oscuro); } @media (max-width: 767.98px) { body.ui-v2 .ds-riel-item.activo[data-ds-flyout][aria-expanded="true"] { background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); } body.ui-v2 .ds-riel-item.activo[data-ds-flyout][aria-expanded="true"] .ds-riel-flecha { color: var(--ds-acento-oscuro); } } body.ui-v2 .ds-riel-item.ds-f-foco { outline: 2px solid var(--ds-acento-oscuro); outline-offset: 2px; } body.ui-v2 .ds-riel-item.deshabilitado { color: var(--ds-texto-3); cursor: default; } body.ui-v2 .ds-riel-item.deshabilitado:hover { background: transparent; } body.ui-v2 .ds-riel-texto { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Etiqueta corta y rótulo "Admin": solo en el riel delgado */ body.ui-v2 .ds-riel-corto, body.ui-v2 .ds-riel-seccion-corto { display: none; } body.ui-v2 .ds-riel-flecha { flex: none; margin-left: -2px; font-size: 14px; color: var(--ds-texto-3); transition: transform var(--ds-transicion); } /* Punto de "Próximamente" / "En construcción" */ body.ui-v2 .ds-riel-punto { flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ds-riel-fondo); } body.ui-v2 .ds-riel-punto-aviso, body.ui-v2 .ds-riel-punto-ambar { background: var(--ds-aviso-punto); } body.ui-v2 .ds-riel-punto-neutro, body.ui-v2 .ds-riel-punto-gris { background: var(--ds-texto-3); } body.ui-v2 .ds-riel-seccion { flex: none; /* el riel es una columna flex más alta que la ventana: sin esto se encoge */ margin: var(--ds-e4) 0 var(--ds-e1); padding: 0 12px; color: var(--ds-texto-2); font-size: var(--ds-tam-etiqueta); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Riel delgado (escritorio, estado por defecto): ícono + etiqueta corta. Los nombres completos quedan para lectores de pantalla (ocultos a la vista, no con display) y en el nombre flotante. Las mismas reglas valen para la muestra de /estilo (.ds-riel-muestra sin -expandido). Alto con min-height (no height): si Safari agranda la letra, el ítem crece. */ @media (min-width: 768px) { body.ui-v2:not(.ds-riel-expandido) .ds-riel-interior { padding: 0 12px 16px; } body.ui-v2:not(.ds-riel-expandido) .ds-riel .ds-riel-texto, body.ui-v2 .ds-riel-muestra:not(.ds-riel-muestra-expandido) .ds-riel-texto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } body.ui-v2:not(.ds-riel-expandido) .ds-riel .ds-riel-flecha, body.ui-v2 .ds-riel-muestra:not(.ds-riel-muestra-expandido) .ds-riel-flecha { display: none; } body.ui-v2:not(.ds-riel-expandido) .ds-riel .ds-riel-lista, body.ui-v2 .ds-riel-muestra:not(.ds-riel-muestra-expandido) .ds-riel-lista { gap: 8px; } body.ui-v2:not(.ds-riel-expandido) .ds-riel .ds-riel-item, body.ui-v2 .ds-riel-muestra:not(.ds-riel-muestra-expandido) .ds-riel-item { flex-direction: column; justify-content: center; gap: 4px; width: 100%; height: auto; min-height: 64px; margin: 0 auto; padding: 8px 2px; border-radius: 12px; text-align: center; } body.ui-v2:not(.ds-riel-expandido) .ds-riel .ds-riel-alternar { min-height: 40px; } body.ui-v2:not(.ds-riel-expandido) .ds-riel .ds-riel-icono, body.ui-v2 .ds-riel-muestra:not(.ds-riel-muestra-expandido) .ds-riel-icono { width: 24px; font-size: 24px; } body.ui-v2:not(.ds-riel-expandido) .ds-riel .ds-riel-corto, body.ui-v2 .ds-riel-muestra:not(.ds-riel-muestra-expandido) .ds-riel-corto { display: block; font-size: 12px; font-weight: 500; line-height: 1.25; white-space: nowrap; /* una línea y nunca "…": caben enteras en el riel (ancho en em) */ } body.ui-v2:not(.ds-riel-expandido) .ds-riel-cabeza { justify-content: center; } body.ui-v2:not(.ds-riel-expandido) .ds-riel .ds-riel-punto, body.ui-v2 .ds-riel-muestra:not(.ds-riel-muestra-expandido) .ds-riel-punto { position: absolute; top: 8px; right: calc(50% - 22px); } /* "Administración": separador y rótulo corto "Admin" */ body.ui-v2:not(.ds-riel-expandido) .ds-riel .ds-riel-seccion, body.ui-v2 .ds-riel-muestra:not(.ds-riel-muestra-expandido) .ds-riel-seccion { margin: var(--ds-e4) 8px var(--ds-e2); padding: var(--ds-e3) 0 var(--ds-e1); border-top: 1px solid var(--ds-riel-borde); color: var(--ds-texto-2); /* "Admin" es texto que dice algo: 5:1 sobre el riel */ font-size: 11px; font-weight: 600; text-align: center; } body.ui-v2:not(.ds-riel-expandido) .ds-riel .ds-riel-seccion-largo, body.ui-v2 .ds-riel-muestra:not(.ds-riel-muestra-expandido) .ds-riel-seccion-largo { display: none; } body.ui-v2:not(.ds-riel-expandido) .ds-riel .ds-riel-seccion-corto, body.ui-v2 .ds-riel-muestra:not(.ds-riel-muestra-expandido) .ds-riel-seccion-corto { display: inline; } } /* Muestras del riel en /estilo (fuera del riel): la delgada (72 px, las reglas de arriba) y la expandida siempre con nombres (240 - 24 px), sin importar cómo esté el riel real. */ body.ui-v2 .ds-riel-muestra { width: 120px; /* el fondo del riel real, pintado 8 px alrededor con una sombra: no cambia la medida de la muestra */ border-radius: 4px; background: var(--ds-riel-fondo); box-shadow: 0 0 0 8px var(--ds-riel-fondo); } body.ui-v2 .ds-riel-muestra.ds-riel-muestra-expandido { width: calc(var(--ds-riel-expandido, 240px) - 24px); } body.ui-v2 .ds-riel-muestra.ds-riel-muestra-expandido .ds-riel-item { justify-content: flex-start; padding: 0 12px 0 10px; } body.ui-v2 .ds-riel-muestra.ds-riel-muestra-expandido .ds-riel-texto { position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; } body.ui-v2 .ds-riel-muestra.ds-riel-muestra-expandido .ds-riel-flecha { display: inline-block; } body.ui-v2 .ds-riel-muestra.ds-riel-muestra-expandido .ds-riel-punto { position: static; } body.ui-v2 .ds-riel-muestra.ds-riel-muestra-expandido .ds-riel-seccion { height: auto; margin: var(--ds-e4) 0 var(--ds-e1); padding: 0 12px; background: none; color: var(--ds-texto-2); } /* /estilo §2 (Corrección 2, contraste no color): la JERARQUÍA de grises en miniatura — riel un paso más oscuro, barra superior y encabezado de tabla grises, contenido gris claro y la tarjeta blanca con su marco. Solo la usa la página de referencia. */ body.ui-v2 .ds-muestra-ambiente { display: grid; grid-template-columns: 9em 1fr; border: 1px solid var(--ds-borde); border-radius: var(--ds-radio-tarjeta); background: var(--ds-fondo); overflow: hidden; font-size: var(--ds-tam-etiqueta); } body.ui-v2 .ds-muestra-ambiente-riel { display: flex; flex-direction: column; gap: var(--ds-e1); padding: var(--ds-e3) var(--ds-e2); background: var(--ds-riel-fondo); box-shadow: inset -1px 0 0 var(--ds-riel-borde); } body.ui-v2 .ds-muestra-ambiente-item { display: flex; align-items: center; gap: var(--ds-e2); padding: 6px var(--ds-e2); border-radius: var(--ds-radio-item); color: var(--ds-neutro); font-weight: 500; } body.ui-v2 .ds-muestra-ambiente-item.activo { background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); } body.ui-v2 .ds-muestra-ambiente-rotulo { margin-top: auto; padding: 0 var(--ds-e2); color: var(--ds-texto-2); font-family: var(--bs-font-monospace); } body.ui-v2 .ds-muestra-ambiente-contenido { display: flex; flex-direction: column; gap: var(--ds-e3); padding: var(--ds-e3) var(--ds-e4); } body.ui-v2 .ds-muestra-ambiente-barra, body.ui-v2 .ds-muestra-ambiente-encabezado, body.ui-v2 .ds-muestra-ambiente-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-e3); padding: 6px var(--ds-e3); color: var(--ds-texto-2); } body.ui-v2 .ds-muestra-ambiente-barra { border: 1px solid var(--ds-borde-suave); border-radius: var(--ds-radio-campo); background: var(--ds-barra-fondo); } body.ui-v2 .ds-muestra-ambiente-buscar { flex: 1 1 auto; padding: 2px var(--ds-e3); border: 1px solid var(--ds-borde-fuerte); border-radius: var(--ds-radio-pildora); background: var(--ds-superficie); } body.ui-v2 .ds-muestra-ambiente-tarjeta { border: 1px solid var(--ds-borde-marco); border-radius: var(--ds-radio-campo); background: var(--ds-superficie); overflow: hidden; } body.ui-v2 .ds-muestra-ambiente-encabezado { background: var(--ds-encabezado-tabla); box-shadow: inset 0 -1px 0 var(--ds-borde); } body.ui-v2 .ds-muestra-ambiente-fila { color: var(--ds-texto); } body.ui-v2 .ds-muestra-ambiente-fila + .ds-muestra-ambiente-fila { border-top: 1px solid var(--ds-borde-suave); } body.ui-v2 .ds-muestra-ambiente-fila > .font-monospace { color: var(--ds-texto-2); } /* Submenús: panel flotante en el riel delgado, en línea si expandido */ body.ui-v2 .ds-riel-sub { display: none; } body.ui-v2 .ds-riel-sub.abierto { display: block; } body.ui-v2 .ds-riel-sub-titulo { padding: 6px 12px 8px; color: var(--ds-texto); font-size: 14px; font-weight: 600; } body.ui-v2 .ds-riel-sub-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } body.ui-v2 .ds-riel-subitem { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--ds-neutro); font-size: 14px; font-weight: 500; text-decoration: none; white-space: normal; /* Noche 5 · 0: el nombre se parte en dos líneas, nunca se corta con «…» */ line-height: 1.2; padding-top: 6px; padding-bottom: 6px; transition: background-color var(--ds-transicion), color var(--ds-transicion); } body.ui-v2 .ds-riel-subicono { width: 18px; font-size: 18px; line-height: 1; text-align: center; flex: 0 0 auto; } body.ui-v2 .ds-riel-subitem > span:not(.ds-pildora) { flex: 1 1 auto; min-width: 0; } body.ui-v2 .ds-riel-subitem > .ds-pildora { flex: 0 0 auto; white-space: nowrap; } body.ui-v2 a.ds-riel-subitem:hover, body.ui-v2 .ds-riel-subitem.ds-f-hover { background: var(--ds-riel-hover); color: var(--ds-texto); } body.ui-v2 .ds-riel-subitem.activo { background: var(--ds-riel-activo); color: var(--ds-texto-sobre-relleno); } body.ui-v2 a.ds-riel-subitem.activo:hover { background: var(--ds-riel-activo-hover); color: var(--ds-texto-sobre-relleno); } body.ui-v2 .ds-riel-subitem.deshabilitado { color: var(--ds-texto-3); cursor: default; } @media (min-width: 768px) { body.ui-v2:not(.ds-riel-expandido) .ds-riel-sub.abierto { position: fixed; left: calc(var(--ds-riel) + 8px); top: 72px; /* ui.js lo alinea con su botón */ z-index: 1070; width: 240px; padding: 8px; background: var(--ds-superficie); /* flotante (Paso 4): blanco con la franja del título y borde azul suave */ border: 1px solid var(--ds-flotante-borde); border-radius: var(--ds-radio-tarjeta); box-shadow: var(--ds-sombra-flotante-fuerte); animation: ds-aparecer 150ms ease-out; } } /* Expandido: un poco menos de margen para que quepan los nombres largos */ @media (min-width: 768px) { body.ui-v2.ds-riel-expandido .ds-riel-interior { padding-left: 8px; padding-right: 8px; } } /* Expandido (escritorio) y teléfono: submenú en línea, sin título */ body.ui-v2.ds-riel-expandido .ds-riel-sub-titulo { display: none; } body.ui-v2.ds-riel-expandido .ds-riel-sub.abierto { padding: 2px 0 6px 22px; } body.ui-v2.ds-riel-expandido .ds-riel-subitem:not(.activo):hover { background: var(--ds-riel-hover); } body.ui-v2.ds-riel-expandido .ds-riel-item[aria-expanded="true"] .ds-riel-flecha { transform: rotate(90deg); } @media (max-width: 767.98px) { body.ui-v2 .ds-riel-sub-titulo { display: none; } body.ui-v2 .ds-riel-sub.abierto { padding: 2px 0 6px 22px; } body.ui-v2 .ds-riel-item[aria-expanded="true"] .ds-riel-flecha { transform: rotate(90deg); } } /* Nombre flotante del riel (lo crea ui.js, un solo elemento en ) */ body.ui-v2 .ds-tip { position: fixed; z-index: 1080; max-width: 260px; padding: 6px 10px; border-radius: var(--ds-radio-item); background: var(--ds-texto); color: var(--ds-texto-sobre-relleno); font-size: var(--ds-tam-etiqueta); font-weight: 500; line-height: 1.35; pointer-events: none; box-shadow: var(--ds-sombra-menu); opacity: 0; transform: translateX(-4px); transition: opacity var(--ds-transicion), transform var(--ds-transicion); } body.ui-v2 .ds-tip.visible { opacity: 1; transform: none; } /* 3b. Teléfono: el riel es un offcanvas (clase offcanvas-md) ------------- */ @media (max-width: 767.98px) { body.ui-v2 .ds-riel { --bs-offcanvas-width: 288px; --bs-offcanvas-bg: var(--ds-riel-fondo); --bs-offcanvas-border-width: 0; box-shadow: var(--ds-sombra-menu); } body.ui-v2 .ds-riel-interior { padding: 0 16px 16px; } body.ui-v2 .ds-riel-cabeza { height: 64px; padding-top: 0; margin-bottom: var(--ds-e2); } body.ui-v2 .ds-riel-item:hover { background: var(--ds-riel-hover); } } /* Marca del sistema: el logo (tres rombos, app/nombre_sistema.py) y el nombre (barra superior y riel del teléfono) */ body.ui-v2 .ds-marca { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: var(--ds-radio-pildora); color: var(--ds-texto); text-decoration: none; white-space: nowrap; } body.ui-v2 .ds-marca:hover { color: var(--ds-texto); } body.ui-v2 .ds-marca-simbolo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--ds-superficie); color: var(--ds-texto); font-size: 20px; line-height: 1; } body.ui-v2 .ds-marca-logo { flex: none; display: block; width: 34px; height: 34px; } body.ui-v2 .ds-marca-texto { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: var(--ds-texto); } body.ui-v2 .ds-marca-texto b { font-weight: 700 !important; color: var(--ds-texto); letter-spacing: -0.01em; } /* 3c. Barra superior flotante y redondeada (como Merkaru) --------------- */ body.ui-v2 .ds-barra { position: sticky; top: var(--ds-e2); z-index: 1020; display: flex; align-items: center; gap: var(--ds-e5); height: calc(var(--ds-alto-barra) + 2px); /* alineada con el contenido: mismo ancho máximo (el de las tablas), centrada */ margin: var(--ds-e2) max(var(--ds-margen-pagina), calc((100% - var(--ds-ancho-datos)) / 2)) 0; padding: 0 8px 0 12px; background: var(--ds-barra-fondo); border: 1px solid var(--ds-borde-suave); border-radius: var(--ds-radio-dialogo); /* 2ª sombra = franja del fondo de la app sobre la barra: al desplazar, el contenido no asoma entre la barra y el borde de la ventana (va debajo de la sombra flotante, que se sigue viendo igual) */ box-shadow: var(--ds-sombra-flotante), 0 -12px 0 12px var(--ds-fondo); } body.ui-v2 .ds-barra-menu { margin-right: calc(-1 * var(--ds-e3)); } body.ui-v2 .ds-buscar { position: relative; flex: 1 1 auto; min-width: 0; /* en el teléfono se encoge (antes empujaba el avatar 2 px fuera) */ max-width: 560px; display: flex; align-items: center; } body.ui-v2 .ds-buscar[hidden] { display: none; } body.ui-v2 .ds-buscar-icono { position: absolute; left: 16px; color: var(--ds-texto-2); font-size: 20px; line-height: 1; pointer-events: none; } body.ui-v2 .ds-buscar-campo { width: 100%; min-width: 0; height: var(--ds-alto-buscador); padding: 0 44px 0 46px; border: 1px solid var(--ds-borde-fuerte); border-radius: var(--ds-radio-pildora); background: var(--ds-superficie); color: var(--ds-texto); font: inherit; font-size: var(--ds-tam-cuerpo); transition: background-color var(--ds-transicion), border-color var(--ds-transicion), box-shadow var(--ds-transicion); } body.ui-v2 .ds-buscar-campo::placeholder { color: var(--ds-texto-2); opacity: 1; } body.ui-v2 .ds-buscar-campo::-webkit-search-cancel-button { cursor: pointer; } body.ui-v2 .ds-buscar-campo:hover, body.ui-v2 .ds-buscar-campo.ds-f-hover { border-color: var(--ds-borde-fuerte); } body.ui-v2 .ds-buscar-campo:focus, body.ui-v2 .ds-buscar-campo.ds-f-foco { outline: none; background: var(--ds-superficie); border-color: var(--ds-acento); box-shadow: 0 0 0 3px var(--ds-anillo); } body.ui-v2 .ds-buscar-tecla { position: absolute; right: 14px; min-width: 22px; padding: 1px 6px; border: 1px solid var(--ds-borde-fuerte); border-radius: 6px; background: var(--ds-superficie); color: var(--ds-texto-2); font-family: var(--ds-fuente); font-size: var(--ds-tam-etiqueta); line-height: 1.5; text-align: center; box-shadow: none; } body.ui-v2 .ds-buscar-campo:focus ~ .ds-buscar-tecla, body.ui-v2 .ds-buscar-campo:not(:placeholder-shown) ~ .ds-buscar-tecla { display: none !important; } body.ui-v2 .ds-barra-derecha { margin-left: auto; display: flex; align-items: center; gap: var(--ds-e4); min-width: 0; } body.ui-v2 .ds-unidad { align-items: center; gap: var(--ds-e2); min-width: 0; max-width: 360px; color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); } body.ui-v2 .ds-unidad > .ti { font-size: 18px; line-height: 1; } body.ui-v2 .ds-unidad > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.ui-v2 .ds-avatar-boton { display: flex; align-items: center; gap: var(--ds-e2); height: var(--ds-alto-control); padding: 0 12px 0 3px; border: 1px solid var(--ds-borde); border-radius: var(--ds-radio-pildora); background: var(--ds-superficie); color: var(--ds-texto); font-weight: 500; transition: background-color var(--ds-transicion), border-color var(--ds-transicion); } body.ui-v2 .ds-avatar-boton:hover, body.ui-v2 .ds-avatar-boton.ds-f-hover, body.ui-v2 .ds-avatar-boton[aria-expanded="true"] { background: var(--ds-hover); border-color: var(--ds-borde-fuerte); } body.ui-v2 .ds-avatar { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); font-size: var(--ds-tam-etiqueta); font-weight: 600; letter-spacing: 0.02em; } body.ui-v2 .ds-avatar-lg { width: 40px; height: 40px; font-size: var(--ds-tam-tabla); } body.ui-v2 .ds-avatar-nombre { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.ui-v2 .ds-avatar-flecha { font-size: 16px; color: var(--ds-texto-2); } body.ui-v2 .ds-menu-usuario { min-width: 280px; } body.ui-v2 .ds-menu-usuario-cabeza { display: flex; gap: var(--ds-e3); align-items: flex-start; padding: 10px 10px 6px; } body.ui-v2 .ds-menu-usuario-datos { min-width: 0; } body.ui-v2 .ds-menu-usuario-nombre { font-weight: 600; margin-bottom: 2px; } body.ui-v2 .ds-menu-usuario-datos .ds-texto-suave { font-size: var(--ds-tam-tabla); line-height: 1.45; } @media (max-width: 767.98px) { body.ui-v2 .ds-barra { top: 8px; gap: var(--ds-e3); margin-top: 8px; padding-left: 6px; border-radius: var(--ds-radio-tarjeta); } body.ui-v2 .ds-barra-menu { margin-right: 0; } body.ui-v2 .ds-marca { padding-right: 0; } body.ui-v2 .ds-avatar-boton { padding-right: 8px; } body.ui-v2 .ds-barra-derecha { flex-shrink: 0; } /* el buscador cede el ancho, no el usuario */ } body.ui-v2 .ds-barra-derecha > .dropdown { flex: none; } /* 3d. Contenido --------------------------------------------------------- */ body.ui-v2 .ds-contenido { --ds-ancho-max: var(--ds-ancho-datos); flex: 1 1 auto; min-width: 0; /* ancho máximo: tablas 125em (~1750 px), centrado con la barra superior; detalle y formularios más angostos, alineados a la izquierda con ella */ max-width: calc(var(--ds-ancho-max) + 2 * var(--ds-margen-pagina)); margin-left: max(0px, calc((100% - var(--ds-ancho-datos)) / 2 - var(--ds-margen-pagina))); padding: var(--ds-e3) var(--ds-margen-pagina) 48px; outline: none; } /* Ancho por página: {% set ui_ancho = "detalle" %} (o "formulario", "completo") a nivel superior de la plantilla; por defecto "datos". */ body.ui-v2 .ds-contenido.ds-ancho-detalle { --ds-ancho-max: var(--ds-ancho-detalle); } body.ui-v2 .ds-contenido.ds-ancho-formulario { --ds-ancho-max: var(--ds-ancho-formulario); } body.ui-v2 .ds-contenido.ds-ancho-completo { max-width: none; margin-left: 0; } /* lo mismo dentro de una página (un bloque angosto en una página ancha) */ body.ui-v2 .ds-bloque-formulario { max-width: var(--ds-ancho-formulario); } body.ui-v2 .ds-bloque-detalle { max-width: var(--ds-ancho-detalle); } body.ui-v2 .ds-bloque-centrado { margin-left: auto; margin-right: auto; } /* Página cuya tabla llega al borde inferior (altoMaximo "auto"): el margen de abajo es el del marco, así la página no se desplaza en vertical. */ body.ui-v2 .ds-contenido:has(.tb-alto-auto) { padding-bottom: var(--tb-alto-auto-margen, 12px); } body.ui-v2 .ds-contenido:has(.tb-alto-auto) > .ds-encabezado { margin-bottom: var(--ds-e2); } /* y la barra de filtros de esa tabla, 8 px sobre el marco (densidad: 12 filas a 1440×790) */ body.ui-v2 .tb-alto-auto.tb-v2 > .tb-barra.ds-filtros { margin-bottom: var(--ds-e2); } body.ui-v2 .ds-mensajes { display: grid; gap: var(--ds-e2); margin: var(--ds-e3) var(--ds-margen-pagina) 0; } /* 4. Encabezado de página ================================================= */ /* Título 26/600, contador o subtítulo 14 gris debajo (una línea), "?" junto al título y acciones a la derecha, centradas con el bloque. */ body.ui-v2 .ds-encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-e3) var(--ds-e4); margin-bottom: var(--ds-e4); } /* Encabezado seguido de la barra de filtros de una lista: 8 px, como en la sábana y la lista de SIAF (§3d). Antes unas listas dejaban 8 px y otras 16 (Proveedores, Servicios, Abastecimiento, Catálogo). */ body.ui-v2 .ds-contenido > .ds-encabezado:has(+ .ds-filtros) { margin-bottom: var(--ds-e2); } /* Fase "todo" (menos cromo vertical): el contador o la línea de ayuda van en la MISMA línea que el título, alineados por la base del texto ("Sábana de Compras ⓘ 43 SIAF"); bajan a otra línea si no caben. */ body.ui-v2 .ds-encabezado-texto { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--ds-e3); min-width: 0; flex: 1 1 320px; } body.ui-v2 .ds-encabezado-titulo { display: flex; align-items: center; gap: var(--ds-e2); min-width: 0; } body.ui-v2 .ds-titulo { margin: 0; color: var(--ds-texto); font-size: var(--ds-tam-titulo); font-weight: 600; line-height: 1.23077; letter-spacing: -0.02em; } body.ui-v2 .ds-subtitulo { display: flex; align-items: baseline; gap: 6px; min-width: 0; min-height: 20px; margin: 0; color: var(--ds-texto-2); font-size: var(--ds-tam-cuerpo); line-height: 1.42858; white-space: nowrap; overflow: hidden; } body.ui-v2 .ds-contador { color: var(--ds-texto-2); font-size: var(--ds-tam-cuerpo); white-space: nowrap; } body.ui-v2 .ds-subtitulo-sep { color: var(--ds-texto-3); } body.ui-v2 .ds-linea-ayuda { min-width: 0; overflow: hidden; text-overflow: ellipsis; } body.ui-v2 .ds-encabezado-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-e2); margin-left: auto; } body.ui-v2 .ds-encabezado-acciones .ds-rotulo-en-linea { color: var(--ds-texto-2); margin-right: var(--ds-e1); } /* Botón "?" de ayuda */ body.ui-v2 .ds-ayuda { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ds-texto-3); font-size: 20px; line-height: 1; cursor: pointer; transition: background-color var(--ds-transicion), color var(--ds-transicion); } body.ui-v2 .ds-ayuda:hover, body.ui-v2 .ds-ayuda.ds-f-hover, body.ui-v2 .ds-ayuda[aria-expanded="true"] { background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); } body.ui-v2 .ds-seccion-titulo { margin: 0 0 var(--ds-e3); font-size: var(--ds-tam-seccion); font-weight: 600; } /* 5. Botones ============================================================== */ /* Alto 40 px, totalmente redondos. Primario relleno acento y texto blanco (máximo UNO por pantalla); secundario con borde; terciario solo texto. .ds-btn funciona solo o junto a .btn de Bootstrap. */ body.ui-v2 .ds-btn { --ds-btn-alto: var(--ds-alto-control); display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-e2); height: var(--ds-btn-alto); padding: 0 18px; border: 1px solid transparent; border-radius: var(--ds-radio-pildora); background: transparent; color: var(--ds-texto); font-family: var(--ds-fuente); font-size: var(--ds-tam-cuerpo); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; transition: background-color var(--ds-transicion), border-color var(--ds-transicion), color var(--ds-transicion), box-shadow var(--ds-transicion); } body.ui-v2 .ds-btn > .ti, body.ui-v2 .ds-btn > .bi { font-size: 18px; line-height: 1; margin-left: -2px; } body.ui-v2 .ds-btn:focus-visible, body.ui-v2 .ds-btn.ds-f-foco { outline: 2px solid var(--ds-acento-oscuro); outline-offset: 2px; box-shadow: none; } /* Primario */ body.ui-v2 .ds-btn-primario { background: var(--ds-relleno-primario); border-color: var(--ds-relleno-primario); color: var(--ds-texto-sobre-relleno); } body.ui-v2 .ds-btn-primario:hover, body.ui-v2 .ds-btn-primario.ds-f-hover { background: var(--ds-relleno-primario-hover); border-color: var(--ds-relleno-primario-hover); color: var(--ds-texto-sobre-relleno); } body.ui-v2 .ds-btn-primario:active, body.ui-v2 .ds-btn-primario.ds-f-activo { background: var(--ds-relleno-primario-activo); border-color: var(--ds-relleno-primario-activo); color: var(--ds-texto-sobre-relleno); } /* Secundario */ body.ui-v2 .ds-btn-secundario { background: var(--ds-superficie); border-color: var(--ds-borde-fuerte); color: var(--ds-texto); } body.ui-v2 .ds-btn-secundario:hover, body.ui-v2 .ds-btn-secundario.ds-f-hover { background: var(--ds-hover); border-color: var(--ds-borde-hover); color: var(--ds-texto); } body.ui-v2 .ds-btn-secundario:active, body.ui-v2 .ds-btn-secundario.ds-f-activo { background: var(--ds-neutro-fondo); border-color: var(--ds-borde-hover); color: var(--ds-texto); } /* Terciario: solo texto */ body.ui-v2 .ds-btn-terciario { background: transparent; border-color: transparent; color: var(--ds-acento-oscuro); padding: 0 12px; } body.ui-v2 .ds-btn-terciario:hover, body.ui-v2 .ds-btn-terciario.ds-f-hover { background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); } body.ui-v2 .ds-btn-terciario:active, body.ui-v2 .ds-btn-terciario.ds-f-activo { background: var(--ds-acento-claro-2); color: var(--ds-acento-oscuro); } /* Fantasma (neutro, solo texto; nombre de la primera versión) */ body.ui-v2 .ds-btn-fantasma { background: transparent; border-color: transparent; color: var(--ds-texto-2); padding: 0 12px; } body.ui-v2 .ds-btn-fantasma:hover, body.ui-v2 .ds-btn-fantasma.ds-f-hover { background: var(--ds-hover); color: var(--ds-texto); } body.ui-v2 .ds-btn-fantasma:active, body.ui-v2 .ds-btn-fantasma.ds-f-activo { background: var(--ds-neutro-fondo); color: var(--ds-texto); } body.ui-v2 .ds-btn-fantasma.ds-btn-acento { color: var(--ds-acento-oscuro); } body.ui-v2 .ds-btn-fantasma.ds-btn-acento:hover { background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); } /* Peligro */ body.ui-v2 .ds-btn-peligro { background: var(--ds-peligro); border-color: var(--ds-peligro); color: var(--ds-texto-sobre-relleno); } body.ui-v2 .ds-btn-peligro:hover, body.ui-v2 .ds-btn-peligro.ds-f-hover { background: var(--ds-peligro-hover); border-color: var(--ds-peligro-hover); color: var(--ds-texto-sobre-relleno); } body.ui-v2 .ds-btn-peligro:active, body.ui-v2 .ds-btn-peligro.ds-f-activo { background: var(--ds-peligro-activo); border-color: var(--ds-peligro-activo); color: var(--ds-texto-sobre-relleno); } body.ui-v2 .ds-btn-peligro-suave { background: var(--ds-superficie); border-color: var(--ds-error-borde); color: var(--ds-error); } body.ui-v2 .ds-btn-peligro-suave:hover, body.ui-v2 .ds-btn-peligro-suave.ds-f-hover { background: var(--ds-error-fondo); border-color: var(--ds-error-borde); color: var(--ds-error); } body.ui-v2 .ds-btn-peligro-suave:active, body.ui-v2 .ds-btn-peligro-suave.ds-f-activo { background: var(--ds-error-fondo-2); border-color: var(--ds-error-borde-2); color: var(--ds-error); } /* Tamaños */ body.ui-v2 .ds-btn-sm { --ds-btn-alto: 32px; padding: 0 14px; gap: 6px; font-size: var(--ds-tam-tabla); } body.ui-v2 .ds-btn-sm > .ti, body.ui-v2 .ds-btn-sm > .bi { font-size: 16px; } body.ui-v2 .ds-btn-lg { --ds-btn-alto: 44px; padding: 0 22px; font-size: 15px; } body.ui-v2 .ds-btn-bloque { display: flex; width: 100%; } /* Solo ícono (siempre con aria-label): círculo de 40 px */ body.ui-v2 .ds-btn-icono { flex: none; display: inline-grid; place-items: center; width: var(--ds-alto-control); height: var(--ds-alto-control); padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--ds-texto-2); font-size: 20px; line-height: 1; cursor: pointer; transition: background-color var(--ds-transicion), color var(--ds-transicion), border-color var(--ds-transicion); } body.ui-v2 .ds-btn-icono:hover, body.ui-v2 .ds-btn-icono.ds-f-hover, body.ui-v2 .ds-btn-icono[aria-expanded="true"] { background: var(--ds-hover); color: var(--ds-texto); } body.ui-v2 .ds-btn-icono:active, body.ui-v2 .ds-btn-icono.ds-f-activo { background: var(--ds-neutro-fondo); color: var(--ds-texto); } body.ui-v2 .ds-btn-icono:focus-visible, body.ui-v2 .ds-btn-icono.ds-f-foco { outline: 2px solid var(--ds-acento-oscuro); outline-offset: 2px; } body.ui-v2 .ds-btn-icono.ds-btn-sm { width: 32px; height: 32px; font-size: 18px; } body.ui-v2 .ds-btn-icono.ds-btn-borde { border-color: var(--ds-borde-fuerte); background: var(--ds-superficie); } /* Deshabilitado */ body.ui-v2 .ds-btn:disabled, body.ui-v2 .ds-btn.disabled, body.ui-v2 .ds-btn[aria-disabled="true"] { background: var(--ds-neutro-fondo); border-color: var(--ds-neutro-fondo); color: var(--ds-texto-3); cursor: not-allowed; pointer-events: none; box-shadow: none; } /* primario: tinte claro del relleno primario y texto blanco (como "Continuar" de Merkaru) */ body.ui-v2 .ds-btn-primario:disabled, body.ui-v2 .ds-btn-primario.disabled, body.ui-v2 .ds-btn-primario[aria-disabled="true"] { background: var(--ds-relleno-primario-apagado); border-color: var(--ds-relleno-primario-apagado); color: var(--ds-texto-sobre-relleno); } body.ui-v2 .ds-btn-secundario:disabled, body.ui-v2 .ds-btn-secundario.disabled, body.ui-v2 .ds-btn-secundario[aria-disabled="true"], body.ui-v2 .ds-btn-peligro-suave:disabled, body.ui-v2 .ds-btn-peligro-suave.disabled { background: var(--ds-superficie); border-color: var(--ds-borde); } body.ui-v2 .ds-btn-terciario:disabled, body.ui-v2 .ds-btn-terciario.disabled, body.ui-v2 .ds-btn-terciario[aria-disabled="true"], body.ui-v2 .ds-btn-fantasma:disabled, body.ui-v2 .ds-btn-fantasma.disabled, body.ui-v2 .ds-btn-icono:disabled, body.ui-v2 .ds-btn-icono.disabled, body.ui-v2 .ds-btn-icono[aria-disabled="true"] { background: transparent; border-color: transparent; color: var(--ds-texto-3); cursor: not-allowed; pointer-events: none; } /* Cargando: UI.cargando(boton, true) */ body.ui-v2 .ds-btn.cargando, body.ui-v2 .btn.cargando { position: relative; color: transparent !important; pointer-events: none; } /* opacity y no visibility: el rótulo sigue siendo el nombre accesible del botón */ body.ui-v2 .ds-btn.cargando > *, body.ui-v2 .btn.cargando > * { opacity: 0; } body.ui-v2 .ds-btn.cargando::after, body.ui-v2 .btn.cargando::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid var(--ds-texto-2); border-right-color: transparent; border-radius: 50%; animation: ds-girar 700ms linear infinite; } body.ui-v2 .ds-btn-primario.cargando::after, body.ui-v2 .ds-btn-peligro.cargando::after, body.ui-v2 .btn-primary.cargando::after, body.ui-v2 .btn-danger.cargando::after { border-color: var(--ds-texto-sobre-relleno); border-right-color: transparent; } @keyframes ds-girar { to { transform: rotate(360deg); } } @keyframes ds-aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } body.ui-v2 .ds-grupo-botones { display: inline-flex; flex-wrap: wrap; gap: var(--ds-e2); align-items: center; } /* Bootstrap .btn dentro del ámbito: mismas medidas y la misma forma */ body.ui-v2 .btn { --bs-btn-font-family: var(--ds-fuente); --bs-btn-font-weight: 500; --bs-btn-font-size: var(--ds-tam-cuerpo); --bs-btn-line-height: 1.42858; /* 20 px con 14 px; sin unidad: crece si el navegador agranda el texto */ --bs-btn-padding-x: 18px; --bs-btn-padding-y: 9px; --bs-btn-border-radius: var(--ds-radio-pildora); --bs-btn-focus-box-shadow: 0 0 0 3px var(--ds-anillo); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color var(--ds-transicion), border-color var(--ds-transicion), color var(--ds-transicion), box-shadow var(--ds-transicion); } body.ui-v2 .btn-sm, body.ui-v2 .btn-group-sm > .btn { --bs-btn-padding-x: 14px; --bs-btn-padding-y: 6px; --bs-btn-font-size: var(--ds-tam-tabla); --bs-btn-line-height: 1.38462; /* 18 px con 13 px */ --bs-btn-border-radius: var(--ds-radio-pildora); } body.ui-v2 .btn-lg { --bs-btn-font-size: 15px; --bs-btn-padding-y: 11px; --bs-btn-padding-x: 22px; } body.ui-v2 .btn-group > .btn { border-radius: 0; } body.ui-v2 .btn-group > .btn:first-child, body.ui-v2 .btn-group > .btn-check:first-child + .btn { border-top-left-radius: var(--ds-radio-pildora); border-bottom-left-radius: var(--ds-radio-pildora); } body.ui-v2 .btn-group > .btn:last-child { border-top-right-radius: var(--ds-radio-pildora); border-bottom-right-radius: var(--ds-radio-pildora); } body.ui-v2 .btn-primary { --bs-btn-color: var(--ds-texto-sobre-relleno); --bs-btn-bg: var(--ds-relleno-primario); --bs-btn-border-color: var(--ds-relleno-primario); --bs-btn-hover-color: var(--ds-texto-sobre-relleno); --bs-btn-hover-bg: var(--ds-relleno-primario-hover); --bs-btn-hover-border-color: var(--ds-relleno-primario-hover); --bs-btn-active-color: var(--ds-texto-sobre-relleno); --bs-btn-active-bg: var(--ds-relleno-primario-activo); --bs-btn-active-border-color: var(--ds-relleno-primario-activo); --bs-btn-disabled-color: var(--ds-texto-sobre-relleno); --bs-btn-disabled-bg: var(--ds-relleno-primario-apagado); --bs-btn-disabled-border-color: var(--ds-relleno-primario-apagado); --bs-btn-disabled-opacity: 1; --bs-btn-focus-shadow-rgb: 26, 111, 160; } body.ui-v2 .btn-outline-primary { --bs-btn-color: var(--ds-acento-oscuro); --bs-btn-bg: var(--ds-superficie); --bs-btn-border-color: var(--ds-borde-fuerte); --bs-btn-hover-color: var(--ds-acento-oscuro); --bs-btn-hover-bg: var(--ds-acento-claro); --bs-btn-hover-border-color: var(--ds-acento-borde); --bs-btn-active-color: var(--ds-acento-oscuro); --bs-btn-active-bg: var(--ds-acento-claro-2); --bs-btn-active-border-color: var(--ds-acento-borde); --bs-btn-disabled-color: var(--ds-texto-3); --bs-btn-disabled-bg: var(--ds-superficie); --bs-btn-disabled-border-color: var(--ds-borde); --bs-btn-disabled-opacity: 1; --bs-btn-focus-shadow-rgb: 26, 111, 160; } body.ui-v2 .btn-secondary, body.ui-v2 .btn-outline-secondary, body.ui-v2 .btn-light, body.ui-v2 .btn-outline-dark, body.ui-v2 .btn-dark, body.ui-v2 .btn-outline-light { --bs-btn-color: var(--ds-texto); --bs-btn-bg: var(--ds-superficie); --bs-btn-border-color: var(--ds-borde-fuerte); --bs-btn-hover-color: var(--ds-texto); --bs-btn-hover-bg: var(--ds-hover); --bs-btn-hover-border-color: var(--ds-borde-hover); --bs-btn-active-color: var(--ds-texto); --bs-btn-active-bg: var(--ds-neutro-fondo); --bs-btn-active-border-color: var(--ds-borde-hover); --bs-btn-disabled-color: var(--ds-texto-3); --bs-btn-disabled-bg: var(--ds-superficie); --bs-btn-disabled-border-color: var(--ds-borde); --bs-btn-disabled-opacity: 1; --bs-btn-focus-shadow-rgb: 26, 111, 160; } body.ui-v2 .btn-danger { --bs-btn-bg: var(--ds-error); --bs-btn-border-color: var(--ds-error); --bs-btn-hover-bg: var(--ds-peligro-hover); --bs-btn-hover-border-color: var(--ds-peligro-hover); --bs-btn-active-bg: var(--ds-peligro-activo); --bs-btn-active-border-color: var(--ds-peligro-activo); --bs-btn-disabled-color: var(--ds-texto-3); --bs-btn-disabled-bg: var(--ds-neutro-fondo); --bs-btn-disabled-border-color: var(--ds-neutro-fondo); --bs-btn-disabled-opacity: 1; } body.ui-v2 .btn-outline-danger { --bs-btn-color: var(--ds-error); --bs-btn-bg: var(--ds-superficie); --bs-btn-border-color: var(--ds-error-borde); --bs-btn-hover-color: var(--ds-error); --bs-btn-hover-bg: var(--ds-error-fondo); --bs-btn-hover-border-color: var(--ds-error-borde); --bs-btn-active-color: var(--ds-error); --bs-btn-active-bg: var(--ds-error-fondo-2); --bs-btn-active-border-color: var(--ds-error-borde-2); } body.ui-v2 .btn-success, body.ui-v2 .btn-outline-success { --bs-btn-color: var(--ds-exito); --bs-btn-bg: var(--ds-exito-fondo); --bs-btn-border-color: var(--ds-exito-borde); --bs-btn-hover-color: var(--ds-exito); --bs-btn-hover-bg: var(--ds-exito-fondo-2); --bs-btn-hover-border-color: var(--ds-exito-borde-2); --bs-btn-active-color: var(--ds-exito); --bs-btn-active-bg: var(--ds-exito-borde); --bs-btn-active-border-color: var(--ds-exito-borde-2); } body.ui-v2 .btn-warning, body.ui-v2 .btn-outline-warning { --bs-btn-color: var(--ds-aviso); --bs-btn-bg: var(--ds-aviso-fondo); --bs-btn-border-color: var(--ds-aviso-borde); --bs-btn-hover-color: var(--ds-aviso); --bs-btn-hover-bg: var(--ds-aviso-fondo-2); --bs-btn-hover-border-color: var(--ds-aviso-borde-2); } body.ui-v2 .btn-link { --bs-btn-color: var(--ds-acento-oscuro); --bs-btn-hover-color: var(--ds-acento-fuerte-activo); --bs-btn-active-color: var(--ds-acento-fuerte-activo); text-underline-offset: 2px; } /* 6. Chips y píldoras de filtro =========================================== */ body.ui-v2 { /* derivados locales de chips, filtros y tablas (no son tokens del contrato) */ --tb-pildora-fondo: var(--ds-control-fondo); --tb-pildora-hover: var(--ds-control-hover); --tb-borde-hover: var(--ds-borde-hover); /* anillo de foco de chips, píldoras, "⋯", encabezados que ordenan, KPI: 2 px del color de la superficie + 2 px de acento oscuro (5.5:1 sobre blanco; el celeste translúcido de antes daba 1.3:1, bajo el 3:1 de WCAG 1.4.11). Los CAMPOS de texto siguen con el anillo suave de §11 (borde acento + --ds-anillo): tienen cursor y borde que cambian. */ --tb-anillo: 0 0 0 2px var(--ds-superficie), 0 0 0 4px var(--ds-acento-oscuro); --tb-anillo-campo: 0 0 0 3px var(--ds-anillo); --tb-sombra-panel: var(--ds-sombra-panel); --tb-relleno-hover: var(--ds-relleno-primario-hover); /* chip activo al pasar */ --tb-alto-auto-margen: 8px; /* altoMaximo "auto": aire bajo el marco (tabla.js lo lee) */ } /* 6a. Barra de filtros ---------------------------------------------------- */ body.ui-v2 .ds-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-e2, 8px); margin: 0 0 var(--ds-e3, 12px); } body.ui-v2 .ds-filtros-separador { width: 1px; height: 20px; margin: 0 var(--ds-e1, 4px); background: var(--ds-borde); } body.ui-v2 .ds-chips, body.ui-v2 .ds-pildoras { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-e2, 8px); } /* Barra de TablaDatos: filtros a la izquierda (se acomodan en otra línea si no caben) y contador + densidad fijos arriba a la derecha. */ body.ui-v2 .tb-v2 > .tb-barra { flex-wrap: nowrap; align-items: flex-start; gap: var(--ds-e4, 16px); } body.ui-v2 .tb-barra-filtros { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--ds-e2, 8px); min-width: 0; } body.ui-v2 .tb-barra-filtros > .ds-chips + .ds-pildoras { margin-left: var(--ds-e2, 8px); } body.ui-v2 .tb-barra-filtros > .ds-pildoras:empty, body.ui-v2 .tb-barra-filtros > .tb-chips:empty { display: none; } body.ui-v2 .tb-barra-filtros > .tb-chips { display: flex; flex-wrap: wrap; gap: var(--ds-e1, 4px); } body.ui-v2 .tb-barra-fin { display: flex; flex: none; align-items: center; gap: var(--ds-e3, 12px); min-height: var(--ds-alto-chip, 36px); margin-left: auto; } /* Con selector de orden (opción ordenes): dos líneas fijas. Arriba los chips (se acomodan en más líneas solo si no caben) con "Quitar filtros" y la densidad a la derecha; abajo las píldoras, "Más filtros" y, a la derecha, "Ordenar: …" (como el "Sort" de la fila de píldoras). Cada línea mide su propio ancho: la píldora de orden no le quita espacio a los chips. .tb-barra-filtros se "abre" (display: contents) para que sus hijos se repartan en las dos líneas; ::after es el salto de línea (alto 0). Como el salto suma dos separaciones, la primera línea devuelve una (-8 px abajo): entre líneas quedan 8 px, también si "Ordenar" baja a otra línea. */ body.ui-v2 .tb-v2 > .tb-barra.tb-barra-con-orden { flex-wrap: wrap; align-items: center; gap: var(--ds-e2, 8px); } body.ui-v2 .tb-barra-con-orden > .tb-barra-filtros { display: contents; } body.ui-v2 .tb-barra-con-orden > .tb-barra-filtros > .tb-buscador-caja { order: 1; margin-bottom: calc(-1 * var(--ds-e2, 8px)); } body.ui-v2 .tb-barra-con-orden > .tb-barra-filtros > .ds-chips { order: 2; flex: 1 1 0; min-width: 0; margin-bottom: calc(-1 * var(--ds-e2, 8px)); } body.ui-v2 .tb-barra-con-orden > .tb-barra-fin { order: 3; align-self: flex-start; margin-left: var(--ds-e2, 8px); margin-bottom: calc(-1 * var(--ds-e2, 8px)); } body.ui-v2 .tb-barra-con-orden::after { content: ""; order: 4; flex: 0 0 100%; height: 0; } body.ui-v2 .tb-barra-con-orden > .tb-barra-filtros > .ds-pildoras { order: 5; margin-left: 0; } body.ui-v2 .tb-barra-con-orden > .tb-barra-filtros > .ds-mas-filtros { order: 6; } body.ui-v2 .tb-barra-con-orden > .tb-barra-filtros > .tb-chips { order: 7; } body.ui-v2 .tb-barra-con-orden > .ds-pildora-orden { order: 8; margin-left: auto; } /* píldora de orden: ícono de flechas gris; en el panel, la opción elegida con ✓ acento */ body.ui-v2 .ds-pildora-orden .ds-pildora-orden-icono { color: var(--ds-texto-2); font-size: 16px; } body.ui-v2 .ds-pildora-orden .ds-pildora-filtro-etiqueta { color: var(--ds-neutro); } /* "Ordenar:" sobre el gris de la píldora: 6.75:1 */ body.ui-v2 .ds-mas-item.ds-orden-item-activo > .ti-check { color: var(--ds-acento-oscuro); } /* Buscador propio de la tabla (cuando no manda la barra superior) */ body.ui-v2 .tb-buscador-caja { position: relative; display: inline-flex; align-items: center; margin: 0; } body.ui-v2 .tb-buscador-caja > .ti { position: absolute; left: 12px; color: var(--ds-texto-3); font-size: 16px; pointer-events: none; } body.ui-v2 .tb-v2 .tb-buscador, body.ui-v2 .tb-buscador-caja > .tb-buscador { width: 240px; max-width: 100%; height: var(--ds-alto-chip, 36px); padding: 0 14px 0 36px; border: 1px solid var(--ds-borde-fuerte); border-radius: var(--ds-radio-pildora, 999px); background: var(--ds-superficie); color: var(--ds-texto); font-family: var(--ds-fuente, "Inter", system-ui, sans-serif); font-size: 13px; transition: border-color var(--ds-transicion, 150ms ease), box-shadow var(--ds-transicion, 150ms ease); } body.ui-v2 .tb-v2 .tb-buscador::placeholder { color: var(--ds-texto-2); } body.ui-v2 .tb-v2 .tb-buscador:hover { border-color: var(--tb-borde-hover); } body.ui-v2 .tb-v2 .tb-buscador:focus { border-color: var(--ds-acento); box-shadow: var(--tb-anillo-campo); outline: 0; } /* tabla vieja (sin v2) dentro de una página ui_v2 */ body.ui-v2 .tb:not(.tb-v2) > .tb-barra { gap: var(--ds-e2, 8px) !important; margin-bottom: var(--ds-e3, 12px) !important; } body.ui-v2 .tb:not(.tb-v2) .tb-buscador { max-width: 280px; border-radius: var(--ds-radio-campo, 12px); } /* El buscador de la barra superior reemplaza al de la tabla principal (ui.js) */ body.ui-v2 .tb-buscador.ds-oculto-por-barra { display: none !important; } /* 6b. Chips de estado ----------------------------------------------------- */ body.ui-v2 .ds-chip { display: inline-flex; align-items: center; gap: var(--ds-e2, 8px); height: var(--ds-alto-chip, 36px); padding: 0 var(--ds-e4, 16px); border: 1px solid var(--ds-borde-fuerte); /* Corrección 2: borde de control (3:1), fondo gris claro */ border-radius: var(--ds-radio-pildora, 999px); background: var(--ds-control-fondo); color: var(--ds-texto); font-family: var(--ds-fuente, "Inter", system-ui, sans-serif); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--ds-transicion, 150ms ease), border-color var(--ds-transicion, 150ms ease), color var(--ds-transicion, 150ms ease), box-shadow var(--ds-transicion, 150ms ease); } body.ui-v2 a.ds-chip { text-decoration: none; } /* chip como enlace (índice de /estilo): sin subrayado */ body.ui-v2 a.ds-chip:hover { color: var(--ds-texto); } body.ui-v2 .ds-chip:hover, body.ui-v2 .ds-chip.ds-f-hover { border-color: var(--tb-borde-hover); background: var(--ds-control-hover); } body.ui-v2 .ds-chip:focus-visible, body.ui-v2 .ds-chip.ds-f-foco { outline: 0; box-shadow: var(--tb-anillo); border-color: var(--ds-acento); } /* activo: relleno primario #1a6fa0 y texto blanco (token --ds-relleno-primario; el celeste no lleva texto encima) */ body.ui-v2 .ds-chip.ds-chip-activo, body.ui-v2 .ds-chip.activo, body.ui-v2 .ds-chip[aria-pressed="true"], body.ui-v2 .ds-chip.ds-f-activo { border-color: var(--ds-relleno-primario); background: var(--ds-relleno-primario); color: var(--ds-texto-sobre-relleno); } body.ui-v2 .ds-chip.ds-chip-activo:hover, body.ui-v2 .ds-chip.activo:hover, body.ui-v2 .ds-chip[aria-pressed="true"]:hover, body.ui-v2 .ds-chip.ds-f-activo.ds-f-hover { border-color: var(--tb-relleno-hover); background: var(--tb-relleno-hover); } body.ui-v2 .ds-chip:disabled, body.ui-v2 .ds-chip.disabled, body.ui-v2 .ds-chip[aria-disabled="true"] { border-color: var(--ds-borde); background: var(--ds-superficie); color: var(--ds-texto-3); cursor: not-allowed; pointer-events: none; box-shadow: none; } body.ui-v2 .ds-chip-conteo { color: var(--ds-texto-2); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; } body.ui-v2 .ds-chip-conteo:empty { display: none; } body.ui-v2 .ds-chip.ds-chip-activo .ds-chip-conteo, body.ui-v2 .ds-chip.activo .ds-chip-conteo, body.ui-v2 .ds-chip[aria-pressed="true"] .ds-chip-conteo, body.ui-v2 .ds-chip.ds-f-activo .ds-chip-conteo { color: var(--ds-texto-sobre-relleno-2); } /* 4.78:1 sobre #1a6fa0 */ body.ui-v2 .ds-chip:disabled .ds-chip-conteo, body.ui-v2 .ds-chip[aria-disabled="true"] .ds-chip-conteo { color: var(--ds-texto-3); } /* 6c. Píldoras de filtro desplegables ------------------------------------- */ /* Dos formas: Adjudicado Una línea; si no cabe, la píldora del estado se recorta primero. */ body.ui-v2 .ds-numero { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; white-space: nowrap; vertical-align: middle; } body.ui-v2 .ds-numero > * { flex: none; } body.ui-v2 .ds-numero-valor { display: inline-flex; align-items: center; gap: 3px; margin: 0 -3px; padding: 0 3px; border: 0; border-radius: 6px; background: transparent; color: var(--ds-texto); font-family: var(--ds-fuente); font-size: var(--ds-tam-tabla); font-weight: 500; line-height: 1.53847; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; transition: color var(--ds-transicion), background-color var(--ds-transicion); } body.ui-v2 button.ds-numero-valor, body.ui-v2 a.ds-numero-valor { cursor: pointer; } body.ui-v2 button.ds-numero-valor:hover, body.ui-v2 a.ds-numero-valor:hover, body.ui-v2 .ds-numero-valor.ds-f-hover { color: var(--ds-acento-oscuro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } body.ui-v2 .ds-numero-valor:focus-visible, body.ui-v2 .ds-numero-valor.ds-f-foco { outline: 2px solid var(--ds-acento-oscuro); outline-offset: 1px; } body.ui-v2 .ds-numero-valor[aria-expanded="true"], body.ui-v2 .ds-numero-valor.ds-f-activo { background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); } /* marca de "compartido" (ti-link) junto al número */ body.ui-v2 .ds-numero-marca { flex: none; color: var(--ds-texto-3); font-size: 14px; line-height: 1; } body.ui-v2 .ds-numero-valor:hover .ds-numero-marca { color: inherit; } /* píldora del estado: tamaño sm (20 px). Fase "todo": entera (los estados son rótulos cortos: "Adjudicado", "No adjudicado", "Pendiente en OCDS"); el tope en em solo corta un texto anómalo, y crece si el navegador agranda el texto. */ body.ui-v2 .ds-pildora.ds-numero-estado { display: inline-block; /* para el "…"; alto y relleno, los de §7 */ flex: 0 1 auto; min-width: 4em; max-width: var(--ds-numero-estado-max, 16em); overflow: hidden; text-overflow: ellipsis; } /* números anteriores (NOG u OC que ya no es el vigente): atenuados */ body.ui-v2 .ds-numero-anterior { opacity: 0.66; } /* botón mini (24 px): "+ NOG", "+ OC" dentro de la celda. */ body.ui-v2 .ds-btn.ds-btn-mini { --ds-btn-alto: 24px; gap: 3px; padding: 0 8px; font-size: var(--ds-tam-etiqueta); } body.ui-v2 .ds-btn.ds-btn-mini > .ti, body.ui-v2 .ds-btn.ds-btn-mini > .bi { margin-left: -2px; font-size: 14px; } /* en la celda de acciones: acción principal un poco más angosta */ body.ui-v2 .ds-celda-acciones .ds-btn.ds-btn-sm:not(.ds-btn-icono) { padding: 0 12px; } /* 23c. Disparador "+N" ---------------------------------------------------- */ /* Abre un popover con el resto (23g). Sin acción: . */ body.ui-v2 .ds-mas { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 20px; padding: 2px 6px; border: 0; border-radius: var(--ds-radio-pildora); background: var(--ds-neutro-fondo); color: var(--ds-neutro); font-family: var(--ds-fuente); font-size: var(--ds-tam-etiqueta); font-weight: 500; line-height: 1.33334; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: middle; cursor: default; transition: background-color var(--ds-transicion), color var(--ds-transicion); } /* área de toque de 24 px sin cambiar lo que se ve */ body.ui-v2 button.ds-mas::after { content: ""; position: absolute; inset: -2px -1px; border-radius: inherit; } body.ui-v2 button.ds-mas { cursor: pointer; } body.ui-v2 button.ds-mas:hover, body.ui-v2 .ds-mas.ds-f-hover { background: var(--ds-neutro-activo); color: var(--ds-texto); } body.ui-v2 .ds-mas[aria-expanded="true"], body.ui-v2 .ds-mas.ds-f-activo { background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); } body.ui-v2 .ds-mas:focus-visible, body.ui-v2 .ds-mas.ds-f-foco { outline: 2px solid var(--ds-acento-oscuro); outline-offset: 1px; } body.ui-v2 .ds-mas:disabled, body.ui-v2 .ds-mas[aria-disabled="true"] { background: var(--ds-neutro-fondo); color: var(--ds-texto-3); cursor: not-allowed; } /* 23d. Etiqueta de contorno (FR, 182, CA) --------------------------------- */ /* Pequeña, solo borde: marca un atributo, no un estado (los estados son píldoras llenas). FR */ body.ui-v2 .ds-etiqueta { flex: none; display: inline-flex; align-items: center; min-height: 18px; padding: 0 6px; border: 1px solid var(--ds-borde-fuerte); border-radius: var(--ds-radio-pildora); background: transparent; color: var(--ds-texto-2); font-family: var(--ds-fuente); font-size: 11px; font-weight: 600; line-height: 1.45455; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: middle; } body.ui-v2 .ds-etiqueta-info { border-color: var(--ds-acento-borde); color: var(--ds-info); } body.ui-v2 .ds-etiqueta-aviso { border-color: var(--ds-aviso-borde-2); color: var(--ds-aviso); } body.ui-v2 .ds-etiqueta-exito { border-color: var(--ds-exito-borde-2); color: var(--ds-exito); } body.ui-v2 .ds-etiqueta-error { border-color: var(--ds-error-borde-2); color: var(--ds-error); } body.ui-v2 .ds-etiqueta-neutro { border-color: var(--ds-borde-fuerte); color: var(--ds-texto-2); } /* 23e. Ícono de estado e ícono enlace ------------------------------------- */ /* Ícono Tabler de 14 px en un círculo suave de 20 px del color del estado (área de toque 24). Como botón abre algo (un diálogo, un detalle); siempre con title y aria-label con el texto del estado. Tonos: -aviso (pendiente) · -info (en curso) · -exito (listo) · -neutro (no aplica) · -error */ body.ui-v2 .ds-icono-estado { --ds-ie-fondo: var(--ds-neutro-fondo); --ds-ie-color: var(--ds-texto-2); position: relative; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--ds-ie-fondo); color: var(--ds-ie-color); font-size: 14px; line-height: 1; text-decoration: none; vertical-align: middle; transition: background-color var(--ds-transicion), box-shadow var(--ds-transicion); } body.ui-v2 .ds-icono-estado > .ti, body.ui-v2 .ds-icono-estado > .bi { font-size: 14px; line-height: 1; } body.ui-v2 button.ds-icono-estado, body.ui-v2 a.ds-icono-estado { cursor: pointer; } body.ui-v2 button.ds-icono-estado::after, body.ui-v2 a.ds-icono-estado::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; } body.ui-v2 button.ds-icono-estado:hover, body.ui-v2 a.ds-icono-estado:hover, body.ui-v2 .ds-icono-estado.ds-f-hover { background: color-mix(in srgb, var(--ds-ie-fondo) 82%, var(--ds-ie-color)); color: var(--ds-ie-color); } body.ui-v2 .ds-icono-estado[aria-expanded="true"], body.ui-v2 .ds-icono-estado.ds-f-activo { box-shadow: 0 0 0 2px var(--ds-superficie), 0 0 0 3px var(--ds-ie-color); } body.ui-v2 .ds-icono-estado:focus-visible, body.ui-v2 .ds-icono-estado.ds-f-foco { outline: 2px solid var(--ds-acento-oscuro); outline-offset: 2px; } body.ui-v2 .ds-icono-estado:disabled, body.ui-v2 .ds-icono-estado[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } body.ui-v2 .ds-icono-estado-aviso { --ds-ie-fondo: var(--ds-aviso-fondo); --ds-ie-color: var(--ds-aviso); } body.ui-v2 .ds-icono-estado-info { --ds-ie-fondo: var(--ds-info-fondo); --ds-ie-color: var(--ds-info); } body.ui-v2 .ds-icono-estado-exito { --ds-ie-fondo: var(--ds-exito-fondo); --ds-ie-color: var(--ds-exito); } body.ui-v2 .ds-icono-estado-error { --ds-ie-fondo: var(--ds-error-fondo); --ds-ie-color: var(--ds-error); } body.ui-v2 .ds-icono-estado-neutro { --ds-ie-fondo: var(--ds-neutro-fondo); --ds-ie-color: var(--ds-texto-2); } /* Ícono enlace pequeño junto a un dato (p. ej. el PDF del SIAF): */ body.ui-v2 .ds-icono-enlace { position: relative; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ds-texto-3); font-size: 15px; line-height: 1; text-decoration: none; vertical-align: middle; cursor: pointer; transition: background-color var(--ds-transicion), color var(--ds-transicion); } body.ui-v2 .ds-icono-enlace > .ti, body.ui-v2 .ds-icono-enlace > .bi { font-size: 15px; line-height: 1; } body.ui-v2 .ds-icono-enlace::after { content: ""; position: absolute; inset: -2px; border-radius: 8px; } body.ui-v2 .ds-icono-enlace:hover, body.ui-v2 .ds-icono-enlace.ds-f-hover { background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); } body.ui-v2 .ds-icono-enlace:focus-visible, body.ui-v2 .ds-icono-enlace.ds-f-foco { outline: 2px solid var(--ds-acento-oscuro); outline-offset: 1px; color: var(--ds-acento-oscuro); } /* 23f. Select en la celda y anillo de atención ---------------------------- */ /* */ body.ui-v2 .ds-atencion, body.ui-v2 .form-select.ds-atencion, body.ui-v2 .form-control.ds-atencion { border-color: var(--ds-acento); box-shadow: 0 0 0 3px var(--ds-anillo); } body.ui-v2 .form-select.ds-atencion:hover:not(:disabled):not(:focus), body.ui-v2 .form-control.ds-atencion:hover:not(:disabled):not(:focus), body.ui-v2 .ds-atencion.ds-f-hover { border-color: var(--ds-acento-oscuro); } body.ui-v2 .form-select.ds-atencion:focus, body.ui-v2 .form-control.ds-atencion:focus, body.ui-v2 .ds-atencion:focus-visible, body.ui-v2 .ds-atencion.ds-f-foco { outline: none; border-color: var(--ds-acento-oscuro); box-shadow: 0 0 0 3px var(--ds-anillo-fuerte); } /* 23g. Popover ------------------------------------------------------------ */ /* Contenedor: el de Bootstrap con customClass: "ds-popover", o un elemento propio .ds-popover-flotante (lo posiciona el JS). Contenido:
NOG 24582220 Adjudicado
Datos al
25/09/2026 06:10
…

…

…

*/ body.ui-v2 .popover.ds-popover { --bs-popover-max-width: 340px; --bs-popover-font-size: var(--ds-tam-tabla); --bs-popover-border-radius: 14px; --bs-popover-inner-border-radius: 13px; --bs-popover-header-padding-x: 14px; --bs-popover-header-padding-y: 12px; --bs-popover-header-font-size: var(--ds-tam-tabla); --bs-popover-body-padding-x: 14px; --bs-popover-body-padding-y: 12px; --bs-popover-body-color: var(--ds-texto); } body.ui-v2 .popover.ds-popover .popover-header { padding-bottom: 0; } body.ui-v2 .ds-popover-flotante { position: absolute; z-index: 1070; /* sobre menús (1040) y modales (1055), como los popovers de Bootstrap */ max-width: min(340px, calc(100vw - 16px)); padding: 12px 14px; border: 1px solid var(--ds-borde); border-radius: 14px; background: var(--ds-superficie); box-shadow: var(--ds-sombra-menu); color: var(--ds-texto); font-family: var(--ds-fuente); font-size: var(--ds-tam-tabla); line-height: 1.38462; animation: ds-aparecer 150ms ease-out; } body.ui-v2 .ds-popover-flotante[hidden] { display: none; } body.ui-v2 .ds-popover-detalle { display: flex; flex-direction: column; gap: 8px; min-width: 200px; color: var(--ds-texto); font-size: var(--ds-tam-tabla); line-height: 1.38462; text-align: left; } /* más fuerte que .popover-body p / ul de §14 (margen 8 y sangría 18) */ body.ui-v2 .popover-body .ds-popover-detalle > *, body.ui-v2 .ds-popover-detalle > * { margin: 0; } body.ui-v2 .ds-popover-detalle-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 600; font-variant-numeric: tabular-nums; } body.ui-v2 .ds-popover-detalle-lista { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; } body.ui-v2 .ds-popover-detalle-lista > dt { margin: 0; color: var(--ds-texto-2); font-size: var(--ds-tam-etiqueta); font-weight: 400; line-height: 1.5; white-space: nowrap; } body.ui-v2 .ds-popover-detalle-lista > dd { margin: 0; color: var(--ds-texto); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } body.ui-v2 .ds-popover-detalle .ds-popover-detalle-items, body.ui-v2 .ds-popover-detalle-items { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; } body.ui-v2 .ds-popover-detalle-items > li { display: flex; align-items: center; gap: 8px; min-height: 20px; font-variant-numeric: tabular-nums; } body.ui-v2 .ds-popover-detalle-items > li > .ds-num, body.ui-v2 .ds-popover-detalle-items > li > .ds-celda-cifra { margin-left: auto; color: var(--ds-texto-2); } body.ui-v2 .ds-popover-detalle-apagado { opacity: 0.66; } /* botón dentro del detalle (p. ej. "Filtrar por este NOG" en pantallas táctiles) */ body.ui-v2 .ds-popover-detalle .ds-popover-detalle-accion { align-self: flex-start; margin-top: 4px; } body.ui-v2 .ds-popover-detalle-nota { color: var(--ds-texto-2); font-size: var(--ds-tam-etiqueta); line-height: 1.33334; } body.ui-v2 .ds-popover-detalle-error { display: flex; align-items: flex-start; gap: 6px; color: var(--ds-error); font-size: var(--ds-tam-etiqueta); line-height: 1.33334; } body.ui-v2 .ds-popover-detalle-error > .ti, body.ui-v2 .ds-popover-detalle-error > .bi { flex: none; font-size: 14px; line-height: 1.14286; } body.ui-v2 .ds-popover-detalle-separador { height: 1px; margin: 0; border: 0; background: var(--ds-borde); opacity: 1; } /* 23h. Diálogos compactos ------------------------------------------------- */ /* En el .modal: .ds-modal-compacto (460 px: registrar número, motivo), .ds-modal-medio (600 px: historial), .ds-modal-amplio (1040 px: un formulario + una tabla, p. ej. Bases). Mismo aspecto: título 16/600 con ícono acento, relleno 20/24, cuerpo 14 px, avisos de una línea. Sin .modal-lg / .modal-xl (el ancho lo pone la clase). */ body.ui-v2 .modal.ds-modal-compacto { --bs-modal-width: 460px; } body.ui-v2 .modal.ds-modal-medio { --bs-modal-width: 600px; } body.ui-v2 .modal.ds-modal-amplio { --bs-modal-width: 1040px; } body.ui-v2 .ds-modal-compacto .modal-dialog, body.ui-v2 .ds-modal-medio .modal-dialog, body.ui-v2 .ds-modal-amplio .modal-dialog { --bs-modal-width: inherit; } body.ui-v2 .modal:is(.ds-modal-compacto, .ds-modal-medio, .ds-modal-amplio) { --bs-modal-padding: 20px 24px; --bs-modal-header-padding: 20px 24px 0; } body.ui-v2 :is(.ds-modal-compacto, .ds-modal-medio, .ds-modal-amplio) .modal-header { align-items: center; gap: var(--ds-e3); } body.ui-v2 :is(.ds-modal-compacto, .ds-modal-medio, .ds-modal-amplio) .modal-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--ds-tam-seccion); font-weight: 600; line-height: 1.5; } body.ui-v2 :is(.ds-modal-compacto, .ds-modal-medio, .ds-modal-amplio) .modal-title > .ti, body.ui-v2 :is(.ds-modal-compacto, .ds-modal-medio, .ds-modal-amplio) .modal-title > .bi { flex: none; margin: 0 !important; color: var(--ds-acento-oscuro); font-size: 20px; line-height: 1; } body.ui-v2 :is(.ds-modal-compacto, .ds-modal-medio, .ds-modal-amplio) .modal-body { padding-top: 12px; padding-bottom: 8px; color: var(--ds-texto); font-size: var(--ds-tam-cuerpo); } body.ui-v2 :is(.ds-modal-compacto, .ds-modal-medio, .ds-modal-amplio) .modal-footer { padding: 12px 24px 20px; } body.ui-v2 :is(.ds-modal-compacto, .ds-modal-medio, .ds-modal-amplio) .alert { margin: 12px 0; padding: 8px 12px; font-size: var(--ds-tam-tabla); line-height: 1.38462; } /* aviso al inicio del cuerpo (franja de arriba): separado de lo que sigue */ body.ui-v2 :is(.ds-modal-compacto, .ds-modal-medio, .ds-modal-amplio) .alert:first-child { margin-top: 0; } body.ui-v2 :is(.ds-modal-compacto, .ds-modal-medio, .ds-modal-amplio) .alert:last-child { margin-bottom: 0; } body.ui-v2 :is(.ds-modal-compacto, .ds-modal-medio, .ds-modal-amplio) .modal-body > .alert:first-child { margin-bottom: 16px; } body.ui-v2 :is(.ds-modal-compacto, .ds-modal-medio, .ds-modal-amplio) .alert[hidden] { display: none; } body.ui-v2 :is(.ds-modal-compacto, .ds-modal-medio, .ds-modal-amplio) hr { margin: 16px 0; border: 0; border-top: 1px solid var(--ds-borde); opacity: 1; } /* línea de contexto bajo el título: "SIAF: ADM-23-2026, FYB-100-2026" */ body.ui-v2 .ds-modal-meta { margin: 0 0 12px; color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); line-height: 1.38462; overflow-wrap: anywhere; } body.ui-v2 .ds-modal-meta strong, body.ui-v2 .ds-modal-meta b { color: var(--ds-texto); font-weight: 600; } /* lista corta de observaciones (p. ej. filas que no se pueden registrar) */ body.ui-v2 .ds-modal-lista { max-height: 132px; margin: 0 0 12px; padding: 8px 12px; overflow: auto; border-radius: var(--ds-radio-campo); background: var(--ds-neutro-fondo); color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); line-height: 1.38462; list-style: none; } body.ui-v2 .ds-modal-lista > li + li { margin-top: 4px; } /* título de una sección dentro del diálogo ("Versiones", "Subir versión final") */ body.ui-v2 .ds-modal-seccion { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--ds-texto); font-size: var(--ds-tam-tabla); font-weight: 600; line-height: 1.38462; } /* error de una línea bajo el campo */ body.ui-v2 .ds-modal-error { margin: 8px 0 0; color: var(--ds-error); font-size: var(--ds-tam-tabla); line-height: 1.38462; } /* amplio: formulario a la izquierda y tabla a la derecha */ body.ui-v2 .ds-modal-amplio .modal-body { padding-bottom: 20px; } body.ui-v2 .ds-modal-amplio .form-text { margin-top: 4px; } body.ui-v2 .ds-modal-amplio input[type="file"].form-control { padding-top: 6px; padding-bottom: 6px; } /* el botón del selector de archivo, como un botón secundario del sistema (píldora con borde) en vez del gris del navegador */ body.ui-v2 input[type="file"].form-control::file-selector-button { height: 26px; margin: 0 10px 0 0; padding: 0 12px; border: 1px solid var(--ds-borde-fuerte); border-radius: var(--ds-radio-pildora); background: var(--ds-superficie); color: var(--ds-texto); font-family: var(--ds-fuente); font-size: var(--ds-tam-tabla); font-weight: 500; cursor: pointer; transition: background-color var(--ds-transicion), border-color var(--ds-transicion); } body.ui-v2 input[type="file"].form-control:hover:not(:disabled):not([readonly])::file-selector-button { background: var(--ds-hover); border-color: var(--ds-borde-hover); } body.ui-v2 input[type="file"].form-control:disabled::file-selector-button { color: var(--ds-texto-3); cursor: not-allowed; } /* tabla dentro del diálogo: marco de 12 px, filas de 36, 13 px, alto limitado */ body.ui-v2 .ds-modal-amplio .tb-v2 > .tb-marco, body.ui-v2 .ds-modal-amplio .ds-tabla-marco, body.ui-v2 .ds-modal-amplio .tb-marco { max-height: min(52vh, 440px); border: 1px solid var(--ds-borde); border-radius: var(--ds-radio-campo); box-shadow: none; overflow: auto; } body.ui-v2 .ds-modal-amplio .ui-tabla > thead > tr > th { height: 32px; padding: 0 10px; } body.ui-v2 .ds-modal-amplio .ui-tabla > tbody > tr > td { height: 36px; padding: 4px 10px; font-size: var(--ds-tam-tabla); line-height: 1.38462; } body.ui-v2 .ds-modal-amplio .ui-tabla > thead > tr > th:first-child, body.ui-v2 .ds-modal-amplio .ui-tabla > tbody > tr > td:first-child { padding-left: 12px; } body.ui-v2 .ds-modal-amplio .ui-tabla > thead > tr > th:last-child, body.ui-v2 .ds-modal-amplio .ui-tabla > tbody > tr > td:last-child { padding-right: 12px; } body.ui-v2 .ds-modal-amplio .tb-v2 .ds-filtros, body.ui-v2 .ds-modal-amplio .tb-barra { margin-bottom: 8px; } /* Historial: lista de eventos con punto y línea (más reciente arriba)
  1. Registró NOG 24582220
    25/09/2026 14:02 · Brandon Casia
    Motivo: …
*/ body.ui-v2 .ds-lista-eventos { margin: 0; padding: 0; list-style: none; font-size: var(--ds-tam-tabla); line-height: 1.38462; } body.ui-v2 .ds-lista-eventos > li { position: relative; padding: 0 0 14px 20px; } body.ui-v2 .ds-lista-eventos > li::before { content: ""; position: absolute; top: 5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-acento); } body.ui-v2 .ds-lista-eventos > li::after { content: ""; position: absolute; top: 17px; bottom: 1px; left: 3.5px; width: 1px; background: var(--ds-borde); } body.ui-v2 .ds-lista-eventos > li:not(:first-child)::before { background: var(--ds-borde-fuerte); } body.ui-v2 .ds-lista-eventos > li:last-child { padding-bottom: 0; } body.ui-v2 .ds-lista-eventos > li:last-child::after { display: none; } body.ui-v2 .ds-evento-texto { color: var(--ds-texto); font-weight: 500; overflow-wrap: anywhere; } body.ui-v2 .ds-evento-meta { color: var(--ds-texto-2); font-size: var(--ds-tam-etiqueta); line-height: 1.33334; font-variant-numeric: tabular-nums; } body.ui-v2 .ds-evento-detalle { margin-top: 2px; color: var(--ds-texto-2); font-size: var(--ds-tam-etiqueta); line-height: 1.33334; overflow-wrap: anywhere; } body.ui-v2 .ds-modal-medio .modal-body:has(> .ds-lista-eventos) { max-height: min(64vh, 560px); overflow: auto; } /* 23i. Barra de selección sobre la tabla ---------------------------------- */ /*
(TablaDatos) (macro barra_seleccion o igual marcado)
La barra (§19) deja de estar fija a la ventana: flota centrada sobre el borde de abajo de la tabla (pegada a la ventana si la tabla sigue más abajo). Mientras se ve, el marco de la tabla gana 76 px al final para que la última fila se pueda desplazar por encima de la barra. */ body.ui-v2 .ds-tabla-con-seleccion { display: grid; grid-template-columns: minmax(0, 1fr); } body.ui-v2 .ds-tabla-con-seleccion > * { grid-area: 1 / 1; min-width: 0; } body.ui-v2 .ds-tabla-con-seleccion > .ds-barra-seleccion { position: sticky; right: auto; bottom: 16px; left: auto; z-index: 3; /* sobre filas y columnas fijas; bajo un menú "⋯" abierto (celda z 4) */ align-self: end; justify-self: center; max-width: calc(100% - 32px); margin: 0 0 16px; padding: 0; } body.ui-v2 .ds-tabla-con-seleccion > .ds-barra-seleccion[hidden] { display: none; } body.ui-v2 .ds-tabla-con-seleccion:has(> .ds-barra-seleccion:not([hidden])) .tb-marco::after { content: ""; display: block; height: 76px; } /* 23j. Columnas fluidas (fase "todo") ------------------------------------ */ /* Queja del usuario: "desperdicia espacio horizontal" (una sola columna flexible se quedaba con todo el ancho que sobraba mientras las demás, de ancho fijo en px, cortaban "Compra dir…", "Pendiente O…"). Modelo nuevo, con el reparto automático de la tabla (table-layout: auto; ancho 100 %): - Columnas de CONTENIDO (.ds-col-id, -control, -numero, -numero-corto, -estado y las genéricas -corta, -media, -larga, -fecha, -monto): su contenido no se parte, así la columna mide lo que pide su texto y nunca corta un rótulo; un piso en em (--ds-col-min, crece con el texto) evita saltos con la tabla vacía o filtrada. El ancho que sobra se reparte entre todas en proporción a su ancho. - Columna FLEXIBLE (.ds-col-flex): una parte del ancho de la tabla (--ds-col-parte, 24 %) con piso (--ds-col-flex-min); su texto largo (proveedor) se recorta con "…" y va entero en title/popover. Si no cabe su parte, se queda con lo que dejan las demás (nunca menos que el piso). - Columna de TEXTO libre (.ds-col-texto): como la flexible pero el texto se parte en líneas (dos como máximo con .ds-texto-2-lineas). - Acciones: .ds-celda-acciones (§15a: lo justo para su contenido, fija a la derecha) + .ds-col-acciones (piso de la acción más larga). - .ds-col-ajustada: lo justo para su contenido (casillas, íconos). En la opción `clase` de la columna de TablaDatos (TablaDatos v2 copia las .ds-col-* al ) o directamente en / de una tabla hecha a mano. No usar `ancho` en px junto con estas clases. .ds-solo-ancho: pieza que solo se ve desde 1400 px de ventana. Pisos (contenido, sin relleno; 1em = 13 px en la tabla): id 12em (156) · control 11em · numero 14em · numero-corto 6em · estado 8em · acciones 11.25em · corta 4em · media 8em · larga 14em · fecha 6.5em · monto 7em · flex 7em (6em bajo 1400) · texto 12em. */ body.ui-v2 :is(.ui-tabla, .ds-tabla) { width: 100%; table-layout: auto; } body.ui-v2 .ds-col-id { --ds-col-min: 12em; } body.ui-v2 .ds-col-control { --ds-col-min: 11em; } body.ui-v2 .ds-col-numero { --ds-col-min: 14em; } body.ui-v2 .ds-col-numero-corto { --ds-col-min: 6em; } body.ui-v2 .ds-col-estado { --ds-col-min: 8em; } body.ui-v2 .ds-col-acciones { --ds-col-min: 11.25em; } body.ui-v2 .ds-col-corta { --ds-col-min: 4em; } body.ui-v2 .ds-col-media { --ds-col-min: 8em; } body.ui-v2 .ds-col-larga { --ds-col-min: 14em; } body.ui-v2 .ds-col-fecha { --ds-col-min: 6.5em; } body.ui-v2 .ds-col-monto { --ds-col-min: 7em; } body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody, tfoot) > tr > :is(th, td):is(.ds-col-id, .ds-col-control, .ds-col-numero, .ds-col-numero-corto, .ds-col-estado, .ds-col-acciones, .ds-col-corta, .ds-col-media, .ds-col-larga, .ds-col-fecha, .ds-col-monto, .ds-col-ajustada) { white-space: nowrap; } /* piso: bloque de alto 0 con el ancho mínimo (min-width en celdas de tabla no lo respetan igual WebKit y Blink; un contenido de ese ancho sí) */ body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody, tfoot) > tr > :is(th, td):is(.ds-col-id, .ds-col-control, .ds-col-numero, .ds-col-numero-corto, .ds-col-estado, .ds-col-acciones, .ds-col-corta, .ds-col-media, .ds-col-larga, .ds-col-fecha, .ds-col-monto)::after { content: ""; display: block; width: var(--ds-col-min); height: 0; } /* en el encabezado el piso se mide con la letra de la tabla (13 px), no la del th (12 px) */ body.ui-v2 :is(.ui-tabla, .ds-tabla) > thead > tr > th[class*="ds-col-"]::after { font-size: 13px; } body.ui-v2 .ds-col-monto, body.ui-v2 :is(.ui-tabla, .ds-tabla) .ds-col-monto { text-align: right; font-variant-numeric: tabular-nums; } body.ui-v2 .ds-col-fecha { font-variant-numeric: tabular-nums; } body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).ds-col-ajustada { width: 1%; } /* texto largo DENTRO de una columna de contenido (p. ej. los renglones en la segunda línea del SIAF): tope en ch, se recorta con "…" pasado el tope */ body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr > td:not(.ds-col-flex):not(.ds-col-texto) .ds-celda-texto { max-width: var(--ds-texto-max, 16ch); } /* flexible: una parte fija del ancho; el contenido no empuja (mide 0 y llena la celda) */ body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).ds-col-flex { width: var(--ds-col-parte, 24%); } body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr > td.ds-col-flex > * { width: 0; min-width: 100%; } body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).ds-col-flex::after { content: ""; display: block; width: var(--ds-col-flex-min, 7em); height: 0; } body.ui-v2 :is(.ui-tabla, .ds-tabla) > thead > tr > th.ds-col-flex::after { font-size: 13px; } /* texto libre que se parte en líneas (descripción, proveedor en tablas sin prisa) */ body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).ds-col-texto { width: var(--ds-col-parte, 30%); } body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr > td.ds-col-texto { white-space: normal; overflow-wrap: anywhere; } body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr > td.ds-col-texto::after { content: ""; display: block; width: var(--ds-col-texto-min, 12em); height: 0; } /* dos líneas como máximo, con "…" al final de la segunda (texto completo en title) */ body.ui-v2 .ds-texto-2-lineas { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; } /* casilla de selección: 4 px a su derecha (no 12) */ body.ui-v2 .ui-tabla > thead > tr > th:has(> .tb-sel-todos), body.ui-v2 .ui-tabla > tbody > tr > td:has(> .tb-sel) { padding-right: 4px; } /* Contenido angosto: se mide el ANCHO DEL CONTENIDO (consulta de contenedor sobre main.ds-contenido), no la ventana: así también vale con el riel expandido (240 px) o con el zoom del navegador. Menos de 1272 px de contenido (una ventana de 1280-1399 con el riel delgado): relleno lateral de 10 px y pisos menores; menos de 1150: 8 px y los textos largos de las columnas de contenido con tope de 10ch. Si aun así no cabe, la tabla se desplaza de lado dentro de su marco (acciones fijas a la derecha). */ body.ui-v2 .ds-contenido { container: contenido / inline-size; } @container contenido (max-width: 1271.98px) { body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td):not(:first-child):not(:last-child) { padding-left: 10px; padding-right: 10px; } body.ui-v2 :is(.ui-tabla, .ds-tabla) { --ds-col-flex-min: 6em; } body.ui-v2 .ds-numero { gap: 4px; } body.ui-v2 .ds-solo-ancho { display: none !important; } } @container contenido (max-width: 1149.98px) { body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td):not(:first-child):not(:last-child) { padding-left: 8px; padding-right: 8px; } body.ui-v2 :is(.ui-tabla, .ds-tabla) { --ds-col-flex-min: 5em; --ds-texto-max: 10ch; } body.ui-v2 .ds-celda-principal, body.ui-v2 .ds-numero { gap: 4px; } } /* 23k. Movimiento reducido e impresión ------------------------------------ */ @media (prefers-reduced-motion: reduce) { body.ui-v2 .ds-mas, body.ui-v2 .ds-numero-valor, body.ui-v2 .ds-icono-estado, body.ui-v2 .ds-icono-enlace { transition: none; } body.ui-v2 .ds-popover-flotante { animation: none; } } @media print { body.ui-v2 .ds-popover-flotante, body.ui-v2 .ds-tabla-con-seleccion > .ds-barra-seleccion { display: none !important; } body.ui-v2 .ds-atencion { box-shadow: none; } } /* 23l. Tablas parejas (Paso 3, 2026-09-30) ------------------------------- */ /* Pedido del usuario: "tablas parejas" en toda la app. Reglas (CLAUDE.md §4, "Tablas parejas"; muestra en /estilo §9, «Tablas parejas»): 1. FILAS DEL MISMO ALTO dentro de una tabla. Compacta: 40 px de mínimo (§15a). Una tabla con SEGUNDA LÍNEA (celda de dos líneas, texto libre que se parte en dos, nombre comercial bajo la razón social…) lleva .ds-tabla-2-lineas y TODAS sus filas miden lo de dos líneas: 45 px (dos líneas de 17 + 10 de relleno + 1 de línea; una celda de dos líneas de 17 + 16 cabe), en em para que crezca con el texto. Ninguna celda pasa de dos líneas: el texto libre va en .ds-texto-2-lineas (dos líneas con "…" y el texto entero en title), los nombres y textos cortos en una línea con "…" (.ds-celda-texto, title). 2. ACCIONES: la acción visible de la fila mide lo mismo en todas las filas de la tabla (mínimo común en em, texto centrado) y el "⋯" queda alineado; una fila sin "⋯" deja su hueco. El ancho lo elige la tabla: .ds-acciones-corta ("Ver", "Editar"), sin clase (hasta "Recibir"), .ds-acciones-media ("Crear acta", "Continuar" con ícono), .ds-acciones-larga ("Registrar NOG"), .ds-acciones-agregar ("Agregar" / "En el listado" del catálogo; solo el ícono cuando el contenido mide menos de 1272 px) o .ds-acciones-ancha ("No pedir descripción"). Sin "⋯" en ninguna fila: .ds-acciones-sin-menu. La columna (th .ds-col-acciones) mide eso más el "⋯": ancho fijo en em, alineada a la derecha. 3. NÚMEROS (montos, cantidades, existencias, porcentajes) a la derecha con cifras tabulares (.ds-col-monto / alinear "num"); CÓDIGOS (SIAF, NOG, OC, NIT) con cifras tabulares, a la izquierda. Toda la tabla usa tabular-nums (§15a). 4. Cada con UNA clase .ds-col-* (§23j) y ningún ancho en px. 5. Píldoras: una sola medida (§7). En la segunda línea gris de una celda no va una píldora sino texto con color: .ds-celda-alerta. */ body.ui-v2 .tb-densidad-compacta :is(.ui-tabla, .ds-tabla).ds-tabla-2-lineas > tbody > tr > td, body.ui-v2 .ds-tabla-compacta.ds-tabla-2-lineas > tbody > tr > td { height: calc(3.3846em + 1px); /* 45 px con 13 px: dos líneas de 17 + 2 × 5 de relleno + la línea */ } /* segunda línea que puede llevar una marca de 18 px (píldora de contrato abierto, etiqueta "Verificar…"): la fila de dos líneas mide 46 (17 + 18 + 11) */ body.ui-v2 .tb-densidad-compacta :is(.ui-tabla, .ds-tabla).ds-tabla-2-lineas.ds-segunda-con-marca > tbody > tr > td, body.ui-v2 .ds-tabla-compacta.ds-tabla-2-lineas.ds-segunda-con-marca > tbody > tr > td { height: calc(3.4616em + 1px); } /* tabla en un panel lateral angosto (Guardados del catálogo, 560 px): el texto libre cede antes */ body.ui-v2 .ds-panel-tabla .ds-tabla { --ds-col-texto-min: 8em; } body.ui-v2 .ds-celda > .ds-celda-linea-marca { display: flex; align-items: center; gap: 0.5em; min-width: 0; max-width: 100%; height: 1.5em; /* 18 px con 12 px: lo de una píldora */ color: var(--ds-texto-2); font-size: var(--ds-tam-etiqueta); line-height: 1.33334; white-space: nowrap; } body.ui-v2 .ds-celda-linea-marca > * { flex: none; } body.ui-v2 .ds-celda-linea-marca > .ds-celda-texto { flex: 0 1 auto; } body.ui-v2 .ds-celda-linea-marca > .ds-marca-contrato { display: inline-flex; margin-top: 0; } /* la celda de texto libre: nunca más de dos líneas */ body.ui-v2 .ds-tabla-2-lineas > tbody > tr > td > .ds-texto-2-lineas { line-height: 1.3077; } /* acción visible: ancho mínimo común por tabla, texto centrado */ body.ui-v2 :is(.ui-tabla, .ds-tabla) { --ds-accion-ancho: 6.5em; } body.ui-v2 :is(.ui-tabla, .ds-tabla).ds-acciones-corta { --ds-accion-ancho: 4.5em; } body.ui-v2 :is(.ui-tabla, .ds-tabla).ds-acciones-media { --ds-accion-ancho: 8.6em; } /* "Crear acta" con su ícono */ body.ui-v2 :is(.ui-tabla, .ds-tabla).ds-acciones-larga { --ds-accion-ancho: 9em; } body.ui-v2 :is(.ui-tabla, .ds-tabla).ds-acciones-agregar { --ds-accion-ancho: 10em; } body.ui-v2 :is(.ui-tabla, .ds-tabla).ds-acciones-ancha { --ds-accion-ancho: 13.5em; } /* "No pedir descripción" (Renglones) */ @container contenido (max-width: 1271.98px) { body.ui-v2 :is(.ui-tabla, .ds-tabla).ds-acciones-agregar { --ds-accion-ancho: 3.4em; } /* solo el ícono (.ds-solo-ancho) */ } body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr > td.ds-celda-acciones .ds-btn:not(.ds-btn-icono):not(.ds-btn-mini) { min-width: var(--ds-accion-ancho); justify-content: center; } /* dos acciones visibles que son formularios (Renglones): una al lado de la otra, no apiladas (la fila medía 75) */ body.ui-v2 td.ds-celda-acciones > form { display: inline-block; vertical-align: middle; } body.ui-v2 td.ds-celda-acciones > form + form { margin-left: var(--ds-e1, 4px); } /* el "⋯" (32 px) o su hueco: en una fila sin más acciones el botón no se corre */ body.ui-v2 td.ds-celda-acciones .ds-acciones-fila:not(:has(> .ds-menu-acciones, > .ds-acciones-hueco))::after { content: ""; flex: none; /* + el lugar de Historial / Descargar si otra fila de la tabla los tiene y esta (sin "⋯") no (2026-10-17) */ width: calc(32px + var(--ds-falta-historial, 0px) + var(--ds-falta-descargar, 0px)); height: 1px; margin-left: 2px; } /* columna de acciones: ancho fijo en em = la acción + el "⋯", a la derecha */ body.ui-v2 :is(.ui-tabla, .ds-tabla) { --ds-menu-ancho: 38px; } /* "⋯" de 32 + 4 de separación + 2 de margen */ body.ui-v2 :is(.ui-tabla, .ds-tabla).ds-acciones-sin-menu { --ds-menu-ancho: 0px; } /* columna con un solo botón (Detalle) */ body.ui-v2 :is(.ui-tabla, .ds-tabla) .ds-col-acciones { --ds-col-min: calc(var(--ds-accion-ancho) + var(--ds-menu-ancho) + var(--ds-fija-historial) + var(--ds-fija-descargar)); text-align: right; } /* Historial y Descargar a la vista (2026-10-17; app/acciones_fila.py y UI.htmlMenuAcciones): botón de ícono de 32 px junto a la acción visible. El hueco de una clase que la fila no tiene mide lo mismo, pero solo aparece si alguna fila de la MISMA tabla la tiene: así la acción, los íconos y el "⋯" quedan alineados; la columna suma 36 px por clase. */ body.ui-v2 .ds-fija-hueco { display: none; flex: none; width: 32px; height: 1px; } body.ui-v2 :is(.ui-tabla, .ds-tabla):has(.ds-accion-fija.ds-fija-historial) .ds-acciones-fila:not(:has(.ds-fija-historial)) { --ds-falta-historial: 36px; } body.ui-v2 :is(.ui-tabla, .ds-tabla):has(.ds-accion-fija.ds-fija-descargar) .ds-acciones-fila:not(:has(.ds-fija-descargar)) { --ds-falta-descargar: 36px; } body.ui-v2 :is(.ui-tabla, .ds-tabla) { --ds-fija-historial: 0px; --ds-fija-descargar: 0px; } body.ui-v2 :is(.ui-tabla, .ds-tabla):has(.ds-accion-fija.ds-fija-historial) { --ds-fija-historial: 36px; } body.ui-v2 :is(.ui-tabla, .ds-tabla):has(.ds-accion-fija.ds-fija-descargar) { --ds-fija-descargar: 36px; } body.ui-v2 :is(.ui-tabla, .ds-tabla):has(.ds-accion-fija.ds-fija-historial) .ds-fija-hueco.ds-fija-historial, body.ui-v2 :is(.ui-tabla, .ds-tabla):has(.ds-accion-fija.ds-fija-descargar) .ds-fija-hueco.ds-fija-descargar { display: inline-block; } /* aviso en la SEGUNDA línea de una celda (evento desierto, subproductos no habilitados): texto con el color del estado y un punto, del alto de la línea (una píldora de 18 px no cabe en la línea gris de 16 y agrandaría la fila) */ body.ui-v2 .ds-celda-alerta { display: inline-flex; align-items: center; gap: 0.3334em; max-width: 100%; border-radius: var(--ds-radio-item); color: var(--ds-error); font-weight: 500; white-space: nowrap; } body.ui-v2 .ds-celda-alerta::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } body.ui-v2 .ds-celda-alerta + .ds-celda-alerta { margin-left: 0.6667em; } body.ui-v2 .ds-celda-alerta-aviso { color: var(--ds-aviso); } body.ui-v2 .ds-celda-alerta[tabindex]:focus-visible { outline: 2px solid var(--ds-acento-oscuro); outline-offset: 1px; } /* 24. Componentes de pantalla (fase "todo") =============================== Piezas genéricas que piden las pantallas que faltan migrar. Macros en templates/_ds.html (ejemplo de uso en su comentario inicial); guía corta en todo_componentes.md. Todas las medidas de texto son mínimas o en em (crecen si el navegador agranda el texto). 24a. Barra de filtros del servidor (formularios GET) 24b. Tarjeta de sección (título + acciones) y panel viejo 24c. Lista de datos (rótulo / valor) 24d. Formularios: grilla, grupos, pie fijo, formulario con lateral 24e. Carga de archivo: compacta, fila de carga, nombre elegido 24f. Línea de tiempo (historial) 24g. Pestañas de página (enlaces) 24h. Paginación del servidor 24i. Página de error (403/404) e inicio de sesión 24j. Indicadores: barra de avance, variación, grilla compacta 24k. Avisos con acción 24l. Gráficos (contenedor) 24m. Utilidades de maquetación 24n. Chips de casilla, filas teñidas, tabla estática en marco, visor, "Volver", barra de distribución, código y teclas ========================================================================== */ /* 24a. Barra de filtros del servidor -------------------------------------- */ /* Para listas filtradas en el SERVIDOR (lista de SIAF, Órdenes de Compra, Proveedores, precios, capturas, administración, historial de Actualización): el mismo
de siempre, con los mismos nombres de campo, pintado como la barra de TablaDatos. Chips = enlaces con la URL actual cambiando un parámetro (sin JS); píldoras = desplegables con los campos del formulario adentro y "Aplicar"; su ✕ es un enlace sin esos parámetros; "Quitar filtros" = enlace a la lista sin filtros.
…chips…
…píldoras, buscador, Quitar filtros…
*/ /* Una sola COLUMNA de filas sin partirse (flex-wrap: nowrap, aunque .ds-filtros de §6a parta en líneas): en una columna que se parte, cada fila medía lo que pide su contenido y no el ancho del formulario (en el teléfono la fila de chips que se desplaza de lado medía 1100 px y agrandaba la página; con un select largo, 237 px de más). */ body.ui-v2 .ds-filtros-get { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--ds-e2); margin: 0 0 var(--ds-e3); } body.ui-v2 .ds-filtros-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-e2); min-width: 0; } body.ui-v2 .ds-filtros-fila > .ds-filtros-fin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-e2); margin-left: auto; } /* chip como enlace: mismo aspecto que el botón */ body.ui-v2 a.ds-chip:focus-visible { outline: 0; box-shadow: var(--tb-anillo); } body.ui-v2 a.ds-chip.ds-chip-activo, body.ui-v2 a.ds-chip[aria-current="true"], body.ui-v2 a.ds-chip[aria-current="page"] { border-color: var(--ds-relleno-primario); background: var(--ds-relleno-primario); color: var(--ds-texto-sobre-relleno); } body.ui-v2 a.ds-chip[aria-current="true"] .ds-chip-conteo, body.ui-v2 a.ds-chip[aria-current="page"] .ds-chip-conteo { color: var(--ds-texto-sobre-relleno-2); } body.ui-v2 a.ds-chip.ds-chip-activo:hover, body.ui-v2 a.ds-chip[aria-current="true"]:hover { border-color: var(--tb-relleno-hover); background: var(--tb-relleno-hover); color: var(--ds-texto-sobre-relleno); } /* ✕ y "Quitar filtros" como enlaces */ body.ui-v2 a.ds-pildora-filtro-quitar, body.ui-v2 a.ds-quitar-filtros { color: var(--ds-acento-oscuro); text-decoration: none; } body.ui-v2 a.ds-pildora-filtro-quitar { color: inherit; } body.ui-v2 a.ds-pildora-filtro-quitar:focus-visible { outline: 0; box-shadow: var(--tb-anillo); } /* pie del panel de una píldora: "Aplicar" (y "Limpiar" como enlace) */ body.ui-v2 .ds-pildora-panel-pie { display: flex; align-items: center; justify-content: flex-end; gap: var(--ds-e2); margin-top: var(--ds-e3); padding-top: var(--ds-e3); border-top: 1px solid var(--ds-borde); } body.ui-v2 .ds-pildora-panel-pie > .ds-pildora-panel-limpiar { margin-right: auto; font-size: var(--ds-tam-tabla); font-weight: 500; text-decoration: none; } body.ui-v2 .ds-pildora-panel .ds-campo { margin-bottom: var(--ds-e3); } body.ui-v2 .ds-pildora-panel .ds-campo:last-child { margin-bottom: 0; } body.ui-v2 .ds-menu-filtro.ds-pildora-panel-ancho { min-width: 300px; max-width: 360px; } /* casillas de un panel (varios valores): lista con desplazamiento */ body.ui-v2 .ds-pildora-panel .ds-casillas { display: flex; flex-direction: column; max-height: 260px; margin: 0 -4px; overflow-y: auto; } body.ui-v2 .ds-pildora-panel .ds-casillas > .form-check, body.ui-v2 .ds-pildora-panel .ds-casillas > label { display: flex; align-items: center; gap: 10px; min-height: 34px; margin: 0; padding: 6px 8px; border-radius: 10px; cursor: pointer; } body.ui-v2 .ds-pildora-panel .ds-casillas > :hover { background: var(--ds-hover); } body.ui-v2 .ds-pildora-panel .ds-casillas .form-check-input { float: none; margin: 0; } /* select nativo con forma de píldora (un filtro de un solo valor):

Sin guion.

…
ocupa la fila Grupo:
Datos…
Pie fijo (formularios largos):
…botones…
Formulario con lateral:
…
*/ body.ui-v2 .ds-form-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-e4) 20px; align-items: start; } body.ui-v2 .ds-form-grilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.ui-v2 .ds-form-grilla-1 { grid-template-columns: minmax(0, 1fr); } body.ui-v2 .ds-form-grilla > .ds-campo, body.ui-v2 .ds-form-grilla > .mb-3 { margin-bottom: 0 !important; min-width: 0; } body.ui-v2 .ds-campo-ancho, body.ui-v2 .ds-form-grilla > .ds-campo-ancho { grid-column: 1 / -1; } body.ui-v2 .ds-campo-requerido > .ds-rotulo::after, body.ui-v2 .ds-campo-requerido > .form-label::after { content: " *"; color: var(--ds-error); } body.ui-v2 .ds-campo-error .ds-rotulo, body.ui-v2 .ds-campo-error .form-label { color: var(--ds-error); } @media (max-width: 767.98px) { body.ui-v2 .ds-form-grilla, body.ui-v2 .ds-form-grilla-3 { grid-template-columns: minmax(0, 1fr); } } body.ui-v2 .ds-grupo-campos { min-width: 0; margin: 0 0 var(--ds-e5); padding: 0; border: 0; } body.ui-v2 .ds-grupo-campos + .ds-grupo-campos { padding-top: var(--ds-e5); border-top: 1px solid var(--ds-borde); } body.ui-v2 .ds-grupo-titulo { float: left; /* como el reboot de Bootstrap: sin cortar la línea de arriba del grupo */ width: 100%; margin: 0 0 2px; padding: 0; color: var(--ds-texto); font-size: var(--ds-tam-seccion); font-weight: 600; line-height: 1.5; } body.ui-v2 .ds-grupo-linea { margin: 0 0 var(--ds-e4); color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); line-height: 1.38462; } body.ui-v2 .ds-grupo-campos > :not(legend) { clear: left; } /* el título es un flotante y lo que sigue lleva clear: un margen de arriba se perdía contra el float (el primer rótulo quedaba a 3 px del título); relleno en vez de margen */ body.ui-v2 .ds-grupo-titulo + .ds-form-grilla, body.ui-v2 .ds-grupo-titulo + .ds-campo { margin-top: 0; padding-top: var(--ds-e3); } /* pie fijo: barra flotante al pie de la ventana mientras el formulario sigue */ body.ui-v2 .ds-pie-formulario { position: sticky; bottom: var(--ds-e3); z-index: 1010; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ds-e2); margin-top: var(--ds-e5); padding: 12px 16px; background: var(--ds-superficie); /* opaco: con 96 % el texto que pasa por debajo se transparentaba */ border: 1px solid var(--ds-borde-marco); border-radius: var(--ds-radio-dialogo); /* sombra solo hacia arriba: la franja ::after de abajo no la corta, así que cuando el pie no está pegado no se ve un escalón bajo la barra */ box-shadow: var(--ds-sombra-pie); } body.ui-v2 .ds-pie-formulario > .ds-pie-formulario-texto { margin-right: auto; color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); line-height: 1.38462; } @media (max-width: 767.98px) { body.ui-v2 .ds-pie-formulario { bottom: 8px; padding: 10px 12px; } body.ui-v2 .ds-pie-formulario > .ds-pie-formulario-texto { flex-basis: 100%; } } /* franja del color de la página bajo el pie pegado: sin ella, el contenido que pasa por detrás se asomaba en los 12 px entre el pie y el borde de la ventana (como la banda sólida de la barra superior). No en un pie dentro de una tarjeta (muestra de /estilo): ahí, en su lugar natural, pintaría una franja gris dentro de la tarjeta. */ body.ui-v2 .ds-pie-formulario:not(.ds-tarjeta .ds-pie-formulario)::after { content: ""; position: absolute; top: 100%; left: -4px; /* tapa también el borde y la sombra de la tarjeta que pasa por detrás */ right: -4px; height: calc(var(--ds-e3) + 1px); background: var(--ds-fondo); pointer-events: none; } body.ui-v2 .ds-form-con-lateral { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: var(--ds-e5); align-items: start; } body.ui-v2 .ds-form-lateral { position: sticky; top: calc(var(--ds-alto-barra) + 24px); display: flex; flex-direction: column; gap: var(--ds-e4); } @media (max-width: 1099.98px) { body.ui-v2 .ds-form-con-lateral { grid-template-columns: minmax(0, 1fr); } body.ui-v2 .ds-form-lateral { position: static; } } /* acciones al final de un formulario corto (sin pie fijo) */ body.ui-v2 .ds-form-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ds-e2); margin-top: var(--ds-e5); } /* 24e. Carga de archivo --------------------------------------------------- */ /* Compacta (una fila, para varias cargas en una misma pantalla): ui.js pone el nombre del archivo elegido en [data-ds-carga-nombre] (y la clase .ds-carga-con-archivo) y .ds-carga-sobre mientras se arrastra. Fila de carga (título + ayuda a la izquierda, carga y botón a la derecha):
…
…
*/ body.ui-v2 .ds-carga.ds-carga-compacta { flex-direction: row; justify-content: flex-start; gap: var(--ds-e3); width: 100%; min-height: 56px; padding: 10px 16px; text-align: left; } body.ui-v2 .ds-carga-compacta .ds-carga-icono { font-size: 22px; } body.ui-v2 .ds-carga-nombre { min-width: 0; max-width: 100%; color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); font-weight: 400; overflow-wrap: anywhere; } body.ui-v2 .ds-carga-compacta .ds-carga-nombre { margin-left: auto; text-align: right; } body.ui-v2 .ds-carga.ds-carga-con-archivo { border-style: solid; border-color: var(--ds-acento); } body.ui-v2 .ds-carga.ds-carga-con-archivo .ds-carga-nombre { color: var(--ds-texto); font-weight: 500; } body.ui-v2 .ds-carga-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); gap: var(--ds-e3) var(--ds-e5); align-items: center; padding: var(--ds-e4) 0; border-bottom: 1px solid var(--ds-borde); } body.ui-v2 .ds-carga-fila:first-child { padding-top: 0; } body.ui-v2 .ds-carga-fila:last-child { padding-bottom: 0; border-bottom: 0; } body.ui-v2 .ds-carga-fila-titulo { margin: 0; font-size: var(--ds-tam-cuerpo); font-weight: 600; line-height: 1.42858; } body.ui-v2 .ds-carga-fila-linea { margin: 2px 0 0; color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); line-height: 1.38462; } body.ui-v2 .ds-carga-fila-control { display: flex; align-items: center; gap: var(--ds-e2); min-width: 0; } body.ui-v2 .ds-carga-fila-control > .ds-carga { flex: 1 1 auto; } @media (max-width: 767.98px) { body.ui-v2 .ds-carga-fila { grid-template-columns: minmax(0, 1fr); } } /* 24f. Línea de tiempo (historial) ---------------------------------------- */ /*
  1. Recibido en Compras
    20/09/2026 10:14 · Brandon Casia
    Motivo: …
Tonos del punto: -exito, -aviso, -error, -info (acento), -neutro (gris, por defecto después del primero). Mismo aspecto que .ds-lista-eventos. */ body.ui-v2 .ds-linea-tiempo { margin: 0; padding: 0; list-style: none; font-size: var(--ds-tam-tabla); line-height: 1.38462; } body.ui-v2 .ds-linea-tiempo > .ds-evento { --ds-evento-punto: var(--ds-borde-fuerte); position: relative; padding: 0 0 var(--ds-e4) 22px; } body.ui-v2 .ds-linea-tiempo > .ds-evento:first-child { --ds-evento-punto: var(--ds-acento); } body.ui-v2 .ds-linea-tiempo > .ds-evento::before { content: ""; position: absolute; top: 0.35em; left: 0; width: 10px; height: 10px; border: 2px solid var(--ds-superficie); border-radius: 50%; background: var(--ds-evento-punto); box-shadow: 0 0 0 1px var(--ds-evento-punto); } body.ui-v2 .ds-linea-tiempo > .ds-evento::after { content: ""; position: absolute; top: calc(0.35em + 14px); bottom: 2px; left: 4.5px; width: 1px; background: var(--ds-borde); } body.ui-v2 .ds-linea-tiempo > .ds-evento:last-child { padding-bottom: 0; } body.ui-v2 .ds-linea-tiempo > .ds-evento:last-child::after { display: none; } body.ui-v2 .ds-evento.ds-evento-exito { --ds-evento-punto: var(--ds-exito-punto); } body.ui-v2 .ds-evento.ds-evento-aviso { --ds-evento-punto: var(--ds-aviso-punto); } body.ui-v2 .ds-evento.ds-evento-error { --ds-evento-punto: var(--ds-error-punto); } body.ui-v2 .ds-evento.ds-evento-info { --ds-evento-punto: var(--ds-acento); } body.ui-v2 .ds-evento.ds-evento-neutro { --ds-evento-punto: var(--ds-borde-fuerte); } body.ui-v2 .ds-evento-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--ds-e2); } body.ui-v2 .ds-evento-cabeza > .ds-evento-meta { margin-left: auto; } /* 24g. Pestañas de página (enlaces) --------------------------------------- */ /* Pestañas que cambian de página o de parámetro (servidor), subrayado del acento como las .nav-tabs re-pintadas: Para pestañas de Bootstrap (data-bs-toggle="tab") siga usando .nav-tabs. */ body.ui-v2 .ds-pestanas { display: flex; flex-wrap: nowrap; gap: var(--ds-e5); margin: 0 0 var(--ds-e4); overflow-x: auto; border-bottom: 1px solid var(--ds-borde); scrollbar-width: none; } body.ui-v2 .ds-pestanas::-webkit-scrollbar { display: none; } body.ui-v2 .ds-pestana { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-bottom: -1px; padding: 0 2px; border-bottom: 2px solid transparent; color: var(--ds-texto-2); font-size: var(--ds-tam-cuerpo); font-weight: 500; line-height: 1.42858; text-decoration: none; white-space: nowrap; transition: color var(--ds-transicion), border-color var(--ds-transicion); } body.ui-v2 .ds-pestana:hover, body.ui-v2 .ds-pestana.ds-f-hover { color: var(--ds-texto); border-bottom-color: var(--ds-borde-fuerte); } body.ui-v2 .ds-pestana[aria-current="page"], body.ui-v2 .ds-pestana.activo, body.ui-v2 .ds-pestana.ds-f-activo { color: var(--ds-acento-oscuro); border-bottom-color: var(--ds-acento); } body.ui-v2 .ds-pestana:focus-visible { outline: 2px solid var(--ds-acento-oscuro); outline-offset: -2px; border-radius: 6px; } body.ui-v2 .ds-pestana.disabled, body.ui-v2 .ds-pestana[aria-disabled="true"] { color: var(--ds-texto-3); pointer-events: none; } body.ui-v2 .ds-pestana-conteo { min-width: 20px; padding: 1px 6px; border-radius: var(--ds-radio-pildora); background: var(--ds-neutro-fondo); color: var(--ds-neutro); font-size: var(--ds-tam-etiqueta); line-height: 1.33334; text-align: center; font-variant-numeric: tabular-nums; } body.ui-v2 .ds-pestana[aria-current="page"] .ds-pestana-conteo, body.ui-v2 .ds-pestana.activo .ds-pestana-conteo { background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); } /* 24h. Paginación del servidor -------------------------------------------- */ /* */ body.ui-v2 .ds-paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-e3); margin-top: var(--ds-e4); } body.ui-v2 .ds-paginacion-info { color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); font-variant-numeric: tabular-nums; } body.ui-v2 .ds-paginacion .pagination { margin: 0; } body.ui-v2 .ds-paginacion .page-link { min-width: 32px; height: auto; min-height: 32px; text-decoration: none; font-variant-numeric: tabular-nums; } body.ui-v2 .ds-paginacion .page-item.disabled .page-link { color: var(--ds-texto-3); } body.ui-v2 .ds-paginacion-hueco .page-link { border: 0; background: transparent; color: var(--ds-texto-3); pointer-events: none; } /* dentro de una tarjeta plana, bajo la tabla */ body.ui-v2 .ds-tarjeta-plana .ds-paginacion { margin: 0; padding: var(--ds-e3) 20px; border-top: 1px solid var(--ds-borde); } /* 24i. Página de error e inicio de sesión --------------------------------- */ /* Error (403, 404…):
ícono en círculo suave, código chico, título 20/600, una frase, acciones
. Macro ds.pagina_error(...). */ body.ui-v2 .ds-error-pagina { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ds-e3); min-height: min(60vh, 520px); padding: var(--ds-e6) var(--ds-e4); text-align: center; } body.ui-v2 .ds-error-pagina-icono { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--ds-e1); border-radius: 50%; background: var(--ds-neutro-fondo); color: var(--ds-texto-2); font-size: 30px; line-height: 1; } body.ui-v2 .ds-error-pagina-codigo { margin: 0; color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); font-weight: 500; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } body.ui-v2 .ds-error-pagina-titulo { margin: 0; color: var(--ds-texto); font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; } body.ui-v2 .ds-error-pagina-texto { max-width: 34em; margin: 0; color: var(--ds-texto-2); font-size: var(--ds-tam-cuerpo); line-height: 1.42858; } body.ui-v2 .ds-error-pagina-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-e2); margin-top: var(--ds-e2); } /* Inicio de sesión: página sin riel ni barra; tarjeta centrada sobre el fondo gris de la app.
…
*/ body.ui-v2.ds-pagina-sola { min-height: 100vh; } body.ui-v2 .ds-login { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: var(--ds-e6) var(--ds-e4); } body.ui-v2 .ds-login-marca { display: flex; align-items: center; gap: 10px; margin-bottom: var(--ds-e5); color: var(--ds-texto); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; } body.ui-v2 .ds-login-marca b { font-weight: 700 !important; } body.ui-v2 .ds-login-marca .ds-marca-simbolo { width: 40px; height: 40px; font-size: 22px; } body.ui-v2 .ds-login-marca .ds-marca-logo { width: 40px; height: 40px; } body.ui-v2 .ds-login-tarjeta { width: 100%; max-width: 400px; padding: 32px; background: var(--ds-superficie); border: 1px solid var(--ds-borde-marco); border-radius: var(--ds-radio-dialogo); box-shadow: var(--ds-sombra-flotante); } body.ui-v2 .ds-login-titulo { margin: 0 0 4px; font-size: 22px; font-weight: 600; line-height: 1.36364; letter-spacing: -0.02em; } body.ui-v2 .ds-login-linea { margin: 0 0 var(--ds-e5); color: var(--ds-texto-2); font-size: var(--ds-tam-cuerpo); line-height: 1.42858; } body.ui-v2 .ds-login-tarjeta .ds-campo:last-of-type { margin-bottom: var(--ds-e5); } body.ui-v2 .ds-login-tarjeta .ds-btn { width: 100%; } body.ui-v2 .ds-login-tarjeta .ds-aviso { margin-bottom: var(--ds-e4); } @media (max-width: 479.98px) { body.ui-v2 .ds-login-tarjeta { padding: 24px 20px; } } /* 24j. Indicadores: barra de avance, variación, grilla compacta ----------- */ /* ds.kpi(..., barra=62, tono="aviso", delta="+4 %", tono_delta="exito"): barra de 6 px bajo el valor (porcentaje con aria); variación en una píldora mini. .ds-kpis-compactos: valor de 20 px (para 5-6 indicadores). .ds-kpis-4 / -5: columnas fijas desde 1280. */ /* barra de avance (también suelta: ds.barra_avance): , sin style="" */ body.ui-v2 progress.ds-barra-avance, body.ui-v2 .ds-kpi-barra { --ds-barra-color: var(--ds-acento); display: block; width: 100%; height: 6px; margin-top: 4px; overflow: hidden; border: 0; border-radius: var(--ds-radio-pildora); background: var(--ds-neutro-fondo); color: var(--ds-barra-color); appearance: none; -webkit-appearance: none; } body.ui-v2 progress.ds-barra-avance::-webkit-progress-bar { background: var(--ds-neutro-fondo); border-radius: var(--ds-radio-pildora); } body.ui-v2 progress.ds-barra-avance::-webkit-progress-value { background: var(--ds-barra-color); border-radius: var(--ds-radio-pildora); } body.ui-v2 progress.ds-barra-avance::-moz-progress-bar { background: var(--ds-barra-color); border-radius: var(--ds-radio-pildora); } body.ui-v2 .ds-barra-avance.ds-barra-exito, body.ui-v2 .ds-kpi-exito .ds-barra-avance { --ds-barra-color: var(--ds-exito-punto); } body.ui-v2 .ds-barra-avance.ds-barra-aviso, body.ui-v2 .ds-kpi-aviso .ds-barra-avance { --ds-barra-color: var(--ds-aviso-punto); } body.ui-v2 .ds-barra-avance.ds-barra-error, body.ui-v2 .ds-kpi-error .ds-barra-avance { --ds-barra-color: var(--ds-error-punto); } body.ui-v2 .ds-barra-avance.ds-barra-neutro { --ds-barra-color: var(--ds-texto-3); } body.ui-v2 .ds-kpi-valor-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--ds-e2); } body.ui-v2 .ds-kpi-delta { font-size: var(--ds-tam-etiqueta); } body.ui-v2 .ds-kpis-compactos { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--ds-e3); } body.ui-v2 .ds-kpis-compactos .ds-kpi { padding: var(--ds-e3) var(--ds-e4); gap: 4px; } body.ui-v2 .ds-kpis-compactos .ds-kpi-valor { font-size: 20px; line-height: 1.4; } body.ui-v2 .ds-kpis-compactos .ds-kpi-icono { width: 28px; height: 28px; font-size: 16px; } @media (min-width: 1280px) { body.ui-v2 .ds-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.ui-v2 .ds-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } body.ui-v2 .ds-kpi-valor.ds-kpi-valor-texto { font-size: 18px; line-height: 1.5; letter-spacing: -0.01em; } /* 24k. Avisos con acción ---------------------------------------------------- */ /* ds.aviso(..., accion) o marcado:
…
…
; .ds-aviso-compacto: 8 px de alto de relleno, texto 13. */ body.ui-v2 .ds-aviso:has(> .ds-aviso-acciones) { align-items: center; } body.ui-v2 .ds-aviso-acciones { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: var(--ds-e2); margin-left: auto; align-self: center; } body.ui-v2 .ds-aviso-compacto { padding: 8px 12px; font-size: var(--ds-tam-tabla); line-height: 1.38462; } body.ui-v2 .ds-aviso-compacto .ds-aviso-icono { font-size: 18px; line-height: 1; } body.ui-v2 .ds-aviso .ds-aviso-cuerpo > p { margin: 0 0 4px; } body.ui-v2 .ds-aviso .ds-aviso-cuerpo > p:last-child { margin-bottom: 0; } /* "Pendiente" / "En construcción": aviso neutro con línea discontinua */ body.ui-v2 .ds-aviso.ds-aviso-borrador { border: 1px dashed var(--ds-borde-fuerte); background: var(--ds-superficie); } /* 24l. Gráficos ------------------------------------------------------------- */ /*
Colores: UI.paleta (ui.js) lee los tokens; UI.opcionesGrafico(tipo) arma las opciones base de Chart.js (fuente Inter, cuadrícula fina, sin azul marino). */ body.ui-v2 .ds-grafico { position: relative; width: 100%; height: 280px; min-width: 0; } body.ui-v2 .ds-grafico-bajo { height: 200px; } body.ui-v2 .ds-grafico-alto { height: 360px; } body.ui-v2 .ds-grafico > canvas { display: block; max-width: 100%; } body.ui-v2 .ds-leyenda { display: flex; flex-wrap: wrap; gap: var(--ds-e2) var(--ds-e4); margin: var(--ds-e3) 0 0; padding: 0; list-style: none; color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); } body.ui-v2 .ds-leyenda > li { display: inline-flex; align-items: center; gap: 6px; } body.ui-v2 .ds-leyenda-marca { width: 10px; height: 10px; border-radius: 3px; background: var(--ds-acento); } /* 24m. Utilidades de maquetación ------------------------------------------- */ /* .ds-pila: bloques uno bajo otro con 24 px (ds-pila-apretada: 16). .ds-grilla: tarjetas en columnas que se acomodan (mín. 320 px); .ds-grilla-2 / -3: columnas fijas desde 1100 px. .ds-fila: en línea con 8 px (envuelve). .ds-fila-entre: extremos. */ body.ui-v2 .ds-pila { display: flex; flex-direction: column; gap: var(--ds-e5); min-width: 0; } body.ui-v2 .ds-pila-apretada { gap: var(--ds-e4); } body.ui-v2 .ds-pila > * { margin-bottom: 0; } body.ui-v2 .ds-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--ds-e4); align-items: start; } @media (min-width: 1100px) { body.ui-v2 .ds-grilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.ui-v2 .ds-grilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.ui-v2 .ds-grilla-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } } body.ui-v2 .ds-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-e2); min-width: 0; } body.ui-v2 .ds-fila-entre { justify-content: space-between; } body.ui-v2 .ds-margen-abajo { margin-bottom: var(--ds-e4); } body.ui-v2 .ds-texto-chico { font-size: var(--ds-tam-tabla); } body.ui-v2 .ds-codigo { font-family: var(--ds-fuente); font-variant-numeric: tabular-nums; font-feature-settings: "zero" 0; letter-spacing: 0.01em; } @media print { body.ui-v2 .ds-pie-formulario, body.ui-v2 .ds-filtros-get, body.ui-v2 .ds-paginacion { display: none !important; } body.ui-v2 .ds-tarjeta { box-shadow: none; break-inside: avoid; } } /* valor largo en una píldora de filtro del servidor: tope en ch (texto entero en aria-label) */ body.ui-v2 .ds-filtros-get .ds-pildora-filtro-valor { display: inline-block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* muestra de la página de error dentro de otra página (/estilo) */ body.ui-v2 .ds-error-pagina.ds-error-pagina-muestra { min-height: 0; padding: var(--ds-e5) var(--ds-e4); } /* 24n. Chips de casilla, filas teñidas, visor, "Volver" y distribución ----- */ /* Chip de casilla o de opción (filtros de varios valores a la vista, p. ej. los centros de costo del tablero): la casilla real va adentro (oculta a la vista, no al teclado); radio marcado = relleno primario, casilla marcada = tinte acento claro con ✓. Macro ds.chip_casilla. */ body.ui-v2 .ds-chip.ds-chip-casilla { position: relative; } body.ui-v2 .ds-chip.ds-chip-casilla > input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; } body.ui-v2 .ds-chip.ds-chip-casilla:has(> input:checked) { border-color: var(--ds-relleno-primario); background: var(--ds-relleno-primario); color: var(--ds-texto-sobre-relleno); } body.ui-v2 .ds-chip.ds-chip-casilla:has(> input:checked):hover { border-color: var(--tb-relleno-hover); background: var(--tb-relleno-hover); } body.ui-v2 .ds-chip.ds-chip-casilla:has(> input:checked) .ds-chip-conteo { color: var(--ds-texto-sobre-relleno-2); } body.ui-v2 .ds-chip.ds-chip-casilla:has(> input:focus-visible) { box-shadow: var(--tb-anillo); border-color: var(--ds-acento); } body.ui-v2 .ds-chip.ds-chip-casilla:has(> input:disabled) { color: var(--ds-texto-3); cursor: not-allowed; } body.ui-v2 .ds-chip.ds-chip-casilla > .ti-check { display: none; font-size: 14px; } body.ui-v2 .ds-chip.ds-chip-casilla:has(> input[type="checkbox"]:checked) > .ti-check { display: inline-block; } /* casilla marcada (varios valores a la vez: renglones, centros de costo, "Solo homologados"): tinte de lo activo, como la píldora de filtro activa, con la ✓; el relleno queda para la opción única (radio, chip de estado). Cinco rellenos seguidos se leían como cinco botones primarios. */ body.ui-v2 .ds-chip.ds-chip-casilla:has(> input[type="checkbox"]:checked) { border-color: var(--ds-acento); /* Corrección 2: marcado con el acento, como la píldora de filtro activa */ background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); } body.ui-v2 .ds-chip.ds-chip-casilla:has(> input[type="checkbox"]:checked):hover { border-color: var(--ds-acento); background: var(--ds-acento-claro-2); } body.ui-v2 .ds-chip.ds-chip-casilla:has(> input[type="checkbox"]:checked) .ds-chip-conteo { color: var(--ds-acento-oscuro); } body.ui-v2 .ds-chip.ds-chip-casilla:has(> input[type="checkbox"]:focus-visible) { border-color: var(--ds-acento); } /* Filas teñidas (resultado de una validación, fila con error): tinte suave del estado, sin tocar el texto. También re-pinta .table-danger/-warning/ -success/-info de Bootstrap. Las filas alternadas (.table-striped) no se pintan en v2: solo líneas finas y el gris al pasar el mouse. --bs-table-bg-state: initial (y no none): Bootstrap pinta la celda con box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type)); con "none" la sombra quedaba inválida y la fila NO se teñía. La barra de 3 px de error/aviso suma su sombra a la del tinte, y el gris al pasar el mouse va después para seguir ganando. */ body.ui-v2 :is(.table, .ui-tabla, .ds-tabla) > tbody > tr:is(.ds-fila-error, .table-danger) > * { --bs-table-bg-type: var(--ds-error-tenue); --bs-table-color-type: var(--ds-texto); --bs-table-bg-state: initial; } body.ui-v2 :is(.table, .ui-tabla, .ds-tabla) > tbody > tr:is(.ds-fila-aviso, .table-warning) > * { --bs-table-bg-type: var(--ds-aviso-tenue); --bs-table-color-type: var(--ds-texto); --bs-table-bg-state: initial; } body.ui-v2 :is(.table, .ui-tabla, .ds-tabla) > tbody > tr:is(.ds-fila-exito, .table-success) > * { --bs-table-bg-type: var(--ds-exito-tenue); --bs-table-color-type: var(--ds-texto); --bs-table-bg-state: initial; } body.ui-v2 :is(.table, .ui-tabla, .ds-tabla) > tbody > tr:is(.ds-fila-info, .table-info) > * { --bs-table-bg-type: var(--ds-info-tenue); --bs-table-color-type: var(--ds-texto); --bs-table-bg-state: initial; } body.ui-v2 :is(.table, .ui-tabla, .ds-tabla) > tbody > tr.ds-fila-apagada > * { color: var(--ds-texto-2); } body.ui-v2 :is(.table, .ui-tabla, .ds-tabla) > tbody > tr:is(.ds-fila-error, .table-danger) > :first-child { box-shadow: inset 3px 0 0 var(--ds-error-borde), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type)); } body.ui-v2 :is(.table, .ui-tabla, .ds-tabla) > tbody > tr:is(.ds-fila-aviso, .table-warning) > :first-child { box-shadow: inset 3px 0 0 var(--ds-aviso-borde), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type)); } body.ui-v2 .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; --bs-table-color-type: inherit; } body.ui-v2 .table-hover > tbody > tr:hover > *, body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr.ds-f-hover > * { --bs-table-bg-state: var(--ds-hover); } body.ui-v2 .table-bordered > :not(caption) > * > * { border-width: 0; border-bottom-width: 1px; } /* Tabla estática (hecha a mano) dentro de una tarjeta o marco: la misma apariencia que la de TablaDatos.
…
(+ .ds-tabla-compacta) */ body.ui-v2 .ds-tabla-marco > .table-responsive { margin: 0; } body.ui-v2 .ds-tabla-marco .ds-tabla > :last-child > tr:last-child > * { border-bottom: 0; } body.ui-v2 .ds-tabla > tfoot > tr > * { padding: 10px 12px; border-top: 1px solid var(--ds-borde); border-bottom: 0; background: var(--ds-fondo); font-weight: 600; } /* Visor de PDF u otro documento en la página (iframe): tarjeta con alto de la ventana.
*/ body.ui-v2 .ds-visor { height: calc(100vh - var(--ds-alto-barra) - 120px); min-height: 480px; overflow: hidden; background: var(--ds-neutro-fondo); border: 1px solid var(--ds-borde-marco); border-radius: var(--ds-radio-tarjeta); box-shadow: var(--ds-sombra-tarjeta); } body.ui-v2 .ds-visor > iframe, body.ui-v2 .ds-visor > object, body.ui-v2 .ds-visor > embed { display: block; width: 100%; height: 100%; border: 0; } /* "Volver" sobre el título de una ficha o formulario: enlace terciario con flecha. Macro ds.volver(href, texto). */ body.ui-v2 .ds-volver { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 var(--ds-e1) -6px; padding: 2px 8px 2px 6px; border-radius: var(--ds-radio-pildora); color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); font-weight: 500; line-height: 1.38462; text-decoration: none; transition: background-color var(--ds-transicion), color var(--ds-transicion); } body.ui-v2 .ds-volver > .ti { font-size: 16px; } body.ui-v2 .ds-volver:hover { background: var(--ds-hover-fondo); color: var(--ds-texto); } /* Barra de distribución (partes de un total: p. ej. artículos por clasificación). Cada parte crece según su valor: el JS pone el.style.flexGrow = n (o la clase de ancho); el color, por tono. */ body.ui-v2 .ds-distribucion { display: flex; gap: 2px; height: 8px; overflow: hidden; border-radius: var(--ds-radio-pildora); background: var(--ds-neutro-fondo); } body.ui-v2 .ds-distribucion-parte { flex: 1 1 0; min-width: 2px; background: var(--ds-acento); } body.ui-v2 .ds-distribucion-parte.ds-parte-exito { background: var(--ds-exito-punto); } body.ui-v2 .ds-distribucion-parte.ds-parte-aviso { background: var(--ds-aviso-punto); } body.ui-v2 .ds-distribucion-parte.ds-parte-error { background: var(--ds-error-punto); } body.ui-v2 .ds-distribucion-parte.ds-parte-neutro { background: var(--ds-texto-3); } body.ui-v2 .ds-distribucion-parte.ds-parte-info { background: var(--ds-acento); } /* Una sola familia de letra (decisión de diseño): lo que venía en monoespaciada (códigos, teclas) usa Inter con cifras tabulares; 
 y los campos de pegado
   conservan su letra (alineación por tabuladores).  como tecla clara. */
body.ui-v2 :is(code, samp, .font-monospace):not(pre *) { font-family: var(--ds-fuente) !important; font-variant-numeric: tabular-nums; font-size: 0.95em; color: inherit; }
body.ui-v2 kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 1px 6px;
    border: 1px solid var(--ds-borde-fuerte);
    border-radius: 6px;
    background: var(--ds-superficie);
    box-shadow: inset 0 -1px 0 var(--ds-borde);
    color: var(--ds-texto-2);
    font-family: var(--ds-fuente);
    font-size: var(--ds-tam-etiqueta);
    font-weight: 500;
    line-height: 1.33334;
    text-align: center;
}


/* 25. Piezas de las pantallas migradas (fase "todo") ======================
   Lo que cada grupo de pantallas agregó durante la migración (2026-09-26/27,
   antes en static/css/_frag_A…_frag_H.css), fundido aquí por el integrador
   (2026-09-28): cada pieza está UNA vez, con nombre genérico ds- cuando
   sirve a cualquier pantalla. Los arreglos de piezas que ya existían se
   hicieron en su propia sección (§11 select con "…", §14 pie de diálogo,
   §15a relleno compacto en em, marco posicionado y encabezado con texto
   oculto, §24a filtros GET en una columna, §24d título de grupo y pie
   opaco, §24n filas teñidas). Quedan con nombre de pantalla solo las
   piezas sin equivalente genérico, con el porqué al lado: s182-/s465-
   (SIAF 182 y su cuadrícula de captura, §25n), g-col-/s182-col- (partes
   de ancho de columnas de una pantalla, §25o) y .det-* (clases que arma el
   panel Detalle del SIAF y usa static/js/detalle_siaf.js, §25m).
   Reglas de la fase (ver el inicio del archivo): interlineados sin unidad,
   altos como mínimos y anchos en em/ch (Safari con zoom bajo agranda el
   texto chico).
     25a. Columnas de tabla: partes, pisos, nombre largo, contenido angosto
     25b. Celdas: select ajustado, "+N" en la línea gris, celda holgada,
          enlace de fila, código gris, punto de estado, fila de detalle,
          encabezado ordenable por enlace
     25c. Tablas con forma propia: con selección que cabe en la ventana, con
          línea de tiempo, agrupada, con desplazamiento propio, en un panel
     25d. Barra de filtros: rótulo, casillas con código, píldora fija,
          buscadores rotulados y flexibles
     25e. Indicadores: tarjeta que es botón, resumen con distribución, montos
     25f. Píldoras, marcas y botones: píldora enlace y de conteo, contorno,
          marca de contrato abierto, píldora-acción, botón con conteo
     25g. Tarjetas, subpaneles, plegables y acordeón
     25h. Formularios: pasos-enlace, búsqueda en una fila, panel flotante,
          tarjetas seleccionables, reparto, campos de lectura y cantidad,
          formulario adaptable, listas de opciones y casillas, sugerencias
     25i. Tarjetas de carga de archivos
     25j. Pie fijo del formulario (resumen, avisos, botones)
     25k. Paneles laterales y diálogos
     25l. Avisos, notas, textos y paginación en la página
     25m. Ficha y panel Detalle del SIAF
     25n. SIAF 182 y cuadrícula de captura 465
     25o. Partes de ancho de columnas de una pantalla
     25p. Actas de adjudicación: tabla con campos dentro de las celdas,
          ofertas fijas e «Incluye IVA», bloque de adjudicación, texto legal,
          listas de avisos, el formulario por pasos en dos columnas (tabla
          ceñida, plegable chico, paso abierto) y el acta en vivo (hoja que
          se escala a su columna, sección resaltada y marca BORRADOR)
   ========================================================================== */


/* 25a. Columnas de tabla: partes, pisos, nombre largo, contenido angosto --- */
/* Parte del ancho de una columna de texto (.ds-col-texto toma el 30 %, .ds-col-flex
   el 24 %): cuando la descripción ES el dato principal (artículos, catálogo,
   renglones, unidades) toma más; un texto secundario, menos. */
body.ui-v2 .ds-col-parte-20 { --ds-col-parte: 20%; }
body.ui-v2 .ds-col-parte-40 { --ds-col-parte: 40%; }
body.ui-v2 .ds-col-parte-50 { --ds-col-parte: 50%; }
body.ui-v2 .ds-col-parte-60 { --ds-col-parte: 60%; }
body.ui-v2 .ds-col-parte-70 { --ds-col-parte: 70%; }
/* Columna de texto libre SIN parte fija (.ds-col-texto.ds-col-parte-auto): el
   reparto automático de la tabla le da ancho según lo que pide su texto (en
   una línea, hasta un tope) frente a las demás. Así un texto corto (un centro
   de costo) no se recorta mientras otra columna sobra, y uno largo (la
   justificación) se queda con el resto y se parte en dos líneas. Piso
   --ds-col-texto-min (12em) y tope de lo que pide --ds-col-texto-max (50em);
   con .ds-col-texto-corta: 8em y 30em (6em y 5em en contenido < 1272 / < 1150). */
body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).ds-col-texto.ds-col-parte-auto { width: auto; }
body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr > td.ds-col-texto.ds-col-parte-auto > * { max-width: var(--ds-col-texto-max, 50em); }
body.ui-v2 .ds-col-parte-auto.ds-col-texto-corta { --ds-col-texto-min: 8em; --ds-col-texto-max: 30em; }
@container contenido (max-width: 1271.98px) {
    body.ui-v2 .ds-col-parte-auto.ds-col-texto-corta { --ds-col-texto-min: 6em; }   /* como el piso de .ds-col-flex (§23j) */
}
@container contenido (max-width: 1149.98px) {
    body.ui-v2 .ds-col-parte-auto.ds-col-texto-corta { --ds-col-texto-min: 5em; }
}
/* Columna de texto más angosta con parte fija (.ds-col-texto.ds-col-texto-corta,
   sin -parte-auto): un texto libre SECUNDARIO (método de compra, observación)
   toma el 18 % (22 % desde 1600 px de contenido) con piso de 10em (8em bajo 1150). */
body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).ds-col-texto.ds-col-texto-corta:not(.ds-col-parte-auto) { --ds-col-parte: 18%; --ds-col-texto-min: 10em; }
/* Columna flexible con piso mayor (nombre + NIT debajo): en una tabla que en el
   teléfono se desplaza de lado, el proveedor no baja de 12em; desde 1600 px de
   contenido (1920-2560: el ancho que sobra iba a las columnas de monto mientras
   el proveedor seguía cortado) toma el 30 %. */
body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).ds-col-flex.ds-col-flex-ancha { --ds-col-flex-min: 12em; }
@container contenido (min-width: 1600px) {
    body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).ds-col-flex.ds-col-flex-ancha { --ds-col-parte: 30%; }
    body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).ds-col-texto.ds-col-texto-corta:not(.ds-col-parte-auto) { --ds-col-parte: 22%; }
}
/* Contenido angosto (< 1150 px: 1280 con el riel expandido, o zoom): igual que
   §23j baja los pisos de la tabla, aquí bajan los pisos que se ponen en la
   CELDA (y por eso no ven la variable de la tabla), y una columna de contenido
   marcada .ds-col-envuelve (nombre de persona, tipo de reporte) puede partirse
   en dos líneas en vez de empujar la tabla de lado. */
@container contenido (max-width: 1149.98px) {
    body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).ds-col-flex.ds-col-flex-ancha { --ds-col-flex-min: 9em; }
    body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).ds-col-texto.ds-col-texto-corta:not(.ds-col-parte-auto) { --ds-col-texto-min: 8em; }
    body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr > td.ds-col-envuelve { white-space: normal; }
    body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).ds-col-envuelve { --ds-col-min: 6em; }
}
/* Columna de NOMBRE largo (.ds-col-nombre + .ds-celda-nombre), alternativa a
   .ds-col-flex para el texto largo de una fila (proveedor, razón social).
   .ds-col-flex toma una parte FIJA (24 %): en una ventana ancha (o Safari con
   zoom bajo) el nombre se cortaba a 2 letras del final mientras otras columnas
   sobraban. Aquí la columna es "auto": pide el ancho del nombre completo (su
   máximo) pero puede ceder hasta su piso. Las columnas de contenido no ceden
   nada, así esta es la primera (y la única) que se angosta cuando falta ancho,
   y cuando sobra crece como las demás.
    … 

       …

     
…

   .ds-celda-nombre: una línea; si no cabe, se llena la línea hasta el borde
   y "…" (el texto se parte en líneas por cualquier letra y se muestra solo la
   primera: así el mínimo de la columna es el piso y no el nombre entero, y a
   1280 se lee "COMPAÑIA FARMACE…" en vez de "COMPAÑIA…"). Con 1600 px o más
   de contenido, hasta dos líneas partidas por palabras. Pisos: 8em (13em en
   teléfono, donde la tabla se desplaza de lado dentro de su marco). */
body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr > td.ds-col-nombre { white-space: normal; }
body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).ds-col-nombre::after {
    content: "";
    display: block;
    width: var(--ds-col-nombre-min, 8em);
    height: 0;
}
body.ui-v2 .ds-celda-nombre {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: normal;
    word-break: break-all;
}
@container contenido (max-width: 767.98px) {
    body.ui-v2 :is(.ui-tabla, .ds-tabla) { --ds-col-nombre-min: 13em; }
}
@container contenido (min-width: 1600px) {
    body.ui-v2 .ds-celda-principal:has(> .ds-celda-nombre) {
        align-items: flex-start;
        height: auto;
        min-height: 1.3077em;
    }
    body.ui-v2 .ds-celda-principal > .ds-celda-nombre {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        word-break: normal;
    }
}
/* Tabla en un espacio angosto (diálogo, panel lateral): 

   alrededor de la TablaDatos o de la tabla hecha a mano. Pisos menores para las
   columnas que ceden (.ds-col-nombre 6em, .ds-col-flex 5em) y relleno lateral de
   10 px (una tabla de cinco columnas cabe en su diálogo sin desplazarse). */
body.ui-v2 .ds-tabla-angosta { --ds-col-nombre-min: 6em; --ds-col-flex-min: 5em; }
body.ui-v2 .ds-tabla-angosta :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td):not(:first-child):not(:last-child) { padding-left: 10px; padding-right: 10px; }
/* Texto de dos líneas en una celda (.ds-texto-2-lineas, §23j): el ritmo de la
   celda de dos líneas (§23a, 17 px por línea con 13 px) y no el interlineado de
   20 px de la tabla, así la fila mide 44 y no 51. */
body.ui-v2 :is(.ds-tabla, .ui-tabla) > tbody > tr > td .ds-texto-2-lineas { line-height: 1.3077; }
/* Celda de texto libre que se parte en líneas sin tope de ancho */
body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr > td.ds-celda-parte { white-space: normal; overflow-wrap: anywhere; }
/* Texto libre con cifras proporcionales: las celdas usan cifras tabulares
   (§15) y en Inter eso también ensancha el guion ("administrativo -
   financieras"). En las columnas de TEXTO libre (nombres, descripciones,
   títulos de grupo) vuelven las proporcionales; los códigos (.ds-codigo-gris,
   .ds-num) siguen tabulares. */
body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr > td:is(.ds-col-texto, .ds-celda-parte),
body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr > td .ds-texto-2-lineas,
body.ui-v2 .ds-tabla-agrupada > tbody > tr.ds-fila-grupo > th { font-variant-numeric: normal; }
body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr > :is(td, th) .ds-codigo-gris { font-variant-numeric: tabular-nums; }


/* 25b. Celdas ---------------------------------------------------------------- */
/* Select de celda AJUSTADO (266 Nombre */
/* el panel hereda white-space: nowrap de .ds-pildora-filtro (§6c): sin esto el
   nombre largo del renglón se salía del panel y se cortaba */
body.ui-v2 .ds-pildora-panel :is(.ds-casillas, .ds-casillas-vacio) { white-space: normal; }
body.ui-v2 .ds-pildora-panel .ds-casillas > label { align-items: flex-start; line-height: 1.38462; font-size: var(--ds-tam-tabla); }
body.ui-v2 .ds-pildora-panel .ds-casillas > label > .form-check-input { flex: none; margin-top: 0.08em; }
body.ui-v2 .ds-pildora-panel .ds-casilla-texto {
    min-width: 0;
    color: var(--ds-texto);
    font-size: var(--ds-tam-tabla);
    line-height: 1.38462;
}
body.ui-v2 .ds-casilla-codigo { font-weight: 600; font-variant-numeric: tabular-nums; }
body.ui-v2 .ds-casillas-vacio {
    margin: 0;
    padding: 6px 8px;
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-tabla);
    line-height: 1.38462;
}
/* Píldora informativa fija dentro de la barra (un solo valor posible, p. ej. el
   único centro de costo del usuario): alto de chip */
body.ui-v2 .ds-pildora.ds-pildora-fija { min-height: var(--ds-alto-chip); padding: 0 14px; font-size: var(--ds-tam-tabla); white-space: normal; line-height: 1.38462; }
/* Píldora de filtro activa que no abre panel (un filtro puesto desde otra
   parte, p. ej. una tarjeta): 

   …
 */
body.ui-v2 .ds-pildora-filtro-boton.ds-pildora-filtro-fija { cursor: default; }
/* Select en píldora con opciones muy largas (nombres de renglón de hasta 100
   letras): tope en em; 27em deja entero el nombre del renglón más usado (266)
   y el resto se ve con "…" y en el title. */
body.ui-v2 .ds-pildora-select.ds-pildora-select-tope { max-width: 27em; }
/* Campos de búsqueda en píldora con rótulo (filtros que se aplican mientras se
   escribe, sin formulario GET): la misma píldora de .ds-buscador-get con un
   rótulo corto adentro. ;
   .ds-buscador-ancho: el campo de texto principal (crece; ancho con width y no
   con flex-basis: en la columna de .ds-filtros-get una base flexible hacía
   medir la fila en dos líneas). */
body.ui-v2 .ds-buscador-get.ds-buscador-rotulado { width: auto; min-width: 0; }
body.ui-v2 .ds-buscador-rotulado > .ds-buscador-rotulo {
    position: absolute;
    left: 14px;
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-tabla);
    font-weight: 500;
    line-height: 1.38462;
    pointer-events: none;
}
body.ui-v2 .ds-buscador-rotulado > input { width: 12em; padding-left: 4.9em; font-variant-numeric: tabular-nums; }
body.ui-v2 .ds-buscador-rotulado.ds-buscador-ancho { flex: 0 1 auto; width: 30em; min-width: 14em; max-width: 100%; }
body.ui-v2 .ds-buscador-rotulado.ds-buscador-ancho > input { width: 100%; padding-left: 36px; }
body.ui-v2 .ds-buscador-get.ds-buscador-activo > .ds-buscador-rotulo { color: var(--ds-acento-oscuro); }
@media (max-width: 767.98px) {
    body.ui-v2 .ds-filtros-fila-envuelve > .ds-buscador-rotulado:not(.ds-buscador-ancho) { flex: 1 1 8em; }
    body.ui-v2 .ds-filtros-fila-envuelve > .ds-buscador-rotulado:not(.ds-buscador-ancho) > input { width: 100%; }
    body.ui-v2 .ds-filtros-fila-envuelve > .ds-pildora-select { flex: 1 1 100%; max-width: 100%; }
}
/* Buscador de un formulario GET más ancho (búsqueda por varios campos: "NIT,
   razón social o nombre comercial"): el placeholder entero. */
body.ui-v2 .ds-buscador-get:has(> input.ds-buscador-largo) { width: 24em; }
@media (max-width: 767.98px) {
    body.ui-v2 .ds-buscador-get:has(> input.ds-buscador-largo) { width: 100%; }
}
/* Fila con varios buscadores (
):
   se encogen (piso 13em) antes de bajar de renglón; tope 22em. */
body.ui-v2 .ds-filtros-fila.ds-filtros-flexible > .ds-buscador-get { flex: 1 1 13em; width: auto; min-width: 13em; max-width: 22em; }
/* barra de filtros GET dentro de la cabeza de una tarjeta: sin margen propio */
body.ui-v2 .ds-filtros-get.ds-filtros-en-linea { margin: 0; }


/* 25e. Indicadores: tarjeta que es botón, resumen con distribución, montos --- */
/* Indicador (KPI) que es botón y filtra al hacer clic:
   
   Igual que la tarjeta de indicador; al pasar el mouse, sombra flotante; el
   activo (aria-pressed="true" o .activo) lleva el anillo acento, como a.ds-kpi. */
body.ui-v2 button.ds-kpi {
    width: 100%;
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--ds-transicion), box-shadow var(--ds-transicion), background-color var(--ds-transicion);
}
body.ui-v2 button.ds-kpi:hover,
body.ui-v2 button.ds-kpi.ds-f-hover { border-color: var(--ds-borde-fuerte); box-shadow: var(--ds-sombra-flotante); }
body.ui-v2 button.ds-kpi:focus-visible,
body.ui-v2 button.ds-kpi.ds-f-foco { outline: 0; border-color: var(--ds-acento); box-shadow: var(--tb-anillo); }
body.ui-v2 button.ds-kpi.activo,
body.ui-v2 button.ds-kpi[aria-pressed="true"],
body.ui-v2 button.ds-kpi.ds-f-activo { border-color: var(--ds-acento); box-shadow: 0 0 0 1px var(--ds-acento); }
body.ui-v2 button.ds-kpi .ds-kpi-valor-fila { align-items: baseline; }
/* tono "error oscuro" (más grave que error: p. ej. desabastecimiento total) */
body.ui-v2 .ds-kpi-error-oscuro .ds-kpi-icono { background: var(--ds-error); color: var(--ds-texto-sobre-relleno); }
/* Resumen con barra de distribución: la barra (partes de un total, §24n) sobre
   las tarjetas que la desglosan.
   
…
…
 */
body.ui-v2 .ds-resumen-distribucion { margin-bottom: var(--ds-e5); }
body.ui-v2 .ds-resumen-distribucion > .ds-distribucion { margin-bottom: var(--ds-e3); }
body.ui-v2 .ds-resumen-distribucion > .ds-kpis { margin-bottom: 0; }
body.ui-v2 .ds-distribucion-parte.ds-parte-error-oscuro { background: var(--ds-error-punto-oscuro); }
body.ui-v2 .ds-distribucion.ds-distribucion-vacia { background: var(--ds-neutro-fondo); }
/* Indicadores con montos (.ds-kpis-montos): "Q 16,054,123.45" nunca se parte
   ni se sale de la tarjeta: cada tarjeta es un contenedor y el valor toma su
   letra del ancho de la tarjeta (10.5cqi ≈ un monto de 15 caracteres a lo
   ancho), entre 16 px y la letra normal del indicador (26; 20 en compactos).
   Bajo 1280 (sin columnas fijas) una tarjeta no baja de 15em: en el teléfono,
   una por renglón. */
body.ui-v2 .ds-kpis-montos > .ds-kpi { container-type: inline-size; }
body.ui-v2 .ds-kpis-montos .ds-kpi-valor {
    font-size: clamp(16px, 10.5cqi, var(--ds-tam-titulo));
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
    white-space: nowrap;
}
body.ui-v2 .ds-kpis-montos.ds-kpis-compactos .ds-kpi-valor { font-size: clamp(16px, 10.5cqi, 20px); }
@media (max-width: 1279.98px) {
    body.ui-v2 .ds-kpis.ds-kpis-montos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr)); }
}
/* Indicadores en una línea (
), desde
   768 px: ícono a la izquierda, etiqueta arriba y detalle debajo al centro,
   valor a la derecha; ~50 px de alto en vez de ~86. Vale para el marcado del
   macro ds.kpi (valor y detalle sueltos; sin `info` ni `delta`) y para el de
   abastecimiento.js (valor y detalle en .ds-kpi-valor-fila). Tarjeta angosta
   (< 20em): sin el ícono, para que la etiqueta quepa. En el teléfono queda la
   tarjeta de siempre (etiqueta arriba, valor abajo). */
@media (min-width: 768px) {
    body.ui-v2 .ds-kpis-en-linea > .ds-kpi {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "icono etiqueta valor" "icono detalle valor";
        align-items: center;
        gap: 0;
        padding: var(--ds-e2) var(--ds-e4);
        container-type: inline-size;
    }
    body.ui-v2 .ds-kpis-en-linea > .ds-kpi > :is(.ds-kpi-etiqueta, .ds-kpi-valor-fila) { display: contents; }
    body.ui-v2 .ds-kpis-en-linea .ds-kpi-icono { grid-area: icono; margin-right: var(--ds-e3); }
    body.ui-v2 .ds-kpis-en-linea .ds-kpi-etiqueta > span:not(.ds-kpi-icono) { grid-area: etiqueta; align-self: end; min-width: 0; line-height: 1.3; overflow-wrap: break-word; }
    body.ui-v2 .ds-kpis-en-linea .ds-kpi-detalle { grid-area: detalle; align-self: start; font-size: var(--ds-tam-etiqueta); line-height: 1.3; }
    body.ui-v2 .ds-kpis-en-linea .ds-kpi-valor { grid-area: valor; margin-left: var(--ds-e3); font-size: 20px; line-height: 1.2; white-space: nowrap; }
    body.ui-v2 .ds-kpis-en-linea > .ds-kpi > .ds-barra-avance { grid-column: 1 / -1; margin-top: var(--ds-e1); }
}
@container (max-width: 20em) {
    body.ui-v2 .ds-kpis-en-linea .ds-kpi-icono { display: none; }
}
/* Indicadores con montos en una línea (.ds-kpis-montos.ds-kpis-en-linea: Órdenes
   de Compra). "Q 55,173,992.22" pide ~15 caracteres: el valor toma su letra del
   ancho de la tarjeta (6.4cqi: 18 px en la tarjeta de 1440, 20 px desde ~310 px
   de contenido, 16 px a 1280) y el ícono se oculta bajo 24em, así etiqueta y
   detalle quedan en UNA línea a 1440 (60 px de alto). Menos aire bajo la fila
   de indicadores (16 px): la tabla gana una fila a 1440×790. En el teléfono,
   la tarjeta de siempre (con ícono). */
@media (min-width: 768px) {
    body.ui-v2 .ds-kpis-montos.ds-kpis-en-linea .ds-kpi-valor { font-size: clamp(16px, 6.4cqi, 20px); }
    body.ui-v2 .ds-kpis.ds-kpis-montos.ds-kpis-en-linea { margin-bottom: var(--ds-e4); }
    @container (max-width: 24em) {
        body.ui-v2 .ds-kpis-montos.ds-kpis-en-linea .ds-kpi-icono { display: none; }
    }
}


/* 25f. Píldoras, marcas y botones ---------------------------------------------- */
/* Píldora que es enlace; píldora de conteo (cifra centrada de ancho estable) */
body.ui-v2 a.ds-pildora { text-decoration: none; transition: filter var(--ds-transicion), box-shadow var(--ds-transicion); }
body.ui-v2 a.ds-pildora:hover { filter: brightness(0.95); }
body.ui-v2 a.ds-pildora:focus-visible { outline: 0; box-shadow: var(--tb-anillo); }
body.ui-v2 .ds-pildora.ds-pildora-conteo { justify-content: center; min-width: 3.6em; font-variant-numeric: tabular-nums; }
/* Píldora de contorno: aviso más suave que la píldora llena (solo borde
   punteado, sin relleno): "verifique", no "es así". .ds-marca-debajo: la
   píldora baja a su propia línea bajo un código. */
body.ui-v2 .ds-pildora.ds-pildora-contorno {
    background: transparent;
    color: var(--ds-aviso);
    border: 1px dashed var(--ds-ambar-punto);
    padding: calc(0.0834em - 1px) calc(0.6667em - 1px);   /* el borde no la agranda: mide lo de toda píldora (§7) */
}
body.ui-v2 .ds-pildora.ds-marca-debajo { display: flex; width: max-content; max-width: 100%; margin-top: 4px; white-space: nowrap; }
body.ui-v2 .ds-codigo-fuerte,
body.ui-v2 .ds-celda-codigo { font-weight: 600; color: var(--ds-texto); font-variant-numeric: tabular-nums; }
/* Marca de contrato abierto (enlace a Guatecompras). Firme (esta presentación
   exacta): píldora aviso con latido lento, solo opacidad (un elemento que
   cambia de tamaño nunca queda "estable" para un navegador automatizado).
   Aviso (otra presentación del mismo código): solo contorno discontinuo, sin
   latido.
   
    */
@keyframes ds-latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
body.ui-v2 .ds-latido { animation: ds-latido 1.8s ease-in-out infinite; }
body.ui-v2 .ds-marca-contrato {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin-top: 4px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
body.ui-v2 .ds-marca-contrato:hover { animation: none; filter: brightness(0.95); }
body.ui-v2 .ds-marca-contrato.ds-marca-contrato-aviso { border-style: dashed; font-weight: 500; }
body.ui-v2 .ds-marca-contrato > .ti { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { body.ui-v2 .ds-latido { animation: none; } }
/* Píldora que es botón (un aviso del pie que lleva a su tarjeta) */
body.ui-v2 button.ds-pildora.ds-pildora-accion {
    border: 0;
    cursor: pointer;
    transition: background-color var(--ds-transicion), box-shadow var(--ds-transicion);
}
body.ui-v2 button.ds-pildora.ds-pildora-aviso.ds-pildora-accion:hover { background: color-mix(in srgb, var(--ds-aviso-fondo), var(--ds-ambar-borde)); }
body.ui-v2 button.ds-pildora.ds-pildora-accion:focus-visible { outline: 2px solid var(--ds-acento-oscuro); outline-offset: 2px; }
/* Botón con conteo (carrito): 
   .ds-btn-con-conteo (hay algo): el conteo en blanco lleno. .ds-pulso: un latido
   corto de escala al sumar (una vez; el JS vuelve a ponerlo). */
body.ui-v2 .ds-btn-conteo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7em;
    padding: 1px 7px;
    border-radius: var(--ds-radio-pildora);
    background: var(--ds-conteo-sobre-relleno);          /* sobre el primario: blanco 7.57:1 (con blanco al 20 % era 3.70:1) */
    color: inherit;
    font-size: var(--ds-tam-etiqueta);
    font-weight: 600;
    line-height: 1.33334;
    font-variant-numeric: tabular-nums;
}
body.ui-v2 .ds-btn-secundario .ds-btn-conteo { background: var(--ds-neutro-fondo); color: var(--ds-neutro); }
body.ui-v2 .ds-btn-con-conteo .ds-btn-conteo { background: var(--ds-superficie); color: var(--ds-relleno-primario); }
@keyframes ds-pulso { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
body.ui-v2 .ds-pulso { animation: ds-pulso 0.35s ease; }
@media (prefers-reduced-motion: reduce) { body.ui-v2 .ds-pulso { animation: none; } }
/* botón de fila que ya cumplió ("En el listado"): terciario en verde */
body.ui-v2 .ds-btn.ds-btn-en-lista { color: var(--ds-exito); }


/* 25g. Tarjetas, subpaneles, plegables y acordeón ------------------------------ */
/* Tarjeta plana mientras su contenido está oculto (p. ej. el cruce antes de
   pedirlo): solo su cabeza, sin línea ni relleno de más abajo. Pie de tarjeta
   cuyo único contenido está oculto: no se dibuja. */
body.ui-v2 .ds-tarjeta-plana:has(> .ds-tarjeta-cuerpo > [hidden]:only-child) > .ds-tarjeta-cabeza { padding-bottom: var(--ds-e4); border-bottom: 0; }
body.ui-v2 .ds-tarjeta-pie:has(> [hidden]:only-child) { display: none; }
/* Tarjeta numerada (paso de un formulario) con línea bajo el título: el número
   y las acciones se alinean con el título, arriba. */
body.ui-v2 .ds-tarjeta-cabeza:has(> .ds-tarjeta-numero):has(.ds-tarjeta-linea) > .ds-tarjeta-numero { align-self: flex-start; margin-top: 0; }
body.ui-v2 .ds-tarjeta-cabeza:has(> .ds-tarjeta-numero):has(.ds-tarjeta-linea) > .ds-tarjeta-acciones { align-self: flex-start; }
/* estado de una tarjeta junto a su título (píldora "Listo"/"Pendiente") */
body.ui-v2 .ds-tarjeta-estado { display: inline-flex; align-items: center; }
body.ui-v2 .ds-tarjeta-estado:empty { display: none; }
/* Subpaneles dentro de una tarjeta (un grupo de una sección, p. ej. los insumos
   de un renglón): borde fino, radio 12, cabecera gris muy clara con título y
   resumen, tabla hasta el borde y, abajo, avisos y bloques con su relleno.
   

     
…
…

     
…

     
…

   .ds-subpanel-aviso: el grupo que necesita algo (cabecera ámbar suave). */
body.ui-v2 .ds-subpaneles { display: flex; flex-direction: column; gap: var(--ds-e4); }
body.ui-v2 .ds-subpaneles:empty { display: none; }
body.ui-v2 .ds-subpanel {
    min-width: 0;
    background: var(--ds-superficie);
    border: 1px solid var(--ds-borde-marco);
    border-radius: var(--ds-radio-campo);
}
body.ui-v2 .ds-subpanel-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-e2) var(--ds-e3);
    min-height: 44px;
    padding: 8px var(--ds-e4);
    background: var(--ds-fondo);
    border-bottom: 1px solid var(--ds-borde);
    border-radius: calc(var(--ds-radio-campo) - 1px) calc(var(--ds-radio-campo) - 1px) 0 0;
}
body.ui-v2 .ds-subpanel-titulo {
    min-width: 0;
    margin: 0;
    color: var(--ds-texto);
    font-size: var(--ds-tam-cuerpo);
    font-weight: 600;
    line-height: 1.42858;
}
body.ui-v2 .ds-subpanel.ds-subpanel-aviso { border-color: var(--ds-ambar-borde); }
body.ui-v2 .ds-subpanel.ds-subpanel-aviso > .ds-subpanel-cabeza { background: var(--ds-aviso-fondo); border-bottom-color: var(--ds-ambar-borde); }
body.ui-v2 .ds-subpanel > .table-responsive > .ds-tabla > tbody > tr:last-child > td { border-bottom: 0; }
body.ui-v2 .ds-subpanel-bloque { padding: var(--ds-e3) var(--ds-e4) var(--ds-e4); border-top: 1px solid var(--ds-borde); }
body.ui-v2 .ds-subpanel-bloque > .ds-aviso { margin: 0; }
/* Tabla de líneas de un subpanel: la descripción ocupa lo que sobra; código,
   cantidad y quitar miden lo que piden. Anchos en em: las columnas quedan
   alineadas entre un grupo y otro (con reparto automático cada tabla medía
   distinto según sus marcas); en el teléfono, reparto automático. */
body.ui-v2 .ds-tabla-lineas > tbody > tr > td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
body.ui-v2 .ds-tabla-lineas > tbody > tr > td.ds-celda-codigo { padding-top: 16px; }
body.ui-v2 .ds-tabla-lineas > tbody > tr > td.ds-celda-texto-linea { padding-top: 16px; overflow-wrap: anywhere; }
body.ui-v2 .ds-tabla-lineas > tbody > tr > td.ds-celda-texto-linea:has(> input) { padding-top: 10px; }
body.ui-v2 .ds-tabla-lineas > tbody > tr > td.ds-celda-letras { padding-top: 16px; color: var(--ds-texto-2); font-size: var(--ds-tam-etiqueta); line-height: 1.5; }
body.ui-v2 .ds-tabla.ds-tabla-lineas { table-layout: fixed; }
body.ui-v2 .ds-tabla.ds-tabla-lineas > thead > tr > th.ds-col-codigo-linea { width: 15.5em; }
body.ui-v2 .ds-tabla.ds-tabla-lineas > thead > tr > th.ds-col-renglon { width: 20em; }
body.ui-v2 .ds-tabla.ds-tabla-lineas > thead > tr > th.ds-col-cantidad { width: 13em; }   /* el campo de cantidad (12 cifras, §25h) + el relleno de la celda: con 10.5em el campo se angostaba y cortaba "3456789.00" */
body.ui-v2 .ds-tabla.ds-tabla-lineas > thead > tr > th.ds-col-letras { width: 14em; }
body.ui-v2 .ds-tabla.ds-tabla-lineas > thead > tr > th.ds-col-ajustada { width: 8.5em; }
body.ui-v2 .ds-tabla-lineas > :is(thead, tbody) > tr > :is(th, td).ds-col-cantidad { text-align: right; }
body.ui-v2 .ds-tabla-lineas > tbody > tr > td.ds-col-ajustada { white-space: nowrap; }
@media (max-width: 767.98px) {
    body.ui-v2 .ds-tabla.ds-tabla-lineas { table-layout: auto; }
    body.ui-v2 .ds-tabla-lineas > tbody > tr > td.ds-celda-texto-linea { min-width: 14em; }
}
/* Plegables (details/summary) dentro de una tarjeta plana:
   

    12
   ……
 */
body.ui-v2 .ds-plegables { display: flex; flex-direction: column; }
body.ui-v2 .ds-plegable { border-bottom: 1px solid var(--ds-borde); }
body.ui-v2 .ds-plegable:last-child { border-bottom: 0; }
body.ui-v2 .ds-plegable-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-e2) var(--ds-e3);
    min-height: 48px;
    padding: 10px 20px;
    color: var(--ds-texto);
    font-size: var(--ds-tam-cuerpo);
    line-height: 1.42858;
    list-style: none;
    cursor: pointer;
    transition: background-color var(--ds-transicion);
}
body.ui-v2 .ds-plegable-cabeza::-webkit-details-marker { display: none; }
body.ui-v2 .ds-plegable-cabeza::marker { content: ""; }
body.ui-v2 .ds-plegable-cabeza:hover { background: var(--ds-hover); }
body.ui-v2 .ds-plegable-cabeza:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--ds-acento-oscuro); }
body.ui-v2 .ds-plegable-flecha { flex: none; color: var(--ds-texto-2); font-size: 16px; transition: transform var(--ds-transicion); }
body.ui-v2 .ds-plegable[open] > .ds-plegable-cabeza .ds-plegable-flecha { transform: rotate(90deg); }
body.ui-v2 .ds-plegable-titulo { font-weight: 500; }
body.ui-v2 .ds-plegable-nota { color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); }
body.ui-v2 .ds-plegable-vacio { margin: 0; padding: 0 20px 14px 48px; color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); }
body.ui-v2 .ds-plegable[open] > .ds-plegable-cabeza { border-bottom: 1px solid var(--ds-borde); }
body.ui-v2 .ds-plegable[open]:has(> .ds-plegable-vacio) > .ds-plegable-cabeza { border-bottom: 0; }
body.ui-v2 .ds-aviso + .ds-plegable,
body.ui-v2 .ds-plegables > .ds-aviso { margin: 12px 20px; }
/* Acordeón con conteo: código + nombre a la izquierda, conteo a la derecha.
    */
body.ui-v2 .ds-acordeon .accordion-button { gap: var(--ds-e3); font-size: var(--ds-tam-cuerpo); line-height: 1.42858; }
body.ui-v2 .ds-acordeon-titulo { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; }
body.ui-v2 .ds-acordeon-nombre { min-width: 0; font-weight: 600; }
body.ui-v2 .ds-acordeon-conteo { flex: none; margin-right: var(--ds-e2); }
body.ui-v2 .ds-acordeon .accordion-button::after { margin-left: 0; }
body.ui-v2 .ds-acordeon .accordion-body { padding: var(--ds-e1) 20px 20px; color: var(--ds-texto); }
/* Bloque con título dentro de una tarjeta o acordeón (un subprograma, un
   grupo): título 14/600 con su código, y su tabla debajo. */
body.ui-v2 .ds-bloque-grupo + .ds-bloque-grupo { margin-top: var(--ds-e5); }
body.ui-v2 .ds-bloque-grupo-titulo {
    display: flex;
    align-items: center;
    gap: var(--ds-e2);
    margin: 0 0 10px;
    color: var(--ds-texto);
    font-size: var(--ds-tam-cuerpo);
    font-weight: 600;
    line-height: 1.42858;
}


/* 25h. Formularios ------------------------------------------------------------ */
/* Pasos como enlaces (formulario de una sola página): cada paso lleva a su
   tarjeta y muestra si está listo (✓), si es el que sigue (contorno) o si
   falta (gris).
    */
body.ui-v2 .ds-pasos-nav { margin: 0 0 var(--ds-e5); }
body.ui-v2 .ds-paso-enlace {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: -4px;
    padding: 4px 10px 4px 4px;
    border-radius: var(--ds-radio-pildora);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--ds-transicion), color var(--ds-transicion);
}
body.ui-v2 .ds-paso-enlace:hover { background: var(--ds-hover-fondo); color: var(--ds-texto); }
body.ui-v2 .ds-paso-enlace:focus-visible { outline: 2px solid var(--ds-acento-oscuro); outline-offset: 0; }
/* Formulario POR PASOS (uno visible a la vez; acta de adjudicación, 2026-09-30): el paso ABIERTO lleva el tinte de
   lo activo; su marca sigue diciendo el estado (✓ listo, contorno = el primero que falta, gris = pendiente). */
body.ui-v2 .ds-paso-abierto > .ds-paso-enlace { background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); font-weight: 600; }
/* ancla: la tarjeta a la que lleva un paso o un aviso queda bajo la barra superior */
body.ui-v2 .ds-ancla { scroll-margin-top: calc(var(--ds-alto-barra) + 28px); }
/* Campos de búsqueda en una fila: tres cajones y un botón al final, alineados por abajo. */
body.ui-v2 .ds-buscador-campos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) auto;
    gap: var(--ds-e4);
    align-items: end;
}
body.ui-v2 .ds-buscador-campos > .ds-campo { margin: 0; min-width: 0; }
@media (max-width: 991.98px) {
    body.ui-v2 .ds-buscador-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.ui-v2 .ds-buscador-campos > :nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    body.ui-v2 .ds-buscador-campos { grid-template-columns: minmax(0, 1fr); }
    body.ui-v2 .ds-buscador-campos > .ds-btn { justify-self: start; }
}
/* Panel flotante anclado (resultados de una búsqueda): se superpone al
   contenido de abajo sin empujarlo; queda por debajo del pie fijo (1010).
   

     
…

     …tabla o estado vacío…
 */
body.ui-v2 .ds-flotante-ancla { position: relative; }
body.ui-v2 .ds-flotante {
    position: absolute;
    top: var(--ds-e2);
    left: 0;
    right: 0;
    z-index: 200;
    max-height: min(62vh, 34em);
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--ds-superficie);
    border: 1px solid var(--ds-borde);
    border-radius: var(--ds-radio-tarjeta);
    box-shadow: var(--ds-sombra-menu);
    scrollbar-width: thin;
}
body.ui-v2 .ds-flotante-cabeza {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--ds-e2);
    min-height: 44px;
    padding: 6px 8px 6px var(--ds-e4);
    background: var(--ds-superficie);
    border-bottom: 1px solid var(--ds-borde);
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-tabla);
    line-height: 1.38462;
}
body.ui-v2 .ds-flotante-titulo { flex: 1 1 auto; min-width: 0; }
body.ui-v2 .ds-flotante-titulo > strong { color: var(--ds-texto); font-weight: 600; }
body.ui-v2 .ds-flotante-cargando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-e2);
    padding: var(--ds-e5) var(--ds-e4);
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-tabla);
}
body.ui-v2 .ds-flotante-error { margin: 0; padding: var(--ds-e4); color: var(--ds-error); font-size: var(--ds-tam-tabla); }
body.ui-v2 .ds-flotante > .table-responsive { border-radius: 0 0 calc(var(--ds-radio-tarjeta) - 1px) calc(var(--ds-radio-tarjeta) - 1px); }
body.ui-v2 .ds-flotante .ds-tabla > tbody > tr > td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; }
body.ui-v2 .ds-flotante .ds-tabla > tbody > tr > td.ds-celda-acciones { padding-top: 5px; padding-bottom: 5px; }
body.ui-v2 .ds-vacio.ds-vacio-compacto { gap: var(--ds-e2); padding: var(--ds-e5) var(--ds-e4); }
body.ui-v2 .ds-vacio.ds-vacio-compacto .ds-vacio-icono { font-size: 28px; }
/* Tarjetas seleccionables (botón con aria-pressed): borde fino, radio 12;
   elegida = borde acento, fondo acento claro y ✓ arriba a la derecha;
   deshabilitada = gris.
   

     

   Persona: .ds-seleccionable-persona con 
   (el avatar de la tarjeta es gris; el de la barra superior, §3c, no cambia). */
body.ui-v2 .ds-seleccionables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5em), 1fr));
    gap: var(--ds-e2);
}
body.ui-v2 .ds-seleccionables-personas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22em), 1fr)); }
body.ui-v2 .ds-seleccionables > .ds-aviso { grid-column: 1 / -1; margin: 0; }
body.ui-v2 .ds-seleccionable {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px 34px 10px 12px;
    border: 1px solid var(--ds-borde-fuerte);
    border-radius: var(--ds-radio-campo);
    background: var(--ds-superficie);
    color: var(--ds-texto);
    font-family: var(--ds-fuente);
    font-size: var(--ds-tam-tabla);
    line-height: 1.38462;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ds-transicion), background-color var(--ds-transicion), box-shadow var(--ds-transicion);
}
body.ui-v2 .ds-seleccionable > span:not(.ds-avatar):not(.ds-seleccionable-cuerpo),
body.ui-v2 .ds-seleccionable-cuerpo > span { display: block; max-width: 100%; overflow-wrap: anywhere; }
body.ui-v2 .ds-seleccionable:hover { border-color: var(--ds-borde-hover); background: var(--ds-hover); }
body.ui-v2 .ds-seleccionable:focus-visible { outline: 2px solid var(--ds-acento-oscuro); outline-offset: 2px; }
body.ui-v2 .ds-seleccionable-titulo { font-size: var(--ds-tam-cuerpo); font-weight: 600; line-height: 1.42858; font-variant-numeric: tabular-nums; }
body.ui-v2 .ds-seleccionable-linea { color: var(--ds-texto-2); font-size: var(--ds-tam-etiqueta); line-height: 1.5; font-variant-numeric: tabular-nums; }
body.ui-v2 .ds-seleccionable-linea.ds-texto-error { color: var(--ds-error); font-weight: 500; }
body.ui-v2 .ds-seleccionable-recibe { margin-top: 2px; color: var(--ds-acento-oscuro); font-size: var(--ds-tam-etiqueta); font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; }
body.ui-v2 .ds-seleccionable-marca {
    position: absolute;
    top: 9px;
    right: 9px;
    color: var(--ds-acento-oscuro);
    font-size: 18px;
    line-height: 1;
    opacity: 0;
    transition: opacity var(--ds-transicion);
}
body.ui-v2 .ds-seleccionable.ds-seleccionada,
body.ui-v2 .ds-seleccionable[aria-pressed="true"] {
    border-color: var(--ds-acento);
    background: var(--ds-acento-claro);
    box-shadow: inset 0 0 0 1px var(--ds-acento);
}
body.ui-v2 .ds-seleccionable.ds-seleccionada > .ds-seleccionable-marca,
body.ui-v2 .ds-seleccionable[aria-pressed="true"] > .ds-seleccionable-marca { opacity: 1; }
/* línea gris sobre el tinte de la elegida: --ds-neutro (6.9:1; texto-2 daba 4.3:1) */
body.ui-v2 .ds-seleccionable.ds-seleccionada .ds-seleccionable-linea,
body.ui-v2 .ds-seleccionable[aria-pressed="true"] .ds-seleccionable-linea { color: var(--ds-neutro); }
body.ui-v2 .ds-seleccionable:disabled,
body.ui-v2 .ds-seleccionable.ds-deshabilitada {
    border-color: var(--ds-borde);
    background: var(--ds-fondo);
    box-shadow: none;
    color: var(--ds-texto-3);
    cursor: not-allowed;
}
body.ui-v2 .ds-seleccionable:disabled .ds-seleccionable-linea,
body.ui-v2 .ds-seleccionable.ds-deshabilitada .ds-seleccionable-linea { color: var(--ds-texto-3); }
/* elegida pero deshabilitada (asignación conservada): gris con borde de
   acento punteado; se puede pulsar porque quitarla es lo único posible */
body.ui-v2 .ds-seleccionable.ds-deshabilitada.ds-seleccionada:not(:disabled) {
    border: 1px dashed var(--ds-acento);
    background: var(--ds-neutro-fondo);
    box-shadow: none;
    color: var(--ds-texto-2);
    cursor: pointer;
}
body.ui-v2 .ds-seleccionable.ds-deshabilitada.ds-seleccionada:not(:disabled):hover { background: var(--ds-hover); }
body.ui-v2 .ds-seleccionable.ds-deshabilitada.ds-seleccionada .ds-seleccionable-marca { color: var(--ds-texto-2); }
/* saldo negativo: sigue en rojo aunque la tarjeta esté deshabilitada */
body.ui-v2 .ds-seleccionable .ds-seleccionable-linea.ds-texto-error { color: var(--ds-error); }
/* persona: avatar con iniciales + nombre y cargo */
body.ui-v2 .ds-seleccionable.ds-seleccionable-persona {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--ds-e3);
    padding: 12px 36px 12px 12px;
}
body.ui-v2 .ds-seleccionable-cuerpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.ui-v2 .ds-seleccionable-cuerpo > span { overflow-wrap: anywhere; }
body.ui-v2 .ds-seleccionable .ds-avatar {
    display: inline-grid;
    place-items: center;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    background: var(--ds-neutro-fondo);
    color: var(--ds-neutro);
    font-size: var(--ds-tam-etiqueta);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
}
body.ui-v2 .ds-seleccionable .ds-avatar[data-iniciales]::before { content: attr(data-iniciales); }
body.ui-v2 .ds-seleccionable[aria-pressed="true"] .ds-avatar { background: var(--ds-relleno-primario); color: var(--ds-texto-sobre-relleno); }
@media (max-width: 575.98px) {
    /* en dos columnas el código (001-004-0001) y el saldo se partían en dos
       líneas; en una sola columna cada tarjeta se lee entera */
    body.ui-v2 .ds-seleccionables:not(.ds-seleccionables-personas) { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    body.ui-v2 .ds-seleccionable { padding: 8px 36px 8px 12px; }
    body.ui-v2 .ds-seleccionable-marca { top: 50%; right: 12px; transform: translateY(-50%); }
}
/* Reparto por subproducto: bloque bajo la tabla de un grupo (título + (i) +
   interruptor, la rejilla de tarjetas, las cantidades a mano y un resumen). */
body.ui-v2 .ds-reparto-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-e2) var(--ds-e4);
    margin-bottom: var(--ds-e3);
}
body.ui-v2 .ds-reparto-titulo {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    margin: 0;
    color: var(--ds-texto);
    font-size: var(--ds-tam-tabla);
    font-weight: 600;
    line-height: 1.38462;
}
body.ui-v2 .ds-reparto-cabeza .form-check { margin: 0; font-size: var(--ds-tam-tabla); }
body.ui-v2 .ds-reparto-manual:not(:empty) { display: flex; flex-direction: column; gap: var(--ds-e2); margin-top: var(--ds-e3); }
body.ui-v2 .ds-reparto-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-e2) var(--ds-e3); }
body.ui-v2 .ds-reparto-etiqueta { min-width: 10em; color: var(--ds-texto); font-size: var(--ds-tam-tabla); font-weight: 500; font-variant-numeric: tabular-nums; }
body.ui-v2 .ds-reparto-resumen { margin: var(--ds-e3) 0 0; font-size: var(--ds-tam-tabla); line-height: 1.38462; }
body.ui-v2 .ds-reparto-resumen:empty { display: none; }
body.ui-v2 .ds-reparto-resumen.ds-texto-error { font-weight: 600; }
/* Campo de solo lectura (valor que no se edita, con el alto de un campo) */
body.ui-v2 .ds-campo-lectura {
    display: flex;
    align-items: center;
    min-height: var(--ds-alto-control);
    padding: 9px 14px;
    border: 1px solid var(--ds-borde);
    border-radius: var(--ds-radio-campo);
    background: var(--ds-fondo);
    color: var(--ds-texto);
    font-size: var(--ds-tam-cuerpo);
    line-height: 1.42858;
    overflow-wrap: anywhere;
}
body.ui-v2 .ds-campo-lectura.ds-texto-2 { color: var(--ds-texto-2); }
body.ui-v2 .ds-campo-lectura.ds-texto-error { color: var(--ds-error); }
/* Campo de cantidad: número a la derecha y sin las flechas del campo numérico
   (en Safari, sobre todo con zoom bajo, las flechas tapaban la última cifra:
   "1(" en vez de "10"); se sigue escribiendo y subiendo/bajando con ↑/↓.
   Ancho en ch más el relleno y el borde del campo, así cabe la cifra entera
   ("3456789.00"): en un formulario, 12 cifras; en la tabla de un panel
   lateral (carrito), 11 con alto y relleno de fila compacta (9 en el
   teléfono). En em se cortaba la última cifra ("3456789.0"). */
body.ui-v2 .ds-campo-cantidad { text-align: right; font-variant-numeric: tabular-nums; appearance: textfield; -webkit-appearance: textfield; -moz-appearance: textfield; }
body.ui-v2 .ds-campo-cantidad::-webkit-inner-spin-button,
body.ui-v2 .ds-campo-cantidad::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body.ui-v2 .form-control.ds-campo-cantidad { width: calc(12ch + 30px); max-width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
body.ui-v2 .ds-panel-tabla .form-control.ds-campo-cantidad { width: calc(11ch + 22px); min-height: 32px; padding: 4px 10px; }
@media (max-width: 575.98px) {
    body.ui-v2 .ds-panel-tabla .form-control.ds-campo-cantidad { width: calc(9ch + 18px); padding-right: 6px; }
}
body.ui-v2 .form-select.ds-campo-renglon { width: 100%; min-width: 16em; }
body.ui-v2 .form-select.ds-campo-presentacion { max-width: 32em; }
body.ui-v2 .ds-linea-presentacion { margin-top: 6px; font-size: var(--ds-tam-etiqueta); line-height: 1.5; }
body.ui-v2 .ds-linea-presentacion:empty { display: none; }
/* proveedor: NIT | nombre (doble) | fecha; en una columna angosta, uno bajo otro */
body.ui-v2 .ds-form-grilla-proveedor { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
@container lateral (max-width: 44.99em) {
    body.ui-v2 .ds-form-grilla-proveedor { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    body.ui-v2 .ds-form-grilla-proveedor { grid-template-columns: minmax(0, 1fr); }
}
/* Grilla de formulario con un campo angosto y uno ancho (código + nombre) */
body.ui-v2 .ds-form-grilla.ds-form-grilla-1-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
@media (max-width: 767.98px) {
    body.ui-v2 .ds-form-grilla.ds-form-grilla-1-3 { grid-template-columns: minmax(0, 1fr); }
}
/* Formulario largo que aprovecha el ancho:
   

     
…tarjetas anchas (búsqueda, tablas)…

     
…tarjetas cortas (firmas, texto)…

     …pie fijo…

   Una sola columna de 86em (~1200 px, lo de un formulario de detalle); con
   contenido de 100em o más (~1400 px; consulta sobre main.ds-contenido:
   pantalla ancha, riel delgado o Safari con zoom bajo) la lateral pasa a la
   derecha (24–28em) y la principal toma el resto. El umbral va en em a
   propósito: con zoom de página WebKit compara el contenedor en px "con zoom"
   y un umbral en px no se cumplía nunca. El orden del documento (y del Tab) no
   cambia. .ds-par-tarjetas: dos tarjetas lado a lado si su contenedor es
   ancho, una bajo otra si no. En la columna angosta, título y píldora de estado
   de una tarjeta en la misma línea. */
body.ui-v2 .ds-form-adaptable { max-width: var(--ds-ancho-detalle); }
body.ui-v2 .ds-form-dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-e5); align-items: start; }
body.ui-v2 .ds-columna-principal,
body.ui-v2 .ds-columna-lateral { display: flex; flex-direction: column; gap: var(--ds-e5); min-width: 0; }
body.ui-v2 .ds-columna-lateral { container: lateral / inline-size; }
body.ui-v2 :is(.ds-columna-principal, .ds-columna-lateral, .ds-par-tarjetas) > .ds-tarjeta { margin-bottom: 0; }
body.ui-v2 .ds-par-tarjetas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-e5); align-items: start; }
body.ui-v2 .ds-columna-lateral .ds-tarjeta-titulos { flex-basis: 9em; }
@container lateral (min-width: 50em) {
    body.ui-v2 .ds-par-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container contenido (min-width: 100em) {
    body.ui-v2 .ds-form-adaptable { max-width: none; }
    body.ui-v2 .ds-form-dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(24em, 28em); }
}
/* Lista de errores (diálogo de "Revise antes de guardar") */
body.ui-v2 .ds-lista-errores {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 1.15em;
    color: var(--ds-texto);
    font-size: var(--ds-tam-cuerpo);
    line-height: 1.42858;
}
body.ui-v2 .ds-lista-errores > li::marker { color: var(--ds-aviso); }
/* Interruptor con su rótulo en una línea (13 px) */
body.ui-v2 .form-switch.ds-interruptor {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-e2);
    min-height: 0;
    margin: 0;
    padding-left: 0;
}
body.ui-v2 .form-switch.ds-interruptor > .form-check-input { float: none; margin: 0; }
body.ui-v2 .form-switch.ds-interruptor > .form-check-label { color: var(--ds-texto); font-size: var(--ds-tam-tabla); line-height: 1.38462; cursor: pointer; }
/* Formulario corto en una fila (campos + botón al final, alineados abajo:
   agregar un servicio) o de un solo botón entre las acciones de un encabezado
   (Enviar a Compras). .ds-campo-crece se queda con el ancho que sobra. */
body.ui-v2 .ds-form-en-linea {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ds-e3) var(--ds-e4);
    margin: 0;
}
body.ui-v2 .ds-form-en-linea > .ds-campo { flex: 0 1 12em; min-width: 8em; margin: 0; }
body.ui-v2 .ds-form-en-linea > .ds-campo.ds-campo-crece { flex: 1 1 20em; }
body.ui-v2 .ds-form-en-linea > .ds-btn { flex: none; }
@media (max-width: 767.98px) {
    body.ui-v2 .ds-form-en-linea > .ds-campo { flex: 1 1 100%; }
}
/* Pieza a la izquierda de las acciones de un formulario corto (casilla o
   interruptor "De la unidad" junto a "Subir"): empuja los botones a la derecha. */
body.ui-v2 .ds-form-acciones > .ds-form-acciones-inicio { margin-right: auto; }
body.ui-v2 .ds-form-acciones > .form-check.ds-form-acciones-inicio { margin-bottom: 0; }
/* Mensaje en línea junto a un botón (resultado de un envío por fetch): 13 px;
   gris mientras trabaja, rojo si falló, verde si salió bien. */
body.ui-v2 .ds-mensaje-linea {
    min-width: 0;
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-tabla);
    line-height: 1.38462;
    overflow-wrap: anywhere;
}
body.ui-v2 .ds-mensaje-linea.ds-mensaje-linea-error { color: var(--ds-error); font-weight: 500; }
body.ui-v2 .ds-mensaje-linea.ds-mensaje-linea-exito { color: var(--ds-exito); font-weight: 500; }
body.ui-v2 .ds-form-acciones > .ds-mensaje-linea { flex: 1 1 16em; text-align: right; }
body.ui-v2 .ds-mensaje-linea.ds-mensaje-linea-aviso { color: var(--ds-aviso); font-weight: 500; }
body.ui-v2 .ds-mensaje-linea.ds-mensaje-linea-info { color: var(--ds-texto-2); }
/* Lista de opciones (ajustes): una fila por opción con su casilla o
   interruptor a la izquierda y, si tiene, un control a la derecha (alcance de
   un módulo); líneas finas entre filas. .ds-opcion-sub = hija de un grupo
   (.ds-opcion-titulo), con sangría.
   
…

   
…
 */
body.ui-v2 .ds-lista-opciones { display: flex; flex-direction: column; }
body.ui-v2 .ds-opcion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-e2) var(--ds-e4);
    min-height: 2.75em;
    padding: 8px 0;
    border-bottom: 1px solid var(--ds-borde);
}
body.ui-v2 .ds-opcion:last-child { border-bottom: 0; }
body.ui-v2 .ds-opcion:first-child { padding-top: 0; }
body.ui-v2 .ds-opcion > .form-check { flex: 1 1 18em; min-width: 0; margin: 0; }
body.ui-v2 .ds-opcion > .form-check > .ds-ayuda-texto { margin: 2px 0 0; }
body.ui-v2 .ds-opcion.ds-opcion-sub { padding-left: 1.75em; }
body.ui-v2 .ds-opcion.ds-opcion-titulo {
    min-height: 0;
    padding-top: var(--ds-e3);
    padding-bottom: 4px;
    border-bottom: 0;
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-etiqueta);
    font-weight: 600;
    line-height: 1.33334;
}
body.ui-v2 .ds-opcion > .ds-opcion-control { flex: 0 0 auto; width: auto; max-width: 100%; }
/* Casillas en columnas (servicios donde firma): se acomodan solas. */
body.ui-v2 .ds-casillas-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
    gap: 6px var(--ds-e4);
    margin-top: var(--ds-e3);
}
body.ui-v2 .ds-casillas-grilla > .form-check { margin: 0; }
/* bloque que depende de un interruptor: alineado con el texto del interruptor */
body.ui-v2 .ds-debajo-interruptor { margin-left: 2.9em; }
/* Lista larga con desplazamiento propio dentro de una tarjeta (renglones de un
   usuario): tope en em, marco fino. */
body.ui-v2 .ds-lista-desplazable {
    max-height: 30em;
    margin-top: var(--ds-e3);
    overflow-y: auto;
    border: 1px solid var(--ds-borde);
    border-radius: var(--ds-radio-campo);
}
/* Grupo de casillas que se abre (grupo de gasto con sus renglones): cabeza con
   la casilla de "todos" + botón que abre (título, conteo y flecha); el cuerpo
   es un .collapse de Bootstrap con las casillas en columnas.
   

     
     

   
…form-check…

   La flecha gira cuando el cuerpo está abierto (también si lo abrió un script). */
body.ui-v2 .ds-grupo-casillas { border-bottom: 1px solid var(--ds-borde); }
body.ui-v2 .ds-grupo-casillas:last-child { border-bottom: 0; }
body.ui-v2 .ds-grupo-casillas-cabeza {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--ds-e3);
    padding: 0 12px 0 14px;
    background: var(--ds-superficie);
}
body.ui-v2 .ds-grupo-casillas-cabeza > .form-check-input { flex: none; margin: 0; }
body.ui-v2 .ds-grupo-casillas-boton {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--ds-e2);
    min-width: 0;
    min-height: 2.75em;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--ds-texto);
    font-size: var(--ds-tam-cuerpo);
    line-height: 1.42858;
    text-align: left;
    cursor: pointer;
}
body.ui-v2 .ds-grupo-casillas-boton:focus-visible { outline: 0; box-shadow: var(--tb-anillo); border-radius: 8px; }
body.ui-v2 .ds-grupo-casillas-titulo { flex: 1 1 auto; min-width: 0; }
body.ui-v2 .ds-grupo-casillas-flecha { flex: none; color: var(--ds-texto-2); font-size: 16px; transition: transform var(--ds-transicion); }
body.ui-v2 .ds-grupo-casillas:has(> .collapse.show) .ds-grupo-casillas-flecha,
body.ui-v2 .ds-grupo-casillas:has(> .collapsing) .ds-grupo-casillas-flecha { transform: rotate(180deg); }
body.ui-v2 .ds-grupo-casillas-cuerpo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22em, 1fr));
    gap: 4px var(--ds-e4);
    padding: 2px 14px 12px 3.1em;
}
body.ui-v2 .ds-grupo-casillas-cuerpo > .form-check { margin: 0; font-size: var(--ds-tam-tabla); line-height: 1.38462; }
@media (max-width: 767.98px) {
    body.ui-v2 .ds-grupo-casillas-cuerpo { grid-template-columns: minmax(0, 1fr); padding-left: 14px; }
    body.ui-v2 .ds-debajo-interruptor { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    body.ui-v2 .ds-grupo-casillas-flecha { transition: none; }
}
/* casillas de estas listas: 8 px entre la casilla (18 px) y su texto (con el
   relleno de Bootstrap quedaban a 3 px en letra de 13 px: "☑111") */
body.ui-v2 :is(.ds-grupo-casillas-cuerpo, .ds-casillas-grilla, .ds-opcion) > .form-check:not(.form-switch) { padding-left: calc(18px + 0.6em); }
body.ui-v2 :is(.ds-grupo-casillas-cuerpo, .ds-casillas-grilla, .ds-opcion) > .form-check:not(.form-switch) > .form-check-input { margin-left: calc(-18px - 0.6em); }
/* Campo con sugerencias (buscador + lista que se abre debajo, armada por JS
   con .list-group-item): 

   
…
. La lista flota sobre
   lo que sigue, con el ancho del campo (mínimo 24em) y desplazamiento propio. */
body.ui-v2 .ds-autocompletar { position: relative; display: flex; flex: 0 1 auto; min-width: 0; max-width: 100%; }
body.ui-v2 .ds-autocompletar > .ds-buscador-get { flex: 1 1 auto; }
body.ui-v2 .ds-autocompletar-lista {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1030;
    width: max(100%, 24em);
    max-width: min(40em, calc(100vw - 32px));
    max-height: 22em;
    overflow-y: auto;
    border-radius: var(--ds-radio-campo);
    box-shadow: var(--ds-sombra-menu, var(--ds-sombra-flotante)) !important;
}
body.ui-v2 .ds-autocompletar-lista > .list-group-item {
    padding: 8px 14px;
    font-size: var(--ds-tam-tabla);
    line-height: 1.38462;
}
@media (max-width: 767.98px) {
    body.ui-v2 .ds-autocompletar { flex: 1 1 100%; }
}


/* 25i. Tarjetas de carga de archivos ------------------------------------------ */
/* Una tarjeta por reporte: título, contador y una línea a la izquierda; a la
   derecha su formulario de carga (zona compacta + "Actualizar"):
   
…
[select]
   
 */
body.ui-v2 .ds-carga-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-e2);
    min-width: 0;
    margin: 0;
}
body.ui-v2 .ds-carga-form > .ds-carga.ds-carga-compacta {
    flex: 1 1 18em;
    width: auto;
    min-width: 16em;
    max-width: 26em;
    min-height: 44px;
    padding: 6px 14px;
}
body.ui-v2 .ds-carga-form > .ds-carga-compacta .ds-carga-icono { font-size: 20px; }
body.ui-v2 .ds-carga-form > .ds-carga-compacta .ds-carga-texto { white-space: nowrap; }
body.ui-v2 .ds-carga-form > .ds-carga-compacta .ds-carga-nombre { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Saldos Ene–X (2026-10-13): el estado de los saldos sobre la tabla de meses del panel («Saldos al …» / «Sin saldos
   cargados»), el formulario compacto «Actualizar cierre» de cada mes terminado y la nota de la fecha de los saldos
   en la rejilla de subproductos del SIAF. */
body.ui-v2 .ds-saldos-estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-e2); padding: var(--ds-e3) var(--ds-e4) var(--ds-e2); }
body.ui-v2 .ds-carga-form-cierre { justify-content: flex-end; }
body.ui-v2 .ds-carga-form-cierre > .ds-carga.ds-carga-compacta { min-height: 32px; }
body.ui-v2 .ds-carga-form-cierre > .ds-carga-compacta .ds-carga-nombre { max-width: 9em; }
body.ui-v2 .ds-reparto-saldos { margin: 0 0 var(--ds-e2); }
body.ui-v2 .ds-carga-select { flex: 0 1 18em; width: auto; min-width: 12em; max-width: 22em; }
/* en la cabeza de una tarjeta de carga, el formulario ocupa lo que dejan los títulos */
body.ui-v2 .ds-tarjeta-carga > .ds-tarjeta-cabeza > .ds-tarjeta-titulos { flex: 1 1 22em; }
body.ui-v2 .ds-tarjeta-carga > .ds-tarjeta-cabeza > .ds-tarjeta-acciones { flex: 0 1 auto; max-width: 100%; }
/* nota al pie de una tarjeta (una línea gris con ícono) */
body.ui-v2 .ds-pie-nota {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-tabla);
    line-height: 1.38462;
}
body.ui-v2 .ds-pie-nota > .ti { font-size: 16px; }
/* Grilla principal + lateral (p. ej. saldos a la izquierda y las demás cargas a
   la derecha): una columna hasta ~1500 px de contenido; desde ahí, dos. */
body.ui-v2 .ds-grilla-lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-e5); align-items: start; }
body.ui-v2 .ds-grilla-lateral > * { margin-bottom: 0; min-width: 0; }
@container contenido (min-width: 1500px) {
    body.ui-v2 .ds-grilla-lateral { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
body.ui-v2 .ds-datos.ds-datos-carga { gap: var(--ds-e3) var(--ds-e5); }
/* Varios a la vez: una zona por reporte en columnas; abajo el centro de costo y el botón */
body.ui-v2 .ds-carga-varios-zonas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16em), 1fr));
    gap: var(--ds-e3) var(--ds-e4);
}
body.ui-v2 .ds-carga-varios-zonas > .ds-campo { margin: 0; min-width: 0; }
body.ui-v2 .ds-carga-varios-zonas .ds-carga.ds-carga-compacta { min-height: 48px; }
body.ui-v2 .ds-carga-varios-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--ds-e3);
    margin-top: var(--ds-e4);
}
body.ui-v2 .ds-carga-varios-cc { flex: 0 1 26em; min-width: 14em; margin: 0 auto 0 0; }


/* 25j. Pie fijo del formulario: resumen, avisos y botones ---------------------- */
/* (el pie en sí es §24d: barra flotante opaca al pie de la ventana) */
body.ui-v2 .ds-pie-resumen {
    color: var(--ds-texto);
    font-size: var(--ds-tam-cuerpo);
    font-weight: 600;
    line-height: 1.42858;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
body.ui-v2 .ds-pie-sep { margin: 0 6px; color: var(--ds-texto-3); font-weight: 400; }
body.ui-v2 .ds-pie-rotulo { color: var(--ds-texto-2); font-weight: 400; }
body.ui-v2 .ds-pie-avisos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin-right: auto; margin-left: var(--ds-e2); }
body.ui-v2 .ds-pie-botones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ds-e2); }
@media (max-width: 767.98px) {
    body.ui-v2 .ds-pie-avisos { margin-left: 0; flex-basis: 100%; }
    /* sin avisos (el JS lo vacía): sin la fila fantasma de 8 px. NO ≥ 768: ahí
       su margin-right: auto empuja los botones a la derecha. */
    body.ui-v2 .ds-pie-avisos:empty { display: none; }
    body.ui-v2 .ds-pie-botones { flex: 1 1 100%; }
    body.ui-v2 .ds-pie-botones > .ds-btn-terciario { margin-right: auto; }
}
@media (max-width: 575.98px) {
    body.ui-v2 .ds-pie-botones .ds-btn { --ds-btn-alto: 36px; padding: 0 14px; font-size: var(--ds-tam-tabla); }
    /* avisos del pie en UNA fila que se desplaza de lado (en dos filas el pie
       llegaba a 194 px de 844); el relleno 3 px / margen −3 px deja entero el
       anillo de foco de las píldoras */
    body.ui-v2 .ds-pie-avisos { gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; }
    body.ui-v2 .ds-pie-avisos::-webkit-scrollbar { display: none; }
    body.ui-v2 .ds-pie-avisos > * { flex: none; }
}
/* Avisos flotantes sobre el pie fijo de un formulario: sin esto, un aviso de
   error (queda hasta cerrarlo) tapaba "Guardar" y "Confirmar". */
body.ui-v2:has(.ds-pie-formulario) .ds-estados { bottom: calc(var(--ds-alto-control) + 52px); }
@media (max-width: 767.98px) {
    body.ui-v2:has(.ds-pie-formulario) .ds-estados { bottom: 172px; }
}


/* 25k. Paneles laterales y diálogos -------------------------------------------- */
/* Panel lateral para contenido ancho (tablas de reportes): hasta 1100 px. */
body.ui-v2 .offcanvas.offcanvas-end.ds-panel-lateral-amplio { --bs-offcanvas-width: min(1100px, calc(100vw - 24px)); }
/* Línea de "Cargando…" (spinner + texto) mientras llega un contenido: en una
   tarjeta o un panel con relleno propio; suelta en el cuerpo de un panel
   lateral (que ya tiene su relleno), sin relleno lateral. */
body.ui-v2 .ds-cargando-linea {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 20px;
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-tabla);
}
body.ui-v2 .ds-cargando-linea > .spinner-border { flex: none; color: var(--ds-acento); }
body.ui-v2 .offcanvas-body > .ds-cargando-linea { gap: var(--ds-e2); padding: var(--ds-e4) 0; line-height: 1.38462; }
/* Panel lateral NO modal que acompaña a la página mientras se trabaja en ella
   (sin fondo oscuro: data-bs-backdrop="false" data-bs-scroll="true"): el JS de
   la página pone su `top` bajo el encabezado (así no tapa el botón que lo
   abre). Sombra más marcada (no hay fondo que lo separe); pie fijo con el
   conteo y los botones. */
body.ui-v2 .offcanvas.offcanvas-end.ds-panel-lateral-acompana {
    --bs-offcanvas-width: 560px;
    box-shadow: var(--ds-sombra-dialogo-fuerte), 0 0 0 1px var(--ds-borde);
}
body.ui-v2 .ds-panel-lateral-acompana .offcanvas-body { display: flex; flex-direction: column; gap: var(--ds-e3); min-height: 0; }
body.ui-v2 .ds-panel-lateral-acompana .nav-tabs { flex: none; }
body.ui-v2 .ds-panel-lateral-acompana .tab-content { flex: 1 1 auto; min-height: 0; }
body.ui-v2 .ds-panel-lateral-acompana .ds-panel-lateral-pie { flex-wrap: wrap; align-items: center; justify-content: space-between; }
body.ui-v2 .ds-panel-lateral-acompana .ds-vacio { padding: var(--ds-e5) var(--ds-e3); }
body.ui-v2 .ds-panel-pie-fijo {
    position: sticky;
    bottom: calc(-1 * var(--bs-offcanvas-padding-y, 20px));
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: var(--ds-e3) -24px calc(-1 * var(--bs-offcanvas-padding-y, 20px));
    padding: var(--ds-e3) 24px var(--ds-e4);
    border-top: 1px solid var(--ds-borde);
    background: var(--ds-superficie);
}
body.ui-v2 .ds-panel-pie-fijo .ds-error-texto:empty { display: none; }
body.ui-v2 .ds-panel-pie-linea,
body.ui-v2 .ds-panel-conteo { margin: 0; color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); line-height: 1.38462; }
body.ui-v2 .ds-panel-conteo { margin-bottom: var(--ds-e3); }
body.ui-v2 .ds-filtros-get.ds-filtros-panel { margin-bottom: var(--ds-e2); }
body.ui-v2 .ds-filtros-panel .ds-buscador-rotulado.ds-buscador-ancho { width: 18em; min-width: 10em; }
/* Diálogo con vista previa de un contenido para Word (.ds-modal-medio.ds-modal-previa;
   "Encabezado de bases" de la sábana, 2026-09-30): 780 px para que quepa la hoja de
   16.5 cm sin desplazarse de lado. La hoja (.ds-previa-word-hoja) recibe HTML que arma
   el SERVIDOR con estilos en línea, porque es lo que Word lee al pegar (única excepción
   a "sin estilos en línea", ver app/bases_compra.py): aquí solo se le da el marco, el
   papel blanco y el desplazamiento. Bootstrap angosta el diálogo en ventanas chicas. */
body.ui-v2 .modal.ds-modal-medio.ds-modal-previa { --bs-modal-width: 780px; }
/* observaciones de dos renglones (el piso general de un textarea es 88 px): el diálogo cabe en una laptop */
body.ui-v2 .ds-modal-previa textarea.form-control { min-height: 60px; }
body.ui-v2 .ds-previa-word-rotulo { margin-top: 14px; }
body.ui-v2 .ds-previa-word {
    /* lo que queda de la ventana después del resto del diálogo (unos 470 px): cabe sin desplazar el diálogo desde 720 de alto */
    max-height: clamp(180px, calc(100vh - 474px), 420px);
    min-height: 96px;
    padding: 12px;
    overflow: auto;
    border: 1px solid var(--ds-borde);
    border-radius: var(--ds-radio-campo);
    background: var(--ds-neutro-fondo);
}
body.ui-v2 .ds-previa-word:focus-visible { outline: 2px solid var(--ds-acento-oscuro); outline-offset: 2px; }
body.ui-v2 .ds-previa-word-hoja {
    width: max-content;
    min-width: min(100%, 17.5cm);
    margin: 0 auto;
    padding: 0.5cm;
    background: var(--ds-hoja);
    color: var(--ds-hoja-tinta);
    box-shadow: var(--ds-sombra-hoja);
    -webkit-user-select: text;
    user-select: text;
}
body.ui-v2 .ds-previa-word-hoja:empty { display: none; }   /* sin tipo elegido todavía no hay encabezado: queda el marco */
body.ui-v2 .ds-previa-word-ocupada { opacity: 0.55; }
body.ui-v2 .ds-previa-word-mensaje { margin-top: 10px; }
body.ui-v2 .ds-previa-word-mensaje[hidden] { display: none; }
body.ui-v2 .ds-previa-word-mensaje.ds-previa-word-error { color: var(--ds-error); }
/* Código destacado en un diálogo (el ítem al que se refiere) y línea de error
   del diálogo que solo se ve con texto */
body.ui-v2 .ds-modal-codigo { margin: 0 0 2px; color: var(--ds-texto); font-weight: 600; font-variant-numeric: tabular-nums; }
body.ui-v2 .ds-modal-error:empty { display: none; }
/* Diálogo de envío masivo: tres grupos (se enviarán / no cuadran / se
   ignoran) con su conteo en píldora y la lista de SIAF; luego el avance
   () y el resultado. */
body.ui-v2 .ds-envio-grupos { display: grid; gap: var(--ds-e4); }
body.ui-v2 .ds-envio-grupos .ds-modal-seccion { margin-bottom: 6px; }
body.ui-v2 .ds-envio-grupo-exito .ds-modal-seccion > .ti { color: var(--ds-exito); }
body.ui-v2 .ds-envio-grupo-error .ds-modal-seccion > .ti { color: var(--ds-error); }
body.ui-v2 .ds-envio-grupo-neutro .ds-modal-seccion > .ti { color: var(--ds-texto-3); }
body.ui-v2 .ds-envio-grupos .ds-modal-seccion > .ti { font-size: 18px; line-height: 1; }
body.ui-v2 .ds-envio-grupos .ds-modal-meta { margin-bottom: 6px; }
body.ui-v2 .ds-envio-lista {
    max-height: 9.5em;
    margin: 0;
    padding: 8px 12px;
    overflow: auto;
    border-radius: var(--ds-radio-campo);
    background: var(--ds-neutro-fondo);
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-tabla);
    line-height: 1.38462;
    list-style: none;
    font-variant-numeric: tabular-nums;
}
body.ui-v2 .ds-envio-lista > li + li { margin-top: 4px; }
body.ui-v2 .ds-envio-lista[hidden],
body.ui-v2 .ds-envio-lista:empty { display: none; }
/* Noche 5 · 2f: una sola línea gris para los SIAF que no se envían, con «Ver cuáles» que despliega la lista */
body.ui-v2 .ds-envio-excluidos { margin: 0; color: var(--ds-texto-3); font-size: var(--ds-tam-tabla); }
body.ui-v2 .ds-envio-excluidos[hidden] { display: none; }
body.ui-v2 .ds-envio-lista-excluidos { max-height: 6em; }
body.ui-v2 .ds-envio-progreso-texto {
    display: flex;
    align-items: center;
    gap: var(--ds-e2);
    margin: 0 0 var(--ds-e3);
    font-size: var(--ds-tam-cuerpo);
    line-height: 1.42858;
}
body.ui-v2 .ds-envio-progreso-texto > .spinner-border { flex: none; color: var(--ds-acento); }
body.ui-v2 #envio-progreso > .ds-barra-avance { display: block; width: 100%; }
body.ui-v2 .ds-envio-nota { margin: var(--ds-e3) 0 0; }
body.ui-v2 #envio-resultado > .ds-aviso { margin-bottom: var(--ds-e3); }
body.ui-v2 #envio-resultado > .ds-aviso:last-child { margin-bottom: 0; }


/* 25l. Avisos, notas, textos y paginación en la página ------------------------ */
/* Aviso compacto con acción: la acción se alinea al centro del texto */
body.ui-v2 .ds-aviso.ds-aviso-compacto:where(:has(> .ds-aviso-acciones)) { align-items: center; }
body.ui-v2 .ds-aviso.ds-aviso-compacto .ds-aviso-acciones .ds-btn-sm { min-height: 30px; }
/* Aviso con acción en el teléfono: el botón a la derecha dejaba el texto en una
   columna de 150 px (seis líneas); bajo 576 px la acción baja debajo del texto. */
@media (max-width: 575.98px) {
    body.ui-v2 .ds-aviso:has(> .ds-aviso-acciones) { flex-wrap: wrap; align-items: flex-start; }
    body.ui-v2 .ds-aviso:has(> .ds-aviso-acciones) > .ds-aviso-cuerpo { flex: 1 1 calc(100% - 2.5em); }
    body.ui-v2 .ds-aviso > .ds-aviso-acciones { flex: 1 1 100%; margin-left: 0; padding-left: 28px; }
}
/* Enlace al pie de un aviso en línea y líneas o lista dentro del cuerpo */
body.ui-v2 .ds-aviso-enlace { display: inline-block; margin-top: 4px; font-weight: 500; }
body.ui-v2 .ds-aviso-cuerpo > div + div { margin-top: 2px; }
body.ui-v2 .ds-aviso-cuerpo ul { margin: 4px 0 8px; padding-left: 1.25em; }
body.ui-v2 .ds-aviso-cuerpo li + li { margin-top: 2px; }
/* Nota: una línea gris de 13 px (bajo unas pestañas, en un diálogo). */
body.ui-v2 .ds-nota { margin: 0 0 var(--ds-e3); color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); line-height: 1.38462; }
/* Nota bajo el valor de un dato (ds.dato): 12 px gris, en su propia línea. */
body.ui-v2 .ds-dato-nota { display: block; margin-top: 2px; color: var(--ds-texto-2); font-size: var(--ds-tam-etiqueta); line-height: 1.33334; }
/* Lista corta dentro de un dato o un aviso */
body.ui-v2 .ds-lista-compacta { margin: 4px 0 0; padding-left: 1.25em; font-size: var(--ds-tam-tabla); line-height: 1.38462; }
/* Pestañas de Bootstrap seguidas de su contenido: aire entre la línea y el
   contenido (en el panel lateral que acompaña, §25k, lo da el gap del panel). */
body.ui-v2 .nav-tabs + .tab-content:not(.ds-panel-lateral-acompana .tab-content) { padding-top: var(--ds-e3); }
/* Textos de estado (color solo): gris, apagado, éxito y error (el rojo gana
   siempre: una cifra con error no se apaga aunque su tarjeta esté deshabilitada) */
body.ui-v2 .ds-texto-2 { color: var(--ds-texto-2); }
body.ui-v2 .ds-texto-3 { color: var(--ds-texto-2); }   /* "Sin renglón": dato apagado pero legible (4.8:1); el nombre queda por compatibilidad */
body.ui-v2 .ds-texto-exito { color: var(--ds-exito); }
body.ui-v2 .ds-texto-error { color: var(--ds-error) !important; }
/* Paginación en la página, para listas que pagina el JS (sin recargar):
   Anterior · "1–50 de 1,234 · página 1 de 25" · Siguiente.
   
…
 (.ds-paginacion-panel: centrada, en un panel) */
body.ui-v2 .ds-paginacion-cliente {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-e2) var(--ds-e3);
    width: 100%;
}
body.ui-v2 .ds-paginacion-cliente > .ds-paginacion-info { color: var(--ds-texto-2); font-size: var(--ds-tam-tabla); line-height: 1.38462; text-align: center; font-variant-numeric: tabular-nums; }
body.ui-v2 .ds-paginacion-cliente.ds-paginacion-panel { justify-content: center; margin-top: var(--ds-e3); }
/* Barra de una TablaDatos v2 en el teléfono: si su final (contador propio y
   "Quitar filtros") está todo oculto, no ocupa una línea vacía debajo de las
   píldoras. */
@media (max-width: 767.98px) {
    body.ui-v2 .tb-barra-fin:not(:has(> :not([hidden]))) { display: none; }
}
/* Barra de una TablaDatos sin nada visible (búsqueda en la barra superior con
   busquedaExterna, contador en otro lado, sin píldoras ni chips: bitácora de
   OCDS): no deja una fila vacía de 36 px sobre la tabla. Con un filtro activo
   vuelve, con "Quitar filtros". */
body.ui-v2 .tb-v2 > .tb-barra:not(:has(.tb-buscador-caja, .tb-barra-filtros > .ds-chips, .ds-pildoras > *, .tb-chips > *, .ds-mas-filtros, .ds-pildora-orden, .tb-densidad, .tb-barra-fin > :not([hidden]))) { display: none; }


/* 25m. Ficha y panel Detalle del SIAF ------------------------------------------- */
/* Ficha: "Volver a la lista" pegado al título; estado (píldora) junto al
   título, en la línea del contador; avisos del puente con Compras uno bajo
   otro antes del contenido; visor del PDF a la izquierda y datos a la derecha
   (.ds-form-con-lateral, §24d); una columna bajo 1100 px. */
body.ui-v2 .ds-ficha-volver { margin: 0 0 var(--ds-e1); }
body.ui-v2 .ds-ficha-volver > .ds-volver { margin-bottom: 0; }
body.ui-v2 .ds-encabezado-ficha .ds-subtitulo { align-items: center; overflow: visible; }
body.ui-v2 .ds-encabezado-ficha .ds-contador { display: inline-flex; align-items: center; }
body.ui-v2 .ds-ficha-avisos:empty { display: none; }
body.ui-v2 .ds-ficha-avisos { display: grid; gap: var(--ds-e2); margin-bottom: var(--ds-e4); }
body.ui-v2 .ds-ficha-avisos > .ds-aviso { margin: 0; }
/* bloque que se abre sobre el visor (Detalle) */
body.ui-v2 .ds-ficha-detalle { margin-bottom: var(--ds-e5); scroll-margin-top: calc(var(--ds-alto-barra) + var(--ds-e5)); }
body.ui-v2 .ds-ficha-detalle > .ds-aviso { margin: 0; }
body.ui-v2 .ds-ficha { grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); }
body.ui-v2 .ds-ficha-visor { height: calc(100vh - var(--ds-alto-barra) - 96px); min-height: 520px; }
body.ui-v2 .ds-ficha-lateral > .ds-tarjeta { margin-bottom: 0; }
/* datos de una columna, con más aire entre rótulo y valor */
body.ui-v2 .ds-datos.ds-datos-ficha { grid-template-columns: minmax(0, 1fr); gap: var(--ds-e3); }
/* texto largo en tres líneas como máximo (texto entero en title) */
body.ui-v2 .ds-texto-3-lineas {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
}
@media (max-width: 1099.98px) {
    body.ui-v2 .ds-ficha { grid-template-columns: minmax(0, 1fr); }
    body.ui-v2 .ds-ficha-lateral { order: -1; }
    body.ui-v2 .ds-datos.ds-datos-ficha { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
}
/* Panel Detalle (ds.tarjeta con .det-panel.ds-detalle; lo arma
   templates/solicitudes/_detalle_panel.html y lo maneja static/js/detalle_siaf.js):
   dentro del panel lateral va plana, porque el panel ya es la tarjeta. */
body.ui-v2 .ds-detalle { margin-bottom: 0; }
body.ui-v2 .ds-detalle .ds-tarjeta-acciones { align-items: center; }
body.ui-v2 .ds-detalle-estado { display: inline-flex; align-items: center; margin-right: var(--ds-e1); }
body.ui-v2 .offcanvas .ds-detalle { border: 0; border-radius: 0; box-shadow: none; }
body.ui-v2 .offcanvas .ds-detalle > .ds-tarjeta-cabeza { padding: 0 0 var(--ds-e3); }
body.ui-v2 .offcanvas .ds-detalle > .ds-tarjeta-cabeza .ds-tarjeta-titulo { display: none; }   /* el título ya está en el panel */
body.ui-v2 .offcanvas .ds-detalle > .ds-tarjeta-cuerpo { padding: 0; }
/* cuadre y avisos: franjas en línea con su lista */
body.ui-v2 .ds-detalle-cuadre { margin: 0 0 var(--ds-e3); }
body.ui-v2 .ds-detalle-lista { margin: 4px 0 0; padding-left: 1.2em; font-size: var(--ds-tam-tabla); line-height: 1.38462; }
body.ui-v2 .ds-detalle-lista > li + li { margin-top: 2px; }
/* pestañas de reportes (.nav-tabs re-pintadas, §14) y la nota de precios */
body.ui-v2 .ds-detalle-pestanas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ds-e2) var(--ds-e4);
    margin: var(--ds-e4) 0 var(--ds-e3);
    border-bottom: 1px solid var(--ds-borde);
}
body.ui-v2 .ds-detalle-pestanas > .nav-tabs { flex-wrap: nowrap; margin-bottom: -1px; border-bottom: 0; }
body.ui-v2 .ds-detalle-pestanas > .ds-detalle-nota { padding-bottom: 10px; }
body.ui-v2 .ds-detalle-nota {
    margin: 0;
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-tabla);
    line-height: 1.38462;
}
body.ui-v2 .ds-detalle-nota strong { color: var(--ds-texto); font-weight: 600; }
/* barra de cada reporte: nota a la izquierda, herramientas a la derecha */
body.ui-v2 .ds-detalle-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-e2) var(--ds-e4);
    margin-bottom: var(--ds-e3);
}
body.ui-v2 .ds-detalle-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-e3); margin-left: auto; }
/* tablas de los reportes: marco de 12 px sin sombra, números a la derecha */
body.ui-v2 .ds-detalle-marco { border-radius: var(--ds-radio-campo); box-shadow: none; }
body.ui-v2 .ds-detalle-marco > .table-responsive { max-height: min(60vh, 560px); overflow: auto; scrollbar-width: thin; }
body.ui-v2 .ds-detalle-marco .ds-tabla > thead > tr > th { position: sticky; top: 0; z-index: 2; }
/* (clases .det-* que arman _detalle_panel.html y detalle_siaf.js; custom.css las
   pintaba en azul marino: aquí con los tokens) */
body.ui-v2 .det-tabla th.det-num,
body.ui-v2 .det-tabla td.det-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.ui-v2 .det-tabla td.det-descripcion { min-width: 16em; white-space: normal; overflow-wrap: anywhere; }
body.ui-v2 .det-tabla td.det-descripcion > .ds-pildora { margin-left: 4px; vertical-align: 1px; }
body.ui-v2 .det-tabla td.det-fuerte { font-weight: 600; }
body.ui-v2 .det-tabla > tbody > tr > td.det-no_aplica { --bs-table-bg-type: var(--ds-neutro-fondo); color: var(--ds-texto-2); }
body.ui-v2 .det-tabla > tbody > tr.det-grupo > td {
    --bs-table-bg-type: var(--ds-fondo);
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    color: var(--ds-texto);
    font-size: var(--ds-tam-etiqueta);
    font-weight: 600;
    line-height: 1.33334;
}
body.ui-v2 .det-tabla > tbody > tr.det-subtotal > td { --bs-table-bg-type: var(--ds-fondo); font-weight: 600; }
body.ui-v2 .det-tabla > tfoot > tr.det-total > td { border-top: 1px solid var(--ds-borde-fuerte); font-weight: 600; }
body.ui-v2 .det-punto { width: 6px; height: 6px; margin-left: 4px; background: var(--ds-aviso-punto); }
body.ui-v2 .ds-detalle-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-e1) var(--ds-e4);
    margin: var(--ds-e2) 0 0;
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-etiqueta);
    line-height: 1.33334;
}
body.ui-v2 .ds-detalle-leyenda-item { display: inline-flex; align-items: center; gap: 6px; }
body.ui-v2 .ds-detalle-leyenda .det-leyenda {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 12px;
    margin: 0;
    border: 1px solid var(--ds-borde-fuerte);
    border-radius: 3px;
}
body.ui-v2 .ds-detalle-leyenda .det-leyenda.det-no_aplica { background: var(--ds-neutro-fondo); }
body.ui-v2 .ds-detalle-leyenda .det-leyenda.det-conservada { background: var(--ds-superficie); }
body.ui-v2 .ds-detalle-leyenda .det-leyenda > .det-punto { margin: 0; }
@media (max-width: 767.98px) {
    body.ui-v2 .ds-ficha-visor { height: 70vh; min-height: 360px; }
    body.ui-v2 .ds-detalle-herramientas { margin-left: 0; }
    body.ui-v2 .ds-detalle-pestanas > .nav-tabs { overflow-x: auto; scrollbar-width: none; }
}


/* 25n. SIAF 182 y cuadrícula de captura 465 ------------------------------------ */
/* Nombres s182-/s465- a propósito: la cuadrícula 465 (static/js/sabana_465.js)
   es una planilla de captura, no una tabla de datos, y no tiene pieza genérica
   equivalente; custom.css (sección K, ya no se carga) la pintaba en azul
   marino. Todo en em: la fila (2.6154em = 34 px con 13 px) crece con la letra.
     (1) Piezas de las pantallas del 182 (lista, precios, pegar)
     (2) Cuadrícula 465: marco, encabezado claro fijo, celdas, marca, cruce,
         columna apagada, escoger código
     (3) Barra de la cuadrícula (subproducto activo, estado del guardado) y
         atajos del "?"
     (4) Proveedor, montos y generar
     (5) Barra de total fija abajo */

/* (1) Piezas de las pantallas del 182 */
/* formulario en línea del encabezado (centro de costo + "Nuevo A-01 SIAF") */
body.ui-v2 .s182-form-nueva { flex-wrap: nowrap; margin: 0; }
body.ui-v2 .s182-select-en-linea { width: auto; max-width: min(22em, 100%); }
@media (max-width: 767.98px) {
    body.ui-v2 .s182-form-nueva { flex-wrap: wrap; min-width: 0; max-width: 100%; }
}
/* lista de capturas: el proveedor (texto que se parte) toma una parte menor
   para que el nombre de quien la creó quepa en una línea desde 1440 */
body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).s182-col-proveedor { --ds-col-parte: 18%; --ds-col-texto-min: 10em; }
/* contenido ancho (1920): sobra lugar para quien la creó, la fecha y el
   centro de costo; el proveedor toma más parte y no se parte en dos líneas */
@container contenido (min-width: 1500px) {
    body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).s182-col-proveedor { --ds-col-parte: 28%; }
}
/* precios: proveedor y descripción se quedan con casi todo el ancho que sobra
   (las cifras y códigos miden lo suyo; sin esto el precio quedaba con un
   hueco grande a su izquierda y el nombre del proveedor se cortaba a 1440) */
body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).s182-col-proveedor-precio { --ds-col-parte: 32%; }
body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).s182-col-descripcion { --ds-col-parte: 30%; }
/* en teléfono la tabla se desplaza de lado dentro de su marco: el proveedor
   conserva un ancho que deja leer el nombre y el NIT entero */
@media (max-width: 767.98px) {
    body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).s182-col-proveedor-precio { --ds-col-flex-min: 13em; }
}
/* nombre de una persona: una línea si hay lugar; en contenido angosto se
   parte en dos (nunca "…") */
body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr > td.s182-col-persona { line-height: 1.3077; white-space: normal; }
/* piso de 9em (como los de §23j: un bloque de alto 0; min-width en celdas no vale igual en WebKit y Blink) */
body.ui-v2 :is(.ui-tabla, .ds-tabla) > tbody > tr > td.s182-col-persona::after { content: ""; display: block; width: 9em; height: 0; }
/* filtro de proveedor (select en píldora): tope en em, el nombre entero en la lista */
body.ui-v2 .s182-select-proveedor { max-width: min(24em, 100%); }
/* precio: campo corto */
body.ui-v2 .s182-campo-precio { max-width: 14em; }
/* Pegar precios: cuadro de pegado en letra de ancho fijo (las columnas de
   Excel llegan separadas por tabulador y así se leen alineadas) */
body.ui-v2 .s182-pegado {
    min-height: 12em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--ds-tam-tabla);
    line-height: 1.53847;
    tab-size: 14;
    -moz-tab-size: 14;
    resize: vertical;
}
body.ui-v2 .s182-resumen { gap: 6px; }
body.ui-v2 .s182-pie-guardar { flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; margin: 0; }
body.ui-v2 .s182-pie-texto {
    margin-right: auto;
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-tabla);
    line-height: 1.38462;
}
/* celdas de la vista previa */
body.ui-v2 .s182-codigo { line-height: 1.38462; white-space: normal; }
body.ui-v2 .s182-nota {
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-etiqueta);
    line-height: 1.33334;
    white-space: normal;
}
body.ui-v2 .s182-motivo-problema {
    margin-top: 2px;
    color: var(--ds-error);
    font-size: var(--ds-tam-etiqueta);
    line-height: 1.33334;
    white-space: normal;
}
body.ui-v2 .s182-col-que-pasa .ds-pildora + .s182-nota,
body.ui-v2 .s182-col-que-pasa .ds-pildora + .s182-motivo-problema { margin-top: 4px; }
body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).s182-col-que-pasa { --ds-col-parte: 26%; }
body.ui-v2 .s182-precio-anterior { color: var(--ds-texto-2); text-decoration: line-through; }
body.ui-v2 .s182-flecha { color: var(--ds-texto-3); }

/* (2) Cuadrícula 465 */
/* Marco: tarjeta blanca de radio 16 con la barra de la cuadrícula arriba y
   la zona con desplazamiento (encabezado y columnas de código fijos). */
body.ui-v2 .s465-marco {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--ds-superficie);
    border: 1px solid var(--ds-borde-marco);
    border-radius: var(--ds-radio-tarjeta);
    box-shadow: var(--ds-sombra-tarjeta);
}
body.ui-v2 .s465-scroll {
    /* alto de la ventana menos la barra superior, el encabezado, la barra de
       la cuadrícula y la barra de total de abajo (1440×790: 13 filas; el
       borde de abajo queda 16 px sobre la barra de total) */
    max-height: calc(100vh - 272px);
    min-height: 320px;
    overflow: auto;
    border: 0;
    border-radius: 0;
    background: var(--ds-superficie);
    scrollbar-width: thin;
}
/* captura generada (solo lectura): sin filas vacías, el marco mide lo que
   tienen sus filas (el piso de 320 px es para capturar) */
body.ui-v2 .s465-solo-lectura .s465-scroll { min-height: 0; }
body.ui-v2 .s465-tabla {
    --s465-fila: 2.6154em;                 /* 34 px con 13 px; crece con la letra */
    --s465-linea: var(--ds-borde-suave);                 /* línea fina entre celdas */
    --s465-linea-grupo: var(--ds-borde-fuerte);
    --s465-fondo-fijo: var(--ds-superficie);
    --s465-col-activa: var(--ds-acento-tenue);            /* columna del cruce */
    --s465-fila-foco: var(--ds-acento-tenue);             /* fila del cruce */
    --s465-celda-cruce: var(--ds-acento-claro);
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--ds-texto);
    font-family: var(--ds-fuente);
    font-size: var(--ds-tam-tabla);
    font-variant-numeric: tabular-nums;
}
/* Encabezado claro de UNA fila, fijo al desplazar, en tipo oración. */
body.ui-v2 .s465-tabla th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: auto;
    padding: 8px 4px 0;
    background: var(--ds-encabezado-tabla);
    color: var(--ds-texto-2);
    border: 0;
    border-right: 1px solid var(--s465-linea);
    box-shadow: inset 0 -1px 0 var(--ds-borde);
    font-size: var(--ds-tam-etiqueta);
    font-weight: 500;
    line-height: 1.33334;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    vertical-align: bottom;
}
body.ui-v2 .s465-tabla th.s465-fija,
body.ui-v2 .s465-tabla th.s465-desc-th {
    z-index: 5;
    padding: 0 10px 10px;
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-etiqueta);
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.ui-v2 .s465-tabla th.s465-desc-th { z-index: 3; border-left: 1px solid var(--s465-linea-grupo); }
body.ui-v2 .s465-tabla th.s465-c-num { text-align: right; padding-right: 8px; padding-left: 4px; }
body.ui-v2 .s465-tabla th.s465-th-sp .s465-pr {
    display: block;
    color: var(--ds-texto-2);
    font-family: var(--ds-fuente);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.27273;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body.ui-v2 .s465-tabla th.s465-th-sp .s465-nu {
    display: block;
    padding-bottom: 5px;
    color: var(--ds-texto);
    font-family: var(--ds-fuente);
    font-size: var(--ds-tam-tabla);
    font-weight: 600;
    line-height: 1.3077;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Noche 5 · 4: el saldo del subproducto (mismo dato que Creación general), bajo el número */
body.ui-v2 .s465-tabla th.s465-th-sp .s465-saldo {
    display: block;
    padding-bottom: 5px;
    color: var(--ds-texto-2);
    font-family: var(--ds-fuente);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.27273;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body.ui-v2 .s465-tabla th.s465-th-sp .s465-saldo:empty { display: none; }
body.ui-v2 .s465-tabla th.s465-th-sp .s465-saldo-neg { color: var(--ds-error); }
/* la línea de 3 px con el color del producto (lo pone el JS) */
body.ui-v2 .s465-tabla th.s465-th-sp i {
    display: block;
    height: 3px;
    margin: 0 6px 6px;
    border-radius: 2px;
}
body.ui-v2 .s465-tabla th.s465-th-sp.s465-th-activa { background: var(--ds-acento-claro); }
body.ui-v2 .s465-tabla th.s465-th-sp.s465-th-activa .s465-pr { color: var(--ds-acento-oscuro); }
body.ui-v2 .s465-tabla th.s465-th-sp.s465-th-activa .s465-nu { color: var(--ds-acento-oscuro); }
body.ui-v2 .s465-tabla th.s465-deshab { background: var(--ds-neutro-fondo); }
body.ui-v2 .s465-tabla th.s465-deshab .s465-nu { color: var(--ds-texto-3); text-decoration: line-through; opacity: 1; }
body.ui-v2 .s465-tabla th.s465-deshab .s465-pr { opacity: 1; }
body.ui-v2 .s465-tabla th.s465-deshab i { background: repeating-linear-gradient(45deg, var(--ds-texto-3), var(--ds-texto-3) 3px, transparent 3px, transparent 6px) !important; }
/* Filas: una línea, alto en em (crece con la letra, nunca se enciman). */
body.ui-v2 .s465-tabla tbody tr { height: auto; }
body.ui-v2 .s465-tabla td {
    height: var(--s465-fila);
    max-height: none;
    padding: 0;
    background: var(--ds-superficie);
    border: 0;
    border-bottom: 1px solid var(--s465-linea);
    border-right: 1px solid var(--s465-linea);
    font-size: var(--ds-tam-tabla);
    line-height: 1.3077;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}
/* columnas de código congeladas: su `left` lo escribe el JS en variables */
body.ui-v2 .s465-tabla td.s465-fija,
body.ui-v2 .s465-tabla th.s465-fija { position: sticky; background: var(--s465-fondo-fijo); }
body.ui-v2 .s465-tabla thead th.s465-fija { background: var(--ds-encabezado-tabla); }   /* encabezado gris, como toda tabla */
body.ui-v2 .s465-tabla td.s465-fija { z-index: 2; }
body.ui-v2 .s465-tabla .s465-c-num { left: 0; }
body.ui-v2 .s465-tabla .s465-c-igss { left: var(--s465-l-igss, 40px); }
body.ui-v2 .s465-tabla .s465-c-minfin { left: var(--s465-l-minfin, 180px); }
body.ui-v2 .s465-tabla td.s465-borde,
body.ui-v2 .s465-tabla th.s465-borde { border-right: 1px solid var(--s465-linea-grupo); }
/* el código no se recorta con la celda: el cuadro de "varias coincidencias" cuelga de ella */
body.ui-v2 .s465-tabla td.s465-codigo { overflow: visible; }
body.ui-v2 .s465-tabla td.s465-num {
    padding: 0 8px 0 4px;
    background: var(--ds-fondo);
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-etiqueta);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.ui-v2 .s465-tabla td.s465-desc {
    max-width: 0;
    padding: 0 12px;
    border-left: 1px solid var(--s465-linea-grupo);
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-tabla);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.ui-v2 .s465-tabla input {
    display: block;
    width: 100%;
    height: var(--s465-fila);
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    color: var(--ds-texto);
    font: inherit;
    font-size: var(--ds-tam-tabla);
    line-height: normal;
    font-variant-numeric: tabular-nums;
}
body.ui-v2 .s465-tabla input[readonly] { cursor: default; }
/* celdas de datos blancas; el  pinta solo la columna del cruce */
body.ui-v2 .s465-tabla col { background: transparent; }
body.ui-v2 .s465-tabla col.s465-col-activa { background: var(--s465-col-activa); }
body.ui-v2 .s465-tabla td.s465-sp { background: transparent; text-align: center; }
/* donde cambia el producto, una divisoria más marcada */
body.ui-v2 .s465-tabla th.s465-inicio-grupo,
body.ui-v2 .s465-tabla td.s465-inicio-grupo { border-left: 1px solid var(--s465-linea-grupo); }
/* el cruce: fila entera, columna entera (vía ) y la celda donde se cruzan */
body.ui-v2 .s465-tabla tr.s465-foco td { background: var(--s465-fila-foco); }
body.ui-v2 .s465-tabla tr.s465-foco td.s465-num { background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); }
body.ui-v2 .s465-tabla td.s465-cruce { background: var(--s465-celda-cruce) !important; box-shadow: inset 0 0 0 2px var(--ds-acento); }
/* la marca: botón que llena la celda; marcada = relleno primario con ✓ blanco,
   como un mosaico redondeado dentro de la celda */
body.ui-v2 .s465-marca {
    display: block;
    width: 100%;
    height: var(--s465-fila);
    padding: 4px 5px;
    border: 0;
    border-radius: 10px;
    outline: none;
    background: transparent;
    background-clip: content-box;
    font: inherit;
    font-size: var(--ds-tam-tabla);
    cursor: pointer;
    transition: background-color var(--ds-transicion);
}
body.ui-v2 .s465-marca.s465-on,
body.ui-v2 .s465-marca.s465-on:hover {
    background: var(--ds-relleno-primario) url("data:image/svg+xml;utf8,") center / 1.1em 1.1em no-repeat;
    background-clip: content-box;
}
/* vacía al pasar el mouse: el mosaico en celeste claro con un ✓ tenue (se ve dónde cae la marca) */
@media (hover: hover) {
    body.ui-v2 .s465-marca:not(.s465-on):not(.s465-deshab):not(:disabled):hover {
        background: var(--ds-acento-claro) url("data:image/svg+xml;utf8,") center / 1.1em 1.1em no-repeat;
        background-clip: content-box;
    }
}
body.ui-v2 .s465-marca:disabled { cursor: default; }
/* subproducto deshabilitado en Saldos SIGES: celda rayada gris claro, no
   acepta marcas nuevas; una marca vieja se conserva con borde rojo */
body.ui-v2 .s465-tabla td.s465-sp-deshab { background: repeating-linear-gradient(135deg, var(--ds-hover) 0 5px, var(--ds-neutro-fondo) 5px 10px); }
body.ui-v2 .s465-marca.s465-deshab { cursor: not-allowed; }
body.ui-v2 .s465-marca.s465-deshab.s465-on { box-shadow: inset 0 0 0 2px var(--ds-error); }
/* celda activa (foco) */
body.ui-v2 .s465-tabla td.s465-activa { z-index: 2; box-shadow: inset 0 0 0 2px var(--ds-acento); }
body.ui-v2 .s465-tabla td.s465-fija.s465-activa { z-index: 3; }
body.ui-v2 .s465-tabla td.s465-activa .s465-marca.s465-on { box-shadow: none; }
body.ui-v2 .s465-tabla td.s465-rango { background: var(--ds-acento-claro-2) !important; }
/* estados de la fila */
body.ui-v2 .s465-tabla tr.s465-error td.s465-codigo input { color: var(--ds-error); font-weight: 600; }
body.ui-v2 .s465-tabla tr.s465-error td.s465-desc { color: var(--ds-error); }
body.ui-v2 .s465-tabla tr.s465-ambiguo td.s465-desc { color: var(--ds-aviso); }
body.ui-v2 .s465-tabla tr.s465-invalida td { background: var(--ds-error-tenue); }
body.ui-v2 .s465-tabla tr.s465-invalida td.s465-num { box-shadow: inset 3px 0 0 var(--ds-error-borde); }
body.ui-v2 .s465-punto {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--ds-acento);
    vertical-align: middle;
    animation: s465-latido 1.2s ease-in-out infinite;
}
body.ui-v2 .s465-buscando { color: var(--ds-texto-3); }
@keyframes s465-latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* tirador para repetir un código (arrastrar) */
body.ui-v2 .s465-handle {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--ds-superficie);
    border-radius: 2px;
    background: var(--ds-acento);
    cursor: crosshair;
    z-index: 6;
}
body.ui-v2 .s465-tabla td.s465-fija .s465-handle { right: 1px; bottom: 1px; }
/* vaciar la fila: ✕ discreto al pasar el mouse */
body.ui-v2 .s465-tabla td.s465-quitar-td { text-align: center; }
body.ui-v2 .s465-quitar {
    display: none;
    width: 100%;
    height: 2.125em;                       /* = alto de la fila (34 px) con su letra de 16 px: pasar el mouse no agranda la fila */
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ds-texto-3);
    font-size: 1.2308em;
    line-height: 1;
    cursor: pointer;
}
body.ui-v2 .s465-quitar:hover { color: var(--ds-error); }
body.ui-v2 .s465-tabla tr:hover .s465-quitar:not(:disabled) { display: block; }
/* "varias coincidencias": menú que cuelga de la celda del código */
body.ui-v2 .s465-chooser {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 20;
    min-width: 34em;
    max-width: 52em;
    padding: 4px;
    background: var(--ds-superficie);
    border: 1px solid var(--ds-borde);
    border-radius: var(--ds-radio-campo);
    box-shadow: var(--ds-sombra-menu);
    font-size: var(--ds-tam-tabla);
    line-height: 1.38462;
    white-space: nowrap;
}
body.ui-v2 .s465-chooser div {
    padding: 8px 10px;
    border: 0;
    border-radius: var(--ds-radio-item);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.ui-v2 .s465-chooser div:hover { background: var(--ds-hover); }
body.ui-v2 .s465-chooser div.s465-sel { background: var(--ds-acento-claro); color: var(--ds-acento-oscuro); }
body.ui-v2 .s465-chooser code { color: inherit; font-weight: 600; }
/* contrato abierto dentro de la descripción: píldora corta de aviso */
body.ui-v2 .s465-ca {
    display: inline-block;
    padding: 0 6px;
    border: 0;
    border-radius: var(--ds-radio-pildora);
    background: var(--ds-aviso-fondo);
    color: var(--ds-aviso);
    font-size: var(--ds-tam-etiqueta);
    font-weight: 500;
    line-height: 1.5;
    vertical-align: baseline;
}
body.ui-v2 .s465-ca.s465-ca-aviso { background: transparent; box-shadow: inset 0 0 0 1px var(--ds-aviso-borde); }
/* Año de precio por orden (Noche 4 · Paso 1, 2026-10-17): selector chico en su columna; un REMANENTE (año distinto al
   de la captura) lleva la marca neutra «Remanente 2026» al inicio de la descripción (no es un aviso: es normal) */
body.ui-v2 .s465-ca.s465-remanente { background: var(--ds-neutro-fondo); color: var(--ds-neutro); }
body.ui-v2 .s465-tabla td.s465-anio-td { text-align: center; padding: 0 2px; }
body.ui-v2 .s465-tabla select.s465-anio {
    width: 100%;
    min-height: 1.9231em;
    padding: 0 2px;
    border: 1px solid transparent;
    border-radius: var(--ds-radio-item);
    background: transparent;
    color: var(--ds-texto-2);
    font: inherit;
    font-variant-numeric: tabular-nums;
}
body.ui-v2 .s465-tabla select.s465-anio:hover, body.ui-v2 .s465-tabla select.s465-anio:focus { border-color: var(--ds-borde-fuerte); background: var(--ds-superficie); }
body.ui-v2 .s465-tabla tr.s465-fila-remanente select.s465-anio { color: var(--ds-texto); font-weight: 600; }
body.ui-v2 .s465-tabla th.s465-anio-th { padding: 0 4px 10px; text-align: center; }   /* misma línea base que «Descripción» */
body.ui-v2 .s465-tabla tr.s465-sin-orden select.s465-anio { visibility: hidden; }
body.ui-v2 .s465-anio-defecto { display: inline-flex; align-items: center; gap: var(--ds-e1); margin: 0; color: var(--ds-texto-2); font-size: var(--ds-tam-etiqueta); white-space: nowrap; }
body.ui-v2 .s465-anio-defecto select { width: auto; }
body.ui-v2 .s182-reabrir, body.ui-v2 .s182-copiar-form { gap: var(--ds-e2); flex-wrap: wrap; align-items: center; margin-bottom: var(--ds-e3); }
body.ui-v2 .s182-reabrir input { max-width: 28em; }
body.ui-v2 .s182-movimientos { margin: var(--ds-e2) 0 0; }
body.ui-v2 .s182-copiar { margin-top: var(--ds-e4); }

/* (3) Barra de la cuadrícula y atajos */
/* subproducto activo (código en píldora + nombre) y, a la derecha, el estado
   del guardado. Todo en una línea de alto estable: nada mueve la cuadrícula. */
body.ui-v2 .s465-barra-grilla {
    display: flex;
    align-items: center;
    gap: var(--ds-e3);
    min-width: 0;
    min-height: 3.2em;
    padding: 8px 12px 8px 16px;
    border-bottom: 1px solid var(--ds-borde);
}
body.ui-v2 .s465-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    min-width: 15.5em;
    min-height: 1.8em;
    padding: 2px 12px;
    border-radius: var(--ds-radio-pildora);
    background: var(--ds-acento-claro);
    color: var(--ds-acento-oscuro);
    font-size: var(--ds-tam-etiqueta);
    font-weight: 500;
    line-height: 1.33334;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
body.ui-v2 .s465-chip b { font-weight: 600; }
/* sin subproducto elegido ("Subproducto —"): texto apagado sin fondo; con fondo gris parecía
   un campo deshabilitado. Conserva su ancho mínimo (la grilla no se mueve). */
body.ui-v2 .s465-chip.s465-chip-vacio { background: transparent; color: var(--ds-texto-2); padding-left: 0; }
body.ui-v2 .s465-col-etiqueta {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    color: var(--ds-texto-2);
    font-size: var(--ds-tam-tabla);
    line-height: 1.38462;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.ui-v2 .s465-col-nombre { color: var(--ds-texto); }
body.ui-v2 .s465-col-producto { color: var(--ds-texto-2); }
body.ui-v2 .s465-estado { flex: none; margin-left: auto; }
/* atajos de teclado dentro del "?" del encabezado */
body.ui-v2 .popover:has(.s465-atajos) { --bs-popover-max-width: 33em; }
body.ui-v2 .s465-atajos {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    align-items: baseline;
    margin: 0;
}
body.ui-v2 .s465-atajos dt { margin: 0; color: var(--ds-texto); font-weight: 500; white-space: nowrap; }
body.ui-v2 .s465-atajos kbd { margin-right: 2px; }
body.ui-v2 .s465-atajos dd { margin: 0; }

/* (4) Proveedor, montos y generar */
body.ui-v2 .s465-inferior {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-e4);
    align-items: start;
    margin-top: var(--ds-e4);
}
@media (min-width: 1100px) {
    body.ui-v2 .s465-inferior { grid-template-columns: minmax(17em, 1fr) minmax(0, 2fr) minmax(19em, 1fr); }
}
body.ui-v2 .s465-inferior > .ds-tarjeta { margin-bottom: 0; }
/* tarjeta angosta: el título no ocupa 240 px de base, así "Precios" queda en su misma línea */
body.ui-v2 .s465-inferior .ds-tarjeta-titulos { flex-basis: auto; }
body.ui-v2 .s465-proveedor-elegido {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 2.4em;
    margin-bottom: var(--ds-e3);
    line-height: 1.42858;
}
body.ui-v2 .s465-prov-nombre { color: var(--ds-texto); font-weight: 600; overflow-wrap: anywhere; }
body.ui-v2 .s465-prov-nit { color: var(--ds-texto-2); font-size: var(--ds-tam-etiqueta); line-height: 1.33334; font-variant-numeric: tabular-nums; }
body.ui-v2 .s465-prov-vacio { color: var(--ds-texto-2); }
body.ui-v2 .s465-buscador-proveedor { position: relative; }
body.ui-v2 .s465-buscador-proveedor > .ti {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--ds-texto-3);
    font-size: 16px;
    pointer-events: none;
}
body.ui-v2 .s465-buscador-proveedor > .form-control { padding-left: 38px; border-radius: var(--ds-radio-pildora); }
/* resultados: se abren hacia ARRIBA (abajo está la barra de total fija) */
body.ui-v2 .s465-prov-lista {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 30;
    max-height: 18em;
    padding: 4px;
    overflow: auto;
    background: var(--ds-superficie);
    border: 1px solid var(--ds-borde);
    border-radius: var(--ds-radio-campo);
    box-shadow: var(--ds-sombra-menu);
    font-size: var(--ds-tam-tabla);
}
body.ui-v2 .s465-prov-lista > div {
    padding: 8px 10px;
    border: 0;
    border-radius: var(--ds-radio-item);
    cursor: pointer;
}
body.ui-v2 .s465-prov-lista > div:hover { background: var(--ds-hover); }
body.ui-v2 .s465-prov-lista > div.s465-sel { background: var(--ds-acento-claro); }
/* adentro de cada resultado, ningún div lleva relleno, línea ni fondo propio */
body.ui-v2 .s465-prov-lista > div div { padding: 0; border: 0; background: transparent; }
body.ui-v2 .s465-prov-lista > div + div { margin-top: 2px; }
body.ui-v2 .s465-prov-lista .s465-nom { color: var(--ds-texto); font-weight: 600; line-height: 1.38462; }
body.ui-v2 .s465-prov-lista > div.s465-sel .s465-nom { color: var(--ds-acento-oscuro); }
body.ui-v2 .s465-prov-lista .s465-nit { color: var(--ds-texto-2); font-size: var(--ds-tam-etiqueta); line-height: 1.33334; }
body.ui-v2 .s465-prov-lista .s465-prov-sin { color: var(--ds-texto-3); cursor: default; }
/* montos por código: el código se recorta con "…", las cifras no se parten */
body.ui-v2 .s465-montos > :is(thead, tbody, tfoot) > tr > :is(th, td).s465-res-codigo { width: 100%; }
body.ui-v2 .s465-montos > tbody > tr > td.s465-res-codigo > .ds-celda { width: 0; min-width: 100%; }
body.ui-v2 .s465-montos .s465-res-cifra { width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.ui-v2 .s465-montos > tbody > tr.s465-res-vacio > td {
    height: auto;
    padding: var(--ds-e5) var(--ds-e4);
    color: var(--ds-texto-2);
    text-align: center;
}
body.ui-v2 .s465-montos > tfoot > tr > th { font-size: var(--ds-tam-tabla); }
body.ui-v2 .s465-montos > tfoot > tr > th:first-child { padding-left: var(--ds-e4); }
body.ui-v2 .s465-montos > tfoot > tr > th:last-child { padding-right: var(--ds-e4); }
body.ui-v2 .s465-sin-dato { color: var(--ds-texto-2); }
/* generar */
body.ui-v2 .s465-form-generar { display: flex; flex-direction: column; gap: var(--ds-e3); }
body.ui-v2 .s465-form-generar .ds-campo { margin: 0; }
body.ui-v2 .s465-btn-generar { width: 100%; margin-top: var(--ds-e1); }
body.ui-v2 .s465-pend:empty,
body.ui-v2 .s465-msg:empty { display: none; }
body.ui-v2 .s465-pend {
    color: var(--ds-aviso);
    font-size: var(--ds-tam-etiqueta);
    line-height: 1.5;
}
/* un pendiente corto (código: sin precio) no se parte en dos líneas */
body.ui-v2 .s465-pend-item { white-space: nowrap; }
body.ui-v2 .s465-msg {
    color: var(--ds-error);
    font-size: var(--ds-tam-etiqueta);
    line-height: 1.5;
}
body.ui-v2 .s465-generado { margin: 0; line-height: 1.5; }
body.ui-v2 .s465-generado a { white-space: nowrap; }

/* (5) Barra de total fija abajo */
/* Siempre visible mientras se captura: pegada al pie de la ventana (sticky al
   final del contenido, así tiene el mismo ancho que la página). Blanca y
   flotante, como el pie de los formularios largos. */
body.ui-v2 .s465-barra-total {
    position: sticky;
    left: auto;
    right: auto;
    bottom: var(--ds-e3);
    z-index: 1015;
    display: flex;
    align-items: center;
    gap: var(--ds-e4);
    min-width: 0;
    margin-top: var(--ds-e4);
    padding: 10px 20px;
    background: var(--ds-superficie);
    color: var(--ds-texto);
    border: 1px solid var(--ds-borde);
    border-radius: var(--ds-radio-dialogo);
    box-shadow: var(--ds-sombra-pie);   /* hacia arriba, como .ds-pie-formulario */
    font-size: var(--ds-tam-tabla);
    line-height: 1.38462;
}
body.ui-v2 .s465-barra-resumen {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--ds-e3);
    min-width: 0;
}
/* franja del color de la página bajo la barra pegada (como bajo .ds-pie-formulario, §24d) */
body.ui-v2 .s465-barra-total::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -4px;                 /* tapa también el borde y la sombra de la tarjeta que pasa por detrás */
    right: -4px;
    height: calc(var(--ds-e3) + 1px);
    background: var(--ds-fondo);
    pointer-events: none;
}
body.ui-v2 .s465-barra-detalle { flex: none; color: var(--ds-texto-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.ui-v2 .s465-barra-total .s465-barra-codigos {
    display: flex;
    flex: 1 1 auto;
    gap: 6px;
    min-width: 8em;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}
body.ui-v2 .s465-barra-total .s465-barra-codigos::-webkit-scrollbar { display: none; }
body.ui-v2 .s465-barra-total .s465-barra-codigos span {
    flex: none;
    padding: 2px 10px;
    border-radius: var(--ds-radio-pildora);
    background: var(--ds-neutro-fondo);
    color: var(--ds-neutro);
    font-size: var(--ds-tam-etiqueta);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
body.ui-v2 .s465-barra-total .s465-barra-codigos span.s465-sin-precio { background: var(--ds-aviso-fondo); color: var(--ds-aviso); }
body.ui-v2 .s465-barra-total code { color: var(--ds-texto); font-weight: 600; }
body.ui-v2 .s465-barra-total .s465-sin-precio code { color: inherit; }
body.ui-v2 .s465-barra-bloque {
    display: flex;
    flex: none;
    align-items: baseline;
    gap: var(--ds-e2);
    padding-left: var(--ds-e4);
    border-left: 1px solid var(--ds-borde);
}
body.ui-v2 .s465-barra-rotulo { color: var(--ds-texto-2); font-size: var(--ds-tam-etiqueta); font-weight: 500; }
body.ui-v2 .s465-barra-total .s465-barra-monto {
    color: var(--ds-texto);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* contrato abierto en vivo: píldora de aviso */
body.ui-v2 .s465-barra-ca {
    display: inline-flex;
    flex: 0 1 auto;
    max-width: 50%;                        /* los códigos conservan su lugar (se desplazan de lado) */
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 2px 12px;
    border-radius: var(--ds-radio-pildora);
    background: var(--ds-aviso-fondo);
    color: var(--ds-aviso);
    font-size: var(--ds-tam-etiqueta);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.ui-v2 .s465-barra-ca[hidden] { display: none; }
body.ui-v2 .s465-barra-ca > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.ui-v2 .s465-barra-ca code { color: inherit; font-weight: 600; }
body.ui-v2 .s465-barra-ca a { color: inherit; text-decoration: underline; }
@media (max-width: 767.98px) {
    body.ui-v2 .s465-barra-total { flex-wrap: wrap; gap: var(--ds-e2) var(--ds-e3); padding: 8px 14px; bottom: 8px; }
    body.ui-v2 .s465-barra-resumen { flex-wrap: wrap; }
    body.ui-v2 .s465-barra-bloque { margin-left: auto; padding-left: 0; border-left: 0; }
    body.ui-v2 .s465-barra-total .s465-barra-codigos { flex-basis: 100%; }
    body.ui-v2 .s465-scroll { max-height: calc(100vh - 240px); }
}
@media (prefers-reduced-motion: reduce) {
    body.ui-v2 .s465-punto { animation: none; }
    body.ui-v2 .s465-marca { transition: none; }
}
@media print {
    body.ui-v2 .s465-barra-total,
    body.ui-v2 .s465-barra-grilla { display: none !important; }
}


/* 25o. Partes de ancho de columnas de Proveedores y Administración ------------ */
/* Nombres g-col- a propósito: cada uno fija la parte de UNA columna de una
   pantalla (§23j, --ds-col-parte y pisos), no es una pieza reutilizable. Las
   del 182 (s182-col-*) están en §25n. */
/* Proveedores */
/* El nombre es LA columna de la lista (el régimen y el contacto casi siempre
   están vacíos): se queda con la parte grande del ancho que sobra; régimen y
   contacto, con partes chicas (se parten en dos líneas). Con 40/15/16 a
   1440 se cortaban tres nombres mientras régimen y contacto mostraban "—". */
body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).g-col-proveedor { --ds-col-parte: 55%; --ds-col-flex-min: 12em; }
body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).g-col-regimen { --ds-col-parte: 9%; --ds-col-texto-min: 9em; }
body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).g-col-contacto { --ds-col-parte: 10%; --ds-col-texto-min: 9em; }
/* Administración */
/* usuarios: nombre + usuario de acceso (y "Administrador") y el centro de costo */
body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).g-col-usuario { --ds-col-parte: 24%; --ds-col-flex-min: 13em; }
body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).g-col-centro { --ds-col-parte: 20%; --ds-col-texto-min: 9em; }

/* OCDS: el estado (píldora + motivo o respuesta de Guatecompras) se parte en dos líneas */
body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).g-col-estado-ocds { --ds-col-parte: 26%; --ds-col-texto-min: 11em; }
/* en el teléfono la tabla se desplaza de lado dentro de su marco: el nombre conserva un ancho legible */
@media (max-width: 767.98px) {
    body.ui-v2 :is(.ui-tabla, .ds-tabla) > :is(thead, tbody) > tr > :is(th, td).g-col-proveedor { --ds-col-flex-min: 14em; }
}


/* 25p. Actas de adjudicación (2026-09-28) --------------------------------------- */
/* Tabla con CAMPOS dentro de las celdas (ofertas, adjudicación, junta, líneas del
   acta): . Los campos miden lo que
   una fila compacta (~32 px con letra de 13 px) y todo en em: con Safari alejado la
   letra sube y las cajas la siguen. Cantidad y precio en columnas de ancho fijo en
   em (caben 12 cifras con decimales). */
body.ui-v2 .ds-tabla-editable > tbody > tr > td { vertical-align: middle; }
body.ui-v2 .ds-tabla-editable :is(.form-control, .form-select) {
    min-height: 2.4615em;
    height: auto;
    padding-top: 0.2308em;
    padding-bottom: 0.2308em;
    font-size: var(--ds-tam-tabla);
}
body.ui-v2 .ds-tabla-editable .form-select { padding-right: 2em; }
body.ui-v2 .ds-tabla-editable > :is(thead, tbody, tfoot) > tr > :is(th, td).ds-col-cantidad { width: 10em; }
body.ui-v2 .ds-tabla-editable > :is(thead, tbody, tfoot) > tr > :is(th, td).ds-col-precio { width: 11em; }
body.ui-v2 .ds-tabla-editable > tfoot > tr > td { border-top: 1px solid var(--ds-borde); background: var(--ds-fondo); }
/* la lista de sugerencias de un campo dentro de una tabla no se recorta: el marco deja pasar lo que sobresale */
body.ui-v2 .ds-tabla-marco.ds-tabla-desborde { overflow: visible; }
/* Decisión por oferente: nombre y NIT · decisión · texto (justificación o motivo) */
body.ui-v2 .ds-decision {
    display: grid;
    grid-template-columns: minmax(16em, 1.2fr) auto minmax(18em, 2fr);
    gap: 0.9em 1.5em;
    align-items: start;
    padding: 1em 0;
    border-top: 1px solid var(--ds-borde);
}
body.ui-v2 .ds-decision:first-of-type { border-top: 0; }
@media (max-width: 991.98px) {
    body.ui-v2 .ds-decision { grid-template-columns: 1fr; }
}
/* Texto legal (CUARTO) tal como se imprime */
body.ui-v2 .ds-texto-legal {
    background: var(--ds-neutro-fondo);
    border-radius: var(--ds-radio-campo);
    padding: 0.9em 1.1em;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
/* Lista de avisos (bullets sobrios) y fila de píldoras */
body.ui-v2 .ds-lista-avisos { margin: 0.5em 0 0; padding-left: 1.25em; color: var(--ds-texto-2); }
body.ui-v2 .ds-pildoras-fila { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; }
body.ui-v2 .ds-pila-chica { display: flex; flex-direction: column; gap: 0.5em; }
body.ui-v2 .ds-pila-chica:empty { display: none; }
/* Campos cortos del formulario del acta */
body.ui-v2 .ds-campo-junta { min-width: 16em; }
body.ui-v2 .ds-cierre-texto { min-height: 2.5em; padding-top: 0.55em; }
body.ui-v2 .ds-campo-corto { max-width: 5.5em; }
body.ui-v2 .ds-tabla > tbody > tr.ds-fila-info > td { background: var(--ds-acento-claro); }
/* Ofertas pegadas de Guatecompras (2026-09-30): cantidad y precio fijos, como texto; columna «Incluye IVA» */
body.ui-v2 .ds-oferta-fija { display: inline-block; min-width: 100%; text-align: right; color: var(--ds-texto); font-variant-numeric: tabular-nums; }
body.ui-v2 .ds-tabla > tbody > tr.ds-fila-fija > td { background: var(--ds-neutro-fondo); }
body.ui-v2 .ds-tabla-editable > :is(thead, tbody, tfoot) > tr > :is(th, td).ds-col-iva { width: 9em; }
/* «Incluye IVA» del adjudicado, dentro de la fila de justificación del bloque de adjudicación (2026-09-30) */
body.ui-v2 .ds-fila-justificacion .ds-campo-iva .form-select { width: auto; min-width: 8em; }
body.ui-v2 .ds-tabla-editable .ds-col-iva .form-select, body.ui-v2 .ds-tabla-editable > tbody > tr > td:has(> select[data-campo="incluye_iva"]) .form-select { min-width: 7em; }
/* Adjudicación en un solo bloque (2026-09-30): casilla «Adjudicar» por oferta y la fila de justificación del oferente */
body.ui-v2 .ds-tabla-editable > :is(thead, tbody, tfoot) > tr > :is(th, td).ds-col-adjudicar { width: 6.5em; }
body.ui-v2 .ds-tabla-editable .ds-celda-adjudicar { text-align: center; }
body.ui-v2 .ds-tabla-editable .ds-celda-adjudicar .form-check-input { width: 1.3em; height: 1.3em; margin: 0; float: none; }
body.ui-v2 .ds-tabla > tbody > tr.ds-fila-justificacion > td { background: var(--ds-acento-claro); border-top: 0; padding-top: 0.2em; padding-bottom: 0.7em; }
/* Aviso dentro de una fila de la tabla de ofertas (texto completo, se parte en líneas; 2026-09-30) */
body.ui-v2 .ds-aviso-fila { display: inline-block; color: var(--ds-aviso); font-size: 12px; line-height: 1.33; white-space: normal; }

/* Formulario del acta POR PASOS, en DOS COLUMNAS (2026-09-30): el formulario a la izquierda (45 %) y el acta en vivo
   a la derecha (55 %), fija al desplazarse y con su propio desplazamiento si es más alta que la ventana.
   
pasos + una tarjeta .ds-acta-paso por paso +
   pie fijo
en %, como el Word: PRIMERO) y columnas que no se parten (SIAF, NOG) */
body.ui-v2 .ds-acta-tabla-fija { table-layout: fixed; }
body.ui-v2 .ds-acta-tabla .ds-acta-nopartir { white-space: nowrap; }
body.ui-v2 .ds-acta-firmas { display: grid; gap: 0 calc(11.3 * var(--ds-acta-u)); margin-top: calc(30 * var(--ds-acta-u)); font-size: calc(8 * var(--ds-acta-u)); text-align: center; }
body.ui-v2 .ds-acta-firmas-1 { grid-template-columns: 1fr; }
body.ui-v2 .ds-acta-firmas-2 { grid-template-columns: repeat(2, 1fr); }
body.ui-v2 .ds-acta-firmas-3 { grid-template-columns: repeat(3, 1fr); }
body.ui-v2 .ds-acta-firmas-4 { grid-template-columns: repeat(4, 1fr); }
body.ui-v2 .ds-acta-firma { break-inside: avoid; margin-top: calc(30 * var(--ds-acta-u)); }
body.ui-v2 .ds-acta-firma-linea { border-bottom: 1px solid var(--ds-hoja-tinta); margin: 0 calc(5.7 * var(--ds-acta-u)) calc(2 * var(--ds-acta-u)); }
/* §25q Acta de NEGOCIACIÓN (2026-10-01, templates/actas/form_negociacion.html, acta_negociacion_form.js): la tabla de
   precios agrupa por código en baja cuantía (fila del código y fila «Repartir con otro proveedor»), la lista de
   proveedores del acta y, en la hoja, la primera fila combinada de la tabla del SEGUNDO (SIAF · NOG). */
body.ui-v2 .ds-tabla > tbody > tr.ds-acta-fila-codigo > td { max-width: 0; background: var(--ds-encabezado-tabla); border-top: 1px solid var(--ds-borde); }
body.ui-v2 .ds-acta-fila-codigo .ds-acta-codigo-desc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-v2 .ds-tabla > tbody > tr.ds-acta-fila-repartir > td { padding-top: 0.15em; padding-bottom: 0.35em; border-top: 0; }
body.ui-v2 .ds-acta-proveedores { margin: 0; padding: 0; list-style: none; }
body.ui-v2 .ds-acta-proveedores > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em 0.5em; padding: 0.3em 0; border-bottom: 1px solid var(--ds-borde-suave); }
body.ui-v2 .ds-acta-proveedores > li:last-child { border-bottom: 0; }
body.ui-v2 .ds-acta-tabla > thead > tr > td.ds-acta-encima { text-align: left; font-weight: 400; }
/* §25t Fondo rotativo: cheques (Noche 2 · Paso 6, 2026-10-02; templates/fondo_rotativo/, admin/cuenta_impresion.html,
   static/js/fr_*.js). La vista del cheque y de la calibración es un