/* BM Control · tokens del sistema de diseño (ver DESIGN.md). Oscuro por defecto; "modo sol" = claro de alto contraste. */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --fuente: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* superficies */
  --fondo: #0E1016;
  --superficie: #1A1D27;
  --elevada: #232736;
  --borde: #2A2E3B;
  --borde-fuerte: #3A3F50;
  --texto: #F2F3F5;
  --texto-2: #8A8F9C;

  /* señales */
  --ahora: #6C5CE7;          /* rellenos, marcadores, bloque en curso */
  --ahora-texto: #9D92F5;    /* violeta cuando es texto */
  --accion: #D4E034;         /* acción principal */
  --sobre-accion: #0E1016;
  --accion-borde: transparent;
  --atraso: #FF5A5F;
  --ok: #2ECC71;
  --pendiente: #F5A623;
  --libre: #8EA2FF;

  /* tarjeta del reloj (clara sobre oscuro) */
  --reloj-fondo: #F4F5F7;
  --reloj-texto: #0E1016;
  --reloj-texto-2: #4A4F5C;
  --reloj-atraso: #C9282E;
  --reloj-ahora: #5847D8;

  /* forma y ritmo */
  --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
  --sombra: 0 1px 0 rgba(255,255,255,.03) inset;
  --sombra-flotante: 0 -8px 32px rgba(0,0,0,.45);
  --rayas-atraso: repeating-linear-gradient(135deg, rgba(255,90,95,.85) 0 3px, rgba(255,90,95,.18) 3px 8px);
  --rayas-almuerzo: repeating-linear-gradient(135deg, rgba(138,143,156,.45) 0 2px, transparent 2px 7px);

  /* movimiento (emil-design-eng) */
  --salida: cubic-bezier(0.23, 1, 0.32, 1);
  --mover: cubic-bezier(0.77, 0, 0.175, 1);
  --hoja: cubic-bezier(0.32, 0.72, 0, 1);
  --t-rapido: 140ms;
  --t-medio: 220ms;

  --nav-alto: 64px;
  --col-trabajador: 520px;

  /* alias del diseño anterior (estilos viejos que todavía los usen) */
  --azul: var(--superficie);
  --azul-2: var(--elevada);
  --azul-claro: var(--elevada);
  --acento: var(--ahora-texto);
  --tenue: var(--texto-2);
  --blanco: var(--superficie);
  --mal: var(--atraso);
  --pend: var(--pendiente);
  --extra: #2BB673;
  --extra-fondo: rgba(43,182,115,.16);
}

/* Modo sol: claro de alto contraste para usar a pleno sol */
:root[data-tema="claro"] {
  color-scheme: light;
  --fondo: #FFFFFF;
  --superficie: #F1F2F5;
  --elevada: #E6E8EE;
  --borde: #C9CDD6;
  --borde-fuerte: #9AA0AC;
  --texto: #0E1016;
  --texto-2: #454B57;
  --ahora-texto: #5241D9;
  --accion-borde: #8E9617;
  --atraso: #C9282E;
  --ok: #167A42;
  --pendiente: #8F5600;
  --libre: #3347C7;
  --reloj-fondo: #0E1016;
  --reloj-texto: #F2F3F5;
  --reloj-texto-2: #A9AEBA;
  --reloj-atraso: #FF6B70;
  --reloj-ahora: #9D92F5;
  --sombra: 0 1px 2px rgba(14,16,22,.08), 0 4px 16px rgba(14,16,22,.06);
  --sombra-flotante: 0 -6px 24px rgba(14,16,22,.12);
  --rayas-atraso: repeating-linear-gradient(135deg, rgba(201,40,46,.9) 0 3px, rgba(201,40,46,.15) 3px 8px);
  --rayas-almuerzo: repeating-linear-gradient(135deg, rgba(69,75,87,.45) 0 2px, transparent 2px 7px);
  --extra: #0E6B3C;
  --extra-fondo: rgba(14,107,60,.12);
}
@media (prefers-color-scheme: light) {
  :root[data-tema="auto"] {
    color-scheme: light;
    --fondo: #FFFFFF;
    --superficie: #F1F2F5;
    --elevada: #E6E8EE;
    --borde: #C9CDD6;
    --borde-fuerte: #9AA0AC;
    --texto: #0E1016;
    --texto-2: #454B57;
    --ahora-texto: #5241D9;
    --accion-borde: #8E9617;
    --atraso: #C9282E;
    --ok: #167A42;
    --pendiente: #8F5600;
    --libre: #3347C7;
    --reloj-fondo: #0E1016;
    --reloj-texto: #F2F3F5;
    --reloj-texto-2: #A9AEBA;
    --reloj-atraso: #FF6B70;
    --reloj-ahora: #9D92F5;
    --sombra: 0 1px 2px rgba(14,16,22,.08), 0 4px 16px rgba(14,16,22,.06);
    --sombra-flotante: 0 -6px 24px rgba(14,16,22,.12);
    --rayas-atraso: repeating-linear-gradient(135deg, rgba(201,40,46,.9) 0 3px, rgba(201,40,46,.15) 3px 8px);
    --rayas-almuerzo: repeating-linear-gradient(135deg, rgba(69,75,87,.45) 0 2px, transparent 2px 7px);
    --extra: #0E6B3C;
    --extra-fondo: rgba(14,107,60,.12);
  }
}