/* OT web module — DUCA LPS Bridge Pro (INTEGRAL). Marca LPS: fondo blanco, limpio. */
:root{
/* AUDITORIA A06 (2026-08-24): --lps-azul/--lps-azul-claro/--lps-borde/--lps-fondo
se declaraban aqui con OTROS valores (#0b3d6b/#1769aa/#d5dde5) que NUNCA se
aplicaban: carcasa.css se carga DESPUES en las 7 paginas de la familia OT y
los pisa (#1b52c9/#e8f1f9/#c7d2dc). La hoja mentia. Se retiran los muertos;
la AUTORIDAD de esos cuatro tokens es carcasa.css:7-10. Cero cambio visual. */
--lps-gris:#5b6b7b; --lps-blanco:#fff; --lps-ok:#1c7c3f; --lps-warn:#8a6508; --lps-err:#b3261e; /* warn 4.9:1 sobre #fff6e5; #b8860b media 3.0:1 */
--radio:8px; --sombra:0 1px 3px rgba(11,61,107,.12);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1a2a38;background:var(--lps-fondo);font-size:15px;line-height:1.45}
/* --- PIE AL FINAL DEL VIEWPORT --------------------------------------------
En paginas cortas el pie quedaba a media pantalla y el fondo cortaba de
tono donde terminaba el documento (revision visual R2, hallazgo objetivo).
El cuerpo se vuelve columna flexible: el main visible absorbe el espacio
sobrante y el pie baja al final. `html` toma el mismo fondo para que el
area mas alla del documento nunca cambie de tono, tampoco en capturas. */
html{min-height:100%;background:var(--lps-fondo)}
body{min-height:100vh;display:flex;flex-direction:column}
#vistaLogin.login{flex:1 1 auto}
#vistaApp:not([hidden]){display:flex;flex-direction:column;flex:1 1 auto}
#vistaApp>main:not([hidden]){flex:1 0 auto;width:100%}
#vistaApp>.lpsm-pie{margin-top:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
button{font-family:inherit;font-size:.95rem;cursor:pointer;border:1px solid var(--lps-azul);background:var(--lps-azul);color:#fff;padding:.5rem .9rem;border-radius:var(--radio)}
/* VALOR LITERAL a proposito: carcasa.css redefine --lps-azul-claro en :root con
#e8f1f9 (casi blanco) y carga DESPUES en las 6 paginas de esta familia — con
la variable, el hover quedaba texto blanco sobre casi blanco (~1.1:1). */
button:hover{background:#1769aa;border-color:#1769aa}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #ffb703;outline-offset:2px}
button[disabled]{opacity:.5;cursor:not-allowed}
.btn-sec{background:#fff;color:var(--lps-azul)}
.btn-sec:hover{background:#eaf1f8}
.btn-primario{background:var(--lps-ok);border-color:var(--lps-ok)}
.btn-primario:hover{background:#15672f;border-color:#15672f}
input,select{font-family:inherit;font-size:.95rem;padding:.45rem .55rem;border:1px solid var(--lps-borde);border-radius:6px;background:#fff;width:100%}
label{display:block;font-size:.8rem;font-weight:600;color:var(--lps-gris);margin-bottom:.2rem}
.campo{margin-bottom:.6rem}
.error{color:var(--lps-err);font-weight:600;margin:.4rem 0 0}
/* Login — SIN min-height:100vh propio: el body ya es columna flexible de
100vh con el pie al final; duplicar el alto creaba scroll fantasma y
cortaba el pie institucional bajo el pliegue. flex:1 1 auto ya lo estira. */
.login{min-height:0;display:grid;place-items:center;padding:1rem}
.login-card{background:#fff;border:1px solid var(--lps-borde);border-radius:12px;box-shadow:var(--sombra);padding:2rem;width:min(380px,100%);text-align:center}
.logo-login{max-width:190px;height:auto;margin-bottom:.4rem}
.login-card h1{font-size:1.35rem;color:var(--lps-azul);margin:.3rem 0}
.login-card .sub{color:var(--lps-gris);font-size:.85rem;margin:0 0 1.1rem}
.login-card .campo{text-align:left}
.login-card button[type=submit]{width:100%;margin-top:.4rem;padding:.6rem}
/* Shell */
.shell-header{display:flex;align-items:center;gap:1rem;background:#fff;border-bottom:2px solid var(--lps-azul);padding:.5rem 1rem;box-shadow:var(--sombra);position:sticky;top:0;z-index:10;flex-wrap:wrap}
/* UI/UX Bloque 6: bajo el marco (carcasa con marca propia), la cabecera de la
pagina se COMPACTA — fuera la razon social duplicada (la marca vive en la
barra navy y el pie fijo), queda el titulo de pagina + nav + sesion. */
body.con-marco .shell-header{padding:.25rem 1rem}
body.con-marco .shell-header .lpsm-empresa{display:none}
/* pie UNICO: el estatico de la pagina duplica el pie fijo navy de la carcasa
(la razon social y el sistema ya estan alli; «Marca protegida R» viaja en el
title del pie fijo). Sin marco (sin sesion), el pie estatico se queda. */
body.con-marco .lpsm-pie{display:none}
.logo-shell{height:38px;width:auto}
.nav{display:flex;gap:.3rem;flex:1}
.nav-btn{background:#fff;color:var(--lps-azul);border:1px solid transparent}
.nav-btn.is-active{border-color:var(--lps-borde);background:#eaf1f8;font-weight:700}
.shell-right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.chip{display:inline-block;padding:.25rem .55rem;border-radius:999px;background:#eef3f8;color:var(--lps-gris);font-size:.78rem;font-weight:600;border:1px solid var(--lps-borde)}
.chip-ver{background:#e7f0fb;color:var(--lps-azul)}
.chip-sync{background:#fff6e5;color:var(--lps-warn)}
.chip-ok{background:#e6f5ec;color:var(--lps-ok)}
.chip-err{background:#fbeae9;color:var(--lps-err)}
/* Panes */
.pane{padding:1rem;max-width:1200px;margin:0 auto}
.barra-acciones{background:#fff;border:1px solid var(--lps-borde);border-radius:var(--radio);padding:.5rem .8rem;margin-bottom:.9rem;box-shadow:var(--sombra);display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap}
/* UI/UX Bloque 6: colas y filtros comparten la banda; el formulario ocupa el resto */
.barra-acciones .colas{margin:0;align-self:center}
.barra-acciones .filtros{flex:1;min-width:0}
.filtros{display:flex;gap:.8rem;flex-wrap:wrap;align-items:end}
.filtros .campo{margin-bottom:0;min-width:150px;flex:1}
/* Con align-items:end, un select y un input de alturas ligeramente distintas
desplazaban las ETIQUETAS 2-3px entre si (revision visual R2). Altura unica
de control => cada .campo mide lo mismo => las etiquetas comparten linea. */
.filtros input,.filtros select{height:2.4rem}
/* Enlaces dentro de superficies navy: el azul de texto para paginas oscuras
(#5b8cf5) rinde 3.69:1 sobre la cabecera navy — insuficiente para texto
normal. Sobre navy se usa el tinte de enfasis: 4.90:1 en cabecera y 5.71:1
en el pie. El azul corporativo no se toca. */
.shell-header a:not(.lpsm-btn),.lpsm-pie a{color:var(--lpsm-azul-enfasis,#7aa5ff)}
/* flex-wrap: en 768px el grupo de botones (Filtrar/Actualizar/Nuevo) empujaba
su ultimo boton 3-64px fuera del documento — el unico desbordamiento NO
controlado que dejo la revision R2. Con wrap, el boton baja de linea. */
.campo-btns{display:flex;gap:.4rem;align-items:end;flex:0 0 auto;flex-wrap:wrap}
/* Tabla */
.tabla-wrap{overflow-x:auto;background:#fff;border:1px solid var(--lps-borde);border-radius:var(--radio);box-shadow:var(--sombra)}
.tabla{border-collapse:collapse;width:100%;font-size:.9rem}
.tabla caption{text-align:left;padding:.5rem}
.tabla th,.tabla td{padding:.5rem .6rem;text-align:left;border-bottom:1px solid var(--lps-borde);white-space:nowrap}
.tabla thead th{background:#eef3f8;color:var(--lps-azul);position:sticky;top:0;font-size:.78rem;text-transform:uppercase;letter-spacing:.02em}
.tabla tbody tr:hover{background:#f7fafd}
.tabla .col-num{font-variant-numeric:tabular-nums;font-weight:700}
/* Columna «Cliente» acotada a un tercio (orden del propietario 2026-08-30).
El maestro de terceros guarda NOMBRE + DIRECCION en un solo campo
(migración 039, TER-ZIP-023), de modo que una sola fila —BARCEL con su
dirección— estiraba la celda a 854 px, empujaba TIPO/Estado/Responsable
fuera de la pantalla y obligaba a barra horizontal. 854/3 = 285 px.
El nombre COMPLETO no se pierde: ot-cliente-celda.js lo deja en el `title`.
El recorte va en el , no en el | : con `table-layout:auto` un
max-width sobre la celda es solo una sugerencia que el navegador puede
ignorar; sobre un inline-block se respeta siempre. */
.tabla td.celda-cliente{max-width:285px}
.tabla td.celda-cliente .cliente-txt{display:inline-block;max-width:285px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.estado-carga{padding:1rem;text-align:center;color:var(--lps-gris);background:#fff;border:1px dashed var(--lps-borde);border-radius:var(--radio);margin-bottom:.6rem}
.fila-vacia td{text-align:center;color:var(--lps-gris);padding:1.4rem}
.paginacion{display:flex;align-items:center;gap:.6rem;padding:.8rem 0;flex-wrap:wrap}
.paginacion #pagInfo{font-weight:600;color:var(--lps-gris)}
.inline-label{display:inline;margin:0 0 0 .6rem}
.paginacion select{width:auto}
/* Overlay + editor */
.overlay{position:fixed;inset:0;background:rgba(12,32,52,.55);display:grid;place-items:center;padding:1rem;z-index:50}
/* DEFECTO CORREGIDO: `display:grid` de una hoja de autor VENCE al atributo
`hidden` del navegador (misma especificidad, pero autor gana a UA). Sin esta
regla, TODO diálogo marcado `hidden` se mostraba igualmente: el editor de OT
aparecía abierto y vacío, y el aviso de «Conflicto de versión» salía sobre la
pantalla de ingreso de seis páginas. El atributo debe poder ocultar. */
.overlay[hidden]{display:none !important}
/* ANCHO UTIL REAL (rediseño 2026-08-31). Antes: `min(860px,100%)`, que a
1366px dejaba el 37% de la pantalla vacio mientras la captura se apretaba en
una columna con desplazamiento largo. El prompt del propietario lo llama
«ventana modal angosta y extensa» y exige validar a 1366x768. */
.editor{background:#fff;border-radius:12px;width:min(1560px,96vw);max-height:92vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.3)}
/* --- FACTURACION: EL RESUMEN, AL FINAL Y A TODO EL ANCHO ------------------
ORDEN DEL PROPIETARIO 2026-09-02, viendo la pantalla: «que los valores de cobro
aparezcan al final para ocupar ese espacio, para que aparezca toda la
informacion completa y no aparezca ese espacio blanco».
ESTO INVIERTE LA TANDA B1, y hay que decirlo para que nadie lo restaure citando
el prompt viejo. B1 puso el resumen en un CARRIL LATERAL de 320 px porque un
prompt anterior lo pedia asi («resumen financiero lateral, siempre visible en
escritorio, de 300 a 340 px»). Sobre la pantalla real no funciona: el carril
reserva 320 px de ancho para TODA la altura de la pestaña, el resumen ocupa
apenas siete renglones y el resto queda en blanco, mientras la columna de
trabajo —formularios y tablas de pagos— se estrecha y sus columnas se aprietan.
Se retira el carril. El resumen vuelve al flujo, al final, a todo el ancho; la
regla `.editor #ttTotales` (ya SIN pegajoso desde el 02-09) lo pinta al final
captura, asi que el total sigue sin perderse de vista — que era el objetivo de
fondo de las dos tandas.
Como en B1: NO se mueve un solo nodo del DOM. `ot.js` cuelga de estos
selectores y de este orden. */
/* --- REDISEÑO DE FACTURACION, TANDA A ------------------------------------
Solo presentacion: no se mueve un nodo del DOM. `ot.js` (105 KB) cuelga de
estos selectores, y mover nodos para lograr un efecto visual es la forma mas
cara posible de romper la facturacion. */
/* CASILLAS DE CAPTURA A 44px. El prompt lo pide por su nombre: «no utilizar
campos miniatura de 32 a 37 px para la captura principal». Las de aqui
estaban en ~37. Se acota AL EDITOR: subirlas en toda la aplicacion repinta
pantallas que nadie ha pedido tocar. */
.editor .campo input,
.editor .campo select{ min-height:44px; padding:.6rem .7rem; font-size:15px; }
.editor .campo label{ display:block; margin-bottom:.25rem; font-size:.82rem;
color:var(--color-text-muted,#64748b); font-weight:600; letter-spacing:.01em; }
.editor .campo-btns button,
.editor .barra-acciones button{ min-height:42px; }
/* EL TOTAL, VISIBLE DURANTE LA CAPTURA. `#ttTotales` ya traia subtotal, total
factura LPS y pagos a terceros; el defecto era que estaba al final y habia que
desplazarse hasta abajo para verlo.
DESVIACION DICHA: el prompt lo quiere en columna lateral derecha; eso exige
reestructurar el DOM y va en la tanda siguiente. Pegajoso al fondo consigue el
MISMO objetivo —el total no se pierde de vista— sin mover un nodo. */
/* SIN pegajoso (2026-09-02, orden del propietario con captura): «tiene que
programarse como parte del final, no una ventana, eso tapa la informacion».
Flotando se superponia al formulario de pagos a terceros. Un bloque EN FLUJO
no puede tapar nada por construccion; la sombra hacia arriba se retira porque
era la señal visual de «ventana». La barra de acciones (.editor-acciones)
SI sigue pegajosa: lleva los botones y el propietario no la señalo. */
.editor #ttTotales{
background:var(--color-surface,#fff); border-top:2px solid var(--color-primary,#1b52c9);
padding:.6rem .8rem; margin-top:.6rem;
font-variant-numeric:tabular-nums; }
/* COLOR POR SECCION. El color identifica la SECCION, no entra en las casillas:
el prompt exige superficies neutras para el dato. Y cada una lleva franja
lateral ademas del fondo, porque el estado no puede depender solo del color
(WCAG 2.2, y lo pide el prompt explicitamente). */
.editor #ttFormCargo{ background:var(--color-primary-soft,#e8f1f9);
border-left:4px solid var(--color-primary,#1b52c9);
border-radius:8px; padding:.7rem .8rem; }
.editor #ttFormPpt{ background:var(--color-terceros-bg,#e8f8f4);
border-left:4px solid var(--color-terceros,#2c9a82);
border-radius:8px; padding:.7rem .8rem; }
.editor #ttFormCargo input, .editor #ttFormCargo select,
.editor #ttFormPpt input, .editor #ttFormPpt select{ background:#fff; }
/* IMPORTES: a la derecha y con cifras de ancho fijo, para que las columnas de
dinero se puedan comparar de un vistazo. */
.editor .col-num, .editor td.col-num, .editor .tabla td.col-num{
text-align:right; font-variant-numeric:tabular-nums; }
/* A 1366x768 —la resolucion que el prompt fija— el editor usa el ancho; por
debajo de 1100 vuelve al comportamiento de siempre. */
@media (max-width:1100px){
.editor{ width:min(860px,100%); }
}
/* H-22 (paquete maestro del propietario, 02-09): la clase de la OT, visible en
la ficha. Azul para DUCA (la identidad de la casa), gris-verde para SERVICIOS.
Estatico: no depende de datos ni de JS. */
.chip-clase-ot{ display:inline-block; margin-left:.5rem; padding:.1rem .55rem;
border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.04em;
vertical-align:middle; color:#fff; background:var(--lps-azul,#1b52c9); }
.chip-clase-ser{ background:#2e7d5b; }
.editor-head{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--lps-borde);position:sticky;top:0;background:#fff;flex-wrap:wrap}
.editor-head h2{margin:0;font-size:1.1rem;color:var(--lps-azul);flex:1}
.editor-indicadores{display:flex;gap:.35rem;flex-wrap:wrap}
/* CABECERA CONTEXTUAL (tanda B2). Discreta a proposito: identifica, no compite
con el titulo. Vacia no ocupa sitio —sin OT abierta no hay nada que decir—. */
.editor-ctx{margin:.1rem 0 0; font-size:.86rem; line-height:1.25;
color:var(--color-text-muted,#64748b); font-weight:600;}
.editor-ctx:empty{display:none;}
/* PROGRESO OPERATIVO (tanda B3). El estado se lee por MARCA y por PESO, no solo
por color: un operario que no distinga bien los colores tiene que poder verlo
igual, y el prompt lo exige. Vacio no ocupa sitio. */
.editor-progreso{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:.35rem 0 0;padding:0;font-size:.78rem}
.editor-progreso:empty{display:none}
.editor-progreso .paso{padding:.2rem .55rem;border-radius:999px;
border:1px solid var(--color-border,#c7d2dc);color:var(--color-text-muted,#64748b);
background:var(--color-surface-2,#eef3f8)}
.editor-progreso .paso-ok{border-color:var(--color-success,#1e7a3c);
color:var(--color-success,#1e7a3c);background:var(--color-success-bg,#e5f4ea)}
.editor-progreso .paso-actual{font-weight:700;
border-color:var(--color-primary,#1b52c9);color:var(--color-primary,#1b52c9);
background:var(--color-primary-soft,#e8f1f9)}
.editor-progreso .paso-ok.paso-actual{border-color:var(--color-success,#1e7a3c);
color:var(--color-success,#1e7a3c);background:var(--color-success-bg,#e5f4ea)}
.btn-cerrar{background:#fff;color:var(--lps-gris);border:1px solid var(--lps-borde);padding:.3rem .55rem}
.editor-body{padding:1rem}
fieldset{border:1px solid var(--lps-borde);border-radius:var(--radio);margin:0 0 1rem;padding:.8rem}
legend{font-weight:700;color:var(--lps-azul);padding:0 .4rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem}
.tabla-items input{padding:.3rem}
/* BARRA DE ACCIONES SIEMPRE A LA VISTA (rediseño 2026-08-31, tanda B4).
El prompt: «la barra de acciones debe permanecer al final del flujo». Con el
editor ya a ancho util (tanda A) el formulario es largo y para guardar habia
que desplazarse hasta abajo del todo: en una pantalla de captura, la accion
principal no puede esconderse detras de un desplazamiento.
`.editor` tiene `overflow:auto`, asi que el pegajoso se ancla a ESE contenedor.
(El carril lateral de la tanda B1 se RETIRO el 2026-09-02 por orden del
propietario: reservaba 320 px de ancho a toda la altura de la pestaña y
dejaba el hueco en blanco. Ver el acta arriba. Esta barra no cambia: se
pega ABAJO y ocupa el ancho del editor.)
El fondo OPACO y el borde superior no son adorno: sin ellos el contenido que
pasa por debajo se lee a traves y los botones quedan ilegibles. */
.editor-acciones{display:flex;gap:.5rem;flex-wrap:wrap;padding-top:.4rem;align-items:flex-start;
position:sticky; bottom:0; z-index:6;
background:var(--color-surface,#fff);
border-top:2px solid var(--color-primary,#1b52c9);
padding-bottom:.5rem; margin-top:.5rem;
box-shadow:0 -6px 16px rgba(18,57,92,.10);}
/* UI/UX Bloque 5 (2026-08-20): grupos con separador y menú «Documentos ▾».
Reversible por CSS; los botones conservan id/handler. */
.acc-grupo{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
padding-right:.6rem;border-right:1px solid var(--lps-borde,#c7d2dc)}
.editor-acciones>.acc-grupo:last-child{border-right:0;padding-right:0}
.acc-menu{position:relative;display:inline-block}
.acc-menu>summary{list-style:none;cursor:pointer;display:inline-block;
background:#fff;color:var(--lps-azul,#1b52c9);border:1px solid var(--lps-borde,#c7d2dc);
border-radius:6px;padding:.45rem .8rem;font-size:.9rem;white-space:nowrap;user-select:none}
.acc-menu>summary::-webkit-details-marker{display:none}
.acc-menu>summary:hover{background:var(--lps-azul-claro,#e8f1f9)}
.acc-menu>summary:focus-visible{outline:2px solid var(--focus-ring,#ffb703);outline-offset:2px}
.acc-menu[open]>summary{background:var(--lps-azul,#1b52c9);color:#fff;border-color:var(--lps-azul,#1b52c9)}
.acc-menu-lista{position:absolute;top:100%;left:0;z-index:70;margin-top:4px;
background:#fff;border:1px solid var(--lps-borde,#c7d2dc);border-radius:8px;
box-shadow:0 6px 20px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:4px;
min-width:280px;padding:6px}
.acc-menu-lista .btn-sec{text-align:left;width:100%}
/* Diálogo conflicto */
.dialogo{background:#fff;border-radius:12px;width:min(520px,100%);padding:1.4rem;box-shadow:0 10px 40px rgba(0,0,0,.3);border-top:5px solid var(--lps-err)}
.dialogo h2{color:var(--lps-err);margin:0 0 .5rem}
.dialogo-acciones{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.comparacion{background:#f7fafd;border:1px solid var(--lps-borde);border-radius:6px;padding:.6rem;margin-top:.6rem;font-family:ui-monospace,Consolas,monospace;font-size:.8rem;white-space:pre-wrap;max-height:220px;overflow:auto}
/* Historial */
.hist{border-top:1px solid var(--lps-borde);padding:1rem;background:#fafcfe}
.hist h3{margin:.2rem 0 .6rem;color:var(--lps-azul);font-size:1rem}
.hist-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.hist-lista li{background:#fff;border:1px solid var(--lps-borde);border-radius:6px;padding:.5rem .7rem;font-size:.85rem}
.hist-lista .ev-tipo{font-weight:700;color:var(--lps-azul)}
.hist-lista .ev-meta{color:var(--lps-gris);font-size:.75rem}
/* Toast */
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:#12395c;color:#fff;padding:.7rem 1.1rem;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.3);z-index:80;max-width:90vw}
.toast.ok{background:var(--lps-ok)}
.toast.err{background:var(--lps-err)}
.meta{color:var(--lps-gris);font-family:ui-monospace,Consolas,monospace;font-size:.82rem}
@media (max-width:640px){
.filtros .campo{min-width:100%}
.shell-header{gap:.5rem}
.nav{order:3;flex-basis:100%}
}
/* Colas de trabajo (carcasa del escritorio): Borradores / Pendientes /
Terminadas / Facturación. Mismo listado con el estado fijado. */
.colas{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.cola{background:#fff;color:var(--lps-azul);border:1px solid var(--lps-borde);
border-radius:999px;padding:6px 14px;cursor:pointer;font-size:.92rem}
.cola:hover{background:#f2f6fa}
.cola.is-active{background:#eaf1f8;border-color:var(--lps-azul);font-weight:700}
.cola:focus-visible{outline:2px solid var(--lps-azul);outline-offset:2px}
/* Tarjeta blanca de los dialogos .modal (Cobranza, Transmision): la clase solo
existia en design-system.css, hoja que esta familia NO carga — los titulos y
el resumen financiero caian en texto oscuro directamente sobre el velo oscuro.
El ancho va aparte para no pisar .modal-ancho. */
.overlay .modal{background:#fff;border-radius:12px;padding:1rem 1.4rem;max-height:88vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.overlay .modal:not(.modal-ancho){width:min(560px,96vw)}
.rep-grid{display:grid;grid-template-columns:max-content 1fr;gap:.25rem .9rem;margin:.5rem 0}
.acciones{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap;justify-content:flex-end}
/* La casilla «Cliente retiene 1% de IVA»: sin esta regla caia en el input
generico de width:100% y salia estirada al ancho de la columna. */
.campo-check label{display:flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:600;color:inherit}
.campo-check input[type=checkbox]{width:auto;padding:0;margin:0;height:1rem}
/* Cobranza (componentes 43-45). El estado del saldo se distingue por COLOR y
por PALABRA: el color solo no basta. */
.modal-ancho{ width:min(1040px,96vw); max-height:88vh; overflow:auto; }
.cob-PAGADO_TOTALMENTE{ color:#1e7a3c; }
.cob-PENDIENTE_DE_COBRO{ color:#a35c00; }
.cob-SOBREPAGO{ color:#a3282f; }
.cob-SIN_COBROS{ color:#4a5666; }
#cobTit + .meta{ border-left:3px solid var(--color-primary,#1b52c9); padding-left:10px; }
/* ===== ELECCION DE MODULO EN LA PANTALLA DE INGRESO =======================
Los dos tipos de OT son flujos distintos, con numeracion distinta
(OT-26209nnnnn frente a OT-26SERnnnnn) y pantallas distintas. Preguntarlo
en el ingreso ahorra entrar y luego navegar.
Se usan RADIO de verdad, no botones: se recorren con las flechas, el lector
de pantalla anuncia «1 de 2», y el estado elegido se distingue por BORDE Y
FONDO ademas de por color, que es lo que hace falta para quien no distingue
el azul. Los colores salen de las variables de marca, no inventados. */
.modulo-elec { border: 0; padding: 0; margin: 0 0 18px; }
.modulo-elec > legend {
font-size: .82rem; font-weight: 600; color: var(--lps-gris, #5b6470);
padding: 0; margin-bottom: 8px;
}
.modulo-op {
display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 1px;
align-items: center; padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
border: 1px solid var(--lps-borde, #d5dae1); border-radius: 6px;
background: var(--lps-blanco, #fff); transition: border-color .12s, background .12s;
}
.modulo-op:hover { border-color: var(--lps-azul-claro, #7aa7d9); }
.modulo-op input { grid-row: 1 / 3; width: 18px; height: 18px; margin: 0; accent-color: var(--lps-azul, #1b52c9); }
.modulo-tit { font-weight: 700; color: var(--lps-navy, #123163); line-height: 1.2; }
.modulo-des { font-size: .8rem; color: var(--lps-gris, #5b6470); line-height: 1.35; }
/* El elegido: fondo y borde, no solo color. */
.modulo-op:has(input:checked) {
border-color: var(--lps-azul, #1b52c9); border-width: 2px; padding: 9px 11px;
background: var(--lps-fondo, #eef3fa);
}
/* Foco de teclado SIEMPRE visible: es la unica pista de quien no usa raton. */
.modulo-op:focus-within { outline: 2px solid var(--lps-azul, #1b52c9); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .modulo-op { transition: none; } }
/* ===== DIALOGO DE CORRECCION DE FECHA ====================================
Sustituye a dos prompt() encadenados. El de la fecha pedia texto libre y por
eso entraba «01/02/2026», que se leia como 2 de enero: los tableros salian
con un mes de diferencia. Un datetime-local no admite formato ambiguo. */
.dlg-fecha { border: 1px solid var(--lps-borde, #d5dae1); border-radius: 8px;
padding: 0; max-width: 26rem; width: calc(100% - 2rem);
box-shadow: 0 10px 30px rgba(18, 49, 99, .18); }
.dlg-fecha::backdrop { background: rgba(18, 49, 99, .35); }
.dlg-fecha form { display: grid; gap: 6px; padding: 18px 20px 16px; }
.dlg-fecha h2 { margin: 0 0 2px; font-size: 1.05rem; color: var(--lps-navy, #123163); }
.dlg-fecha .dlg-nota { margin: 0 0 10px; font-size: .82rem; line-height: 1.45;
color: var(--lps-gris, #5b6470); }
.dlg-fecha label { font-size: .8rem; font-weight: 600; color: var(--lps-gris, #5b6470); margin-top: 6px; }
.dlg-fecha input { padding: 8px 10px; border: 1px solid var(--lps-borde, #d5dae1);
border-radius: 5px; font: inherit; }
.dlg-fecha input:focus-visible { outline: 2px solid var(--lps-azul, #1b52c9); outline-offset: 1px; }
.dlg-botones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.dlg-botones button { padding: 8px 16px; border-radius: 5px; font: inherit; cursor: pointer;
border: 1px solid var(--lps-borde, #d5dae1); background: var(--lps-blanco, #fff); }
.dlg-botones .dlg-ok { background: var(--lps-azul, #1b52c9); color: #fff; border-color: var(--lps-azul, #1b52c9); }
.dlg-botones button:focus-visible { outline: 2px solid var(--lps-azul, #1b52c9); outline-offset: 2px; }
/* Tanda 6b: cabeceras de columna ordenables. Botón sobrio que hereda el estilo
del th; la flecha ▲/▼ la añade ot.js en la columna activa. */
th .th-orden{ background:none; border:0; padding:0; margin:0; font:inherit; color:inherit;
cursor:pointer; font-weight:inherit; text-align:inherit; display:inline-flex; gap:.25em; align-items:center; }
th .th-orden:hover{ text-decoration:underline; }
th .th-orden[aria-sort="ascending"], th .th-orden[aria-sort="descending"]{ color:var(--lps-azul); font-weight:600; }
th .th-orden:focus-visible{ outline:2px solid var(--lps-azul); outline-offset:2px; border-radius:3px; }
|