/* Temas alternativos, en la misma familia que el "nocturne" original (que se
   queda como estaba en nocturne.css y hace de tema por defecto). Cada uno
   redefine el mismo subconjunto de variables — el resto de la rampa se
   hereda del tema base, igual que en el prototipo de diseño de referencia.

   A propósito, NINGÚN tema toca --color-accent ni su rampa: ese es el color
   de marca que cada organización elige en Configuración → Organización
   (branding.css lo fija en :root), y debe verse igual sin importar qué tema
   claro/oscuro tenga elegido cada persona — los temas de aquí solo cambian
   el ambiente (fondo/superficie/texto), nunca el acento de marca. */

[data-theme="teal"] {
  --color-bg: #0e1c1a; --color-surface: #15302d; --color-text: #e5f0ee;
  --color-divider: rgba(229,240,238,.10);
  --color-neutral-100: #e5f0ee; --color-neutral-300: #a9cbc5; --color-neutral-400: #7ba39c; --color-neutral-800: #1d3d39;
  --color-section: #0f403a; --color-section-glow: #1c6b62;
}

[data-theme="rose"] {
  --color-bg: #1c1119; --color-surface: #2b1c26; --color-text: #f2e6ec;
  --color-divider: rgba(242,230,236,.10);
  --color-neutral-100: #f2e6ec; --color-neutral-300: #d3b8c5; --color-neutral-400: #a37f92; --color-neutral-800: #3a2531;
  --color-section: #4a1e38; --color-section-glow: #7a3560;
}

/* "Día" — réplica exacta de la paleta clara de hexoraleague.es (fondo/tarjeta/
   texto/bordes) salvo el acento, que sigue siendo el de marca de tu organización. */
[data-theme="day"] {
  --color-bg: #fafafa; --color-surface: #ffffff; --color-text: #1e293b;
  --color-divider: #e5e7eb;
  --color-neutral-100: #1e293b; --color-neutral-300: #334155; --color-neutral-400: #64748b; --color-neutral-800: #f1f5f9;
  --color-section: #173b6c; --color-section-glow: #2f6fd6;
  --shadow-sm: 0 1px 2px rgba(30,41,59,.06), 0 1px 3px rgba(30,41,59,.08);
}

/* Selector de tema, en la barra lateral */
.theme-picker { display: flex; gap: 7px; padding: var(--space-2) var(--space-3) var(--space-4); }
.theme-swatch {
  width: 20px; height: 20px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid var(--color-divider); background-clip: padding-box;
}
.theme-swatch:hover { border-color: var(--color-neutral-400); }
.theme-swatch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.theme-swatch.is-active { border-color: var(--color-text); }
.theme-swatch-nocturne { background: #3b82f6; }
.theme-swatch-teal { background: #56c2b6; }
.theme-swatch-rose { background: #d0819f; }
.theme-swatch-day { background: #173b6c; }