/* ===========================================================================
   MARCA LPS — LOGISTICA PROFESIONAL · JUN COMPANY, S.A. de C.V.
   Capa de identidad visual comun a todas las paginas.

   ---------------------------------------------------------------------------
   DOS COSAS QUE HAY QUE SABER ANTES DE TOCAR ESTE ARCHIVO
   ---------------------------------------------------------------------------

   1) LOS PREFIJOS SON --lpsm-, NO --lps-.
      `ot.css` ya declara en :root un juego propio con el prefijo --lps-, y
      entre ellos `--lps-azul: #0b3d6b` y `--lps-azul-claro: #1769aa`. Una
      primera version de esta hoja uso los mismos nombres con los valores del
      kit de marca. Como ambas hojas apuntan a :root, habria ganado la que se
      cargara ultima — y el orden cambia segun la pagina. Resultado: la interfaz
      de OT y catalogos habria cambiado de color en unas paginas si y en otras
      no, sin que nadie lo hubiera pedido. El prefijo propio lo hace imposible.

   2) LA APLICACION NO ES DE UN SOLO TEMA.
      Nueve paginas son CLARAS (ot.css / usuarios.css / facturacion.css:
      fondo #f4f7fb, cabecera blanca) y solo index.html es OSCURA
      (design-system.css: fondo #0e151d). El azul de marca se comporta muy
      distinto en cada una:

          #1b52c9 sobre blanco ......... 6.78:1  AA   -> uso directo
          #1b52c9 sobre #f4f7fb ........ 6.30:1  AA   -> uso directo
          #1b52c9 sobre #0e151d ........ 2.71:1  NO   -> ilegible
          #5b8cf5 sobre #0e151d ........ 5.70:1  AA   -> tinte para la oscura
          blanco  sobre #1b52c9 ........ 6.78:1  AA   -> texto sobre relleno
          blanco  sobre #12395c ....... 11.89:1  AA   -> cabecera navy

      Por eso el azul de marca entra tal cual en las paginas claras y aclarado
      en la oscura. La marca se respeta; la legibilidad no se negocia.
   =========================================================================== */

:root{
  /* --- Color oficial de la marca (kit LPS) -------------------------------- */
  --lpsm-navy:        #12395c;   /* cabeceras */
  --lpsm-navy-deep:   #0e2e4d;   /* pie */
  --lpsm-azul:        #1b52c9;   /* azul del logotipo */
  --lpsm-azul-claro:  #e8f1f9;   /* superficies claras de apoyo */

  /* --- Tintes derivados para superficies oscuras ---------------------------
     CUIDADO CON EL FONDO DE REFERENCIA. --lpsm-azul-texto alcanza AA sobre la
     pagina OSCURA (#0e151d, 5.70:1) pero NO sobre la cabecera navy (#12395c,
     3.69:1: solo texto grande). La revision visual R2 encontro esa cifra
     presentada como si valiera para navy. Para enlaces sobre navy o sobre el
     pie usar --lpsm-azul-enfasis: 4.90:1 en navy y 5.71:1 en el pie. */
  --lpsm-azul-texto:  #5b8cf5;   /* enlaces sobre OSCURO #0e151d  AA 5.70:1 — NO sobre navy */
  --lpsm-azul-enfasis:#7aa5ff;   /* enfasis sobre oscuro AA 7.57:1 · enlace sobre navy 4.90:1 */
  --lpsm-sobre-navy:  #bcd3ea;   /* texto secundario en navy AA 7.73:1 */
}

/* ===========================================================================
   1. LOGOTIPO
   El PNG del kit lleva fondo TRANSPARENTE. El que habia antes en el arbol
   (assets/LPS_LOGO_OFICIAL.png) es 273x125 en RGB, es decir SIN canal alfa:
   sobre cualquier fondo que no fuera blanco se veia como un recuadro. Ademas
   se mostraba a mayor tamano del que tiene, con la perdida de nitidez
   consiguiente. El del kit es 600x295 RGBA.
   =========================================================================== */
.lpsm-logo{ height:34px; width:auto; display:block; flex:0 0 auto; }
.lpsm-logo--grande{ height:46px; }
.lpsm-logo--acceso{ max-width:200px; height:auto; }
.lpsm-logo--pie{ height:24px; }

/* Bloque de marca: logotipo + razon social. Comun a las tres cabeceras. */
.lpsm-marca{
  display:flex; align-items:center; gap:10px;
  padding-right:14px; border-right:1px solid rgba(255,255,255,.16);
}
.lpsm-marca .lpsm-razon{ display:flex; flex-direction:column; line-height:1.1; gap:1px; }
.lpsm-marca .lpsm-empresa{
  font-size:9.5px; letter-spacing:.9px; text-transform:uppercase;
  color: var(--lpsm-sobre-navy); font-weight:700; white-space:nowrap;
}
.lpsm-marca .lpsm-sistema{
  font-size:14px; font-weight:700; color:#fff; line-height:1.15; white-space:nowrap;
}

/* ===========================================================================
   2. CABECERA INSTITUCIONAL
   Las tres variantes historicas —`.cabecera` (index), `.shell-header` (paginas
   de modulo) y `.barra` (facturacion, usuarios, mi-perfil)— nacieron por
   separado, con fondos distintos: una oscura, otra blanca, otra propia. La
   marca las unifica en el navy institucional SIN reescribir su maquetacion:
   cada una conserva su distribucion interna (nav, chips, botones).
   =========================================================================== */
.cabecera, .shell-header, .barra{
  background: linear-gradient(180deg, var(--lpsm-navy) 0%, var(--lpsm-navy-deep) 100%);
  border-bottom: 3px solid var(--lpsm-azul);
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
}

/* Sobre navy, el contenido heredado de esas cabeceras debe verse. Se aclara
   solo el texto plano; los botones y chips conservan su propio estilo. */
.cabecera > *:not(.lpsm-marca):not(button):not(.nav),
.shell-header > *:not(.lpsm-marca):not(button):not(.nav),
.barra > *:not(.lpsm-marca):not(button):not(.nav){
  color: var(--lpsm-sobre-navy);
}
.shell-header .chip{ background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.22); }

/* El bloque de marca en TEXTO que ya existia en index.html se oculta: la razon
   social pasa a estar en el logotipo y no debe aparecer dos veces. */
.cabecera .marca{ display:none; }

/* ===========================================================================
   3. PIE INSTITUCIONAL
   Exigido por marca registrada: razon social y simbolo (R).
   =========================================================================== */
.lpsm-pie{
  background: var(--lpsm-navy-deep); color: var(--lpsm-sobre-navy);
  text-align:center; padding:16px 12px; margin-top:28px;
  font-size:12px; letter-spacing:.2px;
  border-top:3px solid var(--lpsm-azul);
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.lpsm-pie b{ color:#fff; font-weight:700; }
.lpsm-pie .lpsm-sep{ opacity:.45; }

/* ===========================================================================
   4. ACENTOS DE MARCA
   =========================================================================== */
.lpsm-btn{
  background: var(--lpsm-azul); color:#fff; border:0; border-radius:8px;
  padding:9px 16px; font-weight:600; cursor:pointer; text-decoration:none;
  display:inline-block;
}
.lpsm-btn:hover{ filter:brightness(1.10); }

/* Enlaces: azul de marca en las paginas claras... */
a.lpsm-link{ color: var(--lpsm-azul); text-decoration:none; }
a.lpsm-link:hover{ text-decoration:underline; }
/* ...y aclarado dentro de la pagina oscura, donde el azul puro no alcanza AA. */
.tema-oscuro a.lpsm-link{ color: var(--lpsm-azul-texto); }

/* ===========================================================================
   5. MOVIL
   Por debajo de 560px se retira la razon social larga y se reduce el
   logotipo. El simbolo de la marca no desaparece nunca.
   =========================================================================== */
@media (max-width:560px){
  .lpsm-logo{ height:28px; }
  .lpsm-logo--grande{ height:34px; }
  .lpsm-marca .lpsm-empresa{ display:none; }
  .lpsm-marca{ padding-right:10px; gap:8px; }
  .lpsm-pie{ font-size:11px; }
}

@media (prefers-reduced-motion: reduce){
  .lpsm-btn{ transition:none; }
}