/* ============================================================
   MAGNA — Modo oscuro
   Persistencia: localStorage
   ============================================================ */

:root {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #101512;
  --surface: #171d19;
  --ink: #edf2ee;
  --ink-soft: #aeb9b1;
  --ink-faint: #7f8c83;
  --line: #2c3831;
  --accent: #49b982;
  --accent-strong: #72d49f;
  --accent-tint: #19382b;
  --spark: #c9f56a;
  --danger: #f0786b;
  --danger-tint: #3a211e;
}

/* Base */
html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}

html[data-theme="dark"] ::selection {
  background: var(--spark);
  color: #101512;
}

/* Header */
html[data-theme="dark"] header.solid,
html[data-theme="dark"] header.scrolled {
  background: rgba(16, 21, 18, .92);
  border-color: var(--line);
}

html[data-theme="dark"] .nav-links a.link:hover,
html[data-theme="dark"] .btn-ghost:hover {
  color: var(--ink);
}

/* Botón de tema */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 42px;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: .86rem;
  transition: background .2s, border-color .2s, color .2s, transform .18s;
}

.theme-toggle:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.theme-toggle .theme-icon {
  font-size: 1rem;
  line-height: 1;
}

.theme-toggle .theme-label {
  display: inline;
}

/* Elementos con colores claros hardcodeados en las hojas actuales */
html[data-theme="dark"] .skip {
  background: #f1f5f2;
  color: #101512;
}

html[data-theme="dark"] .tutor {
  background: #0b100d;
  color: #edf2ee;
}

html[data-theme="dark"] .tutor h2,
html[data-theme="dark"] .tutor .tutor-points strong {
  color: #fff;
}

html[data-theme="dark"] .tutor p {
  color: #b7c2ba;
}

html[data-theme="dark"] .tutor-points li {
  border-color: rgba(255,255,255,.10);
}

html[data-theme="dark"] .nota-info {
  background: #29281d !important;
  border-color: #4b4932 !important;
  color: #d5cc88 !important;
}

/* Inputs, selects y formularios */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--ink-faint);
}

html[data-theme="dark"] input[type="file"] {
  background: var(--surface) !important;
}

/* Paneles, tablas y tarjetas */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .curso-indice,
html[data-theme="dark"] .clase-lectura,
html[data-theme="dark"] .solicitud {
  background: var(--surface);
  border-color: var(--line);
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .lista-simple li,
html[data-theme="dark"] .feed li {
  border-color: var(--line);
}

html[data-theme="dark"] .table th {
  color: var(--ink-faint);
}

html[data-theme="dark"] .btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .chip-f {
  background: var(--surface);
  color: var(--ink-soft);
  border-color: var(--line);
}

html[data-theme="dark"] .chip-f-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

/* Curso / materiales */
html[data-theme="dark"] .curso-indice a:hover {
  background: #202a24;
  color: var(--ink);
}

html[data-theme="dark"] .curso-indice a.on {
  background: var(--accent-tint);
  color: var(--accent-strong);
}

html[data-theme="dark"] .material-item {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .material-cabecera {
  background: #1d251f !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .material-visorn {
  background: #0d110f !important;
}

html[data-theme="dark"] .material-otros {
  color: var(--ink);
}

html[data-theme="dark"] .sub-nav {
  border-color: var(--line);
}

/* Alertas */
html[data-theme="dark"] .alert-error {
  background: #3a211e !important;
  border-color: #5a302a !important;
  color: #ffb2a9 !important;
}

html[data-theme="dark"] .alert-ok {
  background: #19382b !important;
  border-color: #285e45 !important;
  color: #a9e8c5 !important;
}

/* Badges */
html[data-theme="dark"] .badge-draft {
  background: #373323 !important;
  color: #e0d58d !important;
}

html[data-theme="dark"] .badge-no {
  background: var(--danger-tint) !important;
  color: var(--danger) !important;
}

/* Menú móvil */
html[data-theme="dark"] .menu-toggle {
  background: var(--surface);
  border-color: var(--line);
}

html[data-theme="dark"] .menu-toggle span,
html[data-theme="dark"] .menu-toggle span::before,
html[data-theme="dark"] .menu-toggle span::after {
  background: var(--ink);
}

html[data-theme="dark"] .menu-toggle[aria-expanded="true"] span {
  background: transparent;
}

/* Preferencia del sistema solo como fallback si nunca eligió tema.
   La elección explícita guardada por el usuario tiene prioridad mediante JS. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
  }
}


/* ============================================================
   Landing pública — modo oscuro
   ============================================================ */

html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}

html[data-theme="dark"] header {
  background: rgba(16, 21, 18, .92);
  border-bottom-color: var(--line);
}

html[data-theme="dark"] header.scrolled {
  background: rgba(16, 21, 18, .96);
}

html[data-theme="dark"] main > section:not(.cta) {
  background-color: var(--bg);
  color: var(--ink);
}

html[data-theme="dark"] .hero .lead,
html[data-theme="dark"] .hero-note,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .step p,
html[data-theme="dark"] .tutor p {
  color: var(--ink-soft);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .step {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .tutor {
  background: #0b100d;
  color: var(--ink);
}

html[data-theme="dark"] .tutor h2,
html[data-theme="dark"] .tutor .tutor-points strong {
  color: #fff;
}

html[data-theme="dark"] .tutor-points li {
  border-color: rgba(255,255,255,.10);
}

html[data-theme="dark"] footer {
  background: #0b100d;
  color: var(--ink);
  border-top-color: var(--line);
}

html[data-theme="dark"] .foot-tag,
html[data-theme="dark"] .foot-col a,
html[data-theme="dark"] .foot-bottom {
  color: var(--ink-soft);
}

html[data-theme="dark"] .nav-links .link {
  color: var(--ink-soft);
}

html[data-theme="dark"] .nav-links .link:hover {
  color: var(--ink);
}

html[data-theme="dark"] .btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .btn-ghost:hover {
  background: var(--surface);
  border-color: var(--accent);
}

html[data-theme="dark"] .tag {
  background: var(--accent-tint);
  color: var(--accent-strong);
}

html[data-theme="dark"] .mark {
  color: var(--accent-strong);
}

html[data-theme="dark"] .cta {
  background: #0b100d;
  color: var(--ink);
}

html[data-theme="dark"] .cta p {
  color: var(--ink-soft);
}

html[data-theme="dark"] .empty {
  color: var(--ink-soft);
}