/* ==========================================================================
   Helgen · tokens del sitio drogheda.helgen.online
   Un solo archivo de colores y letras para el sitio (Material), los tableros y
   las actas. Oscuro primero; el modo claro usa los mismos nombres.

   - Dentro del sitio (Material) el modo lo decide <body data-md-color-scheme>:
     "slate" = oscuro (por omisión), "default" = claro.
   - Las páginas sueltas (actas, cuenta) usan <html data-tema="claro"> cuando la
     persona eligió claro en el sitio (lo pone js/tema.js).

   Reglas de la casa: sin emoji, sin MAYÚSCULAS de adorno, sin tarjetas con
   borde de color a la izquierda. El cian solo marca lo que está vivo
   (activo, en curso, foco). Íconos de línea de 1.8 px con puntas redondas.
   ========================================================================== */

/* ---- Letras (latin, ≈ 76 KB en total; licencia OFL en docs/fonts/) ------ */
@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/league-spartan-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-mono-latin.woff2") format("woff2");
}

/* ---- Oscuro (por omisión) ------------------------------------------------ */
:root,
[data-md-color-scheme="slate"] {
  --hg-fuente-titulo: "League Spartan", "Futura", "Avenir Next", system-ui, sans-serif;
  --hg-fuente: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hg-fuente-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* superficies */
  --hg-fondo: #0E1524;        /* Noche: fondo de página */
  --hg-barra: #0B111D;        /* Barra: barra lateral y encabezado */
  --hg-plano: #141D30;        /* Plano: tarjetas y campos */
  --hg-plano-2: #111A2C;      /* paneles y celdas */
  --hg-elevado: #1A2540;      /* selección y menú activo */
  --hg-linea: #233049;        /* bordes */
  --hg-linea-2: #2E3D5C;      /* bordes de controles */
  --hg-linea-suave: #1A2438;  /* divisiones discretas */
  --hg-indigo: #2C3C5B;       /* índigo Helgen */
  --hg-cabecera: #0B111D;     /* encabezado del sitio */
  --hg-sobre-cabecera: #E7ECF5;

  /* texto */
  --hg-texto: #E7ECF5;        /* Niebla */
  --hg-texto-fuerte: #F2F5FA;
  --hg-texto-suave: #C3CCDD;
  --hg-texto-2: #A9B4CB;      /* Secundario */
  --hg-texto-3: #8C99B5;      /* Terciario: etiquetas y conteos */

  /* acento: solo lo vivo */
  --hg-acento: #51F3DA;       /* Cian */
  --hg-sobre-acento: #0B111D;
  --hg-acento-suave: rgba(81, 243, 218, 0.14);
  --hg-foco: #51F3DA;
  --hg-liga: #7FE9D8;
  --hg-liga-hover: #51F3DA;
  --hg-teal: #17A08C;

  /* estados */
  --hg-curso: #51F3DA;   --hg-curso-bg: #133A40;
  --hg-hecho: #4FD8BE;   --hg-hecho-bg: #123A36;   --hg-hecho-icono: #2FBF9F;
  --hg-bloqueado: #FF9494; --hg-bloqueado-bg: #3A1F27;
  --hg-aviso: #F2C46B;   --hg-aviso-bg: #3A3020;
  --hg-info: #9DB8FF;    --hg-info-bg: #1B2847;
  --hg-pend: #8C99B5;    --hg-pend-bg: #1F2A42;
  --hg-halo-curso: rgba(81, 243, 218, 0.22);
  --hg-halo-bloqueado: rgba(255, 148, 148, 0.22);

  /* ruta a producción: lo hecho va en blanco (21-oct: «la tarjeta en blanco, no en verde») */
  --hg-ruta: #F2F5FA;
  --hg-ruta-linea: rgba(242, 245, 250, 0.82);

  /* pistas del tablero */
  --hg-p-ingenieria: #8FB0FF;
  --hg-p-produccion: #63D6A8;
  --hg-p-mecanica: #E9B865;
  --hg-p-compras: #C6A8FF;
  --hg-p-campo: #FF9E70;
  --hg-p-gestion: #F08BC6;
  /* semáforo del proyecto y de cada sitio (22-oct) */
  --hg-rojo: #FF5F5F;    --hg-rojo-bg: #3D171D;   --hg-rojo-linea: #8F2F38;
  --hg-ambar: #F5C35C;   --hg-ambar-bg: #3A2F1A;
  --hg-verde: #45D6A0;   --hg-verde-bg: #11372C;

  /* versiones de tarjeta: etiqueta de serigrafía (texto y borde) */
  --hg-v55: #4FD8BE; --hg-v55-borde: rgba(79, 216, 190, 0.42);
  --hg-v56: #A9C1FF; --hg-v56-borde: rgba(169, 193, 255, 0.42);
  --hg-v57: #8BE3A7; --hg-v57-borde: rgba(139, 227, 167, 0.42);
  --hg-v6:  #F2C46B; --hg-v6-borde:  rgba(242, 196, 107, 0.42);
  --hg-v4:  #B9C3D8; --hg-v4-borde:  rgba(185, 195, 216, 0.38);
  --hg-v3:  #9AA3B5; --hg-v3-borde:  rgba(154, 163, 181, 0.36);
  --hg-fw:  #7FE9D8; --hg-fw-borde:  rgba(127, 233, 216, 0.38);

  /* forma */
  --hg-radio: 10px;
  --hg-radio-campo: 9px;
  --hg-radio-chico: 7px;
  --hg-sombra: 0 18px 48px rgba(3, 7, 15, 0.55);
  --hg-sombra-suave: 0 1px 2px rgba(3, 7, 15, 0.35);
}

/* ---- Claro: mismos nombres ----------------------------------------------- */
[data-md-color-scheme="default"],
html[data-tema="claro"],
:where(html:has(> body[data-md-color-scheme="default"])) {
  --hg-fondo: #EFF1F5;        /* Mist */
  --hg-barra: #F7F8FB;
  --hg-plano: #FFFFFF;
  --hg-plano-2: #F6F7FA;
  --hg-elevado: #E2E8F3;
  --hg-linea: #D5DAE5;
  --hg-linea-2: #C2CADA;
  --hg-linea-suave: #E1E5EE;
  --hg-indigo: #2C3C5B;
  --hg-cabecera: #2C3C5B;     /* el encabezado conserva el índigo de la marca */
  --hg-sobre-cabecera: #FFFFFF;

  --hg-texto: #1F2A40;
  --hg-texto-fuerte: #141C2E;
  --hg-texto-suave: #34415C;
  --hg-texto-2: #4A5875;
  --hg-texto-3: #65728D;

  --hg-acento: #14685C;       /* sobre claro, el cian no se lee: teal oscuro */
  --hg-sobre-acento: #FFFFFF;
  --hg-acento-suave: rgba(20, 104, 92, 0.10);
  --hg-foco: #17A08C;
  --hg-liga: #14685C;
  --hg-liga-hover: #0E4F46;
  --hg-teal: #17A08C;

  --hg-curso: #0E6E62;   --hg-curso-bg: #DDF5F1;
  --hg-hecho: #13806F;   --hg-hecho-bg: #E2F5F1;   --hg-hecho-icono: #17A08C;
  --hg-bloqueado: #B42318; --hg-bloqueado-bg: #FDECEC;
  --hg-aviso: #8A5A00;   --hg-aviso-bg: #FFF3D6;
  --hg-info: #2F55B5;    --hg-info-bg: #E6EDFC;
  --hg-pend: #65728D;    --hg-pend-bg: #E8ECF3;
  --hg-halo-curso: rgba(20, 104, 92, 0.18);
  --hg-halo-bloqueado: rgba(180, 35, 24, 0.16);

  --hg-ruta: #1F2A40;
  --hg-ruta-linea: rgba(31, 42, 64, 0.78);

  --hg-p-ingenieria: #3D63C9;
  --hg-p-produccion: #1E8A5E;
  --hg-p-mecanica: #A26B0A;
  --hg-p-compras: #7A4FD0;
  --hg-p-campo: #C2531F;
  --hg-p-gestion: #B0336F;
  --hg-rojo: #C01A1A;    --hg-rojo-bg: #FDE7E7;   --hg-rojo-linea: #E9A3A3;
  --hg-ambar: #A15F00;   --hg-ambar-bg: #FFF0CF;
  --hg-verde: #12805A;   --hg-verde-bg: #E0F4EC;

  --hg-v55: #13806F; --hg-v55-borde: rgba(19, 128, 111, 0.45);
  --hg-v56: #3552A8; --hg-v56-borde: rgba(53, 82, 168, 0.45);
  --hg-v57: #2E7D46; --hg-v57-borde: rgba(46, 125, 70, 0.45);
  --hg-v6:  #8F6208; --hg-v6-borde:  rgba(143, 98, 8, 0.45);
  --hg-v4:  #4F5B75; --hg-v4-borde:  rgba(79, 91, 117, 0.40);
  --hg-v3:  #646B7A; --hg-v3-borde:  rgba(100, 107, 122, 0.38);
  --hg-fw:  #14685C; --hg-fw-borde:  rgba(20, 104, 92, 0.40);

  --hg-sombra: 0 18px 48px rgba(31, 42, 64, 0.22);
  --hg-sombra-suave: 0 1px 2px rgba(31, 42, 64, 0.08);
}

/* Barras de desplazamiento y controles nativos del mismo modo */
html { color-scheme: dark; }
html[data-tema="claro"],
:where(html:has(> body[data-md-color-scheme="default"])) { color-scheme: light; }
[data-md-color-scheme="slate"] { color-scheme: dark; }
[data-md-color-scheme="default"] { color-scheme: light; }

/* ---- Etiquetas de versión de tarjeta (sirven en todo el sitio) ----------- */
.badge-v3, .badge-v4, .badge-v55, .badge-v56, .badge-v57, .badge-v6, .badge-fw {
  display: inline-block;
  font-family: var(--hg-fuente-mono);
  font-size: 0.78em;
  font-weight: 500;
  line-height: 1;
  padding: 0.28em 0.5em;
  border-radius: 4px;
  border: 1px solid currentColor;
  background: transparent;
  white-space: nowrap;
  vertical-align: 0.08em;
  letter-spacing: 0;
}
.badge-v55 { color: var(--hg-v55); border-color: var(--hg-v55-borde); }
.badge-v56 { color: var(--hg-v56); border-color: var(--hg-v56-borde); }
.badge-v57 { color: var(--hg-v57); border-color: var(--hg-v57-borde); }
.badge-v6  { color: var(--hg-v6);  border-color: var(--hg-v6-borde); }
.badge-v4  { color: var(--hg-v4);  border-color: var(--hg-v4-borde); }
.badge-v3  { color: var(--hg-v3);  border-color: var(--hg-v3-borde); }
.badge-fw  { color: var(--hg-fw);  border-color: var(--hg-fw-borde); font-family: var(--hg-fuente); font-weight: 600; }

/* Íconos de línea (los SVG del sitio llevan esta clase) */
.hg-i {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}