/**
 * Tema claro / oscuro — selector y variables globales
 */
html[data-theme="light"] {
  --theme-bg: #f5f3f0;
  --theme-surface: #fff;
  --theme-text: #1a1a1a;
  --theme-text-soft: #444;
  --theme-border: rgba(0, 0, 0, 0.08);
  --theme-accent: #9a7b3a;
  --theme-accent-light: #7a5f2a;
}

html[data-theme="dark"],
html:not([data-theme]) {
  --theme-bg: #0a0908;
  --theme-surface: #121110;
  --theme-text: #f5f3f0;
  --theme-text-soft: rgba(245, 243, 240, 0.75);
  --theme-border: rgba(255, 255, 255, 0.08);
  --theme-accent: #c9a962;
  --theme-accent-light: #e5d4a1;
}

/* Widget flotante tema */
/* .theme-toggle-wrap {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  gap: 0;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: 4px;
  padding: 2px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
} */

/* .theme-toggle-btn {
  padding: 0.4rem 0.75rem;
  font-family: 'Syne', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--theme-text-soft);
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
} */

/* .theme-toggle-btn:hover {
  color: var(--theme-text);
} */

/* .theme-toggle-btn[aria-pressed="true"] {
  background: var(--theme-accent);
  color: #fff;
} */

/* Landing (index): overlay y texto según tema */
html[data-theme="light"] .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(245, 243, 240, 0.4) 0%,
    rgba(245, 243, 240, 0.7) 40%,
    rgba(245, 243, 240, 0.85) 100%
  );
}

html[data-theme="light"] .arca-word,
html[data-theme="light"] .arca-sub {
  color: #1a1a1a;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.arca-word2 {
  color: #1a1a1a;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

html[data-theme="light"] .arca-word::after {
  background: linear-gradient(90deg, transparent, #9a7b3a 20%, #7a5f2a 50%, #9a7b3a 80%, transparent);
}

html[data-theme="light"] .btn-access {
  color: #1a1a1a;
  border-color: rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] .btn-access:hover {
  border-color: #7a5f2a;
  color: #5a4520;
}

/* Modal landing en tema claro */
html[data-theme="light"] #inviteModal .modal-content {
  background: linear-gradient(165deg, #fff, #f5f3f0);
  border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] #inviteModal .modal-title,
html[data-theme="light"] #inviteModal .modal-input {
  color: #1a1a1a;
}

html[data-theme="light"] #inviteModal .modal-input {
  border-bottom-color: rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] #inviteModal .modal-btn {
  border-color: #1a1a1a;
  color: #fff;
  background: #1a1a1a;
}

html[data-theme="light"] #inviteModal .close-modal {
  color: #666;
}

/* Home: overlay bienvenida tema claro */
html[data-theme="light"] .welcome-overlay {
  background: rgba(245, 243, 240, 0.95);
}

html[data-theme="light"] .welcome-label {
  color: #7a5f2a;
}

html[data-theme="light"] .welcome-title {
  color: #1a1a1a;
}

html[data-theme="light"] .welcome-sub {
  color: #444;
}

html[data-theme="light"] .welcome-btn {
  background: linear-gradient(135deg, #9a7b3a, #7a5f2a);
  color: #fff;
}

/* Vivienda: aplicar variables de tema (especificidad para sobreescribir :root) */
html[data-theme="light"] body.vivienda-page {
  --bg: #f5f3f0;
  --surface: #fff;
  --text: #1a1a1a;
  --text-soft: #444;
  --border: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] body.vivienda-ambar { --accent: #9a7b3a; --accent-light: #7a5f2a; }
html[data-theme="light"] body.vivienda-rubi { --accent: #8a2d36; --accent-light: #6a2330; }
html[data-theme="light"] body.vivienda-cobalto { --accent: #354d73; --accent-light: #2a3d5c; }
html[data-theme="light"] body.vivienda-agata { --accent: #2d5a44; --accent-light: #224433; }