/* Texdi — hoja de estilos de la aplicación (§4.1, §4.12, §4.13 del SPEC). Port completo del CSS de docs/mockups/texdi-ordenes-mockup.html: mismos selectores/clases que el mockup (el agente `web` replica ese DOM tal cual), colores convertidos a var(--token) de /css/tema.css y toda la TIPOGRAFÍA en rem (1rem = tamaño base de /css/tema.css: 13/15/17px según data-fuente). Las medidas de layout (alturas, anchos, paddings) se mantienen en px porque la pantalla de órdenes es un layout FIJO a 1920×1080 sin scroll de página (§4.1, §8.5). Además de la réplica del mockup, agrega: skin de Select2, modal "Ver", toast, popover de preferencias del avatar, sidebar de ayuda contextual (F1, §4.13) y el sistema de iconos SVG (sin emojis, §CLAUDE.md). Contratos de markup nuevos (ids/clases) documentados en docs/handoff.md → "ux → web (Fase 4)". */ :root { /* Iconos de línea (trazo, sin relleno) aplicados por máscara CSS con background-color: currentColor, así siguen el color del texto/tema sin duplicar assets por tema. */ --icon-ver: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1%2012s4-7%2011-7%2011%207%2011%207-4%207-11%207-11-7-11-7Z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3C/svg%3E"); --icon-ticket: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209V4a1%201%200%200%201%201-1h10a1%201%200%200%201%201%201v5%22/%3E%3Cpath%20d%3D%22M6%2018v2a1%201%200%200%200%201%201h10a1%201%200%200%200%201-1v-2%22/%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%2220%22%20height%3D%229%22%20rx%3D%221.5%22/%3E%3Cpath%20d%3D%22M8%2013h2M8%2016h6%22/%3E%3C/svg%3E"); --icon-abono: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%207v10M9.5%209.5c0-1.1%201.1-2%202.5-2s2.5.7%202.5%201.8c0%202.7-5%201.2-5%203.9%200%201.1%201.1%201.8%202.5%201.8s2.5-.9%202.5-2%22/%3E%3C/svg%3E"); --icon-cancelar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206%206%2018%22/%3E%3C/svg%3E"); --icon-cerrar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206%206%2018%22/%3E%3C/svg%3E"); --icon-buscar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22/%3E%3Cpath%20d%3D%22m20%2020-3.5-3.5%22/%3E%3C/svg%3E"); --icon-ayuda: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M9.5%209a2.5%202.5%200%200%201%205%200c0%202-2.5%202-2.5%204.5%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2217.5%22%20r%3D%220.6%22%20fill%3D%22%23000%22%20stroke%3D%22none%22/%3E%3C/svg%3E"); --icon-chevron-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22/%3E%3C/svg%3E"); --icon-editar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22/%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4Z%22/%3E%3C/svg%3E"); --icon-menu: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M3%2012h18M3%2018h18%22/%3E%3C/svg%3E"); --icon-finalizar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22/%3E%3C/svg%3E"); /* iconos de acciones de catálogo/usuarios (desactivar = ban, reactivar = rotate-ccw) y salir */ --icon-desactivar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpath%20d%3D%22m4.9%204.9%2014.2%2014.2%22/%3E%3C/svg%3E"); --icon-reactivar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%209-9%209.75%209.75%200%200%200-6.74%202.74L3%208%22/%3E%3Cpath%20d%3D%22M3%203v5h5%22/%3E%3C/svg%3E"); --icon-guardar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.2%203a2%202%200%200%201%201.4.6l3.8%203.8a2%202%200%200%201%20.6%201.4V19a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2z%22/%3E%3Cpath%20d%3D%22M17%2021v-7a1%201%200%200%200-1-1H8a1%201%200%200%200-1%201v7%22/%3E%3Cpath%20d%3D%22M7%203v4a1%201%200%200%200%201%201h7%22/%3E%3C/svg%3E"); --icon-salir: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22/%3E%3Cpath%20d%3D%22m16%2017%205-5-5-5%22/%3E%3Cpath%20d%3D%22M21%2012H9%22/%3E%3C/svg%3E"); /* iconos del menú lateral (uno por pantalla) */ --icon-mnu-ordenes: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22M12%2011h4M12%2016h4M8%2011h.01M8%2016h.01%22/%3E%3C/svg%3E"); --icon-mnu-fallos: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22/%3E%3Cpath%20d%3D%22M12%209v4%22/%3E%3Cpath%20d%3D%22M12%2017h.01%22/%3E%3C/svg%3E"); --icon-mnu-caja: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%208a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016Z%22/%3E%3Cpath%20d%3D%22m3.3%207%208.7%205%208.7-5%22/%3E%3Cpath%20d%3D%22M12%2022V12%22/%3E%3C/svg%3E"); --icon-mnu-catalogos: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.83%202.18a2%202%200%200%200-1.66%200L2.6%206.08a1%201%200%200%200%200%201.83l8.58%203.91a2%202%200%200%200%201.66%200l8.58-3.9a1%201%200%200%200%200-1.83Z%22/%3E%3Cpath%20d%3D%22m22%2017.65-9.17%204.16a2%202%200%200%201-1.66%200L2%2017.65%22/%3E%3Cpath%20d%3D%22m22%2012.65-9.17%204.16a2%202%200%200%201-1.66%200L2%2012.65%22/%3E%3C/svg%3E"); --icon-mnu-usuarios: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22/%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22/%3E%3C/svg%3E"); --icon-mnu-dashboard: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v16a2%202%200%200%200%202%202h16%22/%3E%3Cpath%20d%3D%22M18%2017V9%22/%3E%3Cpath%20d%3D%22M13%2017V5%22/%3E%3Cpath%20d%3D%22M8%2017v-3%22/%3E%3C/svg%3E"); --icon-mnu-bitacora: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22/%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22/%3E%3Cpath%20d%3D%22M10%209H8%22/%3E%3Cpath%20d%3D%22M16%2013H8%22/%3E%3Cpath%20d%3D%22M16%2017H8%22/%3E%3C/svg%3E"); --icon-mnu-apariencia: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%226.5%22%20r%3D%22.5%22/%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2210.5%22%20r%3D%22.5%22/%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%227.5%22%20r%3D%22.5%22/%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2212.5%22%20r%3D%22.5%22/%3E%3Cpath%20d%3D%22M12%202C6.5%202%202%206.5%202%2012s4.5%2010%2010%2010c.93%200%201.65-.75%201.65-1.69%200-.44-.18-.84-.44-1.13-.29-.28-.44-.65-.44-1.12a1.64%201.64%200%200%201%201.67-1.67h2c3.05%200%205.56-2.5%205.56-5.55C21.97%206.01%2017.46%202%2012%202z%22/%3E%3C/svg%3E"); } /* Colores derivados que no son tokens configurables de /css/tema.css (revisión R-21): antes estaban repartidos como hex fijos en reglas, atributos style y JS; aquí quedan nombrados con su variante oscura. El bloque @media replica el criterio de tema.css para el modo "sistema". Rediseño 2026-08-26: los tintes de píldora se recalibraron al papel cálido de la paleta nueva (mismo rol, mismo contraste AA verificado sobre su propio fondo). */ :root { --pill-nopag-bg: #FBF0CE; --pill-nopag-ink: #6F5205; --pill-abono-bg: #E4F3E9; --pill-abono-ink: #1E6B41; --pill-transfer-bg: #E7EDFA; --pill-transfer-ink: #23478F; --pill-tarjeta-bg: #EDE8FB; --pill-tarjeta-ink: #4F35A6; --pill-pordefinir-bg: #EDEBE4; --pill-pordefinir-ink: #4A473F; --warn-ink: #8C6704; --mark-bg: #FBEFB6; --sit-cancelada: #C9C5BC; --gris-separador: #B3AFA5; /* Superficie del campo capturable: el diseño distingue tres planos — papel puro de la card, campo editable apenas teñido y campo de solo lectura (--paper-2). */ --campo-fondo: #FCFCFA; --sobre-acento: #FFFFFF; } /* Marca CMYK de la barra superior: tinta pura de imprenta tomada del diseño. NO son tokens configurables ni colores de texto — el magenta puro rinde 4.25:1 sobre blanco y no llega a AA; para texto y errores va --magenta, que es su versión profundizada. */ :root { --marca-cyan: #29ABE2; --marca-magenta: #EC008C; --marca-amarillo: #FFF200; } /* La barra superior se pinta SIEMPRE con el contraste invertido de la página (fondo --ink, texto --paper), así que sus colores se derivan de los propios tokens y no pueden ser hex fijos: en tema oscuro la barra es clara. --sobre-barra-2 es el texto secundario de la barra (correo, "Imprenta digital"): la mezcla al 70 % supera AA contra --ink en ambos temas. */ :root { --sobre-barra: var(--paper); --sobre-barra-2: color-mix(in srgb, var(--paper) 70%, var(--ink)); --borde-barra: color-mix(in srgb, var(--paper) 32%, var(--ink)); } :root[data-tema="oscuro"] { --pill-nopag-bg: #453507; --pill-nopag-ink: #F0D387; --pill-abono-bg: #163326; --pill-abono-ink: #7FDCA6; --pill-transfer-bg: #1B2947; --pill-transfer-ink: #A8C2FB; --pill-tarjeta-bg: #29224A; --pill-tarjeta-ink: #C6B4FF; --pill-pordefinir-bg: #2F2D27; --pill-pordefinir-ink: #C5C0B4; --warn-ink: #E8C265; --mark-bg: #63541C; --sit-cancelada: #56524A; --gris-separador: #6B675E; --campo-fondo: #1B1A16; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]):not([data-tema="oscuro"]) { --pill-nopag-bg: #453507; --pill-nopag-ink: #F0D387; --pill-abono-bg: #163326; --pill-abono-ink: #7FDCA6; --pill-transfer-bg: #1B2947; --pill-transfer-ink: #A8C2FB; --pill-tarjeta-bg: #29224A; --pill-tarjeta-ink: #C6B4FF; --pill-pordefinir-bg: #2F2D27; --pill-pordefinir-ink: #C5C0B4; --warn-ink: #E8C265; --mark-bg: #63541C; --sit-cancelada: #56524A; --gris-separador: #6B675E; --campo-fondo: #1B1A16; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* OJO: el font-size del lo fija /css/tema.css (13/15/17px según data-fuente). Aquí NO se toca html { font-size }: 1rem sobre el elemento raíz equivale al valor inicial del navegador (16px) y pisaba los 13px de la escala "normal", dejando "grande" (15px) MÁS CHICA que normal (bug corregido 2026-08-23). La tipografía se declara en body, que sí hereda de html. */ html, body { background: var(--paper-2); color: var(--ink); } body { font: 1rem/1.35 var(--sans); } button, input, select, textarea { font: inherit; color: inherit; } /* Regla obligatoria: toda cantidad, medida, precio e importe usa esta clase. */ .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ---------- transiciones y accesibilidad ---------- */ a, button, .ctl, .btn, .ic, .toggle input, .seg a, .nav a { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, opacity .2s ease; } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 2px; } .ctl:focus-within, .ctl.focus { border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---------- barra superior ---------- */ .top { height: 48px; background: var(--ink); color: var(--paper); display: flex; align-items: center; padding: 0 20px; gap: 28px; } .brand { display: flex; align-items: center; gap: 12px; } .brand .mark { display: flex; gap: 3px; } .brand .mark i { width: 10px; height: 18px; display: block; } .brand .mark i:nth-child(1) { background: var(--marca-cyan); } .brand .mark i:nth-child(2) { background: var(--marca-magenta); } .brand .mark i:nth-child(3) { background: var(--marca-amarillo); } /* La cuarta franja es el "blanco" de la marca: se pinta con --paper y no con un hex fijo porque la barra invierte el contraste (en tema oscuro la barra es clara y la franja debe oscurecer). */ .brand .mark i:nth-child(4) { background: var(--paper); } /* Logotipo en monoespaciada con tracking abierto, como en el diseño. */ .brand b { font: 600 1.3077rem/1 var(--mono); letter-spacing: .06em; } .brand small { color: var(--sobre-barra-2); font: 400 .7692rem var(--sans); letter-spacing: .18em; text-transform: uppercase; } .nav { display: flex; gap: 4px; margin-left: 24px; } .nav a { color: var(--ink-3); text-decoration: none; padding: 6px 12px; border-radius: 4px; font-weight: 500; } .nav a.on, .nav a[aria-current="page"] { background: var(--paper); color: var(--ink); } .nav a:hover { color: var(--paper); } .top .right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: .9231rem; color: var(--sobre-barra-2); } .top .right .clock { font-family: var(--mono); color: var(--sobre-barra); font-size: 1rem; } .av-btn { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid transparent; border-radius: 20px; padding: 3px 8px 3px 3px; cursor: pointer; color: inherit; } .av-btn:hover, .av-btn[aria-expanded="true"] { border-color: var(--borde-barra); } .top .user-menu .av { width: 26px; height: 26px; border-radius: 50%; background: var(--cyan); color: var(--sobre-acento); display: grid; place-items: center; font: 600 .8462rem var(--mono); flex: none; } .top .role { border: 1px solid var(--borde-barra); border-radius: 3px; padding: 1px 6px; font: 500 .7692rem var(--mono); letter-spacing: .08em; } .top .user-menu .logout-form { display: inline; margin-left: 4px; } /* Corrección #7 (2026-08-22): en la barra oscura, "Salir", el botón de ayuda y el de menú usan el MISMO token que el reloj (var(--paper)) para ser visibles en ambos temas; el borde se deriva de los propios tokens con color-mix en vez de un hex fijo. */ .btn-ayuda-f1 { background: transparent; border: 1px solid var(--borde-barra); color: var(--sobre-barra); border-radius: 3px; cursor: pointer; height: 28px; } .top .user-menu .btn-salir { background: transparent; border: 1px solid transparent; color: var(--sobre-barra-2); border-radius: 3px; cursor: pointer; height: 28px; padding: 5px 10px; font-size: .7692rem; display: inline-flex; align-items: center; gap: 6px; } .top .user-menu .btn-salir::before { content: ''; width: 13px; height: 13px; background-color: currentColor; -webkit-mask: var(--icon-salir) center / contain no-repeat; mask: var(--icon-salir) center / contain no-repeat; } .top .user-menu .btn-salir:hover { color: var(--sobre-barra); background: color-mix(in srgb, var(--paper) 12%, var(--ink)); } .btn-ayuda-f1:hover { border-color: var(--sobre-barra); background: color-mix(in srgb, var(--paper) 12%, var(--ink)); } .btn-ayuda-f1 { width: 28px; display: grid; place-items: center; } .btn-ayuda-f1::before { content: ''; display: block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--icon-ayuda) center / contain no-repeat; mask: var(--icon-ayuda) center / contain no-repeat; } .user-menu { position: relative; display: flex; align-items: center; gap: 8px; } /* botón hamburguesa de la barra superior (corrección #10) */ .btn-menu { background: transparent; border: 1px solid transparent; color: var(--sobre-barra); border-radius: 4px; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; flex: none; } .btn-menu::before { content: ''; display: block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--icon-menu) center / contain no-repeat; mask: var(--icon-menu) center / contain no-repeat; } .btn-menu:hover { border-color: var(--borde-barra); background: color-mix(in srgb, var(--paper) 12%, var(--ink)); } /* ---------- shell de la aplicación: menú lateral + contenido como card (correcciones #10 y #3) ---------- La barra superior mide 48px; el shell ocupa el resto del viewport y NUNCA genera scroll de página: el scroll vive dentro de .contenido-app (o de los .scroll internos en Órdenes). */ .app-shell { display: flex; height: calc(100vh - 48px); background: var(--paper-2); overflow: hidden; } /* En escritorio la página nunca hace scroll (ver arriba), pero el dropdown de un Select2 fuera de modal se ancla a y, al abrirse cerca del borde inferior, alarga el documento y hace aparecer la barra de scroll vertical (p. ej. el select de rol en Usuarios). Se corta ese desborde en el viewport; bajo 1024px la página vuelve al flujo normal y sí debe hacer scroll. */ @media (min-width: 1024px) { body:has(.app-shell) { overflow: hidden; } } .menu-lateral { width: 14.5rem; flex: none; background: var(--paper); border-right: 1px solid var(--rule); overflow-y: auto; padding: .75rem 0; display: flex; flex-direction: column; gap: .5rem; } body.menu-colapsado .menu-lateral { display: none; } .menu-grupo-titulo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; background: transparent; border: 0; cursor: pointer; text-align: left; padding: .5rem 1rem .4rem; font: 600 .7692rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .menu-grupo-titulo::after { content: ''; width: .9rem; height: .9rem; flex: none; background-color: currentColor; -webkit-mask: var(--icon-chevron-down) center / contain no-repeat; mask: var(--icon-chevron-down) center / contain no-repeat; transition: transform .2s ease; } .menu-grupo-titulo[aria-expanded="false"]::after { transform: rotate(-90deg); } .menu-grupo-titulo:hover { color: var(--ink); } /* acento de color por grupo del menú (sobrio: solo un punto junto al título) */ .menu-grupo-titulo::before { content: ''; width: .5rem; height: .5rem; border-radius: 2px; flex: none; background: var(--marca-cyan); margin-right: .35rem; } .menu-grupo:nth-of-type(2) .menu-grupo-titulo::before { background: var(--marca-magenta); } .menu-grupo:nth-of-type(3) .menu-grupo-titulo::before { background: var(--marca-amarillo); } .menu-grupo-titulo::after { margin-left: auto; } .menu-grupo-items { list-style: none; overflow: hidden; transition: height .2s ease; } .menu-item { display: flex; align-items: center; gap: .55rem; padding: .5rem 1rem .5rem calc(1.1rem - 3px); border-left: 3px solid transparent; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .9231rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-item:hover { background: var(--paper-2); color: var(--ink); } /* icono de cada elemento del menú: máscara SVG con currentColor, sigue el color del estado */ .menu-icono { width: 1.1rem; height: 1.1rem; flex: none; background-color: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; } .menu-icono[data-icon="ordenes"] { -webkit-mask-image: var(--icon-mnu-ordenes); mask-image: var(--icon-mnu-ordenes); } .menu-icono[data-icon="abonos"] { -webkit-mask-image: var(--icon-abono); mask-image: var(--icon-abono); } .menu-icono[data-icon="cancelaciones"] { -webkit-mask-image: var(--icon-desactivar); mask-image: var(--icon-desactivar); } .menu-icono[data-icon="fallos"] { -webkit-mask-image: var(--icon-mnu-fallos); mask-image: var(--icon-mnu-fallos); } .menu-icono[data-icon="caja"] { -webkit-mask-image: var(--icon-mnu-caja); mask-image: var(--icon-mnu-caja); } .menu-icono[data-icon="catalogos"] { -webkit-mask-image: var(--icon-mnu-catalogos); mask-image: var(--icon-mnu-catalogos); } .menu-icono[data-icon="usuarios"] { -webkit-mask-image: var(--icon-mnu-usuarios); mask-image: var(--icon-mnu-usuarios); } .menu-icono[data-icon="dashboard"] { -webkit-mask-image: var(--icon-mnu-dashboard); mask-image: var(--icon-mnu-dashboard); } .menu-icono[data-icon="bitacora"] { -webkit-mask-image: var(--icon-mnu-bitacora); mask-image: var(--icon-mnu-bitacora); } .menu-icono[data-icon="apariencia"] { -webkit-mask-image: var(--icon-mnu-apariencia); mask-image: var(--icon-mnu-apariencia); } .menu-icono[data-icon="ayuda"] { -webkit-mask-image: var(--icon-ayuda); mask-image: var(--icon-ayuda); } /* activo: el estado no depende solo del color — lleva barra lateral y peso además del tono. El diseño marca la selección con un realce neutro del propio papel (no con un acento de color), así que el tinte sale de --ink al 8 %: da el gris cálido del diseño en claro y un realce equivalente en oscuro, con el texto a --ink puro (contraste máximo en ambos temas). */ .menu-item.activo { border-left-color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, var(--paper)); color: var(--ink); font-weight: 600; } /* contenido como card (corrección #3): la página de fondo es --paper-2 y el contenido vive en una card --paper con borde y radio. La card se logra con margin (no padding) porque el markup no trae un wrapper interno; las pantallas conservan sus paddings propios. */ .contenido-app { flex: 1 1 auto; min-width: 0; margin: 1rem 1.25rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 1px 3px rgba(26, 25, 23, .06); overflow: auto; } /* Órdenes (§8.5, sin scroll de página a 1920×1080 con el sidebar visible): la pantalla NO es una card — es el papel de fondo sobre el que flotan las tres tarjetas del diseño (formulario, ticket y listado). La columna es flexible: la captura toma su alto natural y el listado absorbe el resto con su .scroll interno, que es lo único que hace scroll. */ body.pantalla-ordenes .contenido-app { margin: 0; padding: 1.15rem; background: var(--paper-2); border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; gap: 1.15rem; overflow: hidden; } body.pantalla-ordenes .capture { flex: none; } body.pantalla-ordenes .list { flex: 0 1 auto; min-height: 0; max-height: 100%; } /* Corrección 2026-09-09: #listadoContenedor (wrapper del refresco AJAX) se interponía entre .list y .scroll como bloque normal, así que .scroll no recibía alto acotado y la tabla desbordaba el overflow:hidden de .list sin barra vertical. Se integra a la cadena flex para que .scroll sea quien desplaza. */ body.pantalla-ordenes #listadoContenedor { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } body.pantalla-ordenes #listadoContenedor .scroll { min-height: 0; } body.pantalla-ordenes #listadoContenedor .foot { flex: none; } /* Corrección 2026-09-09: casillas para incluir/excluir filas de la suma de importes; solo visibles al filtrar por texto/cliente (clase .sumando puesta por ordenes.js). */ .sumar-fila, .sumar-todas { display: none; } #listadoContenedor.sumando .sumar-fila, #listadoContenedor.sumando .sumar-todas { display: inline-block; width: 1rem; height: 1rem; margin: 0 .5rem 0 0; vertical-align: middle; accent-color: var(--cyan); cursor: pointer; } .foot .suma { display: flex; align-items: center; gap: .35rem; color: var(--ink-2); } /* 2026-09-14: display:flex le ganaba al [hidden] del navegador y la suma se veia siempre. */ .foot .suma[hidden] { display: none; } .foot .suma .num { font-family: var(--mono); color: var(--ink); } /* Corrección 2026-09-14: las columnas del listado ya no llevan anchos fijos del mockup (1920 sin sidebar): las compactas van en px en el de _Listado.cshtml y Producto, Cliente y Notas se reparten el sobrante (table-layout fixed). El min-width evita que esas tres se aplasten en pantallas angostas: por debajo, .scroll desplaza en horizontal. */ body.pantalla-ordenes .list table { min-width: 1560px; } /* ---------- captura (formulario + ticket) ---------- */ /* El diseño no usa franjas a sangre: cada bloque es una tarjeta de --paper con borde y radio, separadas por el papel de fondo. .capture ya no pinta nada, solo distribuye las dos tarjetas (formulario y ticket) en un carril; el ticket se alinea arriba y toma su alto natural. */ .capture { height: auto; background: transparent; display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: 1.15rem; align-items: start; } .form { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 1.4rem 1.5rem; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; row-gap: 14px; align-content: start; } .form .head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); } .form .head h1 { font: 600 1.6923rem/1 var(--disp); letter-spacing: -.01em; } .form .head .folio { font: 500 1rem var(--mono); color: var(--ink-3); } .form .head .folio b { color: var(--ink); font-weight: 600; } .form .head .fecha { margin-left: auto; font: 500 1rem var(--mono); color: var(--ink-2); } .form .head .leyenda-requerido { color: var(--ink-3); font-size: .8462rem; } .f { display: flex; flex-direction: column; gap: 5px; } .f label { font: 500 .8462rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; } .f label .k { font: 400 .7692rem var(--mono); color: var(--ink-3); text-transform: none; letter-spacing: 0; } .f label .req { color: var(--magenta); font-weight: 700; } .f .error-campo { display: block; color: var(--magenta); font-size: .7692rem; min-height: 1em; } .f .error-campo:empty { display: none; } /* Corrección 2026-08-25 (fuente grande/extragrande): los contenedores de texto usan min-height en vez de height fijo, para crecer con la escala de fuente sin cortar el contenido. */ .ctl { min-height: 38px; border: 1px solid var(--rule); border-radius: 4px; background: var(--campo-fondo); padding: 0 10px; display: flex; align-items: center; gap: 8px; outline: none; width: 100%; } .ctl input, .ctl select { border: 0; outline: 0; background: transparent; width: 100%; height: 100%; min-width: 0; } .ctl.num input { font-family: var(--mono); font-size: 1.1538rem; text-align: right; font-weight: 500; } .ctl .unit { font: 500 .8462rem var(--mono); color: var(--ink-3); white-space: nowrap; } .ctl.ro { background: var(--paper-2); color: var(--ink-2); } .ctl.ro input { color: var(--ink-2); } .c2 { cursor: pointer; justify-content: space-between; } .c2 .val { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c2 .val .code { font: 500 .8462rem var(--mono); color: var(--ink-3); } .c2 .val .ph { color: var(--ink-3); opacity: .8; } .c2 .caret { width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--ink-3); margin-top: 5px; flex: none; } .chip { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, .15); flex: none; } :root[data-tema="oscuro"] .chip, .top-oscuro .chip { border-color: rgba(255, 255, 255, .18); } .s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s6 { grid-column: span 6; } .s8 { grid-column: span 8; } .s12 { grid-column: 1 / -1; } /* Pagado, Con anticipo y el monto viven en la misma columna (el monto depende de los dos interruptores, y apilarlos es lo que hace evidente la relación). El monto se separa un poco para leerse como consecuencia de ellos, no como un tercer control suelto. */ .grupo-pago { gap: .3rem; } .grupo-pago .campo-anticipo { margin-top: .35rem; } .money { position: relative; } .money .ctl { padding-left: 22px; } .money .ctl::before { content: '$'; position: absolute; left: 10px; font: 500 1rem var(--mono); color: var(--ink-3); } .badge { font: 600 .7692rem var(--mono); letter-spacing: .06em; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; } .badge.mod { background: color-mix(in srgb, var(--mod) 12%, var(--paper)); color: var(--mod); border: 1px solid color-mix(in srgb, var(--mod) 45%, var(--paper)); } .badge.lista { background: transparent; color: var(--ink-3); border: 0; padding: 0; font-weight: 400; letter-spacing: 0; text-transform: none; font-family: var(--sans); } .f label.toggle, .toggle { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; min-height: 38px; cursor: pointer; user-select: none; font-weight: 400; font-size: .9231rem; text-transform: none; letter-spacing: 0; color: var(--ink); } .toggle input { appearance: none; width: 30px; height: 16px; border-radius: 10px; background: var(--rule); position: relative; flex: none; cursor: pointer; } .toggle input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); transition: left .15s; } .toggle input:checked { background: var(--ink); } .toggle input:checked::after { left: 16px; } textarea.ctl { min-height: 38px; height: auto; resize: none; padding: 9px 10px; display: block; line-height: 1.45; } /* Notas es el único textarea de captura con varios renglones: crece con rows y el usuario puede estirarlo. El resto de los textarea del sistema conservan el alto de un control normal. */ .form textarea.ctl { min-height: 5.4rem; resize: vertical; } .actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--rule); } .btn { min-height: 40px; white-space: nowrap; padding: 0 18px; border-radius: 4px; border: 1px solid var(--rule); background: var(--paper); cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; } .btn .k { font: 400 .7692rem var(--mono); color: var(--ink-3); } .btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn.primary .k { color: color-mix(in srgb, var(--paper) 58%, var(--ink)); } .btn.primary:hover { opacity: .88; } .btn:hover:not(.primary) { background: var(--paper-2); } .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-3); font-weight: 500; } .btn.ghost:hover { background: var(--paper-2); color: var(--ink); } .btn:disabled { opacity: .5; cursor: not-allowed; } .actions .hint { margin-left: auto; color: var(--ink-3); font-size: .9231rem; } /* ---------- Select2 tema: skin completo sobre las clases reales del plugin (corrección #2) ---------- Aplica a TODOS los Select2 (AJAX y locales, dentro y fuera de modales). La altura del control se mantiene en 38px A PROPÓSITO para quedar idéntica a los .ctl/inputs del formulario (que son px por el layout fijo del mockup); tipografía, paddings de opciones y tamaños internos van en rem para responder a la escala de fuente. Nota de contraste: la opción resaltada NO usa fondo var(--cyan) con texto var(--cyan-ink) (ese par rinde ~1.7:1, muy por debajo de AA en ambos temas); se usa un tinte de --cyan sobre --paper con texto var(--ink), que conserva el acento y garantiza 4.5:1 en claro y oscuro. */ .select2-container { width: 100% !important; } .select2-container .select2-selection--single { min-height: 38px !important; height: auto !important; border: 1px solid var(--rule) !important; border-radius: 4px !important; background: var(--campo-fondo) !important; display: flex !important; align-items: center; padding: 0 .75rem; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); padding: 0; line-height: 1.3; font-size: 1rem; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ink-3); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; top: 0; right: 6px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border: none !important; width: .9231rem; height: .9231rem; background-color: var(--ink-2); -webkit-mask: var(--icon-chevron-down) center / contain no-repeat; mask: var(--icon-chevron-down) center / contain no-repeat; margin: 0 !important; } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--cyan) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent); } .select2-container--default.select2-container--disabled .select2-selection--single { background: var(--paper-2) !important; cursor: not-allowed; } .select2-dropdown { border: 1px solid var(--rule) !important; border-radius: 4px !important; box-shadow: 0 10px 30px rgba(26, 25, 23, .16); background: var(--paper) !important; color: var(--ink); z-index: 1060; } .select2-search--dropdown { padding: .4615rem !important; background: var(--paper); } .select2-search--dropdown .select2-search__field { height: 2.3077rem; border: 1px solid var(--rule) !important; border-radius: 3px !important; padding: 0 .6154rem !important; font: 1rem var(--sans); background: var(--paper); color: var(--ink); outline: none; } .select2-search--dropdown .select2-search__field:focus { border-color: var(--cyan) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent); } .select2-container--default .select2-results__option { padding: .5385rem .7692rem; border-top: 1px solid var(--rule-soft); font-size: .9231rem; color: var(--ink); background: var(--paper); } .select2-container--default .select2-results__option:first-child { border-top: 0; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: color-mix(in srgb, var(--cyan) 16%, var(--paper)) !important; color: var(--ink) !important; box-shadow: inset 3px 0 0 var(--cyan); } .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--paper-2); font-weight: 600; } .select2-container--default .select2-results__option[aria-disabled="true"] { color: var(--ink-3); } .select2-container--default .select2-results__option .op-code { font: 500 .8462rem var(--mono); color: var(--ink-3); margin-right: .6154rem; } .select2-container--default .select2-results__option .op-sub { display: block; font-size: .8462rem; color: var(--ink-3); } .select2-container--default .select2-results__option .op-price { float: right; font: 500 .9231rem var(--mono); } .select2-results__option mark { background: var(--mark-bg); color: inherit; padding: 0 1px; } .select2-container--default .select2-results > .select2-results__options { max-height: 16.9231rem; } /* ---------- vista previa del ticket ---------- */ .ticket-wrap { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 1.25rem; display: flex; flex-direction: column; gap: .8rem; height: auto; } .ticket-wrap .cap { font: 500 .7692rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; } .ticket { position: relative; background: var(--paper); border: 1px dashed var(--rule); border-radius: 4px; flex: 1; padding: 26px 28px; font-family: var(--mono); overflow: auto; } .ticket h3 { font: 600 1.7692rem/1 var(--mono); letter-spacing: .02em; margin-bottom: 2px; } .ticket .meta { font-size: .8462rem; color: var(--ink-3); margin-bottom: 16px; } .ticket .row { display: flex; justify-content: space-between; gap: 1em; padding: 3px 0; font-size: .9231rem; } .ticket .row:first-of-type { border-top: 1px solid var(--rule-soft); padding-top: .7rem; margin-top: .2rem; } .ticket .row span:first-child { color: var(--ink-3); } .ticket .big { display: flex; justify-content: space-between; align-items: baseline; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--rule-soft); } .ticket .big span:first-child { font-family: var(--sans); font-size: .7692rem; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; } .ticket .big b { font: 600 2.6154rem/1 var(--mono); } .ticket .pay { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; font-size: .9231rem; } .ticket .pay .pill { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-family: var(--sans); font-weight: 400; font-size: .8462rem; } .ticket .area { position: absolute; right: 28px; top: 70px; text-align: right; } .ticket .area b { font: 600 1.3846rem var(--mono); display: block; } .ticket .area span { font-size: .7692rem; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; } /* ---------- listado ---------- */ .list { height: auto; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; } .bar { min-height: 100px; display: flex; align-items: center; gap: 12px; padding: 6px 24px; border-bottom: 1px solid var(--rule); background: var(--paper); flex-wrap: wrap; } .list .bar { flex-direction: column; align-items: stretch; gap: .7rem; padding: 1.1rem 1.4rem .9rem; border-bottom-color: var(--rule-soft); } .bar-fila { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; min-width: 0; } .bar h2 { font: 600 1.2308rem/1 var(--disp); letter-spacing: -.01em; margin-right: 8px; } .bar .count { font: 500 .9231rem var(--mono); color: var(--ink-3); } /* 2026-09-14: casilla "Ver todas" del listado de órdenes (solo Admin). */ .bar .ver-todas { display: inline-flex; align-items: center; gap: .35rem; font-size: .9231rem; color: var(--ink-2); cursor: pointer; white-space: nowrap; } .bar .ver-todas input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--cyan); cursor: pointer; } .bar .search { min-height: 32px; width: 300px; border: 1px solid var(--rule); border-radius: 4px; display: flex; align-items: center; padding: 0 10px; gap: 8px; color: var(--ink-3); background: var(--campo-fondo); } .bar .search input { border: 0; outline: 0; background: transparent; width: 100%; height: 100%; color: var(--ink); font-size: .9231rem; } .bar .search .ico-buscar { width: 14px; height: 14px; flex: none; background-color: var(--ink-3); -webkit-mask: var(--icon-buscar) center / contain no-repeat; mask: var(--icon-buscar) center / contain no-repeat; } .seg { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; min-height: 32px; } .seg a, .seg button { min-height: 30px; padding: 0 .75rem; display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--ink-3); font-weight: 500; font-size: .9231rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; white-space: nowrap; } .seg a:hover, .seg button:hover { border-color: var(--ink-3); color: var(--ink); } /* El filtro activo no se distingue solo por color: también invierte el contraste por completo. */ .seg a.on, .seg button.on, .seg a[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .seg a .chip, .seg button .chip { width: 9px; height: 9px; } .bar .right { margin-left: auto; display: flex; gap: 18px; align-items: center; } /* En el listado de Órdenes el buscador ocupa el sobrante del renglón de filtros. */ .list .bar .search { flex: 1 1 18rem; min-width: 12rem; width: auto; } .stat { text-align: right; } .stat span { display: block; font: 500 .7692rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .stat b { font: 600 1.2308rem var(--mono); } .stat b.warn { color: var(--warn-ink); } table { width: 100%; border-collapse: collapse; table-layout: fixed; } thead th { position: sticky; top: 0; background: var(--paper); font: 600 .7692rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); z-index: 1; } /* Corrección 2026-08-25: columnas redimensionables (tablas.js). El asa vive dentro del (sticky = posicionado, así que el absolute se ancla a la celda) sobre el borde derecho. */ .redim-asa { position: absolute; top: 0; right: -5px; width: 10px; height: 100%; cursor: col-resize; z-index: 3; touch-action: none; } /* Corrección 2026-09-14: en la última columna el asa se queda dentro de la celda; con right:-5px sobresalía 5px de la tabla y provocaba una barra de scroll horizontal en todo .scroll. */ thead th:last-child .redim-asa { right: 0; } .redim-asa:hover { background: color-mix(in srgb, var(--cyan) 40%, transparent); } body.redimensionando { user-select: none; cursor: col-resize; } body.redimensionando .redim-asa { background: color-mix(in srgb, var(--cyan) 40%, transparent); } thead th.r, td.r { text-align: right; } thead th:first-child, tbody td:first-child { padding-left: 1.4rem; } thead th:last-child, tbody td:last-child { padding-right: 1.4rem; } tbody td { padding: 0 10px; height: 40px; border-bottom: 1px solid var(--rule-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; background: var(--paper); } tbody tr:hover td { background: var(--paper-2); } tbody tr.cancel td { color: var(--ink-3); text-decoration: line-through; } tbody tr.cancel td.acts, tbody tr.cancel td.st { text-decoration: none; } td.mono { font-family: var(--mono); font-size: .9615rem; } td.folio { font: 600 .9615rem var(--mono); } td.st { padding-left: 0; } .sit { display: inline-flex; align-items: center; gap: .45rem; padding: 3px 9px 3px 10px; border-radius: 3px; font-weight: 500; font-size: .9231rem; color: var(--ink-2); } .sit i { width: .5rem; height: .5rem; border-radius: 999px; display: block; flex: none; } tbody tr.cancel .sit { color: var(--ink-3); } .pago { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px; border-radius: 3px; font-weight: 500; font-size: .9231rem; border: 1px solid rgba(0, 0, 0, .1); } :root[data-tema="oscuro"] .pago { border-color: rgba(255, 255, 255, .12); } .p-efectivo { background: var(--blanco); color: var(--ink); } .p-transfer { background: var(--pill-transfer-bg); color: var(--pill-transfer-ink); } .p-abono { background: var(--pill-abono-bg); color: var(--pill-abono-ink); } .p-nopag { background: var(--pill-nopag-bg); color: var(--pill-nopag-ink); } /* Corrección 2026-08-25: chips de las formas de pago Tarjeta y Por definir. */ .p-tarjeta { background: var(--pill-tarjeta-bg); color: var(--pill-tarjeta-ink); } .p-pordefinir { background: var(--pill-pordefinir-bg); color: var(--pill-pordefinir-ink); } td .pago { background: none; border: 0; padding: 0; color: var(--ink-2); font-weight: 400; } td .pago .chip { width: .5rem; height: .5rem; border-radius: 999px; border: 0; } .flag { font: 600 .6923rem var(--mono); letter-spacing: .05em; padding: 1px 5px; border-radius: 2px; margin-left: 6px; vertical-align: middle; } .flag.mod { background: color-mix(in srgb, var(--mod) 14%, var(--paper)); color: var(--mod); } .flag.merma { background: color-mix(in srgb, var(--merma) 16%, var(--paper)); color: var(--merma); } .flag.cancel { background: var(--rule-soft); color: var(--ink-3); } /* bandera FINALIZADA (corrección #6): mismo patrón que las demás flags con el token --verde; el texto se oscurece mezclando con --ink (y en tema oscuro se aclara solo, porque ahí --ink es claro) para sostener el contraste sobre el tinte. */ .flag.fin { background: color-mix(in srgb, var(--verde) 16%, var(--paper)); color: color-mix(in srgb, var(--verde) 55%, var(--ink)); } /* Acciones por fila: centradas verticalmente y con aire respecto a la orilla de la celda. */ .acts { display: flex; gap: 6px; align-items: center; padding: 4px 14px; } .ic { width: 32px; height: 32px; border-radius: 4px; border: 1px solid transparent; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); position: relative; } .ic::before { content: ''; display: block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .ic[data-icon="ver"]::before { -webkit-mask-image: var(--icon-ver); mask-image: var(--icon-ver); } .ic[data-icon="ticket"]::before { -webkit-mask-image: var(--icon-ticket); mask-image: var(--icon-ticket); } .ic[data-icon="abono"]::before { -webkit-mask-image: var(--icon-abono); mask-image: var(--icon-abono); } .ic[data-icon="cancelar"]::before { -webkit-mask-image: var(--icon-cancelar); mask-image: var(--icon-cancelar); } .ic[data-icon="editar"]::before { -webkit-mask-image: var(--icon-editar); mask-image: var(--icon-editar); } .ic[data-icon="finalizar"]::before { -webkit-mask-image: var(--icon-finalizar); mask-image: var(--icon-finalizar); } /* Avisos de resultado de acciones MVC (TempData) — visibles en ambos temas, con prefijo textual. */ .aviso-error, .aviso-exito { margin: 12px 24px 0; padding: 10px 14px; border-radius: 4px; font-size: .9231rem; border: 1px solid; } .aviso-error { background: color-mix(in srgb, var(--magenta) 12%, var(--paper)); border-color: var(--magenta); color: var(--ink); } .aviso-exito { background: color-mix(in srgb, var(--verde) 14%, var(--paper)); border-color: var(--verde); color: var(--ink); } .ic:hover { border-color: var(--rule); background: var(--paper); } .ic.danger:hover { color: var(--magenta); border-color: color-mix(in srgb, var(--magenta) 45%, var(--paper)); } .ic[disabled] { opacity: .3; pointer-events: none; } /* position:relative (2026-08-25): ancla los th sticky y las asas de redimensionado (.redim-asa, absolute) al propio contenedor; sin él su containing block es y generan un scroll horizontal fantasma a nivel de página cuando la tabla es más ancha que el contenedor. */ .scroll { flex: 1; overflow: auto; background: transparent; position: relative; } .foot { min-height: 34px; border-top: 1px solid var(--rule-soft); background: transparent; display: flex; align-items: center; padding: .7rem 1.4rem; gap: 22px; font-size: .9231rem; color: var(--ink-3); flex-wrap: wrap; } .foot .legend { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .foot .legend span { display: flex; gap: 6px; align-items: center; } .foot .pg { margin-left: auto; font-family: var(--mono); display: flex; align-items: center; gap: 10px; } .foot .pg button { background: transparent; border: 1px solid var(--rule); border-radius: 3px; width: 24px; height: 24px; cursor: pointer; color: var(--ink-2); } .foot .pg button:hover:not(:disabled) { background: var(--paper-2); } .foot .pg button:disabled { opacity: .35; cursor: not-allowed; } /* ---------- modal "Ver" ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(26, 25, 23, .55); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 100; } .modal-backdrop[hidden] { display: none; } .modal { width: min(560px, 100%); max-height: min(720px, 90vh); display: flex; flex-direction: column; background: var(--paper); border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: hidden; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--rule); } .modal .actions { padding-top: 0; border-top: 0; } .modal-head h3 { font: 600 1.2308rem var(--disp); letter-spacing: -.01em; } .modal-body { padding: 16px 20px; overflow: auto; display: flex; flex-direction: column; gap: 10px; } .modal-subtitulo { font: 600 .8462rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--rule-soft); } .modal.modal-ancho { width: min(860px, 100%); } /* Corrección 2026-08-25: módulo de administración de órdenes. */ #pantallaOrdenesAdmin { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 0; } #pantallaOrdenesAdmin > .bar { border: 1px solid var(--rule); border-radius: 6px; } #pantallaOrdenesAdmin .bar h1 { font: 600 1.3846rem/1 var(--disp); letter-spacing: -.01em; } #pantallaOrdenesAdmin .bar .hint { color: var(--ink-3); font-size: .9231rem; } #pantallaOrdenesAdmin .filtros-admin { gap: 14px; align-items: flex-end; } #pantallaOrdenesAdmin .filtros-admin .f { min-width: 0; } #pantallaOrdenesAdmin .filtros-admin .ctl { width: 200px; } #listadoAdminContenedor { border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; } #listadoAdminContenedor .scroll { max-height: 60vh; } /* El formulario del modal de edición reusa la rejilla de captura pero dentro del modal. */ .form-modal { padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 14px; row-gap: 12px; } /* Corrección 2026-08-25: reporte de deudores. */ #pantallaReporteDeudores { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 0; } #pantallaReporteDeudores > .bar, #pantallaReporteDeudores > form.bar { border: 1px solid var(--rule); border-radius: 6px; } #pantallaReporteDeudores .bar h1 { font: 600 1.3846rem/1 var(--disp); letter-spacing: -.01em; } #pantallaReporteDeudores .bar .hint { color: var(--ink-3); font-size: .9231rem; } #pantallaReporteDeudores .filtros-admin { gap: 14px; align-items: flex-end; } #pantallaReporteDeudores .filtros-admin .ctl { width: 140px; } #pantallaReporteDeudores .tabla-deudores { border: 1px solid var(--rule); border-radius: 6px; max-height: 62vh; } .fila-deudor td { background: var(--paper-2); border-top: 2px solid var(--rule); } .fila-deudor .sub-deudor { margin-left: 10px; color: var(--ink-3); font-size: .8462rem; } /* Enlace de abono directo por deudor: btn-mini es de