/* Tema claro de todo el sitio. Cada página define sus colores oscuros en :root; aquí se reemplazan cuando
   <html data-theme="light">. El atributo lo pone el script del <head> (preferencia guardada o la del sistema)
   y lo cambia el botón sol/luna de static/tema.js. Ajustes propios de una página van en el <style> de esa página.

   Las escalas se invierten: el paso 900 (fondo teñido en oscuro) pasa a ser un tinte claro y el 100–300
   (texto claro sobre oscuro) pasa a ser oscuro, así las reglas existentes conservan su contraste. */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f5f5fa;
  --color-surface: #ffffff;
  --color-surface-2: #eeeef5;
  --color-text: #1a1c2b;
  --color-accent: #5d4fb3;   /* 6.6:1 sobre blanco: sirve para texto, enlaces y botones con texto claro */
  --color-accent-2: #6a63a3;
  --color-divider: color-mix(in srgb, #1a1c2b 13%, transparent);

  --color-neutral-100: #1f2130;
  --color-neutral-200: #2e3140;
  --color-neutral-300: #444858;
  --color-neutral-400: #5d6172;
  --color-neutral-500: #7a7e90;
  --color-neutral-600: #9397ab;
  --color-neutral-700: #b4b8cb;
  --color-neutral-800: #dcdfea;
  --color-neutral-900: #eceef5;

  --color-accent-100: #211c3e;
  --color-accent-200: #362c6b;
  --color-accent-300: #4a3d96;
  --color-accent-400: #4a3d96;  /* hover de botones sólidos: más oscuro que el acento */
  --color-accent-500: #796cbf;
  --color-accent-600: #968ae0;
  --color-accent-700: #c3baf5;
  --color-accent-800: #dcd6fa;
  --color-accent-900: #eeebfd;

  --color-accent-2-100: #221f3a;
  --color-accent-2-200: #36315d;
  --color-accent-2-300: #4b4581;
  --color-accent-2-400: #5c5783;
  --color-accent-2-500: #7972a9;
  --color-accent-2-600: #9690c9;
  --color-accent-2-700: #c4c0e6;
  --color-accent-2-800: #dddbf2;
  --color-accent-2-900: #efeefa;

  --color-section: #e9e8fa;
  --color-section-glow: #d6d2f7;
  --color-section-ghost: #bdb6ef;

  --color-ok: #1d7a4c;
  --color-warn: #8a5a00;
  --color-error: #b3261e;

  --shadow-sm: 0 0 0 1px #dcdfea;
  --shadow-md: 0 0 0 1px #c9ccd9, 0 6px 18px rgba(26, 28, 43, .10);
  --shadow-lg: 0 0 0 1px #b4b8cb, 0 16px 40px rgba(26, 28, 43, .16);
}
html[data-theme="light"] { background: var(--color-bg); }

/* El logo es negro y en oscuro se invierte; en claro va tal cual (incluye los que llevan filter en línea). */
:root[data-theme="light"] img[src$="4e41e133.png"] { filter: none !important; }

/* Interruptor apagado: un poco más de contraste sobre fondo claro. */
:root[data-theme="light"] input[type="checkbox"]:not(.choice *)::before { box-shadow: 0 1px 4px rgba(26, 28, 43, .28); }

/* Botón sol/luna (lo inserta static/tema.js en el encabezado). */
.tema-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text); cursor: pointer; font-size: 22px; }
.tema-btn:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.tema-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* El ícono no depende de que la página defina .ms (sí necesita la fuente Material Symbols Rounded). */
.tema-btn .ms { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 22px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; }
.tema-btn .tema-luna, :root[data-theme="light"] .tema-btn .tema-sol { display: none; }
:root[data-theme="light"] .tema-btn .tema-luna { display: inline-block; }
header.top > .tema-btn { margin-left: auto; margin-right: -8px; }