/* ==========================================================================
   Space Note · tokens del sistema de diseño
   Identidad: blancos y verdes suaves de día, negros suaves y verdes de noche;
   los colores de las calificaciones
   siguen la escala 1.0–5.0 y son independientes de los de marca (--grade-*).
   ========================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* Tipografía */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
  --font-scale: 1;
  --fs-xs: calc(0.75rem * var(--font-scale));
  --fs-sm: calc(0.8125rem * var(--font-scale));
  --fs-base: calc(0.9375rem * var(--font-scale));
  --fs-md: calc(1.0625rem * var(--font-scale));
  --fs-lg: calc(1.25rem * var(--font-scale));
  --fs-xl: calc(1.625rem * var(--font-scale));
  --fs-2xl: calc(2.125rem * var(--font-scale));
  --fs-3xl: calc(clamp(2.4rem, 5vw, 3.6rem) * var(--font-scale));
  --fs-hero: calc(clamp(2.6rem, 6.4vw, 5.2rem) * var(--font-scale));
  --lh: 1.6;
  --letter: 0;

  /* Espaciado (escala de 4px) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;

  /* Radios */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Paleta de referencia: #FFFFFF · #F7FFF7 blanco verdoso · #E8F5E9 verde muy claro · #90EE90 light green · #B7E4C7 pastel · #66BB6A medio · #4CAF50 principal · #2E5D38 oscuro · #66756A gris verdoso */

  /* Marca. --brand es el color de RELLENO (botones, indicadores, barras); su texto es --brand-ink.
     Para texto o iconos verdes sobre fondo claro se usa --brand-text (más oscuro, con contraste suficiente). */
  --brand: #4caf50;
  --brand-strong: #388e3c;
  --brand-ink: #0f2a14;
  --brand-text: #2e5d38;
  --brand-soft: #e8f5e9;
  --accent: #90ee90;
  --pastel: #b7e4c7;
  --mint: #66bb6a;
  --mint-strong: #2e7d32;
  --mint-soft: #e3f5e5;
  --coral: #f4845f;
  --coral-strong: #a8431c;
  --coral-soft: #fdebe3;
  --sun: #f2b33d;
  --sun-strong: #7a5200;
  --sun-soft: #fff4d6;
  --sky: #5ab8ff;
  --berry: #e2508d;

  /* Superficies y tinta */
  --bg: #f7fff7;
  --surface: #ffffff;
  --surface-2: #eef8ef;
  --surface-3: #e1f1e3;
  --surface-raised: #ffffff;
  --ink: #243329;
  --ink-2: #3f5646;
  --muted: #66756a;
  --faint: #8a9a8f;
  --line: #d7e8d8;
  --line-strong: #bcd6bf;
  --overlay: rgba(20, 36, 24, 0.45);

  /* Barra lateral */
  --nav-bg: #ffffff;
  --nav-ink: #3f5646;
  --nav-ink-strong: #1d3a24;
  --nav-muted: #7a8c7f;
  --nav-hover: #f0faf1;
  --nav-active-bg: #e3f5e5;
  --nav-active-ink: #2e5d38;
  --nav-line: #d7e8d8;

  /* Estados (siempre acompañados de icono + texto). El éxito es verde; el error, rojo, para no confundirse. */
  --success: #2e7d32;
  --success-soft: #e3f5e5;
  --warning: #8a5e00;
  --warning-soft: #fff3c4;
  --danger: #c0352b;
  --danger-soft: #fdeceb;
  --on-success: #ffffff;
  --on-danger: #ffffff;
  --info: var(--brand-text);
  --info-soft: var(--brand-soft);

  /* Calificaciones (escala 1.0–5.0): rojo 1.0–3.4 · amarillo 3.5–4.0 · verde 4.1–5.0.
     Independientes de la marca; ver server/services/grading.js. */
  --grade-low: #c0352b;
  --grade-low-soft: #fdeceb;
  --grade-basic: #8a5e00;
  --grade-basic-soft: #fff3c4;
  --grade-high: #2e7d32;
  --grade-high-soft: #e3f5e5;
  --grade-top: #1b6b3a;
  --grade-top-soft: #d3efdb;
  --grade-none: var(--muted);
  --grade-none-soft: var(--surface-2);

  /* Gráficos: distintas intensidades de verde y un acento cálido para distinguir series */
  --series-1: #2e7d32;
  --series-2: #66bb6a;
  --series-3: #e0a030;
  --chart-grid: #e3efe4;
  --chart-axis: #c5d8c7;
  --status-good: #43a047;
  --status-warn: #f2b33d;
  --status-critical: #d14343;

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(36, 51, 41, 0.05);
  --shadow-sm: 0 1px 3px rgba(36, 51, 41, 0.07), 0 1px 2px rgba(36, 51, 41, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(36, 51, 41, 0.14), 0 2px 6px rgba(36, 51, 41, 0.05);
  --shadow-lg: 0 24px 48px -16px rgba(36, 51, 41, 0.2), 0 4px 12px rgba(36, 51, 41, 0.05);
  --shadow-brand: 0 8px 20px -8px rgba(76, 175, 80, 0.55);
  --ring: 0 0 0 3px rgba(76, 175, 80, 0.38);
  --glow: none;

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;

  /* Estructura */
  --sidebar-w: 268px;
  --topbar-h: 64px;
  --bottombar-h: 66px;
  --content-max: 1280px;
  --tap: 44px;

  /* Fondos decorativos (sutiles) */
  --grain: radial-gradient(circle at 1px 1px, rgba(36, 51, 41, 0.045) 1px, transparent 0);
  --gradient-brand: linear-gradient(135deg, #3f9a44 0%, #2e5d38 100%);
  --gradient-sunrise: linear-gradient(135deg, #ffe08a 0%, #b7e4c7 100%);
  --gradient-aurora: radial-gradient(60% 80% at 8% 0%, rgba(144, 238, 144, 0.2), transparent 60%),
    radial-gradient(50% 60% at 96% 0%, rgba(183, 228, 199, 0.28), transparent 60%);
}

/* Tema noche: diseñado para poca luz (negros suaves, grises verdosos y verdes), no una inversión del día. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --brand: #66bb6a;
  --brand-strong: #81c784;
  --brand-ink: #0f2a14;
  --brand-text: #90ee90;
  --brand-soft: rgba(144, 238, 144, 0.13);
  --accent: #90ee90;
  --pastel: #b7e4c7;
  --mint: #66bb6a;
  --mint-strong: #90ee90;
  --mint-soft: rgba(144, 238, 144, 0.13);
  --coral: #f4845f;
  --coral-strong: #ff9d7c;
  --coral-soft: rgba(244, 132, 95, 0.15);
  --sun-strong: #ffd36e;
  --sun-soft: rgba(242, 179, 61, 0.15);
  --bg: #121512;
  --surface: #222922;
  --surface-2: #2b332b;
  --surface-3: #353f35;
  --surface-raised: #2b332b;
  --ink: #f4f7f4;
  --ink-2: #d3ddd3;
  --muted: #b0bdb0;
  --faint: #7f8d7f;
  --line: #3a463a;
  --line-strong: #4d5c4d;
  --overlay: rgba(0, 0, 0, 0.62);
  --nav-bg: #191e19;
  --nav-ink: #d3ddd3;
  --nav-ink-strong: #ffffff;
  --nav-muted: #8d9b8d;
  --nav-hover: #222922;
  --nav-active-bg: rgba(144, 238, 144, 0.12);
  --nav-active-ink: #90ee90;
  --nav-line: #2b332b;
  --success: #8ee59a;
  --success-soft: rgba(142, 229, 154, 0.13);
  --warning: #ffd166;
  --warning-soft: rgba(255, 209, 102, 0.14);
  --danger: #ff8f86;
  --danger-soft: rgba(255, 143, 134, 0.14);
  --on-success: #0f2a14;
  --on-danger: #2a0d0a;
  --grade-low: #ff8f86;
  --grade-low-soft: rgba(255, 143, 134, 0.15);
  --grade-basic: #ffd166;
  --grade-basic-soft: rgba(255, 209, 102, 0.15);
  --grade-high: #8ee59a;
  --grade-high-soft: rgba(142, 229, 154, 0.15);
  --grade-top: #b7f5c4;
  --grade-top-soft: rgba(183, 245, 196, 0.16);
  --series-1: #90ee90;
  --series-2: #4caf50;
  --series-3: #ffd166;
  --chart-grid: #2f3a2f;
  --chart-axis: #4a584a;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 10px 28px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 56px -16px rgba(0, 0, 0, 0.7);
  --shadow-brand: 0 8px 22px -10px rgba(102, 187, 106, 0.5);
  --ring: 0 0 0 3px rgba(144, 238, 144, 0.4);
  --glow: 0 0 0 1px rgba(144, 238, 144, 0.28), 0 0 16px rgba(144, 238, 144, 0.12);
  --grain: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.035) 1px, transparent 0);
  --gradient-brand: linear-gradient(135deg, #2f6b3a 0%, #234a2b 100%);
  --gradient-sunrise: linear-gradient(135deg, #e8c96a 0%, #7fbf8a 100%);
  --gradient-aurora: radial-gradient(60% 80% at 8% 0%, rgba(102, 187, 106, 0.1), transparent 60%),
    radial-gradient(50% 60% at 96% 0%, rgba(144, 238, 144, 0.06), transparent 60%);
}

/* Cambio de tema suave y breve: solo mientras se alterna (la clase se quita sola). */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease, box-shadow 260ms ease, fill 260ms ease, stroke 260ms ease !important;
}

/* Alto contraste (preferencia de accesibilidad del usuario) */
:root[data-contrast='high'] {
  --ink: #000000;
  --ink-2: #0a1a10;
  --muted: #2f3d33;
  --line: #4d6b54;
  --line-strong: #2f4a36;
  --brand-text: #14391d;
  --bg: #ffffff;
  --surface-2: #f2f2f2;
}
:root[data-theme='dark'][data-contrast='high'] {
  --ink: #ffffff;
  --ink-2: #f2f2f2;
  --muted: #e3e9e3;
  --line: #8fa38f;
  --line-strong: #b7c9b7;
  --brand-text: #b7f5c4;
  --bg: #000000;
  --surface: #0d120d;
  --surface-2: #161c16;
}

/* Lectura espaciada (apoyo para dislexia) */
:root[data-reading='spaced'] {
  --lh: 1.9;
  --letter: 0.03em;
}