/* =========================================================================== MARCO DEL PROGRAMA — replica del escritorio (ver HALLAZGOS_VIDEOS_ESCRITORIO). Paleta del kit de marca del propietario (LPS_KIT_MARCA_WEB/lps-brand.css): navy #12395c · navy2 #0e2e4d · azul #1b52c9 · azul claro #e8f1f9 · texto #1f2733 · suave #5b6b7b. FONDO CLARO en todo el programa. =========================================================================== */ :root{ --lps-navy:#12395c; --lps-navy2:#0e2e4d; --lps-azul:#1b52c9; --lps-azul-claro:#e8f1f9; --lps-texto:#1f2733; --lps-suave:#5b6b7b; --lps-borde:#c7d2dc; --lps-fondo:#f4f7fb; /* SHELL COMPACTO (spec del propietario 2026-08-05): encabezado <=2 filas 82-90px, pie 1 sola linea 30-34px, area DUCA >=620px en 1366x768. */ --shell-header-height:48px; --shell-context-height:32px; --shell-footer-height:32px; --shell-font-size:12.5px; --shell-meta-font-size:11.5px; } body.con-marco{ background:var(--lps-fondo); color:var(--lps-texto); padding-bottom:34px; } /* BARRA CONTEXT-AWARE (#4, :8444 — arreglo 2026-08-26): en la instancia hermana «OT DUCA REG ESPECIALES» la barra global NO ofrece módulos de OT DUCA (ese sistema es SOLO Regímenes). Ocultación DECLARATIVA: carcasa.js pone data-lps-hermana="1" en de forma SÍNCRONA por URL (sin esperar al fetch async, que en el navegador real llegaba tarde y dejaba los módulos a la vista). Estas reglas los ocultan en el PRIMER pintado del nav — sin carrera de timing. Se conservan Regímenes especiales, Facturación Reg. Especiales, Usuarios, Mi perfil y Menú principal (sus href no están aquí). */ html[data-lps-hermana="1"] #lpsNav a[href="/"], html[data-lps-hermana="1"] #lpsNav a[href="/ot"], html[data-lps-hermana="1"] #lpsNav a[href="/tablero"], html[data-lps-hermana="1"] #lpsNav a[href="/facturacion"], html[data-lps-hermana="1"] #lpsNav a[href="/ot-servicios"], html[data-lps-hermana="1"] #lpsNav a[href="/seguimiento-pais-proveedor"], html[data-lps-hermana="1"] #lpsNav a[href="/catalogos"], html[data-lps-hermana="1"] #lpsNav a[href="/sac"], html[data-lps-hermana="1"] #lpsNav a[href="/terceros"], html[data-lps-hermana="1"] #lpsNav a[href="/documentos"]{ display:none !important; } /* SKIP-LINK (WCAG 2.4.1): oculto hasta recibir foco por teclado; entonces se revela sobre todo el cromo (z-index alto) como primer control tabulable. */ .lps-skip{ position:fixed; top:-60px; left:8px; z-index:9999; background:var(--lps-azul,#1b52c9); color:#fff; font-weight:600; padding:8px 14px; border-radius:0 0 6px 6px; text-decoration:none; font-size:13px; box-shadow:0 2px 8px rgba(0,0,0,.28); transition:top .12s ease; } .lps-skip:focus{ top:0; outline:3px solid #ffb703; outline-offset:2px; } /* --- 1. barra «Gestión de OT» — clara, arriba del todo ------------------- */ .lps-gestion{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; background:#fff; border-bottom:1px solid var(--lps-borde); padding:0 16px; min-height:var(--shell-context-height); font-size:var(--shell-font-size); color:var(--lps-texto); overflow-x:auto; /* nunca crece a una 3.a fila: rueda dentro de si misma */ } .ges-eti{ color:var(--lps-suave); } .ges-ot{ color:var(--lps-azul); font-variant-numeric:tabular-nums; } .ges-sep{ color:var(--lps-suave); } .ges-cli{ font-weight:600; } .ges-estado{ color:#b00020; font-weight:700; } .ges-vacio{ color:var(--lps-suave); font-style:italic; } .ges-acciones{ display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; } .ges-btn{ background:#fff; color:var(--lps-navy); border:1px solid var(--lps-borde); border-radius:6px; padding:5px 12px; text-decoration:none; font-size:.85rem; white-space:nowrap; } .ges-btn:hover{ background:var(--lps-azul-claro); } /* «Menú principal»: vuelve a la selección de línea; se distingue de las acciones de OT. */ .ges-menu{ background:var(--lps-navy); color:#fff; border-color:var(--lps-navy); font-weight:600; } .ges-menu:hover{ background:#0d2c49; } .ges-menu::before{ content:"\2190"; margin-right:5px; font-weight:700; } .ges-btn:focus-visible,.ges-tomar:focus-visible{ outline:2px solid var(--lps-azul); outline-offset:2px; } .ges-disp{ background:#1e7a3c; color:#fff; border-radius:6px; padding:5px 12px; font-size:.82rem; font-weight:600; } .ges-tomar{ background:var(--color-disabled-bg,#eef2f6); color:var(--color-disabled-text,#4a5666); border:1px solid var(--lps-borde); border-radius:6px; padding:5px 12px; font-size:.85rem; cursor:not-allowed; } /* HABILITADO (hay bloqueo ajeno que tomar): deja de verse apagado — antes el boton conservaba el gris aun cuando ya era operable (Bloque 8). */ .ges-tomar[aria-disabled="false"]{ background:#fff; color:var(--lps-navy); border-color:var(--lps-azul); cursor:pointer; font-weight:600; } .ges-tomar[aria-disabled="false"]:hover{ background:var(--lps-azul-claro); } /* --- 2. marca + navegación HORIZONTAL — navy ----------------------------- */ .lps-marca-nav{ display:flex; align-items:center; gap:18px; flex-wrap:nowrap; background:var(--lps-navy); color:#fff; padding:0 16px; min-height:var(--shell-header-height); } .lps-ident{ display:flex; align-items:center; gap:12px; } .lps-logo{ height:32px; width:auto; display:block; } .lps-nombres{ display:flex; flex-direction:column; line-height:1.15; } .lps-nombres b{ font-size:1rem; } .lps-nombres small{ font-size:.68rem; color:#bcd3ea; letter-spacing:.4px; } /* SIN overflow-x: un contenedor de scroll RECORTA el menu absoluto «Más ▾» (la unica via de la barra a 7 modulos: se abria y no se pintaba). El flex-wrap:wrap ya garantiza que la barra nunca desborda: envuelve. */ .lps-nav{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-left:auto; min-width:0; max-width:100%; } .lps-nav-item{ color:#fff; text-decoration:none; padding:7px 14px; border-radius:4px; font-size:.9rem; white-space:nowrap; border:1px solid transparent; } .lps-nav-item:hover{ background:rgba(255,255,255,.12); } .lps-nav-item.is-active{ background:var(--lps-azul); font-weight:700; } .lps-nav-item:focus-visible{ outline:2px solid #ffb703; outline-offset:2px; } .lps-mas{ position:relative; } .lps-mas > button{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:4px; padding:7px 12px; cursor:pointer; font-size:.9rem; } .lps-mas > button:hover{ background:rgba(255,255,255,.12); } /* Bloque 10 UI/UX: foco visible en los controles que no lo tenian */ .lps-mas > button:focus-visible, .shell-msg-ir:focus-visible, .shell-msg-x:focus-visible{ outline:2px solid var(--focus-ring,#ffb703); outline-offset:2px; } .lps-mas-menu{ position:absolute; right:0; top:100%; margin-top:4px; background:#fff; border:1px solid var(--lps-borde); border-radius:6px; min-width:210px; box-shadow:0 6px 20px rgba(0,0,0,.2); z-index:60; display:flex; flex-direction:column; } .lps-mas-menu a{ padding:8px 14px; color:var(--lps-texto); text-decoration:none; font-size:.88rem; } .lps-mas-menu a:hover{ background:var(--lps-azul-claro); } /* Encabezado de grupo dentro de «Más ▾» (barra minimalista 2026-08-25): «Facturación» antecede a sus tres flujos. No es clicable; se lee como rótulo, no como enlace. */ .lps-mas-tit{ padding:8px 14px 2px; color:var(--lps-suave); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; } /* --- 3. pie compacto — UNA SOLA LINEA (Shell Compacto): grid 3 columnas izq marca+razon social · centro OT+datos+usuario · der nombre del sistema. Cada grupo con ellipsis; el texto completo viaja en title/aria-label. ---- */ .lps-estado{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center; background:var(--lps-navy); color:#dbe7f3; padding:0 16px; min-height:var(--shell-footer-height); font-size:var(--shell-meta-font-size); } .lps-estado > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fc-izq{ color:#9fc0dd; } .fc-cen{ text-align:center; } .fc-der{ opacity:.85; color:#9fc0dd; } .est-sep{ margin:0 8px; opacity:.5; } /* --- panel de mensajes (4 severidades, accionables) ---------------------- Anclado ARRIBA a la derecha: abajo vivia justo sobre el grupo Principal de la barra del editor (Guardar/Generar) y, como error/advertencia PERMANECEN hasta descartarse, tapaban los botones que el operario necesitaba pulsar. */ .shell-mensajes{ position:fixed; right:16px; top:calc(var(--shell-context-height) + var(--shell-header-height) + 12px); z-index:60; display:flex; flex-direction:column; gap:8px; max-width:380px; } /* Los toast propios de cada pagina (ot/catalogos/sac/terceros/seguimiento) se despegan del pie fijo navy, que les tapaba la mitad inferior. */ body.con-marco .toast{ bottom:calc(var(--shell-footer-height) + 12px); } .shell-msg{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; background:#fff; color:var(--lps-texto); box-shadow:0 4px 18px rgba(0,0,0,.25); border-left:5px solid #999; font-size:.88rem; } .shell-msg-exito{ border-left-color:#1e7a3c; } .shell-msg-advertencia{ border-left-color:#b8890a; } .shell-msg-error{ border-left-color:#b00020; } .shell-msg-sincronizacion{ border-left-color:#0b5ea8; } .shell-msg-ir{ background:none; border:1px solid var(--lps-azul); color:var(--lps-azul); border-radius:6px; padding:4px 10px; min-height:var(--target-min,24px); cursor:pointer; white-space:nowrap; font-size:.8rem; } .shell-msg-ir:hover{ background:var(--lps-azul-claro); } .shell-msg-x{ background:none; border:0; cursor:pointer; opacity:.6; margin-left:auto; min-width:var(--target-min,24px); min-height:var(--target-min,24px); } .shell-msg-x:hover{ opacity:1; } /* --- el atributo hidden SIEMPRE oculta (regresión del defecto de diálogos) */ [hidden]{ display:none !important; } /* --- pantalla estrecha: las barras se apilan y ruedan dentro de sí mismas - */ @media (max-width:900px){ .lps-nav{ margin-left:0; } .shell-mensajes{ left:16px; right:16px; max-width:none; } /* prioridad del spec: NUNCA ocultar OT/usuario; se oculta el nombre del sistema */ .lps-estado .fc-der{ display:none; } } @media print{ .lps-gestion,.lps-marca-nav,.lps-estado,.shell-mensajes{ display:none !important; } body.con-marco{ padding-bottom:0; background:#fff; } } /* ESTADO_COLOR_R1 — chip de estado semántico, disponible en TODAS las páginas (carcasa carga en todo el shell). Espeja la paleta de ot.css con hex explícito porque las variables --lps-ok/warn/err solo viven en ot.css. Fuente del mapeo: estado-color.js (window.LPSEstado). */ .chip{ display:inline-block; padding:.18rem .5rem; border-radius:999px; background:#eef3f8; color:#5b6b7b; font-size:.74rem; font-weight:600; border:1px solid #d5dde5; letter-spacing:.2px; } .chip-ok{ background:#e6f5ec; color:#1c7c3f; border-color:#bfe6cc; } .chip-ver{ background:#e7f0fb; color:#0b3d6b; border-color:#c3d8f0; } .chip-sync{background:#fff6e5; color:#8a6508; border-color:#f0e0b8; } /* 4.9:1; #b8860b media 3.0:1 en texto pequeño */ .chip-err{ background:#fbeae9; color:#b3261e; border-color:#f2c9c6; } /* DOBLE LOGO — corrección profesional. Cuando el shell está montado (body.con-marco), la cabecera propia de la página NO repite el logotipo LPS: el shell (barra «LPS Agencia Aduanal») ya lo muestra una sola vez. Se conserva el nombre del sistema (JUN COMPANY / DUCA JUN COMPANY WEB) como texto. El logo del shell usa .lps-logo (otra clase), así que no se ve afectado. */ body.con-marco .lpsm-marca .lpsm-logo { display: none; } body.con-marco .lpsm-marca { padding-left: 0; } /* AUDITORIA A01/A02 (Tanda 3, 2026-08-24): la compactacion anti-duplicado vivia en ot.css y solo alcanzaba a las 7 paginas que cargan esa hoja; las de .barra (facturacion/mi-perfil/usuarios) y .cabecera (index) quedaban con la razon social repetida y sin compactar, y 5 paginas mostraban DOS pies. Se ELEVA la regla aqui (la hoja del shell, cargada por las 12) para que el marco sea IDENTICO en todas: la identidad la muestra el shell UNA vez; la cabecera propia conserva titulo y controles; el pie institucional es el del shell. */ body.con-marco .shell-header, body.con-marco .barra, body.con-marco .cabecera{ padding:.25rem 1rem; } body.con-marco .lpsm-marca .lpsm-empresa{ display:none; } body.con-marco .lpsm-pie{ display:none; } /* --- BUSQUEDA GLOBAL (hallazgo 33 spec V3): cajon transversal en la barra --- */ .lps-buscar{ position:relative; margin-left:10px; display:flex; align-items:center; } .lps-buscar input{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:4px; padding:4px 8px; min-height:var(--target-min,24px); font-size:.82rem; width:210px; } .lps-buscar input::placeholder{ color:rgba(255,255,255,.65); } .lps-buscar input:focus{ outline:2px solid #fff; background:rgba(255,255,255,.2); } .lps-buscar-res{ position:absolute; top:calc(100% + 6px); right:0; z-index:60; min-width:300px; max-width:420px; background:#fff; color:var(--lps-navy); border:1px solid var(--lps-borde); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.25); padding:6px 0; max-height:60vh; overflow:auto; } .lps-buscar-res b{ display:block; padding:4px 12px 2px; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#5a6b7a; } .lps-buscar-res a{ display:block; padding:5px 12px; color:var(--lps-navy); text-decoration:none; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lps-buscar-res a:hover{ background:var(--lps-azul-claro, #e8f1f9); } .lps-buscar-vacio{ display:block; padding:8px 12px; color:#5a6b7a; font-size:.85rem; } /* Bloqueo cooperativo: la OT la tiene otro equipo (rotulo en ambar, boton activo) */ .ges-disp.ges-bloqueada{ background:#8a5a00; color:#fff; } /* AUDITORIA A08 (2026-08-24): el selector era :not([disabled]) pero carcasa.js NUNCA pone el atributo disabled (usa aria-disabled), asi que el boton se veia permanentemente rojo/activo aunque estuviera inoperante. El rojo de urgencia aplica SOLO cuando de verdad hay un bloqueo ajeno que tomar. */ .ges-tomar[aria-disabled="false"]{ background:#a33; color:#fff; cursor:pointer; border-color:#f2b8b5; }