/* ===========================================================================
   DESIGN TOKENS — LPS DUCA WEB INTEGRAL · JUN COMPANY, S.A. DE C.V.
   Fuente única de las constantes visuales (orden CORRECCIÓN VISUAL R2, §9).

   REGLA DE MIGRACIÓN: no se reescriben todas las hojas de golpe — eso
   introduce regresiones. Los componentes tocados por este hito consumen estos
   tokens; los heredados migran cuando se toquen. Por eso varios tokens
   REPITEN valores que hoy viven en ot.css/lps-marca.css: el token es el
   destino, no un duplicado accidental. Cuando una hoja migre, borra su copia.

   CONTRASTES MEDIDOS (contra el fondo REAL, no aproximado):
     --text-primary  #1a2a38 sobre --surface-page #f4f7fb .... 12.9:1  AAA
     --brand-azul    #1b52c9 sobre blanco ...................... 6.78:1  AA
     --brand-link-on-navy #7aa5ff sobre --brand-navy #12395c ... 4.90:1  AA
     --brand-link-on-navy #7aa5ff sobre --brand-navy-deep ...... 5.71:1  AA
     blanco sobre --brand-navy ................................ 11.89:1  AAA
     --focus-ring #ffb703 sobre navy ........................... 7.0:1   (>=3:1 componentes)
   El antiguo #5b8cf5 mide 3.69:1 sobre navy: NO se usa sobre navy. Su único
   uso legítimo es la página oscura (#0e151d, 5.70:1).
   =========================================================================== */
:root{
  /* --- marca ------------------------------------------------------------- */
  --brand-navy:         #12395c;   /* cabecera */
  --brand-navy-deep:    #0e2e4d;   /* pie / menú lateral oscuro */
  --brand-azul:         #1b52c9;   /* azul registrado del logotipo: NO alterar */
  --brand-link-on-navy: #7aa5ff;   /* enlace funcional sobre navy  4.90:1 */
  --brand-text-on-navy: #bcd3ea;   /* texto secundario sobre navy  7.73:1 */

  /* --- superficies (área operativa CLARA, decisión §1) -------------------- */
  --surface-page:  #f4f7fb;   /* fondo de marca UNIFICADO 2026-08-20: era #f4f7fa; el resto de la familia (design-system --color-background, editor --bg, carcasa --lps-fondo) ya usaba #f4f7fb — fijado por test_acceso_paleta A1/A4 */
  --surface-card:  #ffffff;
  --surface-hint:  #e8f1f9;   /* apoyo claro de marca */

  /* --- texto y bordes ----------------------------------------------------- */
  --text-primary:   #1a2a38;
  --text-secondary: #5b6b7b;
  --border-default: #d5dde5;

  /* --- semánticos (nunca color-solo: siempre acompañados de texto/símbolo) - */
  --state-ok:    #1c7c3f;
  --state-warn:  #b8860b;
  --state-error: #b3261e;

  /* --- foco, radios, sombras ---------------------------------------------- */
  --focus-ring: #ffb703;
  --focus-ring-width: 3px;
  --radius-control: 6px;
  --radius-card: 8px;
  --shadow-card: 0 1px 3px rgba(11,61,107,.12);

  /* --- alias semánticos (UI/UX Bloque 12, 2026-08-20) ----------------------
     Decisión del propietario: MANDA LA MARCA — el azul de acción es el
     registrado #1b52c9 (no el #2563EB de la propuesta) y el institucional el
     navy del kit. Son ALIAS: apuntan a los tokens de marca de arriba para que
     las hojas nuevas hablen en semántica sin duplicar valores. */
  --color-institucional: var(--brand-navy);      /* cabeceras, pie, cromo */
  --color-accion:        var(--brand-azul);      /* botones primarios, enlaces */
  --color-fondo-app:     var(--surface-page);    /* fondo general de página */
  --color-texto:         var(--text-primary);
  --color-texto-suave:   var(--text-secondary);
  /* deshabilitado con contraste suficiente (texto 4a5666 sobre eef2f6 = 7.2:1) */
  --color-disabled-bg:   #eef2f6;
  --color-disabled-text: #4a5666;
  /* objetivo táctil mínimo (WCAG 2.5.8) — lo consume el Bloque 10 */
  --target-min: 24px;

  /* --- cabecera unificada (§8: mismas medidas para .shell-header/.barra/
         .cabecera; el fondo/borde ya los unifica lps-marca.css) ------------- */
  --header-min-height: 52px;
  --header-padding-y: 8px;
  --header-padding-x: 16px;
  --header-logo-height: 34px;
  --header-gap: 12px;

  /* --- controles ----------------------------------------------------------- */
  --control-height: 2.4rem;   /* la altura única que alinea etiquetas de filtros */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;

  /* --- capas --------------------------------------------------------------- */
  --z-header: 10;
  --z-modal: 100;
  --z-toast: 999;
  --z-aviso-revision: 99999;   /* solo herramienta de revisión, nunca producto */
}

/* Breakpoints de referencia (documentales: CSS no permite var() en @media):
   1920 / 1440 / 1366 / 768 / 560 / 390 */

/* --- logotipo: variantes explícitas (§2) — cuatro, sin quinta ------------- */
.logo-horizontal-blanco{ content: url("/assets/marca/logos/lps_blanco_600.png"); }
.logo-horizontal-color{  content: url("/assets/marca/logos/lps_color_600.png"); }
.logo-compacto-blanco{   content: url("/assets/marca/logos/lps_blanco_sintagline_600.png"); }
.logo-compacto-color{    content: url("/assets/marca/logos/lps_color_sintagline_600.png"); }

/* --- cabeceras: medidas compartidas (el color ya lo pone lps-marca.css) --- */
.shell-header, .barra, .cabecera{
  min-height: var(--header-min-height);
  padding: var(--header-padding-y) var(--header-padding-x);
  gap: var(--header-gap);
}
.shell-header .lpsm-logo, .barra .lpsm-logo, .cabecera .lpsm-logo{
  height: var(--header-logo-height);
}

/* --- nombre de módulo: completo y corto (§4) ------------------------------
   El corto SOLO aparece cuando el espacio es reducido; el completo queda
   disponible por el atributo title del contenedor (ayuda accesible). */
.lpsm-sistema-corto{ display:none; }
@media (max-width: 560px){
  .lpsm-sistema{ display:none; }
  .lpsm-sistema-corto{ display:inline; font-size:14px; font-weight:700; color:#fff; white-space:nowrap; }
}

/* --- estados de control (§6.8) ------------------------------------------- */
:focus-visible{ outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
[disabled], .is-disabled{ opacity:.5; cursor:not-allowed; }
.is-loading{ position:relative; pointer-events:none; opacity:.7; }