/* ---- Tema SERPROF (el que se usa si no se dice otra cosa) ---- */
:root{--azul:#0B4F8A;--azul2:#083B68;--azul3:#1465AD;--azul-claro:#E8F0F8;--celeste:#2E86DE;--gris:#F2F4F7;--borde:#D5DBE3;
  --texto:#1F2937;--muted:#667085;--fondo:#F5F7FA;--acento:#FBBF24;--gris-oscuro:#64748B;--fila-hover:#C9DDF4;--texto-in:#0B3D75;
  --ambar:#D97706;--ambar-claro:#FEF3C7;--verde:#15803D;--verde-claro:#DCFCE7;--rojo:#B42318;--rojo-claro:#FEE4E2;--resalte:#FFF7D6;
  --superficie:#FFFFFF;--sobre-azul:#FFFFFF;--violeta:#5B21B6;--violeta-claro:#EDE9FE;--acento-texto:#083B68;--barra:linear-gradient(90deg,#083B68,#0B4F8A 55%,#1465AD);--alto-barra:58px;--alto-nav:19px;--alto-logo:40px;--alto-logo-login:110px}

/* ---- Tema ECUPRINT: grafito y azul de base, verde y rojo de acento, logo mas grande ---- */
body[data-negocio="ECUPRINT"]{
  --azul:#175E8F;--azul2:#2E3A45;--azul3:#46586A;--azul-claro:#E6EEF5;--celeste:#4A90C2;--gris:#EDF0F3;--borde:#CBD3DC;
  --texto:#1B2530;--muted:#63727F;--fondo:#F3F5F7;--acento:#2FA36B;--gris-oscuro:#5A6875;--fila-hover:#C6DBEE;--texto-in:#123E5E;
  --ambar:#B45309;--ambar-claro:#FDF0DC;--verde:#15803D;--verde-claro:#DCFCE7;--rojo:#C0392B;--rojo-claro:#FBE3E0;--resalte:#E8F1F8;
  --violeta:#3F5266;--violeta-claro:#E3E9EF;--acento-texto:#FFFFFF;--barra:linear-gradient(90deg,#222C35,#36444F 55%,#48596A);--alto-barra:72px;--alto-nav:26px;--alto-logo:56px;--alto-logo-login:150px}
html{overflow-y:scroll}   /* 0.54.0: la barra vertical siempre está, así la página no se corre al aparecer/desaparecer */
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;font-size:14px;color:var(--texto);background:var(--fondo)}
a{color:var(--azul)}
header{background:var(--barra);color:#fff;display:flex;align-items:center;gap:18px;padding:0 18px;height:var(--alto-barra);position:sticky;top:0;z-index:10;box-shadow:0 2px 6px rgba(0,0,0,.18)}
header .marca{display:flex;align-items:center;gap:10px;font-weight:bold;font-size:19px;letter-spacing:1px;white-space:nowrap;flex:0 0 auto}
header .marca img{height:var(--alto-logo);width:var(--alto-logo);object-fit:contain;background:#fff;border-radius:8px;padding:3px}
header .marca small{font-weight:normal;opacity:.8;font-size:11px;letter-spacing:0}
nav{display:flex;flex-wrap:nowrap;min-width:0}
nav a{color:#fff;text-decoration:none;padding:var(--alto-nav) 11px;display:inline-flex;align-items:center;gap:6px;border-bottom:3px solid transparent;font-size:13.5px}
nav a.activo,nav a:hover{border-bottom-color:var(--acento);background:rgba(255,255,255,.1)}
nav .grupo{position:relative}
nav .grupo>button{font:inherit;color:#fff;background:none;border:none;border-bottom:3px solid transparent;padding:var(--alto-nav) 11px;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
nav .grupo>button:hover,nav .grupo.activo>button{border-bottom-color:var(--acento);background:rgba(255,255,255,.1)}
.icono-menu{width:16px;height:16px;flex:0 0 auto}
nav .grupo .flecha{font-size:10px;transition:transform .15s}
nav .grupo.abierto .flecha{transform:rotate(180deg)}
nav .grupo .desplegable{display:none;position:absolute;top:100%;left:0;min-width:200px;background:var(--azul2);border-radius:0 0 8px 8px;box-shadow:0 8px 18px rgba(0,0,0,.25);overflow:hidden;z-index:15}
nav .grupo.abierto .desplegable{display:block}
nav .grupo .desplegable a{display:block;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
nav .grupo .desplegable a:last-child{border-bottom:none}
nav .grupo .desplegable a.activo{background:rgba(255,255,255,.15);border-bottom-color:rgba(255,255,255,.1);box-shadow:inset 4px 0 0 var(--acento)}
/* 0.49.1: al pasar sobre una opción se pinta del color de acento y crece un poco, para ver bien cuál se elige */
nav a,nav .grupo>button,nav .grupo .desplegable a{transition:background-color .12s,color .12s,transform .12s,box-shadow .12s}
nav>a:hover,nav .grupo>button:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}
nav .grupo .desplegable a:hover,nav .grupo .desplegable a:focus-visible{background:var(--acento);color:var(--acento-texto);font-weight:bold;
  transform:scale(1.04);box-shadow:0 4px 12px rgba(0,0,0,.28);position:relative;z-index:1;border-radius:6px;outline:none}
/* grupo con secciones (Contabilidad): columnas con subtítulo */
nav>a,nav .grupo>button{white-space:nowrap}
/* 0.49.1 · pantallas medianas (1341–1839 px): la barra se compacta (sin íconos, letra un poco menor,
   sin el subtítulo del logo ni el nombre del usuario) para que todo quepa en una línea sin encimarse.
   Desde 1340 px para abajo, el menú va en el botón ☰. */
@media(min-width:1341px) and (max-width:1839px){
  nav>a,nav .grupo>button{padding-left:5px;padding-right:5px;font-size:12px;gap:3px}
  nav .icono-menu{display:none}
  header .marca small{display:none}
  header .usuario .u-nombre{display:none}
  header .buscar-sistema{flex:0 1 180px;min-width:90px}
  header{gap:8px}
}
nav .grupo .desplegable.mega{min-width:780px;padding:8px 6px 10px;border-radius:0 0 10px 10px}
nav .grupo.abierto .desplegable.mega{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:4px}
nav .grupo .desplegable.mega .columna{padding:0 4px;border-right:1px solid rgba(255,255,255,.12)}
nav .grupo .desplegable.mega .columna:last-child{border-right:none}
nav .grupo .desplegable.mega .sec-titulo{color:var(--acento);font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.06em;padding:8px 12px 6px}
nav .grupo .desplegable.mega a{padding:9px 12px;border-bottom:none;border-radius:6px}
.buscar-sistema{position:relative;flex:0 1 220px;margin-left:8px}
.buscar-sistema input{width:100%;padding:8px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:#fff}
.buscar-sistema input::placeholder{color:rgba(255,255,255,.75)}
.buscar-sistema input:focus{background:var(--superficie);color:var(--texto);outline:2px solid var(--acento)}
.buscar-sistema input:focus::placeholder{color:var(--muted)}
.buscar-sistema .sug{color:var(--texto)}
header .usuario{margin-left:auto;font-size:12px;opacity:.95;white-space:nowrap;flex:0 0 auto}
header .usuario a{color:var(--acento)}
/* Botón de menú y bloque de usuario dentro del menú: solo se ven cuando la ventana es angosta */
.hamburguesa{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:36px;padding:0 9px;flex:0 0 auto;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:8px;cursor:pointer}
.hamburguesa span{display:block;height:2px;background:#fff;border-radius:2px}
.nav-usuario{display:none}
/* El contenido ocupa todo el ancho de la ventana: si agrandas la ventana, se agranda con ella.
   El aire de los costados crece un poco en pantallas grandes para que no quede pegado al borde. */
main{width:100%;margin:0 auto;padding:20px}
@media(min-width:1600px){main{padding:24px 40px}}
@media(min-width:2000px){main{padding:26px 64px}}
h1{font-size:20px;margin:0 0 16px;color:var(--azul)}
h2{font-size:15px;margin:18px 0 8px;color:var(--azul)}
.card{background:var(--superficie);border:1px solid var(--borde);border-radius:10px;padding:16px;margin-bottom:16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.fila{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.campo{display:flex;flex-direction:column;gap:4px;min-width:120px;flex:1}
.campo.corto{flex:0 0 120px}.campo.medio{flex:0 0 200px}.campo.largo{flex:2}.campo.xcorto{flex:0 0 90px}
label{font-size:12px;color:var(--muted);font-weight:bold}
input,select,textarea{font:inherit;padding:8px;border:1px solid var(--borde);border-radius:6px;background:var(--superficie);color:var(--texto)}
input.in,select.in,textarea.in{background:var(--resalte);border:2px solid var(--azul);color:var(--texto-in);font-weight:bold}
/* 0.56.7: TODO campo donde se escribe o se elige un dato se ve igual de «llenable» (fondo crema/celeste, borde azul grueso, letra azul);
   no se tocan casillas, botones de opción, archivos ni los campos de solo lectura. :where() mantiene la especificidad baja, así
   los estilos propios (buscador del menú, tablas, etc.) siguen mandando. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=hidden])),select,textarea{
  background:var(--resalte);border:2px solid var(--azul);color:var(--texto-in);font-weight:600}
input::placeholder,textarea::placeholder{color:var(--muted);font-weight:normal;opacity:.8}
input[readonly],input:disabled,select:disabled,textarea:disabled,textarea[readonly]{background:var(--gris);border:1px solid var(--borde);color:var(--muted);font-weight:normal}
input:focus,select:focus,textarea:focus{outline:2px solid var(--celeste);outline-offset:0}
button,.btn{font:inherit;font-weight:bold;padding:9px 16px;border-radius:6px;border:1px solid transparent;cursor:pointer;background:var(--azul);color:var(--sobre-azul);text-decoration:none;display:inline-block}
button:hover{filter:brightness(1.08)}
button.sec{background:var(--gris-oscuro);color:#fff}button.peligro{background:var(--rojo);color:#fff}button.ok{background:var(--verde);color:#fff}button.ambar{background:var(--ambar);color:#fff}
button.link{background:none;color:var(--azul);padding:4px 6px;text-decoration:underline}
button.toggle{background:var(--superficie);color:var(--azul);border:2px solid var(--azul)}button.toggle.on{background:var(--azul);color:var(--sobre-azul)}
button:disabled{opacity:.5;cursor:not-allowed}
table{width:100%;border-collapse:collapse;background:var(--superficie)}
th,td{padding:7px 8px;border:1px solid var(--borde);text-align:left;vertical-align:middle}
th{background:var(--azul);color:#fff;font-size:12px;text-transform:uppercase}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.c,th.c{text-align:center}
/* 0.53.9 · la fila bajo el cursor se nota: azul más marcado + barra azul a la izquierda + mini zoom.
   (Antes el color era casi blanco, #F8FAFD, y no se distinguía en qué fila se estaba.)
   Las tablas de captura (table.items, con campos para escribir) llevan el color pero no el zoom. */
tbody tr:hover>td{background:var(--fila-hover)}
tbody tr:hover>td:first-child{box-shadow:inset 5px 0 0 var(--azul)}
tbody tr{transition:transform .12s ease}
table:not(.items) tbody tr:hover{transform:scale(1.008,1.06);position:relative;z-index:2;filter:drop-shadow(0 3px 5px rgba(11,79,138,.35))}
@media(prefers-reduced-motion:reduce){tbody tr{transition:none}table:not(.items) tbody tr:hover{transform:none}}
.pvp{background:var(--azul-claro);font-weight:bold}
.tag{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:bold;white-space:nowrap}
.tag.ENTRADA,.tag.FINALIZADA,.tag.DESPACHADA,.tag.ok{background:var(--verde-claro);color:var(--verde)}
.tag.SALIDA,.tag.ANULADA,.tag.bajo{background:var(--rojo-claro);color:var(--rojo)}
.tag.AJUSTE,.tag.EMITIDA,.tag.info{background:var(--azul-claro);color:var(--azul)}
.tag.PENDIENTE,.tag.CONVERTIDA,.tag.warn{background:var(--ambar-claro);color:var(--ambar)}
.tag.GUARDADA,.tag.GENERADA{background:#EEF0F3;color:#555}
.tag.EN_PROCESO{background:var(--ambar-claro);color:var(--ambar)}
.tag.APROBADA{background:var(--azul-claro);color:var(--azul)}
.tag.INSTALADA{background:var(--verde-claro);color:var(--verde)}
/* En Notas de Pedido, DESPACHADA significa "en camino al técnico, todavía no instalado" (no
   "terminado" como en Solicitudes), así que necesita su propio color: ámbar, no el verde
   compartido de .tag.DESPACHADA. Ver notas_pedido.html, que le agrega esta clase aparte. */
.tag.DESPACHADA.np{background:var(--ambar-claro);color:var(--ambar)}
.tag.visita{background:var(--violeta-claro);color:var(--violeta)}
.tag.serv{background:#EEF0F3;color:#555}
.tag.ADMIN{background:var(--violeta-claro);color:var(--violeta)}.tag.SUPERVISOR{background:var(--azul-claro);color:var(--azul)}.tag.VENDEDOR{background:var(--verde-claro);color:var(--verde)}
.tag.ALL_IN{background:var(--violeta-claro);color:var(--violeta)}.tag.ARRIENDO{background:var(--ambar-claro);color:var(--ambar)}
/* 0.51.0: estados de Proyeccion (GANADA/PERDIDA reutilizan verde/rojo; PENDIENTE ya está arriba) */
.tag.GANADA{background:var(--verde-claro);color:var(--verde)}.tag.PERDIDA{background:var(--rojo-claro);color:var(--rojo)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
/* 0.52.0: filas alternadas para tablas tipo hoja de cálculo (matriz de inversión de Presupuesto) */
.tabla-zebra tbody tr:nth-child(even){background:#F7F8FA}
.tabla-zebra tfoot td,.tabla-zebra tfoot th{border-top:2px solid #DADFE5;font-weight:bold}
.kpi{background:var(--superficie);border:1px solid var(--borde);border-radius:10px;padding:14px;border-top:4px solid var(--azul)}
.kpi:nth-child(3n+2){border-top-color:var(--celeste)}.kpi:nth-child(3n){border-top-color:var(--acento)}
.kpi .v{font-size:22px;font-weight:bold;color:var(--azul)}.kpi .l{font-size:12px;color:var(--muted)}
.muted{color:var(--muted);font-size:12px}
.aviso{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:9999;min-width:260px;max-width:min(90vw,560px);
  padding:12px 18px;border-radius:8px;margin:0;display:none;font-weight:bold;text-align:center;box-shadow:0 10px 28px rgba(0,0,0,.3);pointer-events:none}
.aviso.ok{display:block;background:var(--verde-claro);color:var(--verde);border:1px solid var(--verde)}
.aviso.err{display:block;background:var(--rojo-claro);color:var(--rojo);border:1px solid var(--rojo)}
/* 0.53.3: cuando una acción YA terminó (no un mensaje de progreso del tipo "Enviando al SRI..."), el
   aviso sale más grande, centrado en la pantalla y con un ícono, como pidió Sabes; el cintillo chico
   de arriba (.aviso.ok/.aviso.err) sigue igual para los mensajes de progreso */
.aviso.grande{display:flex;flex-direction:column;align-items:center;gap:2px;top:50%;left:50%;
  transform:translate(-50%,-50%);background:var(--superficie);color:var(--texto);border:1px solid var(--borde);
  padding:22px 30px 24px;border-radius:16px;min-width:240px;max-width:min(90vw,360px);
  box-shadow:0 18px 44px rgba(0,0,0,.35)}
.aviso.grande .aviso-icono{width:72px;height:72px;object-fit:contain;margin-bottom:6px}
.aviso.grande.verde .aviso-titulo{color:var(--verde)}
.aviso.grande.rojo .aviso-titulo{color:var(--rojo)}
.aviso.grande .aviso-titulo{font-size:19px;letter-spacing:.3px;font-weight:bold}
.aviso.grande .aviso-sub{font-size:13px;font-weight:normal;color:var(--muted);line-height:1.4}
/* Aviso fijo dentro de una tarjeta (no es el mensaje flotante de arriba, que se va solo) */
.alerta{padding:10px 14px;border-radius:8px;margin:0 0 10px;font-weight:bold;border:1px solid}
.alerta.roja{background:var(--rojo-claro);color:var(--rojo);border-color:var(--rojo)}
.alerta.ambar{background:var(--ambar-claro);color:var(--ambar);border-color:var(--ambar)}
.alerta.verde{background:var(--verde-claro);color:var(--verde);border-color:var(--verde)}
.alerta table{font-weight:normal}
/* Tarjeta "Resumen del mes" de Inicio: colapsada por defecto para no ocupar la pantalla */
#resumenMes summary{cursor:pointer;font-size:15px;font-weight:bold;color:var(--azul);list-style:revert}
#resumenMes summary .muted{font-weight:normal;font-size:13px}
#resumenMes[open] summary{margin-bottom:6px}
/* Cuadritos de Inicio que siempre están a la vista (suministros, emergencias, visitas de hoy,
   citas, mayor rotación): acceso directo a su pantalla, con semáforo de color cuando aplica. */
.tiles-accion{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
a.tile-accion,div.tile-accion{display:block;text-decoration:none;color:inherit;background:var(--superficie);
  border:1px solid var(--borde);border-radius:10px;padding:14px;border-top:4px solid var(--azul)}
a.tile-accion:hover{box-shadow:0 3px 12px rgba(0,0,0,.12)}
.tile-accion .v{font-size:22px;font-weight:bold;color:var(--azul)}
.tile-accion .l{font-size:12px;color:var(--muted)}
.tile-accion .icono-tile{width:20px;height:20px;color:var(--azul);opacity:.55;float:right}
.tile-accion.verde{background:var(--verde-claro);border-top-color:var(--verde)}.tile-accion.verde .v{color:var(--verde)}.tile-accion.verde .icono-tile{color:var(--verde)}
.tile-accion.rojo{background:var(--rojo-claro);border-top-color:var(--rojo)}.tile-accion.rojo .v{color:var(--rojo)}.tile-accion.rojo .icono-tile{color:var(--rojo)}
.tile-accion.ambar{background:var(--ambar-claro);border-top-color:var(--ambar)}.tile-accion.ambar .v{color:var(--ambar)}.tile-accion.ambar .icono-tile{color:var(--ambar)}
.modal{display:none;position:fixed;inset:0;background:rgba(3,20,40,.5);z-index:20;align-items:flex-start;justify-content:center;padding:40px 12px;overflow:auto}
.modal.abierto{display:flex}
.modal .card{width:100%;max-width:820px;margin-bottom:0}
.modal .card.chico{max-width:440px}
/* 0.53.5: las alertas/confirmaciones chicas (confirmar algo, avisos de error, "¿Anular?", etc., que
   usan .card.chico) se centran también verticalmente, como pidió Sabes; los formularios grandes (crear/
   editar algo) se quedan arriba para poder desplazarse si no caben enteros en la pantalla */
.modal:has(>.card.chico){align-items:center}
/* Editor de proformas y notas: el buscador de productos y los botones quedan siempre a la vista;
   lo que se desliza es solo la lista de ítems y los totales. */
.modal .card.editor{display:flex;flex-direction:column;max-height:calc(100vh - 80px);overflow:visible}
.editor-cab{flex:0 0 auto}
.editor-cuerpo{flex:1 1 auto;overflow:auto;min-height:110px;padding:2px 12px 4px;margin:0 -12px}   /* 0.55.8: el relleno va aquí (y no en .scroll con margen negativo, que sacaba 10px de más y dibujaba una barra horizontal sobrante) */
.editor-cuerpo .scroll{overflow:visible;margin:0;padding:0}                       /* que el único que se desliza sea el cuerpo */
.editor-cuerpo table.items thead th{position:sticky;top:0;z-index:2}
.editor-pie{flex:0 0 auto;border-top:1px solid var(--borde);margin-top:8px}
.editor-pie .acciones{margin-top:10px}
.modal.ventana2{z-index:25}
@media(max-height:560px){.modal .card.editor{display:block;max-height:none}.editor-cuerpo{overflow:visible}}
.error-card{text-align:center}
.error-icono{width:76px;height:76px;line-height:76px;border-radius:50%;background:var(--rojo);color:#fff;font-size:38px;margin:0 auto 14px}
.error-titulo{color:var(--rojo);margin:0 0 10px;font-size:19px;letter-spacing:.3px}
.error-msg{color:var(--texto);font-size:14px;line-height:1.6;margin:0 0 4px;white-space:pre-line}
.acciones{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.scroll{overflow-x:auto;padding:6px 12px;margin:-6px -12px}
.scroll:not([style*="max-height"]){overflow-y:hidden}   /* sin tope de alto no hay nada que desplazar hacia abajo: así ninguna barra vertical propia puede aparecer ni desaparecer */   /* 0.54.0: el relleno deja sitio al mini zoom de la fila (si no, el zoom de la última fila crea un desplazamiento propio y la pantalla "vibra") */
.buscar{flex:2;min-width:220px}
.sug{position:absolute;top:100%;left:0;right:0;z-index:5;display:none;padding:0;max-height:260px;overflow:auto;background:var(--superficie);border:1px solid var(--borde);border-radius:0 0 8px 8px;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.sug div{padding:8px 10px;cursor:pointer;border-bottom:1px solid #eee}
/* 0.53.4: tanto el hover del mouse como el resaltado por teclado se ven igual de marcados (el azul
   clarito de antes casi no se notaba); esto aplica en todos los buscadores con lista de sugerencias
   (clientes, productos, equipos, contratos...), no en el menú principal (ese usa otro estilo aparte) */
.sug div:hover,.sug div.resaltada{background:var(--azul);color:var(--sobre-azul)}
.totales{margin-left:auto;min-width:320px;max-width:440px;flex:0 0 auto}
.totales td{padding:5px 8px}.totales .total td{background:var(--azul);color:var(--sobre-azul);font-size:17px;font-weight:bold}
.login{max-width:380px;margin:70px auto;text-align:center}
.login img{height:var(--alto-logo-login);width:auto;max-width:100%;object-fit:contain}   /* 0.53.8: un logo ancho (ECUPRINT) no se sale del recuadro en el celular */
.login .card{text-align:left}
table.items input,table.items select,table.items textarea{width:100%;padding:6px;box-sizing:border-box}
table.items textarea{resize:vertical;min-height:34px;font-family:inherit}
table.items td{padding:4px 5px}
table.items td:nth-child(3){min-width:320px}
/* ===== Barra superior adaptable =====
   Ventana ancha: el menú va en una sola línea, como siempre.
   Ventana angosta o tablet: el menú se guarda detrás del botón ☰ y se despliega debajo de la barra,
   así nunca se encima con el logo ni con el buscador. */
@media(max-width:1340px){
  header{gap:12px;padding:0 12px}
  header .marca{font-size:17px}
  .hamburguesa{display:flex}
  nav#navPrincipal{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;flex-wrap:nowrap;
    background:var(--azul2);box-shadow:0 12px 24px rgba(0,0,0,.32);padding-bottom:4px;
    max-height:calc(100vh - var(--alto-barra));overflow-y:auto}
  header.menu-abierto nav#navPrincipal{display:flex}
  nav#navPrincipal>a,nav#navPrincipal .grupo>button{width:100%;padding:12px 16px;font-size:14px;text-align:left;
    border-bottom:1px solid rgba(255,255,255,.09);border-left:3px solid transparent;justify-content:space-between}
  nav#navPrincipal>a.activo,nav#navPrincipal>a:hover,
  nav#navPrincipal .grupo>button:hover,nav#navPrincipal .grupo.activo>button{
    border-bottom-color:rgba(255,255,255,.09);border-left-color:var(--acento)}
  nav#navPrincipal .grupo{position:static}
  nav#navPrincipal .grupo .desplegable{position:static;min-width:0;border-radius:0;box-shadow:none;background:rgba(0,0,0,.2)}
  nav#navPrincipal .grupo .desplegable a{padding:11px 16px 11px 36px}
  nav#navPrincipal .grupo.abierto .desplegable.mega{display:block;min-width:0;padding:0}
  nav#navPrincipal .grupo .desplegable.mega .columna{border-right:none;padding:0}
  nav#navPrincipal .grupo .desplegable.mega .sec-titulo{padding:10px 16px 4px 36px}
  nav#navPrincipal .grupo .desplegable.mega a{padding:10px 16px 10px 36px;border-radius:0}
  nav#navPrincipal .grupo .desplegable a:hover{transform:none}
  nav#navPrincipal .grupo .desplegable a:active{background:var(--acento);color:var(--acento-texto)}
  .buscar-sistema{flex:0 1 200px;min-width:110px;margin-left:auto}
  header .usuario{margin-left:0}
  header .usuario .enlaces{display:none}
  .nav-usuario{display:block;padding:12px 16px;border-top:1px solid rgba(255,255,255,.18);font-size:13px;color:#fff}
  .nav-usuario a{color:var(--acento);text-decoration:none;display:inline-block;padding:5px 0}
}
@media(max-width:700px){
  body,body[data-negocio="ECUPRINT"]{--alto-barra:56px;--alto-logo:38px}
  header .marca small{display:none}
  header .marca{font-size:16px}
  header .usuario{display:none}
  .buscar-sistema{flex:1 1 auto;min-width:0}
  main{padding:14px 12px}
  .campo.corto,.campo.medio{flex:1 1 45%}
}
@media(max-width:440px){
  header{gap:8px;padding:0 10px}
  header .marca span{display:none}
}
/* Reloj fijo: fecha y hora completa, siempre visible en la esquina, sobre cualquier pantalla */
.reloj-flotante{position:fixed;right:14px;top:calc(var(--alto-barra) + 10px);z-index:5;background:var(--superficie);color:var(--rojo);
  border:2px solid #000;padding:6px 13px;border-radius:10px;font-size:11.5px;line-height:1.5;text-align:right;
  box-shadow:0 4px 14px rgba(0,0,0,.2);pointer-events:none}
.reloj-flotante b{display:block;font-size:15px;letter-spacing:.5px;font-variant-numeric:tabular-nums;color:var(--rojo)}
@media(max-width:440px){.reloj-flotante{right:8px;top:calc(var(--alto-barra) + 6px);padding:5px 10px;font-size:10.5px}.reloj-flotante b{font-size:13px}}
.pestanas{display:flex;flex-wrap:wrap;gap:2px;border-bottom:2px solid var(--borde);margin:0 0 12px}
.pestanas button{background:none;border:none;border-bottom:3px solid transparent;color:var(--muted);font:inherit;
  font-weight:bold;font-size:13.5px;padding:10px 14px;cursor:pointer;border-radius:8px 8px 0 0;margin-bottom:-2px}
.pestanas button:hover{background:var(--gris);color:var(--texto)}
.pestanas button.on{color:var(--azul);border-bottom-color:var(--azul);background:var(--azul-claro)}
.pestanas button .cuenta{display:inline-block;min-width:20px;padding:1px 6px;margin-left:6px;border-radius:10px;
  background:var(--borde);color:var(--texto);font-size:11px}
.pestanas button.on .cuenta{background:var(--azul);color:var(--sobre-azul)}
@media(max-width:700px){.pestanas button{padding:9px 10px;font-size:12.5px}}
@media print{header,.no-print{display:none!important}main{padding:0}}

/* ---------------- panel de gráficos (Inicio) ---------------- */
.panel-graficos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:16px}
.grafico-card h2{margin:0 0 4px}
.grafico-linea{display:block}
.grafico-meses{display:flex;justify-content:space-between;gap:4px;margin-top:4px}
.grafico-meses div{font-size:11px;color:var(--muted);text-align:center;flex:1}
.grafico-meses div b{display:block;font-size:12.5px;color:var(--texto);font-weight:bold;white-space:nowrap}
/* Base compartida de la barra (fondo, esquinas, relleno animado): la usan tanto .fila-barra
   (comparativos, p.ej. Top clientes) como .fila-progreso (generado vs. completado). */
.fb-track{background:var(--gris);border-radius:6px;height:14px;overflow:hidden}
.fb-fill{height:100%;border-radius:6px;width:0;transition:width .7s cubic-bezier(.22,.9,.3,1)}
.fila-barra{display:flex;align-items:center;gap:10px;margin:9px 0}
.fila-barra .fb-l{flex:0 0 132px;font-size:12.5px;color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila-barra .fb-track{flex:1}
.fila-barra .fb-v{flex:0 0 auto;font-size:12.5px;font-weight:bold;color:var(--texto);min-width:44px;text-align:right}
@media(max-width:440px){.fila-barra .fb-l{flex-basis:92px}}
.fila-progreso{margin:11px 0}
.fila-progreso .fp-l{font-size:12.5px;font-weight:bold;color:var(--texto);margin-bottom:4px}
.fila-progreso .fb-track{height:13px}
.fila-progreso .fp-detalle{font-size:11px;color:var(--muted);margin-top:4px}
.panel-periodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:16px}

/* ---------------- etapa 3 del rediseño: micro-animaciones en toda la interfaz ----------------
   Entrada suave de tarjetas (ya se usaba solo en Inicio; ahora es la regla general de .card, así
   que alcanza cualquier pantalla sin tocarla una por una), realce al pasar el mouse por botones y
   cuadritos de acceso directo, aparición de modales/menús/avisos en vez de un "salto" seco, y una
   transición pareja en filas de tabla. Todo se apaga solo si el sistema pide menos movimiento. */
@keyframes entrar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes emerger{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes desplegarse{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* 0.53.5: el aviso grande se centra con transform:translate(-50%,-50%) (ver más abajo); si usara la
   misma animación "emerger" de todo lo demás, la animación pisa ese transform mientras dura (se ve
   aparecer más abajo del centro y de golpe "saltar" al centro al terminar). Esta versión de la
   animación ya incluye el centrado en cada cuadro, para que se mueva en un solo movimiento. */
@keyframes emergerCentro{from{opacity:0;transform:translate(-50%,-50%) translateY(-6px) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1)}}
.card{animation:entrar .35s ease both}
.tiles-accion .tile-accion:nth-child(2){animation-delay:.04s}.tiles-accion .tile-accion:nth-child(3){animation-delay:.08s}
.tiles-accion .tile-accion:nth-child(4){animation-delay:.12s}.tiles-accion .tile-accion:nth-child(5){animation-delay:.16s}
.tiles-accion .tile-accion:nth-child(6){animation-delay:.2s}
.panel-graficos .card:nth-child(2){animation-delay:.08s}.panel-graficos .card:nth-child(3){animation-delay:.16s}
.panel-periodos .card:nth-child(2){animation-delay:.06s}.panel-periodos .card:nth-child(3){animation-delay:.12s}
.kpi{animation:entrar .35s ease both}
.kpis .kpi:nth-child(2){animation-delay:.03s}.kpis .kpi:nth-child(3){animation-delay:.06s}.kpis .kpi:nth-child(4){animation-delay:.09s}
.kpis .kpi:nth-child(5){animation-delay:.12s}.kpis .kpi:nth-child(6){animation-delay:.15s}.kpis .kpi:nth-child(7){animation-delay:.18s}.kpis .kpi:nth-child(8){animation-delay:.21s}
/* Botones: un pequeño "hundido" al hacer clic, en vez de solo el cambio de brillo que ya había */
button,.btn{transition:filter .15s,transform .1s,box-shadow .15s}
button:active,.btn:active{transform:scale(.97)}
/* Cuadritos de acceso directo (Inicio) y tarjetas en general: se levantan un poco al pasar el mouse */
a.tile-accion,div.tile-accion{transition:box-shadow .2s,transform .2s}
a.tile-accion:hover{transform:translateY(-2px)}
/* Filas de tabla: el resaltado al pasar el mouse ya no es un salto brusco */
tr td{transition:background-color .15s}
/* Aviso flotante: entra deslizándose en vez de aparecer de golpe */
.aviso.ok,.aviso.err{animation:emerger .25s ease}
.aviso.grande{animation:emergerCentro .25s ease}
/* Modales: la ventana entra con un pequeño acercamiento; el fondo se atenúa con un fundido */
.modal.abierto{animation:aparecer .18s ease}
.modal.abierto .card{animation:emerger .22s ease}
/* Menú desplegable de la barra superior */
nav .grupo.abierto .desplegable{animation:desplegarse .18s ease}
/* Pestañas: la línea y el fondo activos cambian con transición, no de golpe */
.pestanas button{transition:color .15s,background-color .15s,border-color .15s}
@media(prefers-reduced-motion:reduce){
  .card,.kpi,.fb-fill,.aviso.ok,.aviso.err,.aviso.grande,.modal.abierto,.modal.abierto .card,nav .grupo.abierto .desplegable{animation:none;transition:none}
  button,.btn,a.tile-accion,div.tile-accion,tr td,.pestanas button{transition:none}
  a.tile-accion:hover{transform:none}
  nav a:hover,nav .grupo>button:hover,nav .grupo .desplegable a:hover{transform:none}
  button:active,.btn:active{transform:none}
}
/* facturación electrónica */
.tag.AUTORIZADA{background:var(--verde-claro);color:var(--verde)}
.tag.RECIBIDA{background:var(--azul-claro);color:var(--azul)}
.tag.DEVUELTA,.tag.NO_AUTORIZADA{background:var(--rojo-claro);color:var(--rojo)}
.tag.pruebas{background:#FFF1E6;color:#B45309;border:1px dashed #F59E0B}

/* 0.37: botones principales de cada pantalla (+ FACTURAR, + NUEVA PROFORMA, + NUEVO CLIENTE) */
.campo.auto{flex:0 0 auto;min-width:0}
button.btn-grande{font-size:15px;padding:12px 24px;border-radius:8px;letter-spacing:.3px;
  background:var(--verde);color:#fff;box-shadow:0 3px 10px rgba(21,128,61,.35);white-space:nowrap}
button.btn-grande:hover{filter:brightness(1.1);box-shadow:0 5px 14px rgba(21,128,61,.45);transform:translateY(-1px)}
/* leyenda "de proforma ..." debajo del número de una venta */
.leyenda-origen{display:inline-block;margin-top:3px;font-size:11px;color:var(--azul);background:var(--azul-claro);
  padding:1px 6px;border-radius:8px;white-space:nowrap}
/* ventana de cliente más amplia: los datos del SRI (direcciones largas) no se montan */
.modal .card.ancho{max-width:1040px;padding:24px 28px}
.modal .card.ancho .fila{gap:16px;margin-bottom:12px}
.modal .card.ancho .campo.medio{flex:0 0 230px}
@media(max-width:700px){.modal .card.ancho{padding:16px}.modal .card.ancho .campo.medio{flex:1 1 45%}.modal .card.ancho .campo.largo{flex:1 1 100%}button.btn-grande{width:100%}.campo.auto{flex:1 1 100%}}

/* 0.43.0: widget «Notificaciones» de Inicio: verde sin novedades, fucsia con destellos si hay algo */
.tile-accion.fucsia{background:#FDE7F3;border-top-color:#C026D3;cursor:pointer;animation:destello 1.6s ease-in-out infinite}
.tile-accion.fucsia .v,.tile-accion.fucsia .icono-tile{color:#A21CAF;opacity:1}
.tile-accion.notif{cursor:pointer}
@keyframes destello{0%,100%{box-shadow:0 0 0 0 rgba(192,38,211,.0)}50%{box-shadow:0 0 0 6px rgba(192,38,211,.28)}}
.lista-avisos{list-style:none;margin:0;padding:0}
.lista-avisos li{display:flex;gap:10px;align-items:flex-start;padding:10px 8px;border-bottom:1px solid var(--borde);cursor:pointer}
.lista-avisos li:hover{background:var(--fila-hover)}
.lista-avisos .punto{flex:0 0 10px;height:10px;border-radius:50%;margin-top:4px;background:#C026D3}
.lista-avisos li.info .punto{background:var(--azul3)}
.lista-avisos .t{font-weight:bold}
.lista-avisos .d{color:var(--muted);font-size:12.5px;margin-top:2px}
.tag.ENVIADA{background:var(--verde-claro);color:var(--verde)}
.tag.GENERADA{background:var(--ambar-claro);color:var(--ambar)}
.tag.PENDIENTE_SRI{background:var(--azul-claro);color:var(--azul)}
.tag.ERROR{background:var(--rojo-claro);color:var(--rojo)}
.tag.ANULADA_REC{background:var(--gris);color:var(--muted)}
@media(prefers-reduced-motion:reduce){.tile-accion.fucsia{animation:none}}
#rItems td input{width:100%}
#rItems{min-width:640px}

/* ===== 0.53.6 · Botón SALIR (rojo, con símbolo de apagado), confirmación SÍ/NO y pantallas de estado ===== */
a.btn-salir,header .usuario a.btn-salir{display:inline-flex;align-items:center;gap:7px;background:var(--rojo);color:#fff;font-weight:bold;
  font-size:13px;letter-spacing:.04em;padding:8px 13px;border-radius:9px;text-decoration:none;border:1px solid rgba(255,255,255,.45);
  box-shadow:0 2px 6px rgba(0,0,0,.25);vertical-align:middle;margin-left:0;white-space:nowrap;transition:background .15s,transform .1s}
a.btn-salir:hover,header .usuario a.btn-salir:hover{background:#8F1B12;color:#fff}
a.btn-salir:active{transform:scale(.97)}
a.btn-salir:focus-visible{outline:3px solid #fff;outline-offset:2px}
.btn-salir .ico-off{width:17px;height:17px;flex:0 0 auto}
.nav-usuario .btn-salir{display:none}
@media(max-width:1340px) and (min-width:701px){header .usuario .u-nombre{display:none}}
@media(max-width:1839px) and (min-width:1341px){a.btn-salir,header .usuario a.btn-salir{padding:7px 9px;gap:5px;font-size:12px;margin-left:0}.btn-salir .ico-off{width:15px;height:15px}header .usuario .enlaces{margin-right:-4px}}
@media(min-width:1840px){header{gap:14px}.buscar-sistema{min-width:110px}}
@media(min-width:1341px){nav#navPrincipal{flex-shrink:0}}   /* 0.58.0: si falta sitio, se achica el buscador y no el menú (que se montaba sobre él) */
@media(max-width:1340px){
  .nav-usuario a.btn-salir{display:flex;justify-content:center;width:100%;margin:10px 0 2px;padding:11px 16px;font-size:14px}
}
@media(max-width:700px){.nav-usuario a.btn-salir{display:flex}}
@media(min-width:701px) and (max-width:1340px){.nav-usuario a.btn-salir{display:none}}
.salir-card{text-align:center}
.salir-icono{width:54px;height:54px;color:var(--rojo);background:var(--rojo-claro);border-radius:50%;padding:12px;box-sizing:border-box}
.salir-card .acciones button{min-width:120px}
.pantalla-estado{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:rgba(240,246,252,.94);backdrop-filter:blur(3px);animation:aparecer .22s ease}
.pe-card{text-align:center;padding:28px 36px;animation:crecer .3s ease}
.pe-icono{width:170px;height:170px;object-fit:contain;display:block;margin:0 auto 6px}
.pe-titulo{font-size:30px;font-weight:bold;color:var(--azul);line-height:1.15}
.pe-sub{font-size:17px;color:var(--texto);margin-top:8px}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes crecer{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.pantalla-estado,.pe-card{animation:none}}

/* ===== 0.54.0 · recibo POS: el ícono de la pregunta de impresión va en azul (el de SALIR es rojo) ===== */
.pos-icono{color:var(--azul);background:var(--azul-claro)}

/* ===== Configuración por pestañas (0.54.0) ===== */
.cfg-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;padding-bottom:0;border-bottom:2px solid var(--borde);
  position:sticky;top:var(--alto-barra);z-index:9;background:var(--fondo);padding-top:8px}   /* 0.55.5: fijas al bajar */
.cfg-tab{background:transparent;color:var(--texto,#1f2937);border:1px solid transparent;border-bottom:0;border-radius:10px 10px 0 0;padding:11px 20px;margin-bottom:-2px;font-weight:700;font-size:14px;cursor:pointer;transition:background .15s,color .15s}
.cfg-tab:hover{background:var(--azul-claro)}
.cfg-tab.activo{background:var(--azul);color:var(--sobre-azul);border-color:var(--azul)}
.cfg-panel{display:none}
.cfg-panel.activo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-items:start}
.cfg-panel>.card.ancha{grid-column:1/-1}
@media(max-width:1100px){.cfg-panel.activo{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.cfg-tab{flex:0 0 auto;white-space:nowrap;padding:10px 14px;font-size:13px;border-radius:10px;border-bottom:1px solid var(--borde);margin-bottom:0}
  .cfg-tabs{border-bottom:0;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}}   /* en el celular: una sola fila que se desliza (así no ocupa media pantalla) */

/* ===== Escaneo de códigos de barras (0.55.0) ===== */
.toast-scan{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:9995;max-width:min(92vw,520px);padding:12px 20px;border-radius:12px;
  font-weight:700;font-size:15px;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.toast-scan.visible{opacity:1;transform:translate(-50%,0)}
.toast-scan.ok{background:#15803D}.toast-scan.err{background:#B42318}
.camara-card{max-width:460px;text-align:center}
.cam-vista{width:100%;min-height:220px;background:#111;border-radius:10px;overflow:hidden}
.cam-vista video{width:100%!important;border-radius:10px}
.cam-estado{min-height:22px;margin:8px 0;font-size:14px}
.btn-barras{white-space:nowrap}
tr.fila-escaneada td{animation:escaneada 1.1s ease}
@keyframes escaneada{0%{background:#BBF7D0}100%{background:transparent}}

/* 0.55.9: datos para pegar en «Anulación de comprobantes» del SRI (cada uno con su Copiar) */
.datos-sri{margin:6px 0 4px;font-size:13px;border:1px solid var(--borde);border-radius:8px;background:var(--gris);padding:2px 12px}
.datos-sri .fila-sri{display:grid;grid-template-columns:minmax(120px,215px) 1fr auto;gap:10px;align-items:start;padding:6px 0;border-bottom:1px dashed var(--borde)}
.datos-sri .fila-sri:last-child{border-bottom:0}
.datos-sri .et{color:var(--muted)}
.datos-sri .val{word-break:break-all}
.datos-sri code{font-size:13px}
@media(max-width:560px){.datos-sri .fila-sri{grid-template-columns:1fr auto}.datos-sri .et{grid-column:1 / -1;font-size:12px}}

/* 0.57.0 · Identidad SGIA (producto de SERPRO): discreta; la marca del cliente (logo y nombre) es la que manda.
   Hay dos imágenes: .sgia-claro (fondo claro) y .sgia-oscuro (fondo oscuro). La app hoy es clara; cuando exista
   modo oscuro basta poner data-tema="oscuro" en <html> y se cambian solas. */
img.sgia-oscuro{display:none}
html[data-tema="oscuro"] img.sgia-claro{display:none}
html[data-tema="oscuro"] img.sgia-oscuro{display:inline-block}
.sgia-powered{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;justify-content:center;text-align:center;font-size:11.5px;color:var(--muted)}
.sgia-powered img{height:22px;width:auto;max-width:none}
.sgia-copy{margin:4px 0 0;font-size:11px;color:var(--muted);text-align:center}
.pie-sgia{margin:28px auto 16px;padding:12px 16px 0;max-width:1100px;border-top:1px solid var(--borde);text-align:center;font-size:11.5px;color:var(--muted);line-height:1.7}
/* 0.57.3: el pie queda al fondo de la ventana cuando la pantalla tiene poco contenido (y sigue al final del contenido cuando hay mucho) */
body.con-pie{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.con-pie>main{flex:1 0 auto}
body.con-pie>.pie-sgia{flex:0 0 auto;width:100%;box-sizing:border-box;margin-top:28px}
.pie-sgia img{height:18px;width:auto;vertical-align:middle;max-width:none;margin:0 2px}
.pie-sgia a{color:var(--muted);text-decoration:underline}
.pie-sgia img.acerca-logo,img.acerca-logo{height:64px;width:auto;max-width:100%}

/* ===== 0.58.0 · Apariencia: selector (claro) y TEMA OSCURO =====
   El oscuro copia la forma y los colores de SGIA Central: fondo ciruela casi negro, tarjetas un tono más claro, bordes
   suaves, esquinas bien redondeadas, botón principal coral con letra oscura y etiquetas en tonos tenues.
   Se activa con <html data-tema="oscuro"> (static/tema.js: Sistema / Claro / Oscuro). Aplica a las dos identidades. */
.sel-tema{font:inherit;font-size:12px;font-weight:normal;width:auto;padding:5px 6px;margin:0 8px 0 6px;border-radius:8px;cursor:pointer;vertical-align:middle;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff}
.sel-tema option{color:#1F2937;background:#fff}
header .usuario .sel-tema:focus{outline:2px solid var(--acento)}
.nav-usuario .sel-tema{display:block;width:100%;margin:0 0 8px;padding:8px 10px;font-size:13px}
.tema-login{position:absolute;top:14px;right:16px;z-index:5}
.tema-login .sel-tema{margin:0;background:var(--superficie);border:1px solid var(--borde);color:var(--texto)}
/* barra de escritorio (desde 1341 px): no hay sitio para la palabra; el selector es un botón con el ícono de apariencia (al tocarlo se elige Sistema / Claro / Oscuro). En el menú del celular sí lleva la palabra. */
@media(min-width:1341px){
  html header .usuario .sel-tema{width:34px;height:30px;margin:0 4px 0 2px;padding:0;color:transparent;appearance:none;-webkit-appearance:none;cursor:pointer;
    background:rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3v18a9 9 0 0 0 0-18z' fill='%23fff'/%3E%3C/svg%3E") center/17px no-repeat}
  html header .usuario .sel-tema option{color:#1F2937}
}
@media(max-width:700px){.tema-login{top:8px;right:10px}}
@media screen{
html[data-tema="oscuro"]{color-scheme:dark}
html[data-tema="oscuro"] body,html[data-tema="oscuro"] body[data-negocio="ECUPRINT"]{
  --fondo:#17131e;--superficie:#241d2e;--texto:#f2edf7;--muted:#b6aabd;--borde:#403446;--gris:#2c2336;--gris-oscuro:#4a3d57;
  --fila-hover:#2e2437;--texto-in:#f2edf7;--resalte:#1b1623;--sobre-azul:#281d2f;
  --azul:#ef766c;--azul2:#241d2e;--azul3:#bda9db;--azul-claro:#3e304c;--celeste:#ef766c;--acento:#ef766c;--acento-texto:#281d2f;
  --verde:#8cdaba;--verde-claro:#203e33;--rojo:#ff9a91;--rojo-claro:#42272c;--ambar:#efc98a;--ambar-claro:#352b21;
  --violeta:#bda9db;--violeta-claro:#3e304c;--barra:#201a29}
html[data-tema="oscuro"] header{border-bottom:1px solid var(--borde);box-shadow:none}
html[data-tema="oscuro"] h1,html[data-tema="oscuro"] h2,html[data-tema="oscuro"] #resumenMes summary,html[data-tema="oscuro"] .pe-titulo{color:var(--texto)}
html[data-tema="oscuro"] h1{letter-spacing:-.5px}
html[data-tema="oscuro"] main a:not(.tile-accion):not(.btn-salir):not(.btn),html[data-tema="oscuro"] .modal a:not(.btn){color:#ffafa4}
html[data-tema="oscuro"] a.btn{color:#281d2f}
html[data-tema="oscuro"] a.btn.ok{background:var(--verde);color:#14231c}
html[data-tema="oscuro"] a.btn.sec{background:#342a40;color:var(--texto)}
html[data-tema="oscuro"] a.btn.peligro{background:#42272c;color:#ffb1a8}
html[data-tema="oscuro"] .card,html[data-tema="oscuro"] .kpi,html[data-tema="oscuro"] a.tile-accion,html[data-tema="oscuro"] div.tile-accion{border-radius:15px;box-shadow:none}
html[data-tema="oscuro"] .modal .card{border-radius:18px;box-shadow:0 20px 80px rgba(0,0,0,.5)}
html[data-tema="oscuro"] .modal{background:rgba(10,7,14,.72)}
html[data-tema="oscuro"] .kpi .v,html[data-tema="oscuro"] .tile-accion .v{color:var(--texto)}
html[data-tema="oscuro"] .tile-accion .icono-tile{color:#bda9db}
/* menú superior: opción activa como «píldora» ciruela con letra coral claro, igual que SGIA Central */
html[data-tema="oscuro"] nav a.activo,html[data-tema="oscuro"] nav .grupo.activo>button{background:#402b39;color:#ffb5a8}
html[data-tema="oscuro"] nav a:hover,html[data-tema="oscuro"] nav .grupo>button:hover{background:#342a40}
html[data-tema="oscuro"] nav .grupo .desplegable{background:#241d2e;border:1px solid var(--borde);border-top:0}
html[data-tema="oscuro"] nav .grupo .desplegable a{border-bottom-color:var(--borde)}
html[data-tema="oscuro"] nav .grupo .desplegable a.activo{background:#402b39;color:#ffb5a8}
html[data-tema="oscuro"] .buscar-sistema input{background:#1b1623;border-color:#51425d;color:var(--texto);border-radius:9px}
html[data-tema="oscuro"] .buscar-sistema input::placeholder{color:var(--muted)}
html[data-tema="oscuro"] .buscar-sistema input:focus{background:#1b1623;color:var(--texto)}
html[data-tema="oscuro"] .hamburguesa{background:#342a40;border-color:var(--borde)}
html[data-tema="oscuro"] .sel-tema{background:#342a40;border-color:#51425d;color:var(--texto)}
html[data-tema="oscuro"] .sel-tema option{background:#241d2e;color:var(--texto)}
html[data-tema="oscuro"] header .usuario .sel-tema option{background:#241d2e;color:var(--texto)}
html[data-tema="oscuro"] .nav-usuario{border-top-color:var(--borde)}
/* campos: fondo más oscuro que la tarjeta, borde lila grisáceo (el «llenable» de la 0.56.7 se conserva: se distinguen del resto) */
html[data-tema="oscuro"] input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=hidden])),
html[data-tema="oscuro"] select,html[data-tema="oscuro"] textarea,
html[data-tema="oscuro"] input.in,html[data-tema="oscuro"] select.in,html[data-tema="oscuro"] textarea.in{background:#1b1623;border:2px solid #6a5779;border-radius:9px;color:var(--texto-in)}
html[data-tema="oscuro"] input[readonly],html[data-tema="oscuro"] input:disabled,html[data-tema="oscuro"] select:disabled,html[data-tema="oscuro"] textarea:disabled,html[data-tema="oscuro"] textarea[readonly]{background:var(--gris);border:1px solid var(--borde);color:var(--muted)}
html[data-tema="oscuro"] input:focus,html[data-tema="oscuro"] select:focus,html[data-tema="oscuro"] textarea:focus{outline:2px solid var(--azul);border-color:var(--azul)}
html[data-tema="oscuro"] select option{background:#241d2e;color:var(--texto)}
/* botones: el principal es coral con letra oscura (como «Crear plan» de SGIA Central) */
html[data-tema="oscuro"] button,html[data-tema="oscuro"] .btn{border-radius:10px}
html[data-tema="oscuro"] .acciones>button:not([class]),html[data-tema="oscuro"] .fila .campo.auto>button:not([class]){box-shadow:0 4px 12px rgba(238,118,107,.16)}
html[data-tema="oscuro"] button.sec{background:#342a40;color:var(--texto);box-shadow:none}
html[data-tema="oscuro"] button.peligro{background:#42272c;color:#ffb1a8;box-shadow:none}
html[data-tema="oscuro"] button.ok{background:var(--verde);color:#14231c}
html[data-tema="oscuro"] button.ambar{background:var(--ambar);color:#2b2113}
html[data-tema="oscuro"] button.link{background:none;color:#ffafa4;box-shadow:none}
html[data-tema="oscuro"] button.btn-grande{background:var(--azul);color:#281d2f;box-shadow:0 4px 12px rgba(238,118,107,.25)}
html[data-tema="oscuro"] button.toggle{background:transparent;color:var(--azul);box-shadow:none}
html[data-tema="oscuro"] button.toggle.on{background:var(--azul);color:#281d2f}
html[data-tema="oscuro"] a.btn-salir,html[data-tema="oscuro"] header .usuario a.btn-salir{background:#42272c;color:#ffb1a8;border-color:#6b3a40;box-shadow:none}
html[data-tema="oscuro"] a.btn-salir:hover,html[data-tema="oscuro"] header .usuario a.btn-salir:hover{background:#5a3037;color:#ffd0ca}
html[data-tema="oscuro"] .error-icono{color:#42272c}
/* tablas: cabecera tenue en mayúsculas pequeñas y solo líneas horizontales, como las tablas de SGIA Central */
html[data-tema="oscuro"] th{background:#2c2336;color:var(--muted);letter-spacing:.6px;border-color:var(--borde)}
html[data-tema="oscuro"] th,html[data-tema="oscuro"] td{border-left-color:transparent;border-right-color:transparent}
html[data-tema="oscuro"] table:not(.items) tbody tr:hover{filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
html[data-tema="oscuro"] .tabla-zebra tbody tr:nth-child(even){background:rgba(255,255,255,.03)}
html[data-tema="oscuro"] .tabla-zebra tfoot td,html[data-tema="oscuro"] .tabla-zebra tfoot th{border-top-color:#51425d}
html[data-tema="oscuro"] .totales .total td{background:var(--azul);color:#281d2f}
html[data-tema="oscuro"] .pvp{background:var(--azul-claro)}
html[data-tema="oscuro"] .ef{background:var(--superficie)}
/* etiquetas y avisos en tonos tenues */
html[data-tema="oscuro"] .tag{border-radius:7px}
html[data-tema="oscuro"] .tag.AJUSTE,html[data-tema="oscuro"] .tag.EMITIDA,html[data-tema="oscuro"] .tag.info,html[data-tema="oscuro"] .tag.APROBADA,html[data-tema="oscuro"] .tag.SUPERVISOR,
html[data-tema="oscuro"] .tag.RECIBIDA,html[data-tema="oscuro"] .tag.PENDIENTE_SRI,html[data-tema="oscuro"] .leyenda-origen,html[data-tema="oscuro"] .pos-icono{color:#d8c5ee}
html[data-tema="oscuro"] .tag.GUARDADA,html[data-tema="oscuro"] .tag.GENERADA,html[data-tema="oscuro"] .tag.serv{background:#342a40;color:var(--muted)}
html[data-tema="oscuro"] .tag.GENERADA{background:var(--ambar-claro);color:var(--ambar)}
html[data-tema="oscuro"] .tag.pruebas{background:#352b21;color:#efc98a;border-color:#685438}
html[data-tema="oscuro"] .tile-accion.fucsia{background:#3d2340;border-top-color:#d96ae0}
html[data-tema="oscuro"] .tile-accion.fucsia .v,html[data-tema="oscuro"] .tile-accion.fucsia .icono-tile{color:#f0a6f5}
html[data-tema="oscuro"] .lista-avisos .punto{background:#d96ae0}
html[data-tema="oscuro"] .alerta.ambar{border-color:#685438}
html[data-tema="oscuro"] .aviso.ok{border-color:#3d7a63}
html[data-tema="oscuro"] .aviso.err{border-color:#7a4048}
html[data-tema="oscuro"] .aviso.grande{border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.6)}
html[data-tema="oscuro"] .salir-icono{background:#42272c;color:#ffb1a8}
html[data-tema="oscuro"] .reloj-flotante{border-color:#6a5779;box-shadow:0 4px 14px rgba(0,0,0,.45)}
html[data-tema="oscuro"] .pantalla-estado{background:rgba(23,19,30,.95)}
html[data-tema="oscuro"] .sug{border-radius:0 0 12px 12px;box-shadow:0 10px 30px rgba(0,0,0,.55)}
html[data-tema="oscuro"] .sug div{border-bottom-color:var(--borde)}
html[data-tema="oscuro"] .pestanas button.on,html[data-tema="oscuro"] .cfg-tab:hover{background:#402b39;color:#ffb5a8}
html[data-tema="oscuro"] .pestanas button.on{border-bottom-color:var(--azul)}
html[data-tema="oscuro"] .cfg-tab{color:var(--muted)}
html[data-tema="oscuro"] .cfg-tab.activo{background:#402b39;color:#ffb5a8;border-color:#402b39}
html[data-tema="oscuro"] .cfg-tabs{background:var(--fondo)}
html[data-tema="oscuro"] .datos-sri{background:var(--gris)}
html[data-tema="oscuro"] .cam-vista{background:#0e0b12}
/* ingreso */
html[data-tema="oscuro"] .login>img{background:#fff;border-radius:14px;padding:8px}
html[data-tema="oscuro"] .login-arte img{filter:brightness(.74) saturate(.9)}
html[data-tema="oscuro"] .tema-login .sel-tema{background:#241d2e;border-color:var(--borde);color:var(--texto)}
/* pie con SGIA */
html[data-tema="oscuro"] .pie-sgia{border-top-color:var(--borde)}
/* contenido pegado con estilos propios en línea (logos con placa blanca se dejan; los grises claros se oscurecen) */
html[data-tema="oscuro"] [style*="#f7f7f7"]{background:var(--gris)!important}
html[data-tema="oscuro"] ::-webkit-scrollbar{width:12px;height:12px}
html[data-tema="oscuro"] ::-webkit-scrollbar-thumb{background:#4a3d57;border-radius:8px;border:3px solid var(--fondo)}
html[data-tema="oscuro"] ::-webkit-scrollbar-track{background:var(--fondo)}
}

/* 0.59.0: franja del entorno de pruebas (solo existe en «SGIA Cliente (pruebas)»). Alto fijo para que la barra pegajosa se acomode debajo */
.franja-pruebas{position:sticky;top:0;z-index:100001;box-sizing:border-box;height:27px;background:#f59e0b;color:#1f1300;text-align:center;font:600 12px/17px system-ui,sans-serif;padding:5px 10px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:has(.franja-pruebas) header{top:27px}
@media print{.franja-pruebas{display:none!important}}
/* SGIA · armonización visual con Central. Solo pantalla; documentos impresos conservan su CSS. */
@media screen {
  html body, html body[data-negocio="ECUPRINT"] {
    --fondo:#faf8f6; --superficie:#ffffff; --texto:#32243b; --muted:#766e7b; --borde:#e9e3e7;
    --gris:#f3eff4; --gris-oscuro:#554466; --fila-hover:#fff4ef; --texto-in:#32243b; --resalte:#ffffff;
    --azul:#965149; --azul2:#554466; --azul3:#554466; --azul-claro:#fff0eb; --celeste:#965149;
    --acento:#ef766c; --acento-texto:#281d2f; --sobre-azul:#ffffff; --barra:#ffffff;
    --verde:#2c735f; --verde-claro:#e6f4ed; --rojo:#a33936; --rojo-claro:#fff0ed;
    --ambar:#8a5107; --ambar-claro:#fff0d6; --violeta:#554466; --violeta-claro:#f0edf3;
    --sgia-primario:#ef766c; --sgia-sobre-primario:#281d2f; --sgia-campo:#ffffff;
    --sgia-borde-campo:#dcd4df; --sgia-cabecera:#fcfafb; --sgia-activo:#fff0eb;
    --sgia-accion-texto:#904f49; --sgia-sombra:0 8px 28px #32243b08; --sgia-modal-sombra:0 24px 80px #32243b28;
    --sgia-suave:#faf6f8; --sgia-icono:#554466; --sgia-foco:#965149;
    font-family:"Segoe UI",Arial,sans-serif; line-height:1.45;
  }
  html[data-tema="claro"] {color-scheme:light}
  html[data-tema="oscuro"] body, html[data-tema="oscuro"] body[data-negocio="ECUPRINT"] {
    --fondo:#17131e; --superficie:#241d2e; --texto:#f2edf7; --muted:#b6aabd; --borde:#403446;
    --gris:#2c2336; --gris-oscuro:#342a40; --fila-hover:#2e2437; --texto-in:#f2edf7; --resalte:#1b1623;
    --azul:#ffafa4; --azul2:#241d2e; --azul3:#bda9db; --azul-claro:#402b39; --celeste:#ef766c;
    --acento:#ef766c; --acento-texto:#281d2f; --sobre-azul:#281d2f; --barra:#201a29;
    --verde:#8cdaba; --verde-claro:#203e33; --rojo:#ffb1a8; --rojo-claro:#42272c;
    --ambar:#efc98a; --ambar-claro:#352b21; --violeta:#bda9db; --violeta-claro:#3e304c;
    --sgia-campo:#1b1623; --sgia-borde-campo:#51425d; --sgia-cabecera:#2c2336; --sgia-activo:#402b39;
    --sgia-accion-texto:#ffb5a8; --sgia-sombra:0 8px 28px #00000012; --sgia-modal-sombra:0 24px 80px #00000060;
    --sgia-suave:#2c2336; --sgia-icono:#bda9db; --sgia-foco:#ef766c;
  }
  h1 {color:var(--texto);font-size:26px;letter-spacing:-.65px;font-weight:700;margin-bottom:20px;line-height:1.25}
  h2 {color:var(--texto);font-size:16px;letter-spacing:-.2px;line-height:1.35}
  .muted {line-height:1.6}
  .card, html[data-tema="oscuro"] .card {border-radius:16px;padding:20px;border-color:var(--borde);box-shadow:var(--sgia-sombra)}
  header {color:var(--texto);border-bottom:1px solid var(--borde);box-shadow:0 2px 12px #32243b06}
  header .marca {font-size:17px;letter-spacing:.3px}
  header .marca small {color:var(--muted);opacity:1;letter-spacing:.2px}
  header .usuario {color:var(--muted);opacity:1}
  header .usuario .enlaces a, .nav-usuario>a:not(.btn-salir) {color:var(--azul)}
  nav>a, nav .grupo>button {color:var(--muted);font-weight:600;border-radius:9px;line-height:1.1}
  nav a.activo, nav .grupo.activo>button, html[data-tema="oscuro"] nav a.activo,
  html[data-tema="oscuro"] nav .grupo.activo>button {background:var(--sgia-activo);color:var(--sgia-accion-texto);border-bottom-color:var(--sgia-primario)}
  nav>a:hover, nav .grupo>button:hover, html[data-tema="oscuro"] nav a:hover,
  html[data-tema="oscuro"] nav .grupo>button:hover {background:var(--sgia-suave);color:var(--texto);transform:none}
  nav .grupo .desplegable, nav .grupo .desplegable.mega, html[data-tema="oscuro"] nav .grupo .desplegable {
    background:var(--superficie);border:1px solid var(--borde);border-radius:12px;box-shadow:var(--sgia-modal-sombra);padding:6px;
  }
  nav .grupo .desplegable a {color:var(--texto);border-color:var(--borde);border-radius:7px;line-height:1.35}
  nav .grupo .desplegable a:hover, nav .grupo .desplegable a:focus-visible,
  nav .grupo .desplegable a.activo, html[data-tema="oscuro"] nav .grupo .desplegable a.activo {
    background:var(--sgia-activo);color:var(--sgia-accion-texto);transform:none;box-shadow:none;
  }
  nav .grupo .desplegable.mega .columna {border-color:var(--borde)}
  nav .grupo .desplegable.mega .sec-titulo {color:var(--muted);letter-spacing:.8px}
  .icono-menu {width:18px;height:18px;stroke-width:1.8}
  .tile-accion .icono-tile {color:var(--sgia-icono);stroke-width:1.7;filter:none}
  header .buscar-sistema input, html[data-tema="oscuro"] .buscar-sistema input {
    background:var(--sgia-campo);color:var(--texto);border:1px solid var(--sgia-borde-campo);border-radius:10px;font-weight:400;
  }
  .buscar-sistema input::placeholder {color:var(--muted);opacity:1}
  .hamburguesa, html[data-tema="oscuro"] .hamburguesa {background:var(--sgia-suave);border-color:var(--borde)}
  .hamburguesa span {background:var(--texto)}
  input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=hidden])),
  select, textarea, input.in, select.in, textarea.in,
  html[data-tema="oscuro"] input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=hidden])),
  html[data-tema="oscuro"] select, html[data-tema="oscuro"] textarea,
  html[data-tema="oscuro"] input.in, html[data-tema="oscuro"] select.in, html[data-tema="oscuro"] textarea.in {
    background:var(--sgia-campo);color:var(--texto-in);border:1px solid var(--sgia-borde-campo);border-radius:9px;font-weight:500;padding:9px 11px;
  }
  input::placeholder, textarea::placeholder {opacity:1}
  input[readonly], input:disabled, select:disabled, textarea:disabled, textarea[readonly],
  html[data-tema="oscuro"] input[readonly], html[data-tema="oscuro"] input:disabled,
  html[data-tema="oscuro"] select:disabled, html[data-tema="oscuro"] textarea:disabled,
  html[data-tema="oscuro"] textarea[readonly] {background:var(--gris);color:var(--muted);border-color:var(--borde)}
  input:focus, select:focus, textarea:focus, html[data-tema="oscuro"] input:focus,
  html[data-tema="oscuro"] select:focus, html[data-tema="oscuro"] textarea:focus {
    outline:2px solid var(--sgia-foco);outline-offset:2px;border-color:var(--sgia-foco);
  }
  input[type=checkbox], input[type=radio] {accent-color:var(--azul)}
  button, .btn, html[data-tema="oscuro"] button, html[data-tema="oscuro"] .btn {
    background:var(--sgia-primario);color:var(--sgia-sobre-primario);border-radius:10px;padding:10px 16px;font-weight:600;
  }
  button:hover {filter:brightness(.97)}
  button.sec, .btn.sec, html[data-tema="oscuro"] button.sec, html[data-tema="oscuro"] a.btn.sec {
    background:var(--gris);color:var(--texto);border:1px solid var(--borde);box-shadow:none;
  }
  button.ok, .btn.ok, html[data-tema="oscuro"] button.ok, html[data-tema="oscuro"] a.btn.ok {background:var(--verde);color:#ffffff}
  html[data-tema="oscuro"] button.ok, html[data-tema="oscuro"] a.btn.ok {color:#14231c}
  button.peligro, .btn.peligro, html[data-tema="oscuro"] button.peligro, html[data-tema="oscuro"] a.btn.peligro {background:var(--rojo-claro);color:var(--rojo);border:1px solid var(--rojo);box-shadow:none}
  button.ambar, html[data-tema="oscuro"] button.ambar {background:var(--ambar-claro);color:var(--ambar);border:1px solid var(--ambar)}
  button.link, html[data-tema="oscuro"] button.link {background:none;color:var(--azul);padding:4px 6px;box-shadow:none}
  button.toggle, html[data-tema="oscuro"] button.toggle {background:var(--superficie);color:var(--azul);border:1px solid var(--sgia-borde-campo)}
  button.toggle.on, html[data-tema="oscuro"] button.toggle.on {background:var(--sgia-activo);color:var(--sgia-accion-texto);border-color:var(--azul)}
  button.btn-grande, html[data-tema="oscuro"] button.btn-grande {background:var(--sgia-primario);color:var(--sgia-sobre-primario);box-shadow:0 4px 12px #ef766c22}
  button:focus-visible, a:focus-visible {outline:2px solid var(--sgia-foco);outline-offset:3px}
  th, html[data-tema="oscuro"] th {background:var(--sgia-cabecera);color:var(--muted);font-size:11px;letter-spacing:.55px;font-weight:600}
  th, td, html[data-tema="oscuro"] th, html[data-tema="oscuro"] td {border-left:0;border-right:0;border-color:var(--borde);padding:11px 12px}
  table:not(.items) tbody tr:hover, html[data-tema="oscuro"] table:not(.items) tbody tr:hover {transform:none;filter:none}
  tbody tr:hover>td:first-child {box-shadow:inset 3px 0 0 var(--sgia-primario)}
  .scroll {border:1px solid var(--borde);border-radius:12px}
  .tag {border-radius:7px;padding:4px 8px;font-size:11px;line-height:1.35;letter-spacing:.1px;font-weight:600}
  .tag.GUARDADA, .tag.serv, html[data-tema="oscuro"] .tag.GUARDADA, html[data-tema="oscuro"] .tag.serv {background:var(--gris);color:var(--muted)}
  .kpi, .tile-accion, html[data-tema="oscuro"] .kpi, html[data-tema="oscuro"] a.tile-accion, html[data-tema="oscuro"] div.tile-accion {border-radius:15px;box-shadow:var(--sgia-sombra)}
  .kpi .v, .tile-accion .v {color:var(--texto);font-size:26px;letter-spacing:-.6px}
  .tile-accion {padding:20px}
  .modal, html[data-tema="oscuro"] .modal {background:#17131e88;backdrop-filter:blur(3px)}
  .modal .card, html[data-tema="oscuro"] .modal .card {border-radius:18px;box-shadow:var(--sgia-modal-sombra);padding:24px}
  .aviso, .aviso.grande, html[data-tema="oscuro"] .aviso.grande {border-radius:14px;box-shadow:var(--sgia-modal-sombra)}
  .pestanas button, .cfg-tab {background:transparent;color:var(--muted);box-shadow:none}
  .pestanas button.on, .cfg-tab.activo, html[data-tema="oscuro"] .pestanas button.on,
  html[data-tema="oscuro"] .cfg-tab.activo {background:var(--sgia-activo);color:var(--sgia-accion-texto);border-color:var(--sgia-primario)}
  .cfg-tab:hover, html[data-tema="oscuro"] .cfg-tab:hover {background:var(--sgia-suave);color:var(--texto)}
  html .sel-tema, html header .usuario .sel-tema, html .nav-usuario .sel-tema,
  html .tema-login .sel-tema {
    width:112px;min-width:112px;height:38px;appearance:none;-webkit-appearance:none;
    border:1px solid var(--sgia-borde-campo);border-radius:11px;color:var(--texto);font:600 12px "Segoe UI",Arial,sans-serif;
    padding:8px 24px 8px 32px;margin:0 4px;cursor:pointer;
    background-color:var(--sgia-campo);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23766e7b' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 4a8 8 0 0 1 0 16z' fill='%23766e7b'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23766e7b' stroke-width='1.5'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
    background-position:10px center,right 8px center;background-size:16px 16px,12px 12px;background-repeat:no-repeat;
  }
  html[data-tema="oscuro"] .sel-tema, html[data-tema="oscuro"] header .usuario .sel-tema {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6aabd' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 4a8 8 0 0 1 0 16z' fill='%23b6aabd'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23b6aabd' stroke-width='1.5'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
  }
  html .sel-tema option, html header .usuario .sel-tema option {color:var(--texto);background:var(--superficie)}
  html .nav-usuario .sel-tema {display:block;margin:12px 0;width:100%}
  .tema-login {top:42px;right:24px}
  .login-wrap {gap:40px}
  .login .card, html[data-tema="oscuro"] .login .card {border-radius:24px;padding:30px;box-shadow:var(--sgia-modal-sombra)}
  .login .card h2 {font-size:22px;letter-spacing:-.5px}
  body:has(.login-wrap) {background:radial-gradient(ellipse at 10% 10%,#ffdfd744,transparent 50%),var(--fondo)}
  html[data-tema="oscuro"] body:has(.login-wrap) {background:radial-gradient(ellipse at 10% 10%,#362235,transparent 55%),var(--fondo)}
  .franja-pruebas {background:#fff0d6;color:#704206;border-bottom:1px solid #d7b57b}
  html[data-tema="oscuro"] .franja-pruebas {background:#352b21;color:#efd09c;border-color:#685438}
  .vr #vrGrilla button {border-radius:12px;padding:14px;box-shadow:0 2px 8px #32243b06}
  .vr #vrGrilla button:hover {box-shadow:0 4px 14px #32243b0c;filter:none}
  .vr #vrBuscar {border-radius:12px;font-size:18px}
  .vr #vrCobrar {background:var(--sgia-primario);color:var(--sgia-sobre-primario);border-radius:12px;box-shadow:0 4px 12px #ef766c22}
  .vr #vrVentas .vt, .vr .vr-doc label {border-radius:10px}
  .vr-total {color:var(--texto);font-variant-numeric:tabular-nums}
  .pie-sgia {border-top:1px solid var(--borde);color:var(--muted);line-height:1.7}
  @media(max-width:1340px) {header nav {background:var(--superficie);border-color:var(--borde)}header nav a {color:var(--texto)}.nav-usuario {color:var(--texto)}nav .grupo>button {color:var(--texto)}}
  @media(max-width:700px) {.card {padding:16px}h1 {font-size:23px}.modal .card {padding:18px}.tema-login {right:12px}.login .card {padding:24px}.vr #vrGrilla {gap:8px}}
  @media(prefers-reduced-motion:reduce) {button, .card, .tile-accion, tbody tr {transition:none!important;animation:none!important}}
}

/* Ajustes de densidad: el selector muestra la opción elegida sin empujar el menú. */
@media screen {
  html[data-tema="oscuro"] nav .grupo>button {background:transparent;color:var(--muted);box-shadow:none}
  html[data-tema="oscuro"] nav .grupo.activo>button {background:var(--sgia-activo);color:var(--sgia-accion-texto)}
  html[data-tema="oscuro"] nav .grupo>button:hover {background:var(--sgia-suave);color:var(--texto)}
  .reloj-flotante, html[data-tema="oscuro"] .reloj-flotante {border:1px solid var(--borde);box-shadow:var(--sgia-sombra);border-radius:12px;padding:8px 13px}
  body:has(.franja-pruebas) .reloj-flotante {top:calc(var(--alto-barra) + 37px)}
  .pie-sgia a {color:var(--azul)}
  @media(max-width:1340px) {
    .hamburguesa {display:flex}
    nav#navPrincipal {display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;flex-wrap:nowrap;
      background:var(--superficie);border-bottom:1px solid var(--borde);box-shadow:var(--sgia-modal-sombra);padding-bottom:4px;
      max-height:calc(100vh - var(--alto-barra) - 27px);overflow-y:auto}
    header.menu-abierto nav#navPrincipal {display:flex}
    nav#navPrincipal>a, nav#navPrincipal .grupo>button {width:100%;padding:12px 16px;font-size:14px;text-align:left;
      border-bottom:1px solid var(--borde);border-left:3px solid transparent;justify-content:flex-start;gap:12px;text-align:left;color:var(--texto);border-radius:0}
    nav#navPrincipal .grupo>button .flecha {margin-left:auto}
    nav#navPrincipal>a.activo, nav#navPrincipal>a:hover, nav#navPrincipal .grupo.activo>button {border-left-color:var(--sgia-primario)}
    nav#navPrincipal .grupo {position:static}
    nav#navPrincipal .grupo .desplegable {position:static;min-width:0;border-radius:0;box-shadow:none;background:var(--sgia-suave);border:0}
    nav#navPrincipal .grupo .desplegable a {padding:11px 16px 11px 36px}
    nav#navPrincipal .grupo.abierto .desplegable.mega {display:block;min-width:0;padding:0}
    nav#navPrincipal .grupo .desplegable.mega .columna {border:0;padding:0}
    nav#navPrincipal .grupo .desplegable.mega .sec-titulo {padding:10px 16px 4px 36px}
    .nav-usuario {display:block;padding:16px;border-top:1px solid var(--borde);color:var(--texto)}
    .nav-usuario a {color:var(--azul);text-decoration:none;padding:5px 0}
    .buscar-sistema {margin-left:auto}
  }
}

@media screen {
  html .cfg-tabs .cfg-tab, html[data-tema="oscuro"] .cfg-tabs .cfg-tab {
    background:transparent;color:var(--muted);box-shadow:none;border-color:transparent;
  }
  html .cfg-tabs .cfg-tab.activo, html[data-tema="oscuro"] .cfg-tabs .cfg-tab.activo {
    background:var(--sgia-activo);color:var(--sgia-accion-texto);border-color:var(--sgia-primario);
  }
  html .cfg-tabs .cfg-tab:hover, html[data-tema="oscuro"] .cfg-tabs .cfg-tab:hover {
    background:var(--sgia-suave);color:var(--texto);
  }
}

/* 0.69.2 · teléfono: con la tipografía nueva el pie de SGIA ocupaba una línea más y la pantalla casi vacía quedaba con barra de desplazamiento de más. */
@media screen and (max-width:480px) {
  .pie-sgia {font-size:10.5px;line-height:1.6;padding-left:10px;padding-right:10px}
}


/* 0.69.4 · Menú LATERAL en pantallas grandes (desde 1341 px): barra angosta fija a la izquierda, siempre activa; las tres rayas la ocultan
   o la muestran (se recuerda). Por debajo de 1341 px sigue el menú desplegable de siempre (☰). */
@media screen and (min-width:1341px) {
  :root { --ancho-lateral:212px; }
  .hamburguesa {display:flex}
  nav#navPrincipal {position:fixed;left:0;top:var(--alto-barra);bottom:0;width:var(--ancho-lateral);flex:none;display:flex;flex-direction:column;
    flex-wrap:nowrap;align-items:stretch;gap:2px;padding:10px 8px 16px;overflow-y:auto;overflow-x:hidden;background:var(--superficie);
    border-right:1px solid var(--borde);box-shadow:none;z-index:9}
  body:has(.franja-pruebas) nav#navPrincipal {top:calc(var(--alto-barra) + 27px)}
  html.lateral-oculto nav#navPrincipal {display:none}
  nav#navPrincipal .icono-menu {display:inline-block;width:18px;height:18px}
  nav#navPrincipal>a, nav#navPrincipal .grupo>button {width:100%;justify-content:flex-start;text-align:left;gap:10px;padding:9px 10px;font-size:13.5px;
    line-height:1.2;border-radius:9px;color:var(--texto);background:transparent;border:0;box-shadow:none;white-space:nowrap;transform:none}
  nav#navPrincipal>a:hover, nav#navPrincipal .grupo>button:hover {background:var(--sgia-suave);color:var(--texto);transform:none}
  nav#navPrincipal>a.activo, nav#navPrincipal .grupo.activo>button {background:var(--sgia-activo);color:var(--sgia-accion-texto)}
  nav#navPrincipal .grupo {position:static;width:100%}
  nav#navPrincipal .grupo>button .flecha {margin-left:auto}
  nav#navPrincipal .grupo .desplegable, nav#navPrincipal .grupo .desplegable.mega {position:static;min-width:0;width:auto;box-shadow:none;border:0;
    border-left:1px solid var(--borde);border-radius:0;background:transparent;margin:2px 0 6px 18px;padding:0 0 0 6px;animation:none}
  nav#navPrincipal .grupo.abierto .desplegable, nav#navPrincipal .grupo.abierto .desplegable.mega {display:block}
  nav#navPrincipal .grupo .desplegable.mega .columna {border:0;padding:0}
  nav#navPrincipal .grupo .desplegable.mega .sec-titulo {padding:8px 10px 2px;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
  nav#navPrincipal .grupo .desplegable a, nav#navPrincipal .grupo .desplegable.mega a {display:block;padding:7px 10px;font-size:13px;border-radius:7px;
    color:var(--texto);background:transparent;transform:none;white-space:normal}
  nav#navPrincipal .grupo .desplegable a:hover {background:var(--sgia-suave);color:var(--texto);transform:none}
  nav#navPrincipal .grupo .desplegable a.activo {background:var(--sgia-activo);color:var(--sgia-accion-texto)}
  .nav-usuario {display:none}
  html:not(.lateral-oculto) main {margin-left:var(--ancho-lateral);width:auto}
  html:not(.lateral-oculto) body.con-pie>.pie-sgia, html:not(.lateral-oculto) .pie-sgia {margin-left:var(--ancho-lateral);margin-right:0;width:calc(100% - var(--ancho-lateral));max-width:none;box-sizing:border-box}
}

/* 0.69.4 · tableta (701–1340 px): el menú desplegable no ocupa todo el ancho; en teléfono sí. */
@media screen and (min-width:701px) and (max-width:1340px) {
  nav#navPrincipal {right:auto;width:min(340px,100vw);border-right:1px solid var(--borde);border-radius:0 0 12px 0}
}

/* 0.69.6: marca SGIA en la barra (instancias de pruebas y demostración, SISTEMA_MARCA=sgia) */
header .marca img.sgia-marca{height:34px;width:auto;max-width:none;background:none;border-radius:0;padding:0;object-fit:contain}
header .marca:has(.sgia-marca) span{display:inline}
header .marca:has(.sgia-marca) small{display:inline;font-size:11px;opacity:.8}
@media (max-width:700px){header .marca img.sgia-marca{height:28px}header .marca:has(.sgia-marca) span{display:none}}
img.sgia-login-marca{margin:0 auto 18px;width:min(300px,80%);height:auto}
img.sgia-login-marca.sgia-claro{display:block}
html[data-tema="oscuro"] img.sgia-login-marca.sgia-claro{display:none}
html[data-tema="oscuro"] img.sgia-login-marca.sgia-oscuro{display:block}