/**
 * MING Dark Theme v2.0 — Tema Oscuro Real
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * Activar con: document.documentElement.dataset.theme = 'dark'
 * 
 * Paleta oscura basada en colores del logo MING ajustados para contraste
 */

/* ═══════════════════════════════════════════════════════════════════════════
   ESTILOS ESPECÍFICOS DEL TEMA OSCURO
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] body {
  background-color: var(--surface-base);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] #scenePortal {
  background: var(--ming-paper);
}

[data-theme="dark"] .portal__corner {
  border-color: var(--ming-gold);
}

[data-theme="dark"] .portal__tagline {
  color: var(--ming-gold);
}

[data-theme="dark"] .portal__question {
  color: var(--ming-ink-light);
}

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

[data-theme="dark"] .portal__flower {
  opacity: 0.08;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS Y CONTENEDORES
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
}

[data-theme="dark"] .card__title {
  color: var(--text-primary);
}

[data-theme="dark"] .card__desc {
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULARIOS
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--ming-primary);
  outline: none;
}

[data-theme="dark"] input::placeholder {
  color: var(--text-muted);
}

[data-theme="dark"] label {
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .btn {
  background: var(--ming-forest);
  color: var(--ming-cream-light);
  border: 1px solid var(--ming-forest);
}

[data-theme="dark"] .btn:hover {
  background: var(--ming-forest-light);
}

[data-theme="dark"] .btn--primary {
  background: var(--ming-forest);
  color: var(--ming-cream-light);
}

[data-theme="dark"] .btn--secondary {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .btn--secondary:hover {
  background: var(--surface-interactive);
}

[data-theme="dark"] .btn--ghost {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}

[data-theme="dark"] .btn--ghost:hover {
  background: var(--surface-elevated);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .tabs {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
}

[data-theme="dark"] .tab {
  color: var(--text-muted);
}

[data-theme="dark"] .tab:hover {
  color: var(--text-primary);
  background: var(--surface-interactive);
}

[data-theme="dark"] .tab.active {
  background: var(--surface-card);
  color: var(--ming-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFO BOXES
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .info-box {
  background: var(--surface-elevated);
  border-left: 2px solid var(--ming-gold);
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PILARES (Paper Cards)
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .paper-card__front,
[data-theme="dark"] .paper-card__back {
  background: var(--surface-card);
  border-color: var(--border-default);
}

[data-theme="dark"] .paper-card:hover .paper-card__front {
  border-color: var(--ming-gold);
}

[data-theme="dark"] .paper-card--dm .paper-card__front,
[data-theme="dark"] .paper-card--dm .paper-card__back {
  border-color: var(--ming-primary);
}

[data-theme="dark"] .pcard-header {
  background: var(--surface-elevated);
  border-color: var(--border-default);
}

[data-theme="dark"] .pcard-header__label {
  color: var(--ming-primary);
}

[data-theme="dark"] .pcard-header__badge {
  background: var(--ming-forest);
  color: var(--ming-cream-light);
}

[data-theme="dark"] .pcard-animal {
  color: var(--text-primary);
}

[data-theme="dark"] .pcard-traits {
  color: var(--text-muted);
}

[data-theme="dark"] .pcard-footer,
[data-theme="dark"] .pcard-back-footer {
  background: var(--surface-elevated);
  border-color: var(--border-default);
}

[data-theme="dark"] .pcard-tap {
  color: var(--text-muted);
}

[data-theme="dark"] .pcard-tabs {
  background: var(--surface-elevated);
  border-color: var(--border-default);
}

[data-theme="dark"] .pcard-tab {
  color: var(--text-muted);
}

[data-theme="dark"] .pcard-tab.active {
  color: var(--ming-primary);
  background: var(--surface-card);
}

[data-theme="dark"] .pcard-panel {
  color: var(--text-secondary);
}

[data-theme="dark"] .pcard-section p {
  color: var(--text-secondary);
}

[data-theme="dark"] .pcard-tip {
  background: var(--el-water-light);
  color: var(--ming-primary);
  border-color: var(--ming-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHART TABLE (Ba Zi Tradicional)
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .chart-table-front,
[data-theme="dark"] .chart-table-back {
  background: var(--surface-elevated);
  border-color: var(--border-default);
}

[data-theme="dark"] .chart-table-title,
[data-theme="dark"] .chart-back-title {
  color: var(--text-primary);
}

[data-theme="dark"] .chart-table th {
  color: var(--text-muted);
  border-color: var(--border-default);
}

[data-theme="dark"] .chart-cell {
  border-color: var(--border-subtle);
}

[data-theme="dark"] .chart-cell--dm {
  background: var(--el-water-light);
  border-color: var(--ming-primary);
}

[data-theme="dark"] .chart-branch {
  color: var(--text-secondary);
}

[data-theme="dark"] .chart-table-hint,
[data-theme="dark"] .chart-table-tap {
  color: var(--text-muted);
}

[data-theme="dark"] .chart-back-content {
  color: var(--text-secondary);
}

[data-theme="dark"] .chart-back-section {
  border-color: var(--border-subtle);
}

[data-theme="dark"] .chart-back-section-title {
  color: var(--ming-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   REGENTE DEL DÍA
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .dm-showcase {
  background: var(--surface-elevated);
  border-color: var(--border-default);
}

[data-theme="dark"] .dm-showcase__char {
  color: var(--ming-primary);
}

[data-theme="dark"] .dm-showcase__pinyin {
  color: var(--text-primary);
}

[data-theme="dark"] .dm-showcase__element {
  color: var(--text-muted);
}

[data-theme="dark"] .dm-desc {
  color: var(--text-secondary);
  border-color: var(--ming-gold);
}

[data-theme="dark"] .dm-metaphor {
  background: var(--surface-elevated);
  border-color: var(--ming-gold);
}

[data-theme="dark"] .dm-metaphor__text {
  color: var(--ming-primary);
}

[data-theme="dark"] .dm-education__title {
  color: var(--text-primary);
}

[data-theme="dark"] .dm-education__text {
  color: var(--text-secondary);
}

[data-theme="dark"] .dm-element-info {
  background: var(--surface-elevated);
  border-color: var(--border-default);
}

[data-theme="dark"] .dm-element-info__label {
  color: var(--text-muted);
}

[data-theme="dark"] .dm-element-info__value {
  color: var(--text-primary);
}

[data-theme="dark"] .dm-section {
  border-color: var(--border-subtle);
}

[data-theme="dark"] .dm-section__title {
  color: var(--text-primary);
}

[data-theme="dark"] .dm-traits li,
[data-theme="dark"] .dm-social {
  color: var(--text-secondary);
}

[data-theme="dark"] .dm-column__title {
  color: var(--text-muted);
}

[data-theme="dark"] .dm-column ul li {
  color: var(--text-secondary);
}

[data-theme="dark"] .dm-tag {
  background: var(--surface-interactive);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ELEMENTOS
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .el-bar__name {
  color: var(--text-secondary);
}

[data-theme="dark"] .el-bar__track {
  background: var(--surface-interactive);
}

[data-theme="dark"] .el-bar__pct {
  color: var(--text-secondary);
}

[data-theme="dark"] .el-bar--clickable:hover {
  background: var(--surface-elevated);
}

[data-theme="dark"] .el-bar--clickable.active {
  background: var(--surface-elevated);
  border-color: var(--ming-gold);
}

[data-theme="dark"] .el-detail {
  background: var(--surface-card);
  border-color: var(--border-default);
}

[data-theme="dark"] .el-detail__header {
  border-color: var(--border-subtle);
}

[data-theme="dark"] .el-detail__name {
  color: var(--text-primary);
}

[data-theme="dark"] .el-detail__desc {
  color: var(--text-secondary);
}

[data-theme="dark"] .el-detail__label {
  color: var(--text-muted);
}

[data-theme="dark"] .el-detail__value {
  color: var(--text-primary);
}

[data-theme="dark"] .strength-card {
  background: var(--surface-elevated);
  border-color: var(--border-default);
}

[data-theme="dark"] .strength-card__label {
  color: var(--text-muted);
}

[data-theme="dark"] .strength-card__value {
  color: var(--ming-gold);
}

[data-theme="dark"] .strength-card__fav {
  color: var(--text-secondary);
}

[data-theme="dark"] .balance-explanation {
  color: var(--text-secondary);
}

[data-theme="dark"] .el-education {
  background: var(--surface-elevated);
  border-color: var(--border-default);
}

[data-theme="dark"] .el-education__title {
  color: var(--text-primary);
}

[data-theme="dark"] .el-cycle__title {
  color: var(--text-primary);
}

[data-theme="dark"] .el-cycle__desc,
[data-theme="dark"] .el-cycle__explain {
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALES
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .modal {
  background: rgba(0, 0, 0, 0.85);
}

[data-theme="dark"] .modal__card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
}

[data-theme="dark"] .modal__close {
  color: var(--text-muted);
}

[data-theme="dark"] .modal__close:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .modal__balance {
  color: var(--ming-gold);
}

[data-theme="dark"] .modal__section {
  border-color: var(--border-subtle);
}

[data-theme="dark"] .cost-row {
  color: var(--text-secondary);
}

[data-theme="dark"] .referral-title {
  color: var(--text-primary);
}

[data-theme="dark"] .referral-box input {
  background: var(--surface-elevated);
  border-color: var(--border-default);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVEGACIÓN Y CONTROLES
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .lang-selector .lang-btn {
  background: var(--surface-elevated);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

[data-theme="dark"] .lang-selector .lang-btn:hover {
  background: var(--surface-interactive);
  color: var(--text-primary);
}

[data-theme="dark"] .lang-selector .lang-btn.active {
  background: var(--ming-forest);
  color: var(--ming-cream-light);
  border-color: var(--ming-forest);
}

[data-theme="dark"] .token-badge {
  background: var(--surface-elevated);
  border-color: var(--border-default);
  color: var(--ming-gold);
}

[data-theme="dark"] .back-link {
  color: var(--text-secondary);
}

[data-theme="dark"] .back-link:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .progress__dot {
  background: var(--surface-interactive);
  border-color: var(--border-default);
}

[data-theme="dark"] .progress__dot.active {
  background: var(--ming-primary);
}

[data-theme="dark"] .pcard-dm-hint {
  background: var(--ming-jade-light);
  color: var(--ming-jade);
}

[data-theme="dark"] .pcard-tip {
  background: var(--ming-jade-light);
  color: var(--ming-jade);
  border-color: var(--ming-jade);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLTIPS
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .vocab-tooltip {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOASTS
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .toast {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .toast--success {
  background: var(--ming-jade);
  border: none;
  color: #fff;
}

[data-theme="dark"] .toast--warning {
  background: var(--ming-yellow);
  border: none;
  color: var(--ming-900);
}

[data-theme="dark"] .toast--error {
  background: var(--ming-red);
  border: none;
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   POLARITY CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .polarity-card {
  background: var(--surface-elevated);
  border-color: var(--border-default);
}

[data-theme="dark"] .polarity-card:hover {
  background: var(--surface-interactive);
}

[data-theme="dark"] .polarity-card input:checked + .polarity-card__content {
  border-color: var(--ming-primary);
}

[data-theme="dark"] .polarity-card__title {
  color: var(--text-primary);
}

[data-theme="dark"] .polarity-card__subtitle,
[data-theme="dark"] .polarity-card__desc {
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICIOS Y ACCIONES
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .service-btn {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
}

[data-theme="dark"] .service-btn:hover {
  background: var(--surface-interactive);
  border-color: var(--ming-gold);
}

[data-theme="dark"] .service-btn__name {
  color: var(--text-primary);
}

[data-theme="dark"] .service-btn__desc {
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBARS
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--surface-base);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--surface-interactive);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--ming-500);
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON — Circular black/white
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: #000000;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 1000;
  transition: background var(--duration-base) ease, transform var(--duration-fast) ease;
}

.theme-toggle:hover {
  transform: scale(1.05);
}

.theme-toggle__icon--light,
.theme-toggle__icon--dark {
  position: absolute;
  transition: opacity var(--duration-base) ease;
  color: #FFFFFF;
}

/* Modo claro: botón negro, icono blanco, mostrar sol */
:root:not([data-theme="dark"]) .theme-toggle {
  background: #000000;
}

:root:not([data-theme="dark"]) .theme-toggle__icon--light,
:root:not([data-theme="dark"]) .theme-toggle__icon--dark {
  color: #FFFFFF;
}

:root:not([data-theme="dark"]) .theme-toggle__icon--light {
  opacity: 1;
}

:root:not([data-theme="dark"]) .theme-toggle__icon--dark {
  opacity: 0;
}

/* Modo oscuro: botón blanco, icono negro, mostrar luna */
[data-theme="dark"] .theme-toggle {
  background: #FFFFFF;
}

[data-theme="dark"] .theme-toggle__icon--light,
[data-theme="dark"] .theme-toggle__icon--dark {
  color: #000000;
}

[data-theme="dark"] .theme-toggle__icon--light {
  opacity: 0;
}

[data-theme="dark"] .theme-toggle__icon--dark {
  opacity: 1;
}