/* ===========================================================================
   SISTEMA DE DISENO — LPS JUN COMPANY · DUCA JUN COMPANY WEB
   Fuente unica de color, tipografia, espaciado, radios y sombras.
   Documentado en docs/DESIGN_SYSTEM_LPS_DUCA.md
   No definir colores ni tamanos fuera de este archivo.
   =========================================================================== */

:root{
  /* --- Marca --------------------------------------------------------------
     Colores oficiales de LPS - Logistica Profesional (JUN COMPANY, S.A. de
     C.V.), tomados del kit de marca. Antes estos tres azules eran una eleccion
     interna aproximada (#1e5aa8 / #16447e); ahora son los de la identidad
     registrada, de modo que la aplicacion y el resto de las webs del dominio
     lpsjc.com muestran el MISMO azul.

     TEMA CLARO por orden del propietario (2026-08-03): "fondo no negro sino
     colores claro o gris, conforme al archivo comprimido". Las superficies
     oscuras que habia aqui (#0e151d/#141d27/...) eran las del tema viejo;
     el programa de escritorio -- videos y fotos del propietario -- es claro.
     #1b52c9 rinde 6.78:1 con texto blanco encima (relleno) y 6.31:1 como
     texto sobre #f4f7fb: sirve para ambos usos en este tema. */
  --color-primary:        #1b52c9;   /* azul del logotipo: rellenos y acciones */
  --color-primary-dark:   #12395c;   /* navy institucional: cabeceras          */
  --color-primary-soft:   #e8f1f9;
  --color-secondary:      #8a6508;   /* acento sobrio tipo sello/lacre */

  /* --- Estados semanticos (separados del acento de marca) ----------------- */
  --color-success:        #1e7a3c;
  --color-success-bg:     #e5f4ea;
  --color-warning:        #8a6508;
  --color-warning-bg:     #faf1dc;
  --color-danger:         #b00020;
  --color-danger-bg:      #fbe9ec;
  --color-info:           #0b5ea8;
  --color-info-bg:        #e6f1fa;

  /* --- Superficies (neutros con sesgo azul: elegidos, no heredados) ------- */
  --color-background:     #f4f7fb;
  --color-surface:        #ffffff;
  --color-surface-2:      #eef3f8;
  --color-surface-alt:    #e8f1f9;
  /* --- PAREJAS SEMANTICAS DEL REDISEÑO DE FACTURACION (2026-08-31) ---------
     Aditivas: no sustituyen a ninguna existente. Identifican SECCIONES y
     ESTADOS, y por eso van siempre acompañadas de un borde o una franja: el
     prompt (y WCAG 2.2) prohiben que el color sea la unica señal.
     Los fondos son suaves a proposito — el color marca la seccion, no compite
     con la lectura del dato dentro de las casillas.                          */
  --color-terceros:       #2c9a82;   /* pagos a terceros / cuenta ajena       */
  --color-terceros-bg:    #e8f8f4;
  --color-terceros-borde: #a9dfd2;
  --color-sugerencia:     #7457c9;   /* lo que propone el sistema, sin aplicar */
  --color-sugerencia-bg:  #f2eeff;
  --color-sugerencia-borde:#cfc2f0;
  --color-pendiente:      #e18435;   /* falta algo y NO es un error           */
  --color-pendiente-bg:   #fff3e7;
  --color-pendiente-borde:#f3cda6;
  --color-border:         #c7d2dc;
  --color-border-strong:  #9fb0bf;

  /* --- Texto (contraste verificado AA sobre las superficies) -------------- */
  --color-text:           #1f2733;
  --color-text-muted:     #5b6b7b;
  --color-text-inverse:   #ffffff;

  /* --- Tipografia --------------------------------------------------------- */
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;
  --fs-xs: 11px;  --fs-sm: 12px;  --fs-md: 13px;
  --fs-lg: 15px;  --fs-xl: 18px;  --fs-2xl: 22px;
  --fw-normal: 400; --fw-medium: 600; --fw-bold: 700;
  --lh-tight: 1.25; --lh-normal: 1.5;

  /* --- Espaciado ---------------------------------------------------------- */
  --spacing-xs: 4px;  --spacing-sm: 8px;  --spacing-md: 12px;
  --spacing-lg: 18px; --spacing-xl: 28px;

  /* --- Radios y sombras --------------------------------------------------- */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);

  /* --- Alturas de control (objetivo tactil >= 40px en movil) -------------- */
  --control-h: 34px;
  /* AUDITORIA A05 (2026-08-24): este token se llamaba --focus-ring y COLISIONABA
     con el --focus-ring COLOR (#ffb703) de design-tokens.css. Segun el orden de
     <link>, ganaba el color y box-shadow quedaba invalido -> el editor DUCA
     perdia TODO el indicador de foco de teclado (WCAG 2.4.7). Renombrado a
     --focus-shadow; el color canonico sigue en design-tokens.css. */
  --focus-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-info);
}

/* Preproduccion: franja de advertencia permanente (§8) */
:root{ --color-preprod: #8a3a00; --color-preprod-text: #ffe9d6; }

*, *::before, *::after{ box-sizing: border-box; }

body{
  margin:0; background: var(--color-background); color: var(--color-text);
  font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-normal);
}

/* --- Accesibilidad: foco SIEMPRE visible (§24) --------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  /* A05: respaldo por si --focus-shadow no resolviera — outline canonico, nunca
     foco invisible. El box-shadow pinta el anillo doble cuando el token existe. */
  outline: var(--focus-ring-width,3px) solid var(--focus-ring,#ffb703); outline-offset: 1px;
  box-shadow: var(--focus-shadow); border-radius: var(--radius-sm);
}
.salto-contenido{
  position:absolute; left:-9999px; top:0; background: var(--color-primary);
  color: var(--color-text-inverse); padding: var(--spacing-sm) var(--spacing-md);
  z-index:100; border-radius: 0 0 var(--radius-md) 0;
}
.salto-contenido:focus{ left:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* --- Franja de PREPRODUCCION (permanente) -------------------------------- */
.franja-preprod{
  background: var(--color-preprod); color: var(--color-preprod-text);
  /* SHELL COMPACTO: banda alta -> badge compacto de una linea */
  padding: 2px var(--spacing-lg); min-height:22px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing:.4px;
  display:flex; gap: var(--spacing-md); align-items:center; flex-wrap:nowrap;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.franja-preprod .etiqueta{
  background: var(--color-preprod-text); color: var(--color-preprod);
  padding: 1px var(--spacing-sm); border-radius: var(--radius-sm);
  font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing:.6px;
}

/* --- Encabezado / identidad ---------------------------------------------- */
.cabecera{
  display:flex; align-items:center; gap: var(--spacing-md);
  /* SHELL COMPACTO: fila de contexto delgada (~34px) */
  padding: 4px var(--spacing-lg); min-height:34px;
  background: var(--color-surface-alt); border-bottom:1px solid var(--color-border);
  position:sticky; top:0; z-index:5;
}
.marca{ display:flex; flex-direction:column; gap:1px; margin-right: var(--spacing-md); }
.marca .empresa{
  font-size: var(--fs-xs); letter-spacing:1.4px; text-transform:uppercase;
  color: var(--color-secondary); font-weight: var(--fw-bold);
}
.marca .sistema{
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  color: var(--color-text); line-height: var(--lh-tight);
}
.cabecera .separador{ flex:1; }
.sesion{ display:flex; align-items:center; gap: var(--spacing-sm); font-size: var(--fs-sm); color: var(--color-text-muted); }

/* --- Navegacion ----------------------------------------------------------- */
.nav{ display:flex; gap: var(--spacing-xs); flex-wrap:wrap; }
.navbtn{
  background: var(--color-surface-2); color: var(--color-text);
  border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md); cursor:pointer;
  font-weight: var(--fw-medium); font-size: var(--fs-sm); min-height: var(--control-h);
}
.navbtn:hover{ border-color: var(--color-border-strong); }
.navbtn[aria-current="page"], .navbtn.active{
  background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse);
}

/* --- Contenido ------------------------------------------------------------ */
main{ max-width:1180px; margin: var(--spacing-lg) auto; padding: 0 var(--spacing-lg); }
h2{
  font-size: var(--fs-sm); color: var(--color-text-muted); text-transform:uppercase;
  letter-spacing:.6px; border-bottom:1px solid var(--color-border);
  padding-bottom: var(--spacing-xs); margin: var(--spacing-lg) 0 var(--spacing-sm);
}
.tarjeta{
  background: var(--color-surface); border:1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--spacing-lg); box-shadow: var(--shadow-sm);
}

/* --- Formularios ---------------------------------------------------------- */
label{
  display:block; font-size: var(--fs-xs); color: var(--color-text-muted);
  margin: var(--spacing-sm) 0 var(--spacing-xs); font-weight: var(--fw-medium);
}
label .obligatorio{ color: var(--color-warning); font-weight: var(--fw-bold); }
input, select, textarea{
  background: var(--color-surface-2); border:1px solid var(--color-border);
  color: var(--color-text); border-radius: var(--radius-sm);
  padding: var(--spacing-sm); width:100%; font-size: var(--fs-md);
  min-height: var(--control-h); font-family: inherit;
}
input:disabled, select:disabled, textarea:disabled{ opacity:.55; cursor:not-allowed; }
/* El min-height generico de 34px estiraba los checkbox a 13x34 (deformes). */
input[type="checkbox"], input[type="radio"]{ min-height:auto; width:16px; height:16px; }
input[aria-invalid="true"], .campo-error{ border-color: var(--color-danger); }
.numerico{ text-align:right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.unidad{ color: var(--color-text-muted); font-size: var(--fs-xs); margin-left: var(--spacing-xs); }
small.hint, .ayuda{ color: var(--color-text-muted); font-size: var(--fs-xs); display:block; margin-top: var(--spacing-xs); }
.error-campo{ color: var(--color-danger); font-size: var(--fs-xs); margin-top: var(--spacing-xs); display:block; }

.grid{ display:grid; gap: var(--spacing-md); }
.g2{ grid-template-columns: repeat(2,1fr); }
.g3{ grid-template-columns: repeat(3,1fr); }
.g4{ grid-template-columns: repeat(4,1fr); }
.g6{ grid-template-columns: repeat(6,1fr); }

/* --- CASILLAS OCULTAS Y BLOQUES TÉCNICOS ----------------------------------
   Orden del propietario (2026-08-07): «si hay casilla que se ocupa para generar el XML CON PDF y
   SIN PDF … no eliminarla, solo ocultarla; lo importante es poder generar los dos .xml».
   .casilla-oculta saca el campo de la vista PERO lo deja en el DOM (recoger() lo sigue leyendo y
   el XML no cambia). .bloque-tecnico agrupa en un <details> colapsado lo que el escritorio no
   muestra como casilla de la pestaña pero el motor necesita. */
.casilla-oculta{ display:none !important; }
/* Retaceo por item: en el escritorio son columnas de ANCHO 0 (calculadas por
   prorrateo desde el Segmento general). Se ocultan igual, pero siguen en el
   DOM y siguen viajando al XML — la casilla no se elimina, se oculta. */
.col-retaceo{ display:none !important; }
/* Las columnas calculadas del escritorio se ven como bloqueadas */
#items input[readonly]{ background:var(--color-disabled-bg,#eef2f6); color:#4a5666; cursor:default; }
/* Casilla calculada del formulario (el escritorio la pinta gris y sin foco) */
input.calc{ background:var(--color-disabled-bg,#eef2f6); color:#4a5666; cursor:default; font-weight:600; }
/* BLOQUE DE CASILLAS DE SUMA (orden del propietario): «Valor en Aduana» y «Otros»
   no se capturan — son sumas de referencia. Se sacan de la rejilla editable a un
   bloque propio, grande y gris, lado a lado, para que se vea que no se editan. */
/* Tamaño reducido a la mitad (orden del propietario 2026-08-18): son casillas de
   referencia, no deben dominar la pantalla. */
.sumas-ref{ display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 6px; max-width:560px; }
.sumas-ref .suma-box{ flex:1 1 170px; background:#e6eaf0; border:1px solid #cbd4e0;
  border-radius:8px; padding:7px 10px; display:flex; flex-direction:column; gap:3px; }
.sumas-ref .suma-lbl{ font-weight:700; font-size:.68rem; letter-spacing:.03em;
  text-transform:uppercase; color:#39485a; }
.sumas-ref input.suma-val{ font-size:1rem; font-weight:800; text-align:right;
  background:#dbe1ea; border:1px solid #c2ccd9; color:#232f3c; border-radius:6px;
  padding:5px 8px; cursor:default; }
.sumas-ref .suma-nota{ font-size:.64rem; color:#6b7889; }
/* Casilla deshabilitada por la regla FAUCA: se VE, no se puede escribir */
body.duca-form input:disabled{ background:#f1f3f5; color:#8b95a1; }
/* Formulario de captura por item (pestana 6). Secciones con <fieldset> para
   que el lector de pantalla anuncie el grupo al entrar en cada casilla. */
fieldset.form-item{ border:1px solid var(--lps-borde,#c7d2dc); border-radius:6px; padding:10px 12px; margin:0 0 12px; }
fieldset.form-item > legend{ font-weight:600; padding:0 6px; color:var(--color-primary,#1b52c9); }
fieldset.form-item fieldset.form-item{ margin:10px 0; background:var(--color-surface,#fff); }
#itf_form .actions{ margin-top:10px; }
#itf_desc_aran{ width:100%; resize:vertical; }
/* La fila que el formulario esta editando, y la ya confirmada. Se distinguen
   por borde ademas de por color: el color solo no basta. */
tr.fila-item-activa > td{ background:var(--lps-azul-claro,#e8f1f9); }
/* p7: fila de documento elegida para los botones de PDF (como el escritorio) */
tr.fila-doc-activa > td{ background:var(--lps-azul-claro,#e8f1f9); }
tr.fila-item-ok > td{ box-shadow:inset 3px 0 0 0 #1e7a3c; }
.itf-mal{ color:#a3282f; font-weight:600; }
/* Campo del bloque FAUCA (criterio/reglas/unidad FAUCA) apagado en modelos que no
   lo llevan (IM4/EX1): se ve inactivo para no exigir un dato que ese modelo no usa. */
.campo-inaplicable input, .campo-inaplicable label{ opacity:.5; }
/* El fondo gris ya lo da la regla `input:disabled` (el campo se deshabilita);
   aqui solo el cursor, para no introducir una variable sin declarar. */
.campo-inaplicable input{ cursor:not-allowed; }
/* Los 13 eventos del escritorio en la pestana de tiempos */
.hitos-escritorio{ margin:10px 0 0 0; padding-left:22px; }
.hitos-escritorio li{ margin-bottom:6px; }
/* Botones de MARCADO de la pestana 9 (paridad OtTimingPanel, 2026-08-19):
   autocontenidos para no depender de .btn (que vive en otra hoja). */
.hitos-escritorio .tiempos-acc{ display:inline-flex; gap:6px; margin-left:10px; vertical-align:middle; flex-wrap:wrap; }
.hitos-escritorio .tiempos-acc button{
  font:inherit; font-size:.8rem; padding:2px 10px; border-radius:6px; line-height:1.5;
  border:1px solid #c9d2dd; background:#fff; color:#12324f; cursor:pointer;
}
.hitos-escritorio .tiempos-acc button:hover{ background:#eef3f9; }
.hitos-escritorio .tiempos-marca{ font-weight:700; }
.bloque-tecnico{
  margin: var(--spacing-md) 0; border:1px dashed var(--color-border);
  border-radius: var(--radius-sm); padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface-alt);
}
.bloque-tecnico > summary{
  cursor:pointer; font-size: var(--fs-xs); color: var(--color-text-muted);
  font-weight: var(--fw-medium); padding: var(--spacing-xs) 0;
}
.bloque-tecnico[open] > summary{ margin-bottom: var(--spacing-sm); }

/* --- PARIDAD VISUAL DEL FORMULARIO con el escritorio -----------------------
   El programa de escritorio dispone cada casilla como ETIQUETA A LA IZQUIERDA
   (columna fija, alineada) y CAMPO A LA DERECHA, en filas. El web ponía la
   etiqueta encima del campo, lo que se lee distinto y ocupa el doble de alto.
   Se aplica a las rejillas del editor DUCA (body.duca-form): cada celda del
   grid pasa a ser una fila etiqueta|campo, conservando el número de columnas.  */
body.duca-form .grid > div{
  display:grid; grid-template-columns: var(--form-label-w, 168px) minmax(0,1fr);
  align-items:center; column-gap: var(--spacing-sm); row-gap:2px;
}
body.duca-form .grid > div > label{
  margin:0; text-align:right; padding-right: var(--spacing-xs);
  font-size: var(--fs-xs); color: var(--color-text); line-height:1.25;
}
/* el campo ocupa la 2.a columna; los textos de ayuda y errores van debajo, a la derecha */
body.duca-form .grid > div > input,
body.duca-form .grid > div > select,
body.duca-form .grid > div > textarea{ margin:0; }
body.duca-form .grid > div > .hint,
body.duca-form .grid > div > .error,
body.duca-form .grid > div > small{ grid-column:2; }
/* las rejillas anchas usan etiqueta más corta para no comerse el campo */
body.duca-form .g3 > div,
body.duca-form .g4 > div,
body.duca-form .g6 > div{ --form-label-w:118px; }
@media (max-width:1200px){
  body.duca-form .grid > div{ grid-template-columns:1fr; }
  body.duca-form .grid > div > label{ text-align:left; padding-right:0; }
  body.duca-form .grid > div > .hint,
  body.duca-form .grid > div > .error,
  body.duca-form .grid > div > small{ grid-column:1; }
}

/* --- Botones: una sola jerarquia (§21) ------------------------------------ */
button{
  background: var(--color-primary); color: var(--color-text-inverse); border:1px solid var(--color-primary);
  border-radius: var(--radius-md); padding: var(--spacing-sm) var(--spacing-lg);
  font-weight: var(--fw-medium); font-size: var(--fs-md); cursor:pointer;
  min-height: var(--control-h); font-family: inherit;
}
button:hover{ background: var(--color-primary-dark); }
button.sec{ background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text); }
button.sec:hover{ border-color: var(--color-border-strong); background: var(--color-primary-soft); }
button.ter{ background: transparent; border-color: transparent; color: var(--color-text-muted); }
button.ter:hover{ color: var(--color-text); background: var(--color-surface-2); }
button.warnb{ background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }
button.badb{  background: var(--color-danger-bg);  border-color: var(--color-danger);  color: var(--color-danger); }
button:disabled{ opacity:.35; cursor:not-allowed; }
.actions{ display:flex; gap: var(--spacing-xs); flex-wrap:wrap; }
.actions button{ padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--fs-xs); min-height:28px; }

/* --- PARIDAD VISUAL con el escritorio: barra de acciones en GRUPOS ---------
   El escritorio separa las herramientas de revisión de las acciones principales
   (Guardar borrador · Generar XML SIDUNEA en azul). Aquí se replican tres grupos
   con rótulo, separador y jerarquía de color: azul = acción principal (generar),
   verde = XML por contrato (el «XML PARA IMPORTAR EN SIDUNEA» del escritorio). */
/* La barra de acciones va SIEMPRE debajo del formulario, nunca encima: el propietario
   reportó (2026-08-07) que «la pantalla de revisión tapa información» — la última fila del
   formulario quedaba recortada por la barra. Se separa con margen propio, se le da fondo y
   contexto de apilamiento, y se anula cualquier recorte heredado en el contenedor del editor. */
.barra-editor{
  align-items:flex-start; gap: var(--spacing-lg); padding-top: var(--spacing-md);
  border-top:1px solid var(--color-border);
  margin-top: var(--spacing-lg); clear:both;
}
#vista-captura{ overflow:visible; }
.seg, .seg.active{ overflow:visible; }
/* aire garantizado entre el último bloque de casillas y la barra de acciones */
.seg.active > .grid:last-of-type, .seg.active > .bloque-tecnico:last-of-type,
.seg.active > .ficha-modelo:last-of-type{ margin-bottom: var(--spacing-lg); }
/* FICHA DEL MODELO: una sola línea a lo ancho, no una columna estrecha.
   Antes este texto vivía dentro de la casilla «Modelo» y la estiraba a cinco
   líneas, aplastando «Referencia» y «Fecha registro». */
.ficha-modelo{
  display:flex; align-items:center; gap: var(--spacing-sm); flex-wrap:wrap;
  margin-top: var(--spacing-xs);
}
.ficha-modelo .hint{ margin:0; flex:1 1 auto; min-width:0; }
.ficha-modelo .sec{ padding:1px 8px; font-size:11px; flex:0 0 auto; }
body.duca-form .grid > div{ min-width:0; }
.grupo-acc{
  display:flex; align-items:center; gap: var(--spacing-xs); flex-wrap:wrap;
  padding-left: var(--spacing-md); border-left:2px solid var(--color-border);
}
.grupo-acc:first-child{ padding-left:0; border-left:0; }
.grupo-eti{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.8px;
  color: var(--color-text-muted); font-weight: var(--fw-medium);
  width:100%; margin-bottom:2px;
}
.grupo-principal{ margin-left:auto; }
.barra-editor .btn-principal{
  background: var(--color-primary); color: var(--color-text-inverse);
  border-color: var(--color-primary); font-weight: var(--fw-medium); min-height:34px;
  padding: var(--spacing-xs) var(--spacing-lg);
}
.barra-editor .btn-verde{
  background:#1e7a3c; color:#fff; border-color:#1e7a3c; min-height:34px;
}
.barra-editor .btn-verde:hover{ background:#186331; }
@media (max-width:900px){
  .grupo-acc{ padding-left:0; border-left:0; }
  .grupo-principal{ margin-left:0; }
}
.barra-acciones{
  display:flex; gap: var(--spacing-sm); flex-wrap:wrap; align-items:center;
  padding: var(--spacing-md) 0; border-top:1px solid var(--color-border); margin-top: var(--spacing-lg);
}

/* --- Tablas --------------------------------------------------------------- */
.tabla-scroll{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; margin-top: var(--spacing-sm); font-size: var(--fs-sm); }
th, td{ border:1px solid var(--color-border); padding: var(--spacing-sm); text-align:left; vertical-align:top; }
/* El sticky generico del th se pegaba al top:0 del viewport, que ya ocupa la
   cabecera pegajosa opaca: los rotulos de columna quedaban en cuña invisible.
   Cabecera fija solo dentro de un contenedor de scroll propio (.tabla-scroll). */
th{ color: var(--color-text-muted); font-weight: var(--fw-medium); background: var(--color-surface-alt); }
.tabla-scroll th{ position:sticky; top:0; z-index:1; }
tbody tr:hover{ background: var(--color-surface-2); }
td.num{ text-align:right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.vacio{ text-align:center; color: var(--color-text-muted); padding: var(--spacing-xl); font-size: var(--fs-sm); }

/* --- Estados: color + texto + icono (nunca solo color, §22) --------------- */
.pill{
  display:inline-flex; align-items:center; gap: var(--spacing-xs);
  padding: 2px var(--spacing-sm); border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing:.3px;
  border:1px solid transparent;
}
.pill::before{ font-size: var(--fs-xs); }
/* Colores del TEMA CLARO: el texto #a9c8f0 y los bordes #33507a/#5a4415/... eran
   restos del tema oscuro — la pildora BORRADOR (la mas comun) media ~1.5:1. */
.st-BORRADOR         { background: var(--color-primary-soft); color: var(--color-primary-dark); border-color:#a9c8f0; }
.st-BORRADOR::before { content:"\270E"; }
.st-PENDIENTE        { background: var(--color-warning-bg); color: var(--color-warning); border-color:#e6cf94; }
.st-PENDIENTE::before{ content:"\25CF"; }
.st-LISTO_PARA_GENERAR        { background: var(--color-info-bg); color: var(--color-info); border-color:#a8d4de; }
.st-LISTO_PARA_GENERAR::before{ content:"\2713"; }
.st-GENERADO_SIN_PDF        { background: var(--color-success-bg); color: var(--color-success); border-color:#a9d8b8; }
.st-GENERADO_SIN_PDF::before{ content:"\2713"; }
.st-GENERADO_CON_PDF        { background: var(--color-success-bg); color: var(--color-success); border-color:#a9d8b8; }
.st-GENERADO_CON_PDF::before{ content:"\2714"; }
.st-ANULADO         { background: var(--color-danger-bg); color: var(--color-danger); border-color:#e4a9a5; }
.st-ANULADO::before { content:"\2716"; }
.st-ARCHIVADO       { background: var(--color-surface-2); color: var(--color-text-muted); border-color: var(--color-border); }
.st-ARCHIVADO::before{ content:"\25A0"; }

/* --- Mensajes: nivel por icono + texto, no solo color (§18, §20) ---------- */
.msg{
  padding: var(--spacing-md); border-radius: var(--radius-md); margin: var(--spacing-md) 0;
  font-size: var(--fs-sm); border-left:4px solid transparent; display:flex; gap: var(--spacing-sm);
}
.msg.ok  { background: var(--color-success-bg); color: var(--color-success); border-left-color: var(--color-success); }
.msg.err { background: var(--color-danger-bg);  color: var(--color-danger);  border-left-color: var(--color-danger); }
.msg.warn{ background: var(--color-warning-bg); color: var(--color-warning); border-left-color: var(--color-warning); }
.msg.info{ background: var(--color-info-bg);    color: var(--color-info);    border-left-color: var(--color-info); }
.msg::before{ font-weight: var(--fw-bold); }
.msg.ok::before{ content:"\2713"; } .msg.err::before{ content:"\2716"; }
.msg.warn::before{ content:"\26A0"; } .msg.info::before{ content:"\2139"; }

/* --- Pestanas de seccion --------------------------------------------------- */
.tabs{
  display:flex; gap: var(--spacing-xs); flex-wrap:wrap; margin: var(--spacing-md) 0;
  border-bottom:1px solid var(--color-border); padding-bottom: var(--spacing-sm);
}
.tab{
  background: var(--color-surface-alt); border:1px solid var(--color-border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: var(--spacing-sm) var(--spacing-md);
  cursor:pointer; font-size: var(--fs-xs); color: var(--color-text-muted);
  min-height:32px; font-family: inherit; font-weight: var(--fw-medium);
}
.tab[aria-selected="true"], .tab.active{
  background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary);
}
.seg{ display:none; } .seg.active{ display:block; }

/* --- Indicador de guardado (§19) ------------------------------------------ */
.guardado{ display:inline-flex; align-items:center; gap: var(--spacing-xs); font-size: var(--fs-xs); color: var(--color-text-muted); }
.guardado[data-estado="guardando"]{ color: var(--color-warning); }
.guardado[data-estado="guardado"] { color: var(--color-success); }
.guardado[data-estado="sin-guardar"]{ color: var(--color-danger); }

/* --- Modal ---------------------------------------------------------------- */
/* z-70: por ENCIMA de la barra de acciones (30) y del shell (50/60); el overlay
   de login (99) sigue por encima de todo. Antes (z-20) la barra flotaba sobre el velo. */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; z-index:70; padding: var(--spacing-md); }
.modal.show{ display:flex; }
.modal .box{
  background: var(--color-surface); border:1px solid var(--color-border);
  border-radius: var(--radius-lg); max-width:840px; width:100%; max-height:86vh;
  overflow:auto; padding: var(--spacing-xl); box-shadow: var(--shadow-md);
}

/* --- Utilidades ----------------------------------------------------------- */
pre{
  background: var(--color-surface-alt); border:1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--spacing-md); overflow:auto;
  max-height:320px; font-size: var(--fs-xs); font-family: var(--font-mono);
}
.sha{ color: var(--color-success); font-family: var(--font-mono); word-break:break-all; }
.warn{ color: var(--color-warning); } .bad{ color: var(--color-danger); }
.tag{ font-size:10px; color: var(--color-text-muted); border:1px solid var(--color-border); border-radius: var(--radius-sm); padding:1px var(--spacing-sm); }
.toolbar{ display:flex; gap: var(--spacing-sm); align-items:flex-end; flex-wrap:wrap; margin-bottom: var(--spacing-sm); }
.toolbar>div{ min-width:150px; }
.hidden{ display:none; }
.solo-lectores{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pie{ color: var(--color-text-muted); font-size: var(--fs-xs); text-align:center; padding: var(--spacing-lg); border-top:1px solid var(--color-border); margin-top: var(--spacing-xl); }

/* --- Responsive (§23) ------------------------------------------------------ */
@media (max-width: 1024px){
  .g6{ grid-template-columns: repeat(3,1fr); }
  .g4{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px){
  :root{ --control-h: 40px; }              /* objetivo tactil */
  main{ padding: 0 var(--spacing-md); margin: var(--spacing-md) auto; }
  .g2, .g3, .g4, .g6{ grid-template-columns: 1fr; }   /* una columna */
  .cabecera{ flex-wrap:wrap; gap: var(--spacing-sm); }
  .nav{ width:100%; }
  .navbtn{ flex:1; text-align:center; }
  .tarjeta{ padding: var(--spacing-md); }
  .barra-acciones button{ flex:1 1 auto; }

  /* Las tablas se desplazan DENTRO DE SI MISMAS: la pagina nunca scrollea en
     horizontal (§23). thead/tbody vuelven a 'table' para conservar la
     alineacion de columnas al poner la tabla en display:block.
     Se resuelve aqui, en el sistema de diseno, para no tener que envolver
     cada tabla del HTML en un contenedor. */
  table{
    display:block; width:100%; overflow-x:auto;
    -webkit-overflow-scrolling: touch; font-size: var(--fs-xs);
  }
  thead, tbody{ display:table; width:max-content; min-width:100%; }
  th{ position:static; }   /* sticky no aplica con display:block */
}
@media (max-width: 400px){
  .marca .sistema{ font-size: var(--fs-md); }
}
@media print{
  .franja-preprod{ background:#000; color:#fff; }
  .nav, .barra-acciones{ display:none; }
}


/* --- INDEX VISUAL R1 -------------------------------------------------------
   Pie al fondo del viewport (el hallazgo de pie a media pantalla con corte de
   tono, pendiente desde la revision R2): cuerpo en columna flexible; el main
   absorbe el espacio 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. El tema oscuro del index SE CONSERVA: es la pagina oscura
   legitima de la hoja de marca. */
html{ min-height:100%; background: var(--color-background); }
body{ min-height:100vh; display:flex; flex-direction:column; }
main#contenido{ flex:1 0 auto; width:100%; }
body > footer.lpsm-pie{ margin-top:auto; }
/* Etiquetas de la barra de filtros compartiendo linea base (desfase 2-3px):
   altura unica de control, la misma solucion aprobada del hito anterior. */
.toolbar input, .toolbar select{ height: var(--control-h, 2.4rem); }
/* Enlaces sobre la cabecera navy: tinte con contraste medido contra el fondo
   REAL (4.90:1 sobre #12395c). Hoy la cabecera usa botones; la regla cubre
   los enlaces que existan o lleguen. */
.cabecera a{ color: var(--lpsm-azul-enfasis, #7aa5ff); }

/* Matriz de cantidades del «Documento Previo» (réplica de ASYCUDA World):
   filas «Cant. Inicial:» / «Cantidad Rest:» × columnas Paquetes/Peso Neto/
   Unid. Suplem./Referencia valor CIF. */
.dp-cant{ border-collapse:collapse; }
.dp-cant th{ text-align:left; font-weight:600; font-size:.85rem; padding:.25rem .55rem; white-space:nowrap; }
.dp-cant thead th{ color:var(--lps-suave,#5b6b7b); font-weight:600; }
.dp-cant tbody th[scope="row"]{ color:var(--texto,#152833); }
.dp-cant td{ padding:.15rem .3rem; }
.dp-cant td input{ width:11ch; box-sizing:border-box; }
.dp-cant td:last-child input{ width:16ch; }

/* --- SUBIR PDF POR CÓDIGO con BARRA DE PORCENTAJE (propietario 2026-08-23) ----
   Cada fila de la tabla de documentos tiene su cargador con barra de progreso,
   como la columna «Status» de SIDUNEA World (100 % verde al terminar). */
.doc-subir{ min-width:160px; }
.doc-subir .doc-subir-btn{ padding:4px 10px; min-height:auto; font-size:var(--fs-xs,.8rem); }
.doc-prog{ margin-top:5px; height:14px; border-radius:7px; background:var(--color-surface-2,#e9eef3);
  border:1px solid var(--color-border,#cfd8e0); position:relative; overflow:hidden; }
.doc-prog-barra{ height:100%; width:0; border-radius:7px; background:var(--lps-azul,#1b52c9);
  transition:width .18s ease; }
.doc-prog-barra.completo{ background:var(--color-success,#1e7a3c); }
.doc-prog-txt{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:600; color:var(--texto,#152833); }
.doc-prog-nombre{ margin-top:3px; font-size:var(--fs-xs,.78rem); word-break:break-all; }

/* --- AMPLIACIÓN VISUAL DEL EDITOR DUCA (propietario 2026-08-23) ---------------
   Más ancho y más aire en las pestañas de captura (1 DUCA y 2 Segmento General)
   para leer las casillas como el formulario del escritorio, sin apretujar. La
   colapsación responsiva de <=1200px se conserva intacta. */
body.duca-form main{ max-width:1360px; }
body.duca-form .grid{ gap:var(--spacing-lg,18px); }
@media (min-width:1201px){
  body.duca-form .grid > div{ column-gap:var(--spacing-md,12px); row-gap:4px; }
  body.duca-form .grid > div > label{ font-size:var(--fs-sm,.85rem); }
  body.duca-form .grid > div > input,
  body.duca-form .grid > div > select,
  body.duca-form .grid > div > textarea{ min-height:38px; }
  body.duca-form .g4 > div,
  body.duca-form .g3 > div{ --form-label-w:132px; }
}

/* Ocultar columnas de la tabla de Documentos que el XML necesita pero el
   operador no debe editar/ver (orden del propietario 2026-08-24): «PDF»
   (llave del emparejado CON_PDF) y «Estado» (auditoría interna). Quedan en el
   DOM: recoger() las lee y viajan al XML; solo se sacan de la vista. */
#docsmeta .col-oculta{ display:none; }
/* Estado «re-adjunte»: el PDF está asignado por nombre pero su binario no
   sobrevivió (expediente viejo sin persistir) — ámbar, no verde, para no
   mentir con un 100% que luego falla en el CON_PDF. */
.doc-prog-barra.falta{ background:#c07a00; }

/* ===========================================================================
   COMPONENTES COMUNES LPS (Tanda 2 del rediseño integral, 2026-08-24).
   Capa ADITIVA: clases canónicas que las tandas siguientes van adoptando
   módulo a módulo. NO redefine tokens existentes ni altera estilos vigentes;
   los valores salen de los tokens canónicos (design-tokens/carcasa).
   Catálogo: Button · StatusChip · EmptyState/Loading/Error · KpiCard ·
   FinancialSummary · Dialog · FilterBar · DataTable base.
   =========================================================================== */

/* --- Button ---------------------------------------------------------------- */
.lps-btn{ display:inline-flex; align-items:center; gap:.4em; border:1px solid transparent;
  border-radius:var(--radius-sm,.35rem); padding:.45rem .9rem; font-size:.95rem;
  cursor:pointer; background:var(--color-primary,#1b52c9); color:#fff; }
.lps-btn:hover{ filter:brightness(1.08); }
.lps-btn--secondary{ background:#fff; color:var(--color-primary-dark,#12395c);
  border-color:var(--color-border,#c7d2dc); }
.lps-btn--danger{ background:var(--color-danger,#b00020); }
.lps-btn[disabled], .lps-btn[aria-disabled="true"]{ background:var(--color-disabled-bg,#eef2f6);
  color:var(--color-disabled-text,#4a5666); cursor:not-allowed; filter:none; }

/* --- StatusChip (texto + color, nunca solo color) --------------------------- */
.status-chip{ display:inline-flex; align-items:center; gap:.35em; padding:.1rem .55rem;
  border-radius:999px; font-size:.78rem; font-weight:600; background:#eef2f6; color:#33404d; }
.status-chip--ok{ background:var(--color-success-bg,#e5f4ea); color:var(--color-success,#1e7a3c); }
.status-chip--warning{ background:#fff4e5; color:var(--color-warning,#8a6508); }
.status-chip--danger{ background:var(--color-danger-bg,#fbe9ec); color:var(--color-danger,#b00020); }
.status-chip--info{ background:var(--color-primary-soft,#e8f1f9); color:var(--color-primary-dark,#12395c); }

/* --- Empty / Loading / Error states ---------------------------------------- */
.empty-state{ text-align:center; padding:1.6rem 1rem; color:var(--color-text-muted,#5b6b7b); }
.empty-state b{ display:block; color:var(--color-text,#1f2733); margin-bottom:.3rem; }
.loading-state{ color:var(--color-text-muted,#5b6b7b); padding:.8rem; }
.error-state{ background:var(--color-danger-bg,#fbe9ec); color:var(--color-danger,#b00020);
  border:1px solid #f2b8b5; border-radius:var(--radius-md,.5rem); padding:.7rem .9rem; }

/* --- KpiCard + FinancialSummary --------------------------------------------- */
.kpi-card{ background:var(--color-surface,#fff); border:1px solid var(--color-border,#c7d2dc);
  border-radius:10px; padding:10px 12px; min-width:150px; }
.kpi-card .kpi-eti{ font-size:.72rem; color:var(--color-text-muted,#5b6b7b);
  text-transform:uppercase; letter-spacing:.03em; }
.kpi-card .kpi-val{ font-size:1.25rem; font-weight:700; color:var(--color-primary-dark,#12395c);
  font-variant-numeric:tabular-nums; }
.financial-summary{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0; }
.financial-summary .kpi-card{ flex:1 1 150px; }

/* --- Dialog (sustituto de prompt()/confirm(), Tanda 8) ---------------------- */
.lps-dialog{ border:1px solid var(--color-border,#c7d2dc); border-radius:var(--radius-md,.5rem);
  box-shadow:var(--shadow-md,0 4px 14px rgba(0,0,0,.25)); padding:1rem 1.2rem; max-width:460px; }
.lps-dialog::backdrop{ background:rgba(15,23,42,.45); }
.lps-dialog h2{ margin:.1rem 0 .5rem; font-size:1.05rem; }
.lps-dialog .dialog-actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:.9rem; }

/* --- FilterBar + DataTable base --------------------------------------------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:end; margin:.5rem 0; }
.data-table{ width:100%; border-collapse:collapse; }
.data-table th, .data-table td{ padding:6px 8px; border-bottom:1px solid #eef2f6; text-align:left; }
.data-table td.num, .data-table th.num{ text-align:right; font-variant-numeric:tabular-nums; }