/* ===========================================================================
   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 --------------------------------------------------------------
     Azul institucional profundo: seriedad y control aduanero, no comercial. */
  --color-primary:        #1e5aa8;
  --color-primary-dark:   #16447e;
  --color-primary-soft:   #24344a;
  --color-secondary:      #b8860b;   /* acento sobrio tipo sello/lacre */

  /* --- Estados semanticos (separados del acento de marca) ----------------- */
  --color-success:        #3fb950;
  --color-success-bg:     #0f2a18;
  --color-warning:        #e0a33a;
  --color-warning-bg:     #33270d;
  --color-danger:         #f0625c;
  --color-danger-bg:      #2e1210;
  --color-info:           #4fc0d0;
  --color-info-bg:        #0e2a30;

  /* --- Superficies (neutros con sesgo azul: elegidos, no heredados) ------- */
  --color-background:     #0e151d;
  --color-surface:        #141d27;
  --color-surface-2:      #1b2733;
  --color-surface-alt:    #0b1219;
  --color-border:         #2a3846;
  --color-border-strong:  #3b4c5e;

  /* --- Texto (contraste verificado AA sobre las superficies) -------------- */
  --color-text:           #e8eef5;
  --color-text-muted:     #a9bdd1;
  --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;
  --focus-ring: 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{
  outline: none; box-shadow: var(--focus-ring); 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);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing:.4px;
  display:flex; gap: var(--spacing-md); align-items:center; flex-wrap:wrap;
}
.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);
  padding: var(--spacing-md) var(--spacing-lg);
  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; }
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); }

/* --- 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; }
.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; }
th{ color: var(--color-text-muted); font-weight: var(--fw-medium); background: var(--color-surface-alt); position:sticky; top:0; }
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); }
.st-BORRADOR         { background: var(--color-primary-soft); color:#a9c8f0; border-color:#33507a; }
.st-BORRADOR::before { content:"\270E"; }
.st-PENDIENTE        { background: var(--color-warning-bg); color: var(--color-warning); border-color:#5a4415; }
.st-PENDIENTE::before{ content:"\25CF"; }
.st-LISTO_PARA_GENERAR        { background: var(--color-info-bg); color: var(--color-info); border-color:#1d4b55; }
.st-LISTO_PARA_GENERAR::before{ content:"\2713"; }
.st-GENERADO_SIN_PDF        { background: var(--color-success-bg); color: var(--color-success); border-color:#1d4a2a; }
.st-GENERADO_SIN_PDF::before{ content:"\2713"; }
.st-GENERADO_CON_PDF        { background: var(--color-success-bg); color: var(--color-success); border-color:#1d4a2a; }
.st-GENERADO_CON_PDF::before{ content:"\2714"; }
.st-ANULADO         { background: var(--color-danger-bg); color: var(--color-danger); border-color:#5a2320; }
.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 ---------------------------------------------------------------- */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; z-index:20; 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; }
}