@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap');
/* =============================================================================
   Tema: Mecalux
   Paleta derivada del logotipo: azul corporativo #015198.

   Se activa con THEME=mecalux en el .env.
   Este archivo sólo redefine los tokens de marca; toda la estructura y los
   componentes viven en style.css y no cambian entre temas.

   Nota sobre el acento: la marca Mecalux es monocroma, sólo azul. Como la
   interfaz necesita distinguir los estados positivos (presente, activa,
   certificado emitido) de los informativos, el verde no sale de la marca sino
   que es un color funcional, elegido sobrio para no competir con el azul.
   ========================================================================== */

:root {
  --brand-name: 'Mecalux';

  /* Marca */
  --brand-900: #0A2A4F;   /* barra lateral y fondos oscuros */
  --brand-800: #0D3866;
  --brand-700: #015198;   /* primario, el azul del logotipo */
  --brand-600: #0A63B0;
  --brand-500: #1170C2;   /* activo, enlaces, foco */
  --brand-100: #CBE0F2;
  --brand-50:  #EAF2FA;

  /* Acento funcional, no de marca */
  --accent-600: #12795A;  /* legible sobre fondo claro */
  --accent-500: #2AA87E;  /* acento pleno, sobre fondo oscuro */
  --accent-100: #C2E8DA;
  --accent-50:  #E7F6F0;

  /* Neutros, levemente enfriados hacia el azul */
  --ink:        #15212E;
  --ink-soft:   #33475C;
  --muted:      #5C7086;
  --faint:      #8A9CAF;
  --line:       #DEE5ED;
  --line-soft:  #EDF1F6;
  --canvas:     #F4F7FA;
  --canvas-alt: #FAFCFD;

  /* Tipografía: el logotipo es una grotesca pesada y condensada, así que
     Archivo acompaña mejor que una geométrica redondeada. */
  --sans:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Archivo', 'Source Sans 3', system-ui, sans-serif;

  /* Sombras teñidas del azul de marca */
  --sh-sm: 0 1px 2px rgba(10,42,79,.07);
  --sh:    0 2px 8px rgba(10,42,79,.08), 0 1px 2px rgba(10,42,79,.05);
  --sh-lg: 0 18px 48px rgba(10,42,79,.22);
}

/* Fondo del ingreso */
.login-page {
  background-image:
    radial-gradient(circle at 18% 12%, rgba(17,112,194,.30), transparent 45%),
    radial-gradient(circle at 82% 88%, rgba(1,81,152,.55), transparent 50%);
}

/* En el kiosco el botón principal va en azul claro sobre el fondo oscuro:
   el verde funcional queda reservado para el resultado del escaneo. */
.kiosk .btn-primary { background: var(--brand-500); color: #fff; }
.kiosk .btn-primary:hover:not(:disabled) { background: #1C82D9; }
.kiosk select:focus, .kiosk input:focus {
  border-color: #56A8E8;
  box-shadow: 0 0 0 3px rgba(86,168,232,.28);
}
.kiosk .code-input:focus { border-color: #56A8E8; box-shadow: 0 0 0 4px rgba(86,168,232,.24); }
.sidebar :focus-visible { outline-color: #56A8E8; }

/* En la fila activa del menú el ícono va en azul claro: el verde funcional
   quedaría fuera de lugar sobre el azul de marca. */
.nav-item.active .ico { color: #7FC2F0; }