/* theme.css — modo claro/oscuro de la portada (2026-11). Se carga DESPUÉS de /assets/nocturne/tokens.css.
   Los colores viven en tokens (--color-*, --th-*); aquí solo lo que no se puede expresar con un token:
   lockup del logo, conmutador de tema, botón de la banda violeta y los matices del claro. */

/* — Logo: el lockup «-dark» tiene texto blanco (para fondo oscuro); el «-light», texto navy (para fondo claro) — */
.th-logo-on-light { display: none !important; }
html[data-theme="light"] .th-logo-on-dark { display: none !important; }
html[data-theme="light"] .th-logo-on-light { display: block !important; }

/* — Conmutador de tema (misma especificación que las subpáginas) — */
.th-theme-toggle {
  flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-neutral-300);
}
.th-theme-toggle:hover { color: var(--color-text); }
.th-theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.th-theme-toggle svg { width: 16px; height: 16px; display: block; }
.th-theme-row {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 12px; padding: 16px 0;
  border-bottom: 1px solid var(--color-divider); font-size: 16px; font-weight: 500; color: var(--color-text);
}
.th-theme-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.th-theme-row svg { width: 18px; height: 18px; flex: none; color: var(--color-neutral-300); }

/* — Banda violeta «How»: botón secundario — */
.th-band-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px;
  border-radius: var(--radius-md); font-size: 14px; font-weight: 500;
  background: var(--th-band-btn-bg); color: var(--th-band-btn-fg);
}
.th-band-btn:hover { background: var(--th-band-btn-bg-h); color: var(--th-band-btn-fg-h); }
.th-band-btn:focus-visible { outline: 2px solid var(--th-on-brand); outline-offset: 3px; }

/* — Cabecera en pantallas estrechas: conmutador + EN/ES + burger caben en 375 px — */
@media (max-width: 640px) {
  .th-hbar { gap: 10px !important; }
  .th-lang-ico { display: none !important; }
  .th-langwrap { gap: 6px !important; }
}

/* — Cambio de tema sin fundidos escalonados: durante el cambio se anulan las transiciones de color — */
html.th-theme-switching *, html.th-theme-switching *::before, html.th-theme-switching *::after { transition: none !important; }

/* — Matices del claro — */
html[data-theme="light"] body { background: var(--color-bg); }
html[data-theme="light"] a:hover { color: var(--color-accent-200); }
html[data-theme="light"] .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }
html[data-theme="light"] .tag-outline { border-color: color-mix(in srgb, var(--color-accent) 70%, transparent); }
/* El navegador pinta los campos y la barra de scroll con el esquema del tema (color-scheme viene de tokens.css). */
html[data-theme="light"] .input { background: #fff; }
html[data-theme="light"] .input:hover { border-color: color-mix(in srgb, var(--color-text) 40%, transparent); }