/*
 * Branding de instancia — QUANTUM (Confiabilidad Nutricional)
 *
 * Se carga DESPUÉS de globals.css, así que sobrescribe las variables de tema.
 * Colores en HSL sin la función hsl(): "H S% L%".
 *
 * Color de marca extraído del logo oficial: #707272 → HSL 180 1% 44%
 * (gris neutro; el logotipo es texto blanco sobre ese gris, por eso el header
 * en --primary queda a tono con el fondo propio del logo).
 */

:root {
  /* Marca: header del dashboard, botones y links */
  --primary: 180 1% 32%;            /* #515252 — gris Quantum oscurecido */
  --primary-foreground: 0 0% 100%;  /* texto blanco sobre el gris */

  /* Fondo de la pantalla de login y superficies suaves */
  --secondary: 180 3% 94%;
  --secondary-foreground: 180 2% 20%;

  /* Hovers y elementos destacados */
  --accent: 180 3% 88%;
  --accent-foreground: 180 2% 20%;

  /* Fondo general, apenas tibio hacia el gris de marca */
  --background: 180 5% 98%;

  /* Foco de inputs: sigue al primario */
  --ring: 180 1% 32%;

  --radius: 0.5rem;

  /* Gráficos: dorado de marca + gris de marca.
   * El dorado nace del crema corporativo (#F2EDC9) intensificado para que se lea
   * sobre fondo blanco. chart-1 y chart-2 son el par "actual vs. comparado" del
   * dashboard: dorado vs. gris da contraste real (el gris contra gris no se leía).
   * chart-3 conserva su rol de tono claro (meta / resto del gauge). */
  --chart-1: 50 70% 62%;   /* #E2CB5A — dorado Quantum, serie principal */
  --chart-2: 180 1% 32%;   /* #515252 — gris de marca, serie comparada */
  --chart-3: 52 62% 86%;   /* crema claro — meta / gauge */
  --chart-4: 180 2% 47%;   /* gris medio */
  --chart-5: 45 58% 40%;   /* dorado oscuro / ámbar */
}

/*
 * Tamaño del logo principal en el header del dashboard.
 * El componente lo fija en 61px (h-[61px]); acá lo bajamos a 49px (−15% y luego
 * −5%, o sea −20% del original), sin tocar src/. El ancho queda en auto, así
 * que conserva la proporción. Se limita a `header` para no afectar el mismo
 * logo en las páginas de recuperación de contraseña, que va a 40px.
 */
header img[alt="Logo de la empresa"] {
  height: 49px;
}

.dark {
  /* En oscuro el gris de marca se aclara para mantener contraste */
  --primary: 180 2% 62%;
  --primary-foreground: 180 5% 10%;

  --secondary: 180 3% 16%;
  --secondary-foreground: 0 0% 96%;

  --accent: 180 3% 22%;
  --accent-foreground: 0 0% 96%;

  --ring: 180 2% 62%;

  /* Gráficos en oscuro: el dorado se mantiene y el gris se aclara para leerse
   * sobre fondo oscuro. */
  --chart-1: 50 72% 64%;   /* dorado, serie principal */
  --chart-2: 180 2% 72%;   /* gris claro, serie comparada */
  --chart-3: 48 45% 36%;   /* dorado apagado — meta / gauge */
  --chart-4: 180 3% 46%;
  --chart-5: 45 60% 55%;
}