/* ============================================================
   VELION ? Dashboard CSS  (fiel a la imagen)
   Fuentes: Cinzel (t?tulos) ? Playfair Display Italic (m?dulos)
            Inter (UI general)
   ============================================================ */


/* ?? Variables globales + TEMA POR DEFECTO: Nocturno Claro ???? */
:root {
  /* Nocturno Claro es ahora el tema por defecto */
  --bg:             #0C1430;
  --glass:          rgba(16, 26, 68, 0.72);
  --glass-sidebar:  rgba(8, 14, 38, 0.42);
  --glass-orange:   rgba(40, 80, 200, 0.08);
  --glass-danger:   rgba(14, 8, 32, 0.84);
  --border:         rgba(80, 120, 240, 0.16);
  --border-mid:     rgba(80, 120, 240, 0.10);
  --border-danger:  rgba(239, 68, 68, 0.40);

  /* Texto */
  --text:        #E4E8FF;
  --text-dim:    #6870A8;
  --text-faint:  #3A4070;

  /* Dorado ? acento principal (igual en todos los temas) */
  --gold:      #C9A24B;
  --gold-dim:  #8A7133;
  --gold-tint: rgba(201, 162, 75, 0.10);
  --gold-rgb:  201, 162, 75;
  --metal-bright: #F5D060;
  --metal-mid:    #C9A24B;
  --metal-deep:   #A07828;
  --metal-dark:   #6B4B14;
  --metal-hot:    #F0C840;
  --metal-label:  #C9A24B;
  --metal-nav:    #D4AA4E;
  --metal-faint:  #8A6820;
  --metal-hover:  #F5E08A;
  --metal-star:   255, 236, 160;
  --metal-star-glow: 255, 220, 120;
  --metal-logo-coreum: linear-gradient(90deg, #E8C65A 0%, #C9A24B 40%, #8A6820 65%, #D4AA4E 100%);
  --metal-racha-bg: rgba(180, 130, 20, 0.10);

  /* Sem?nticos ? solo ?conos / deltas / gr?ficas */
  --orange:    #FF8B3E;
  --blue-a:    #5BA3FF;
  --purple-a:  #A855F7;
  --green-a:   #22C55E;
  --teal-a:    #14B8A6;
  --yellow-a:  #EAB308;
  --red-a:     #EF4444;
  --danger:    #EF4444;
  --chart-blu: #4A7FF5;
}

/* ?? Tema Dorado (negro puro + acentos dorados) ????????????? */
[data-theme="dorado"] {
  --bg:             #000000;
  --glass:          rgba(18, 14, 8, 0.38);
  --glass-sidebar:  rgba(4, 4, 6, 0.38);
  --glass-orange:   rgba(201, 162, 75, 0.08);

  /* Peligro/mejora ? vidrio c?lido transl?cido */
  --glass-danger:   rgba(22, 14, 8, 0.36);
  --border-danger:  rgba(212, 170, 78, 0.38);

  --border:         rgba(201, 162, 75, 0.20);
  --border-mid:     rgba(201, 162, 75, 0.12);

  /* Texto: tonalidades doradas (nada plateado/p?lido) */
  --text:           #E8C65A;   /* texto principal: oro cromado */
  --text-dim:       #C9A24B;   /* texto secundario: oro */
  --text-faint:     #8A6820;   /* texto tenue dorado */

  /* Gold cromado m?s brillante */
  --gold-rgb:       212, 170, 78;
  --gold:           #D4AA4E;
  --gold-dim:       #9B7A2F;
  --gold-tint:      rgba(212, 170, 78, 0.15);
  --metal-bright:   #F5D060;
  --metal-mid:      #C9A24B;
  --metal-deep:     #A07828;
  --metal-dark:     #6B4B14;
  --metal-hot:      #F0C840;
  --metal-label:    #C9A24B;
  --metal-nav:      #D4AA4E;
  --metal-faint:    #8A6820;
  --metal-hover:    #F5E08A;
  --metal-star:     255, 236, 160;
  --metal-star-glow: 255, 220, 120;
  --metal-logo-coreum: linear-gradient(90deg, #E8C65A 0%, #C9A24B 40%, #8A6820 65%, #D4AA4E 100%);
  --metal-racha-bg: rgba(180, 130, 20, 0.14);

  /* Gradiente cromo met?lico (reutilizado en m?ltiples elementos) */
  --_gc: linear-gradient(
    105deg,
    #6B4B14 0%,
    #C09030 15%,
    #E8C65A 30%,
    #FFF4B0 50%,
    #E8C65A 70%,
    #C09030 85%,
    #6B4B14 100%
  );
  --_glow: 0 0 22px rgba(212,170,78,0.50), 0 0 8px rgba(255,240,140,0.35);

  --_chrome-gold: linear-gradient(180deg,
    #FFF4C0 0%,
    #E8C65A 22%,
    #C9A24B 48%,
    #F5E08A 68%,
    #8A6820 88%,
    #D4AA4E 100%);
  --_chrome-gold-soft: linear-gradient(180deg,
    #F0D878 0%,
    #C9A24B 40%,
    #A07828 70%,
    #D4AA4E 100%);
}

/* ?? Tema Oro Rosa (mismas reglas que dorado, paleta rose gold) ? */
[data-theme="oro-rosa"] {
  --bg:             #000000;
  --glass:          rgba(22, 12, 16, 0.38);
  --glass-sidebar:  rgba(6, 4, 6, 0.38);
  --glass-orange:   rgba(232, 160, 176, 0.08);

  --glass-danger:   rgba(24, 10, 14, 0.36);
  --border-danger:  rgba(232, 160, 176, 0.38);

  --border:         rgba(232, 160, 176, 0.22);
  --border-mid:     rgba(232, 160, 176, 0.12);

  --text:           #F0C4CE;
  --text-dim:       #E8A0B0;
  --text-faint:     #A06070;

  --gold-rgb:       232, 164, 180;
  --gold:           #E8A4B4;
  --gold-dim:       #C07088;
  --gold-tint:      rgba(232, 164, 180, 0.15);
  --metal-bright:   #FFD0DA;
  --metal-mid:      #E8A4B4;
  --metal-deep:     #C07088;
  --metal-dark:     #8A4058;
  --metal-hot:      #F0C4CE;
  --metal-label:    #E8A0B0;
  --metal-nav:      #E8A4B4;
  --metal-faint:    #A06070;
  --metal-hover:    #FFD6E0;
  --metal-star:     255, 220, 230;
  --metal-star-glow: 255, 200, 210;
  --metal-logo-coreum: linear-gradient(90deg, #F0C4CE 0%, #E8A4B4 40%, #A06070 65%, #E8A4B4 100%);
  --metal-racha-bg: rgba(160, 70, 100, 0.14);

  --_gc: linear-gradient(
    105deg,
    #6B3040 0%,
    #C07088 15%,
    #E8A4B4 30%,
    #FFE0E8 50%,
    #E8A4B4 70%,
    #C07088 85%,
    #6B3040 100%
  );
  --_glow: 0 0 22px rgba(232,164,180,0.50), 0 0 8px rgba(255,220,230,0.35);

  --_chrome-gold: linear-gradient(180deg,
    #FFF0F4 0%,
    #F0C4CE 22%,
    #E8A4B4 48%,
    #FFD6E0 68%,
    #A06070 88%,
    #E8A4B4 100%);
  --_chrome-gold-soft: linear-gradient(180deg,
    #F8D0DA 0%,
    #E8A4B4 40%,
    #C07088 70%,
    #E8A4B4 100%);
}

/* ?? Tema Nocturno Oscuro (azul-negro profundo) ???????????? */
[data-theme="nocturno-oscuro"] {
  --bg:             #030610;
  --glass:          rgba(5, 10, 32, 0.80);
  --glass-sidebar:  rgba(2, 5, 16, 0.48);
  --glass-orange:   rgba(30, 60, 180, 0.07);
  --glass-danger:   rgba(8, 4, 18, 0.88);
  --border:         rgba(60, 90, 220, 0.11);
  --border-mid:     rgba(60, 90, 220, 0.07);
  --text:           #D8DCFF;
  --text-dim:       #505580;
  --text-faint:     #2C2E50;
}

/* ?? Tema Nocturno Claro ? alias expl?cito de :root ???????? */
[data-theme="nocturno-claro"] {
  --bg:             #0C1430;
  --glass:          rgba(16, 26, 68, 0.72);
  --glass-sidebar:  rgba(8, 14, 38, 0.42);
  --glass-orange:   rgba(40, 80, 200, 0.08);
  --glass-danger:   rgba(14, 8, 32, 0.84);
  --border:         rgba(80, 120, 240, 0.16);
  --border-mid:     rgba(80, 120, 240, 0.10);
  --text:           #E4E8FF;
  --text-dim:       #6870A8;
  --text-faint:     #3A4070;
}

/* Tema Diurno (claro / dia) */
[data-theme="diurno"] {
  --bg:             #E8EDF7;
  --glass:          rgba(255, 255, 255, 0.62);
  --glass-sidebar:  rgba(255, 255, 255, 0.72);
  --glass-orange:   rgba(255, 140, 60, 0.10);
  --glass-danger:   rgba(255, 248, 248, 0.72);
  --border:         rgba(70, 110, 180, 0.18);
  --border-mid:     rgba(70, 110, 180, 0.10);
  --border-danger:  rgba(200, 70, 80, 0.28);

  /* Azul metalico */
  --text:           #2A4A8C;
  --text-dim:       #5A78B0;
  --text-faint:     #8AA0C8;

  --gold:           #B8862E;
  --gold-dim:       #8A6820;
  --gold-tint:      rgba(184, 134, 46, 0.12);
  --gold-rgb:       184, 134, 46;
  --metal-bright:   #7BA3E8;
  --metal-mid:      #4A78C8;
  --metal-deep:     #2A4A8C;
  --metal-dark:     #1A3266;
  --metal-hot:      #9BB8F0;
  --metal-label:    #3A5FA0;
  --metal-nav:      #3A5FA0;
  --metal-faint:    #6A88B8;
  --metal-hover:    #5A82D0;
  --metal-logo-coreum: linear-gradient(90deg, #7BA3E8 0%, #4A78C8 45%, #2A4A8C 100%);

  --blue-a:    #3B6FE8;
  --chart-blu: #3B6FE8;
}

[data-theme="diurno"] body.dash-body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 110% 60% at 50% -10%,
      rgba(140, 180, 255, 0.35) 0%, transparent 62%),
    radial-gradient(ellipse 50% 45% at 92% 90%,
      rgba(255, 200, 150, 0.22) 0%, transparent 60%),
    linear-gradient(180deg, #F4F7FC 0%, #E4EAF6 100%);
  color: var(--text);
}

[data-theme="diurno"] .sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 32%),
    rgba(255, 255, 255, 0.68);
  border-right-color: rgba(70, 110, 180, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    4px 0 24px rgba(40, 70, 140, 0.08);
}

[data-theme="diurno"] .topbar {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(70, 110, 180, 0.12);
  box-shadow: 0 8px 24px rgba(40, 70, 140, 0.06);
}

/* Vidrio esmerilado claro ? paneles genericos */
[data-theme="diurno"] .glass-panel {
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(90, 140, 230, 0.10), transparent 55%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.72), rgba(245, 248, 255, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 10px 32px rgba(40, 70, 140, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 40px rgba(255, 255, 255, 0.35);
}

[data-theme="diurno"] .panel-box,
[data-theme="diurno"] .settings-card,
[data-theme="diurno"] .ministat-card {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.74), rgba(245, 248, 255, 0.58));
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 28px rgba(40, 70, 140, 0.08);
}

/* KPI: vidrio blanco con tinte suave del color */
[data-theme="diurno"] .kpi-card {
  box-shadow:
    0 8px 24px rgba(40, 70, 140, 0.10),
    0 0 18px color-mix(in srgb, var(--kpi) 14%, transparent),
    inset 0 0 20px color-mix(in srgb, var(--kpi) 6%, transparent);
}

[data-theme="diurno"] .kpi-glass {
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--kpi) 16%, transparent), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--kpi) 10%, transparent), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 255, 0.62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 36px rgba(255, 255, 255, 0.40);
}

[data-theme="diurno"] .kpi-card:hover {
  box-shadow:
    0 12px 30px rgba(40, 70, 140, 0.12),
    0 0 28px color-mix(in srgb, var(--kpi) 22%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--kpi) 8%, transparent);
}

/* Panel de mejora: vidrio claro + tinte rojo suave */
[data-theme="diurno"] .improvement-panel {
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(239, 68, 68, 0.08), transparent 55%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(255, 246, 246, 0.62));
  border: 1px solid rgba(220, 90, 100, 0.28);
  box-shadow:
    0 10px 28px rgba(40, 70, 140, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 20px rgba(239, 68, 68, 0.06);
}

[data-theme="diurno"] .improvement-header {
  border-bottom-color: rgba(220, 90, 100, 0.16);
}

[data-theme="diurno"] .search-input {
  background: rgba(255, 255, 255, 0.88);
  color: var(--text);
  border-color: rgba(70, 110, 180, 0.18);
}

[data-theme="diurno"] .search-input::placeholder {
  color: var(--text-faint);
}

[data-theme="diurno"] .nav-item,
[data-theme="diurno"] .nav-group-toggle,
[data-theme="diurno"] .nav-subitem,
[data-theme="diurno"] .sidebar-action {
  color: var(--text-dim);
}

[data-theme="diurno"] .nav-item.active {
  background: rgba(59, 111, 232, 0.12);
  border-left-color: var(--blue-a);
  color: #1E3A7A;
}

[data-theme="diurno"] .nav-group.is-open > .nav-group-toggle {
  background: rgba(59, 111, 232, 0.08);
  color: #1E3A7A;
}

[data-theme="diurno"] .module-card:not(.module-card--visual) {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(245, 248, 255, 0.60));
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 24px rgba(40, 70, 140, 0.08);
}

/* Tipografia azul metalico */
[data-theme="diurno"] .modules-title,
[data-theme="diurno"] .page-title,
[data-theme="diurno"] .group-title,
[data-theme="diurno"] .panel-hd-title,
[data-theme="diurno"] .improvement-title,
[data-theme="diurno"] .kpi-label,
[data-theme="diurno"] .kpi-value,
[data-theme="diurno"] .stat-value,
[data-theme="diurno"] .stat-label,
[data-theme="diurno"] .impr-name,
[data-theme="diurno"] .logo-coreum,
[data-theme="diurno"] .logo-velion {
  color: var(--text);
  text-shadow: none;
}

[data-theme="diurno"] .page-title,
[data-theme="diurno"] .modules-title {
  background: linear-gradient(180deg, #7BA3E8 0%, #3A5FA0 45%, #1E3A6E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-theme="diurno"] .group-rule {
  background: rgba(70, 110, 180, 0.18);
}

[data-theme="diurno"] .user-avatar {
  background: rgba(59, 111, 232, 0.12);
  border-color: rgba(59, 111, 232, 0.25);
}

[data-theme="diurno"] .chart-labels span,
[data-theme="diurno"] .chart-label {
  color: var(--text-dim);
}

[data-theme="diurno"] .sidebar-action[data-action="toggle-day"] {
  color: #3A5FA0;
}
[data-theme="diurno"] .sidebar-action[data-action="toggle-day"]:hover {
  color: #1E3A7A;
  background: rgba(59, 111, 232, 0.10);
}

.theme-swatch--day {
  background: linear-gradient(135deg, #F4F6FB 45%, #5BA3FF 100%);
  border: 1px solid rgba(40, 60, 120, 0.15);
}


/* ?? Body reset ??????????????????????????????????????????????? */
body.dash-body {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 100% 55% at 50% -8%,
      rgba(30, 55, 150, 0.48) 0%, transparent 65%),
    radial-gradient(ellipse 55% 55% at 88% 92%,
      rgba(18, 28, 95, 0.32) 0%, transparent 65%);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}


/* ????????????????????????????????????????????????????????????
   SIDEBAR
???????????????????????????????????????????????????????????? */

.sidebar {
  width: 210px;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 28%),
    color-mix(in srgb, var(--glass-sidebar) 88%, transparent);
  backdrop-filter: blur(48px) saturate(1.45);
  -webkit-backdrop-filter: blur(48px) saturate(1.45);
  border-right: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.03),
    8px 0 32px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Emblema + nombre de marca */
.sidebar-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.logo-emblem {
  width: 92px;
  height: 92px;
  object-fit: contain;
  background: transparent;
  mix-blend-mode: normal;
  filter: none;
}

/* Nombre de marca debajo del logo */
.logo-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.logo-velion {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  /* Plateado met?lico */
  background: linear-gradient(180deg,
    #F0F0F0 0%, #B8B8B8 35%, #E0E0E0 60%, #909090 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.logo-coreum {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  /* Azul met?lico */
  background: linear-gradient(180deg,
    #90C8FF 0%, #4A90E2 35%, #7EB8FF 60%, #2A6BC7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Badge identidad ? oculto, reemplazado por el wordmark */
.sidebar-identity { display: none; }

.identity-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-a);
  box-shadow: 0 0 7px rgba(34, 197, 94, 0.65);
  flex-shrink: 0;
}

.identity-text {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.2px;
}

/* Nav */
.sidebar-nav { padding: 8px 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: background 0.13s, color 0.13s;
  white-space: nowrap;
}

.nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text);
}

.nav-item.active {
  background: rgba(91, 163, 255, 0.10);
  border-left-color: var(--blue-a);
  color: var(--text);
}

.nav-icon { width: 15px; height: 15px; flex-shrink: 0; }

/* Acordeones del sidebar */
.nav-group {
  display: flex;
  flex-direction: column;
}

.nav-group-toggle {
  width: 100%;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.nav-group-toggle .nav-chevron {
  width: 12px;
  height: 12px;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.18s ease, opacity 0.15s;
}

.nav-group.is-open > .nav-group-toggle {
  color: var(--text);
  background: rgba(91, 163, 255, 0.08);
}

.nav-group.is-open > .nav-group-toggle .nav-chevron {
  transform: rotate(180deg);
  opacity: 0.9;
}

.nav-submenu {
  display: none;
  flex-direction: column;
  padding: 2px 0 6px;
  max-height: min(42vh, 320px);
  overflow-y: auto;
}

.nav-group.is-open > .nav-submenu {
  display: flex;
}

.nav-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 28px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  transition: background 0.12s, color 0.12s;
}

.nav-subitem:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.nav-subdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.9;
}

.nav-sublabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.sidebar-collapsed .nav-group-toggle .nav-chevron,
body.sidebar-collapsed .nav-submenu {
  display: none !important;
}

body.sidebar-collapsed .nav-group.is-open > .nav-group-toggle {
  background: transparent;
}

.nav-submenu::-webkit-scrollbar { width: 3px; }
.nav-submenu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}

/* Separador */
.sidebar-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
  flex-shrink: 0;
}

/* Footer */
.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 8px 0;
  flex-shrink: 0;
}

.sidebar-action {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  text-align: left;
  transition: background 0.13s, color 0.13s;
}

.sidebar-action:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text);
}

.sidebar::-webkit-scrollbar       { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 2px; }


/* ????????????????????????????????????????????????????????????
   ?REA PRINCIPAL
???????????????????????????????????????????????????????????? */

.main {
  margin-left: 210px;
  flex: 1;
  padding: 26px 38px 60px;
  min-width: 0;
  position: relative;
  z-index: 1;
  transition: margin-left 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ?? Topbar ?? */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.search-wrap { position: relative; display: flex; align-items: center; }

.search-icon {
  position: absolute;
  left: 11px;
  width: 14px; height: 14px;
  pointer-events: none;
}

.search-input {
  width: 330px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 14px 9px 34px;
  color: var(--text);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.13s;
}

.search-input::placeholder { color: var(--text-faint); }
.search-input:focus { border-color: rgba(91,163,255,0.35); }

.topbar-user { display: flex; align-items: center; gap: 10px; }

.user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.user-greeting { font-size: 13px; color: var(--text-dim); }
.user-greeting strong { color: var(--text); font-weight: 600; }


/* ?? T?tulo de p?gina ?? */
.page-title {
  font-family: 'Inter', sans-serif;
  font-size: 27px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  letter-spacing: 1px;
  margin: 0 0 24px;
}


/* ????????????????????????????????????????????????????????????
   KPI PREMIUM ? Resumen Acad?mico (fila superior)
???????????????????????????????????????????????????????????? */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

/* Estilo referencia: vidrio + glow neon, sin ilustraciones PNG */
.kpi-card {
  --kpi: #5BA3FF;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 168px;
  padding: 0;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--kpi) 55%, transparent);
  background: transparent;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.38),
    0 0 22px color-mix(in srgb, var(--kpi) 22%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--kpi) 8%, transparent);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--kpi) 80%, transparent);
  box-shadow:
    0 12px 34px rgba(0,0,0,0.45),
    0 0 34px color-mix(in srgb, var(--kpi) 34%, transparent),
    inset 0 0 28px color-mix(in srgb, var(--kpi) 12%, transparent);
}

.kpi-glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--kpi) 22%, transparent), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--kpi) 16%, transparent), transparent 60%),
    linear-gradient(160deg, rgba(14,16,28,0.38), rgba(6,8,14,0.46));
  backdrop-filter: blur(36px) saturate(1.4);
  -webkit-backdrop-filter: blur(36px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 36px rgba(255,255,255,0.04);
}

.kpi-glow {
  position: absolute;
  z-index: 1;
  width: 78%;
  height: 58%;
  left: 50%;
  bottom: -28%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--kpi) 40%, transparent), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}

.kpi-sparkle {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  width: 10px;
  height: 10px;
  background: var(--kpi);
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--kpi) 80%, transparent));
  opacity: 0.9;
  pointer-events: none;
  animation: kpi-sparkle 2.4s ease-in-out infinite;
}

.kpi-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 18px 18px 16px;
  min-height: 168px;
  pointer-events: none;
}

.kpi-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
}

.kpi-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--kpi) 88%, #fff), var(--kpi));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--kpi) 50%, transparent),
    0 0 16px color-mix(in srgb, var(--kpi) 60%, transparent);
}

.kpi-badge svg {
  width: 13px;
  height: 13px;
  display: block;
}

.kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-value {
  margin-top: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1;
  color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

.kpi-meta {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.25;
}

.kpi-meta--tint {
  color: color-mix(in srgb, var(--kpi) 72%, #fff 28%);
}

.kpi-meta--up { color: #4ADE80; }

.kpi-card--orange { --kpi: #FF6B35; }
.kpi-card--blue   { --kpi: #3B82F6; }
.kpi-card--purple { --kpi: #A855F7; }
.kpi-card--green  { --kpi: #22C55E; }
.kpi-card--gold   { --kpi: #EAB308; }

/* Racha: llama ? n?mero ? label ? meta */
.kpi-card--racha {
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: center;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.kpi-content--racha {
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 0;
  padding: 16px 14px 14px;
}
.kpi-figure--racha {
  width: 72px;
  height: 72px;
  margin: 0 auto 4px;
  flex-shrink: 0;
}
.racha-icon {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.kpi-content--racha .kpi-value {
  margin-top: 2px;
  font-size: 34px;
}
.kpi-content--racha .kpi-label {
  margin-top: 6px;
  color: color-mix(in srgb, var(--kpi) 80%, #fff 20%);
  text-transform: none;
  letter-spacing: 0.2px;
  font-size: 13px;
  font-weight: 600;
}
.kpi-content--racha .kpi-meta {
  margin-top: 4px;
  max-width: 100%;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}
.racha-aura {
  transform-origin: 48px 50px;
  animation: racha-aura-pulse 2.4s ease-in-out infinite;
}
.racha-flame {
  transform-origin: 48px 72px;
  animation: racha-flicker 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255,139,62,0.8));
}
.racha-flame-core {
  transform-origin: 48px 64px;
  animation: racha-flicker 1.8s ease-in-out infinite 0.12s;
}
.kpi-card--racha:focus-visible {
  outline: 2px solid #FF8B3E;
  outline-offset: 3px;
}
.kpi-card--racha.is-celebrating .racha-flame,
.kpi-card--racha.is-celebrating .racha-flame-core {
  animation: racha-burst 0.7s ease-out 1;
}
.kpi-card--racha.is-celebrating {
  animation: racha-card-pop 0.7s ease-out 1;
}
@keyframes racha-flicker {
  0%, 100% { transform: scale(1) translateY(0) rotate(0deg); }
  30% { transform: scale(1.06, 1.1) translateY(-2px) rotate(-1.5deg); }
  60% { transform: scale(0.98, 1.04) translateY(-1px) rotate(1.2deg); }
}
@keyframes racha-aura-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes racha-burst {
  0% { transform: scale(1); }
  35% { transform: scale(1.3) translateY(-6px); }
  100% { transform: scale(1); }
}
@keyframes racha-card-pop {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-4px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes kpi-sparkle {
  0%, 100% { opacity: 0.55; transform: scale(0.9) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(12deg); }
}

@media (max-width: 1200px) {
  .kpi-value { font-size: 28px; }
  .kpi-content--racha .kpi-value { font-size: 30px; }
  .kpi-figure--racha { width: 64px; height: 64px; }
  .kpi-card,
  .kpi-content { min-height: 156px; }
}

/* Legacy stats (por si queda en otras p?ginas) */
.stats-card {
  display: flex;
  background: var(--glass);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Panel Racha */
.racha-panel {
  width: 255px;
  flex-shrink: 0;
  background: var(--glass-orange);
  border-right: 1px solid var(--border);
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.racha-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.racha-icon-badge {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,139,62,0.14);
  border: 1px solid rgba(255,139,62,0.30);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.racha-title-block { display: flex; flex-direction: column; }

.racha-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.racha-subtitle {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.racha-number {
  font-family: 'Inter', sans-serif;
  font-size: 52px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -2px;
}

.racha-unit {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Divisor vertical */
.stats-vdivider { width: 1px; background: var(--border); flex-shrink: 0; }

/* Grid derecho 2?2 */
.stats-right {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.stat-mini {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.13s;
}

.stat-mini:hover { background: rgba(255,255,255,0.025); }

/* Bordes internos del grid */
.stat-mini--bl { border-right: 1px solid var(--border-mid); border-bottom: 1px solid var(--border-mid); }
.stat-mini--b  { border-bottom: 1px solid var(--border-mid); }
.stat-mini--l  { border-right: 1px solid var(--border-mid); }

/* Badge de ?cono coloreado */
.stat-icon-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.badge--blue   { background: rgba(91,163,255,0.13); border: 1px solid rgba(91,163,255,0.28); }
.badge--purple { background: rgba(168,85,247,0.13); border: 1px solid rgba(168,85,247,0.28); }
.badge--green  { background: rgba(34,197,94,0.13);  border: 1px solid rgba(34,197,94,0.28); }
.badge--gold   { background: rgba(234,179,8,0.13);  border: 1px solid rgba(234,179,8,0.28); }

.stat-label { font-size: 11px; color: var(--text-dim); letter-spacing: 0.1px; }

.stat-val {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.5px;
}

.stat-delta { font-size: 11px; margin-top: 2px; }

.delta--green { color: var(--green-a); }
.delta--dim   { color: var(--text-dim); }


/* ????????????????????????????????????????????????????????????
   ?REAS DE MEJORA
???????????????????????????????????????????????????????????? */

.improvement-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(239,68,68,0.14), transparent 55%),
    linear-gradient(165deg, rgba(28, 12, 16, 0.40), rgba(10, 8, 14, 0.46));
  backdrop-filter: blur(38px) saturate(1.3);
  -webkit-backdrop-filter: blur(38px) saturate(1.3);
  border: 1px solid rgba(239,68,68,0.32);
  border-radius: 16px;
  margin-bottom: 18px;
  box-shadow:
    0 10px 32px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 28px rgba(239,68,68,0.1);
}

.improvement-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(239,68,68,0.18);
}

.impr-header-icon { flex-shrink: 0; }

.improvement-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
}

.impr-row { padding: 14px 20px 12px; }

.impr-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.impr-left { display: flex; align-items: center; gap: 10px; }
.impr-warn-icon { flex-shrink: 0; }

.impr-info { display: flex; flex-direction: column; gap: 2px; }

.impr-name { font-size: 13px; font-weight: 600; color: var(--text); }
.impr-sub  { font-size: 11px; color: var(--text-dim); }

.impr-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.impr-pct {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--red-a);
  line-height: 1;
}

.impr-pct-label { font-size: 10px; color: var(--text-dim); }

.impr-bar-track {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}

.impr-bar {
  height: 100%;
  background: linear-gradient(90deg, #EF4444 0%, #FB7185 55%, #F472B6 100%);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(244,114,182,0.55), 0 0 18px rgba(239,68,68,0.35);
}

.impr-row-sep {
  height: 1px;
  background: rgba(239,68,68,0.12);
  margin: 0 20px;
}


/* ????????????????????????????????????????????????????????????
   PANELES ? base de vidrio gen?rico
???????????????????????????????????????????????????????????? */

.glass-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(74,127,245,0.10), transparent 55%),
    linear-gradient(165deg, rgba(18, 24, 42, 0.42), rgba(8, 10, 18, 0.48));
  backdrop-filter: blur(40px) saturate(1.35);
  -webkit-backdrop-filter: blur(40px) saturate(1.35);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow:
    0 10px 32px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 40px rgba(255,255,255,0.03);
}

/* Cabecera de panel con punto de color */
.panel-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.panel-hd-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot--blue  { background: var(--chart-blu); box-shadow: 0 0 6px rgba(74,127,245,0.7); }
.dot--green { background: var(--green-a);   box-shadow: 0 0 6px rgba(34,197,94,0.7); }

.panel-hd-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
}

/* Dos columnas */
.two-col {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  margin-bottom: 18px;
}


/* ????????????????????????????????????????????????????????????
   GR?FICA DE L?NEA
???????????????????????????????????????????????????????????? */

.chart-area { display: flex; flex-direction: column; }

.line-chart-svg {
  width: 100%;
  height: 110px;
  display: block;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
}

.chart-labels span {
  font-size: 10px;
  color: var(--text-faint);
  font-family: 'Inter', sans-serif;
}


/* ????????????????????????????????????????????????????????????
   DONUT CHART
???????????????????????????????????????????????????????????? */

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.donut-svg { width: 140px; height: 140px; flex-shrink: 0; }

.donut-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  min-width: 0;
  flex: 1;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-label {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.3;
}


/* ????????????????????????????????????????????????????????????
   MINI-STATS ROW (fila de 4)
???????????????????????????????????????????????????????????? */

.ministats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.ministat-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(16, 20, 32, 0.40), rgba(8, 10, 16, 0.46));
  backdrop-filter: blur(36px) saturate(1.3);
  -webkit-backdrop-filter: blur(36px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow:
    0 8px 26px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.ministat-card:hover {
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07);
}

.ministat-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.badge--teal   { background: rgba(20,184,166,0.14); border: 1px solid rgba(20,184,166,0.30); }
.badge--yellow { background: rgba(234,179,8,0.14);  border: 1px solid rgba(234,179,8,0.30); }
.badge--green2 { background: rgba(34,197,94,0.14);  border: 1px solid rgba(34,197,94,0.30); }

.ministat-body { display: flex; flex-direction: column; gap: 3px; }

.ministat-val {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.5px;
}

.ministat-lbl { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.ministat-sub { font-size: 11px; color: var(--text-faint); }


/* ????????????????????????????????????????????????????????????
   M?DULOS DE ESTUDIO
???????????????????????????????????????????????????????????? */

.modules-title {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  letter-spacing: 2px;
  margin: 0 0 32px;
}

/* ?? Grupo de clasificaci?n ?? */
.module-group { margin-bottom: 40px; }

/* Encabezado: l?nea ?? T?TULO ?? l?nea */
.module-group-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.group-rule {
  flex: 1;
  height: 1px;
  background: var(--border);
  display: block;
}

.group-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #C9A24B;
  text-transform: uppercase;
  letter-spacing: 3.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Grid: exactamente 3 columnas por fila */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Tarjeta ? ?cono + nombre, altura uniforme */
.module-card {
  background: var(--glass);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 22px 28px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.module-card:hover {
  border-color: rgba(201,162,75,0.30);
  box-shadow: 0 10px 36px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: translateY(-2px);
}

/* Caja de ?cono */
.module-icon-box {
  width: 58px; height: 58px;
  border-radius: 14px;
  background: rgba(201,162,75,0.07);
  border: 1px solid rgba(201,162,75,0.22);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}

/* Nombre ? ocupa el espacio disponible */
.module-name {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
  flex: 1;
  display: flex;
  align-items: center;
}

/* ?? M?dulos visuales: full-bleed, mismo tama?o (proporci?n ~3:5) ?? */
.module-card--visual {
  position: relative;
  padding: 0 !important;
  overflow: hidden;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0 !important;
  max-height: 520px;
  aspect-ratio: 8 / 15;
  display: block;
  justify-self: stretch;
  align-items: stretch;
  text-align: left;
  background: #04060c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5);
}

.module-card--visual:hover {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 44px rgba(0,0,0,0.58);
  transform: translateY(-3px);
}

/* M?dulos bloqueados ? candado HUD tecnol?gico */
.module-card.is-locked {
  cursor: not-allowed;
  pointer-events: auto;
}

.module-card--visual.is-locked {
  border-color: rgba(201, 162, 75, 0.18);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(201, 162, 75, 0.08);
}

.module-card--visual.is-locked:hover {
  transform: none;
  border-color: rgba(201, 162, 75, 0.28);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.55),
    0 0 24px rgba(201, 162, 75, 0.08),
    inset 0 0 0 1px rgba(201, 162, 75, 0.14);
}

.module-card.is-locked .module-full-art {
  filter: grayscale(1) brightness(0.42) contrast(1.05) saturate(0.2);
}

.module-card.is-locked .module-art-fade {
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(201, 162, 75, 0.10), transparent 62%),
    linear-gradient(to top, rgba(4,6,12,0.92) 0%, rgba(4,6,12,0.5) 24%, rgba(4,6,12,0.32) 58%);
}

.module-card.is-locked .mod-hud,
.module-card.is-locked .module-icon-box,
.module-card.is-locked .module-name {
  filter: grayscale(0.9) brightness(0.7);
  opacity: 0.68;
}

.module-lock {
  --lock: #E8C65A;
  --lock-dim: rgba(201, 162, 75, 0.45);
  --lock-glow: rgba(232, 198, 90, 0.35);
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 162, 75, 0.12), transparent 42%),
    rgba(4, 8, 16, 0.38);
  cursor: pointer;
  color: var(--lock);
}

.module-lock-hud {
  position: relative;
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
}

.module-lock-orbit {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  pointer-events: none;
}

.module-lock-orbit--outer {
  width: 108px;
  height: 108px;
  border: 1px solid var(--lock-dim);
  box-shadow:
    0 0 18px var(--lock-glow),
    inset 0 0 18px rgba(201, 162, 75, 0.08);
  animation: lock-orbit-spin 18s linear infinite;
  background:
    conic-gradient(from 0deg, transparent 0 12deg, var(--lock-dim) 12deg 14deg, transparent 14deg 42deg,
      var(--lock-dim) 42deg 44deg, transparent 44deg 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.4px));
}

.module-lock-orbit--mid {
  width: 86px;
  height: 86px;
  border: 1px dashed rgba(232, 198, 90, 0.38);
  animation: lock-orbit-spin 12s linear infinite reverse;
}

.module-lock-orbit--inner {
  width: 66px;
  height: 66px;
  border: 1.2px solid rgba(232, 198, 90, 0.55);
  box-shadow:
    0 0 14px rgba(232, 198, 90, 0.22),
    inset 0 0 12px rgba(232, 198, 90, 0.10);
}

.module-lock-cross {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(232, 198, 90, 0.55), transparent);
  pointer-events: none;
}
.module-lock-cross--h {
  width: 118px;
  height: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.55;
}
.module-lock-cross--v {
  width: 1px;
  height: 118px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, rgba(232, 198, 90, 0.55), transparent);
  opacity: 0.55;
}

.module-lock-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.module-lock-ticks i {
  position: absolute;
  width: 2px;
  height: 8px;
  background: var(--lock);
  border-radius: 1px;
  box-shadow: 0 0 6px var(--lock-glow);
  opacity: 0.85;
}
.module-lock-ticks i:nth-child(1) { top: 2px; left: 50%; transform: translateX(-50%); }
.module-lock-ticks i:nth-child(2) { bottom: 2px; left: 50%; transform: translateX(-50%); }
.module-lock-ticks i:nth-child(3) { left: 2px; top: 50%; transform: translateY(-50%) rotate(90deg); }
.module-lock-ticks i:nth-child(4) { right: 2px; top: 50%; transform: translateY(-50%) rotate(90deg); }

.module-lock-corners {
  position: absolute;
  inset: 14px;
  pointer-events: none;
}
.module-lock-corners::before,
.module-lock-corners::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1.4px solid rgba(232, 198, 90, 0.7);
}
.module-lock-corners::before {
  top: 0; left: 0;
  border-right: 0; border-bottom: 0;
}
.module-lock-corners::after {
  bottom: 0; right: 0;
  border-left: 0; border-top: 0;
}

.module-lock-core {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 244, 192, 0.18), transparent 55%),
    rgba(8, 10, 18, 0.78);
  border: 1.5px solid rgba(232, 198, 90, 0.65);
  box-shadow:
    0 0 22px rgba(232, 198, 90, 0.28),
    inset 0 1px 0 rgba(255, 244, 192, 0.25),
    inset 0 -4px 10px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.module-lock-icon {
  display: block;
  color: var(--lock);
  filter: drop-shadow(0 0 6px var(--lock-glow));
}

.module-lock-progress {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  z-index: 3;
}
.module-lock-progress i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(232, 198, 90, 0.45);
  background: transparent;
  box-shadow: none;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.module-lock-progress i.is-on {
  background: linear-gradient(180deg, #FFF4C0, #C9A24B);
  border-color: #E8C65A;
  box-shadow: 0 0 8px rgba(232, 198, 90, 0.7);
}

.module-lock-label {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: rgba(232, 198, 90, 0.85);
  text-shadow: 0 0 8px rgba(232, 198, 90, 0.35);
  white-space: nowrap;
  z-index: 3;
}

.module-lock:hover .module-lock-core {
  border-color: rgba(255, 244, 192, 0.85);
  box-shadow:
    0 0 28px rgba(232, 198, 90, 0.42),
    inset 0 1px 0 rgba(255, 244, 192, 0.35),
    inset 0 -4px 10px rgba(0, 0, 0, 0.45);
}

.module-lock.is-pulse .module-lock-core {
  transform: scale(1.08);
  box-shadow:
    0 0 34px rgba(232, 198, 90, 0.55),
    inset 0 1px 0 rgba(255, 244, 192, 0.4);
}

.module-lock.is-unlocking .module-lock-hud {
  animation: lock-unlock 0.38s ease forwards;
}

@keyframes lock-orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes lock-unlock {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  55% { opacity: 1; transform: scale(1.18); filter: brightness(1.5); }
  100% { opacity: 0; transform: scale(1.35); filter: brightness(2); }
}

.module-card:not(.module-card--visual).is-locked {
  position: relative;
  filter: grayscale(1) brightness(0.7);
}

.nav-subitem.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.nav-subitem.is-locked .nav-subdot {
  filter: grayscale(1);
}

.nav-sublock {
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1.4px solid currentColor;
  position: relative;
  flex-shrink: 0;
  opacity: 0.75;
}
.nav-sublock::before {
  content: '';
  position: absolute;
  left: 1.5px;
  right: 1.5px;
  top: -5px;
  height: 5px;
  border: 1.3px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

[data-theme="oro-rosa"] .module-lock {
  --lock: #F0C4CE;
  --lock-dim: rgba(232, 164, 180, 0.45);
  --lock-glow: rgba(240, 196, 206, 0.35);
}
[data-theme="oro-rosa"] .module-card--visual.is-locked {
  border-color: rgba(232, 164, 180, 0.2);
}
[data-theme="oro-rosa"] .module-lock-label,
[data-theme="oro-rosa"] .module-lock-progress i {
  border-color: rgba(232, 164, 180, 0.45);
  color: rgba(240, 196, 206, 0.9);
}
[data-theme="oro-rosa"] .module-lock-progress i.is-on {
  background: linear-gradient(180deg, #FFE0E8, #E8A4B4);
  border-color: #F0C4CE;
  box-shadow: 0 0 8px rgba(240, 196, 206, 0.65);
}

[data-theme="diurno"] .module-lock {
  --lock: #3A5FA0;
  --lock-dim: rgba(70, 110, 180, 0.4);
  --lock-glow: rgba(90, 130, 210, 0.28);
  background:
    radial-gradient(circle at 50% 42%, rgba(90, 130, 210, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.22);
}
[data-theme="diurno"] .module-lock-core {
  background:
    radial-gradient(circle at 35% 30%, rgba(180, 210, 255, 0.35), transparent 55%),
    rgba(255, 255, 255, 0.82);
  border-color: rgba(70, 110, 180, 0.45);
}
[data-theme="diurno"] .module-lock-label {
  color: #3A5FA0;
  text-shadow: none;
}
[data-theme="diurno"] .module-card.is-locked .module-full-art {
  filter: grayscale(1) brightness(0.78) contrast(0.95);
}

.module-card--visual .module-full-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  pointer-events: none;
  border: 0;
}

.module-card--visual .module-art-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(4,6,12,0.78) 0%, rgba(4,6,12,0.22) 16%, transparent 36%);
  pointer-events: none;
  z-index: 1;
}

/* HUD angular tipo sci-fi medical */
.module-card--visual .mod-hud {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mod-hud-panel {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px 12px;
  clip-path: polygon(
    10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 0 calc(100% - 10px), 0 10px
  );
  border: none;
  border-radius: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mod-color) 18%, transparent), transparent 42%),
    rgba(5, 8, 16, 0.82);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mod-color) 70%, transparent),
    0 8px 22px rgba(0,0,0,0.45),
    0 0 18px color-mix(in srgb, var(--mod-color) 22%, transparent),
    inset 0 0 20px color-mix(in srgb, var(--mod-color) 10%, transparent);
}

.mod-hud-corners {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.mod-hud-corners::before,
.mod-hud-corners::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--mod-color);
  filter: drop-shadow(0 0 4px var(--mod-color));
}
.mod-hud-corners::before {
  top: 3px;
  left: 3px;
  border-right: none;
  border-bottom: none;
}
.mod-hud-corners::after {
  bottom: 3px;
  right: 3px;
  border-left: none;
  border-top: none;
}

.mod-hud-gauge {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: auto;
}

.mod-gauge-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
}

.mod-gauge-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.mod-gauge-fill {
  transition: stroke-dashoffset 0.45s ease;
  /* glow circular v?a paint, sin filter CSS (evita caja cuadrada) */
  paint-order: stroke;
}

.mod-gauge-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.4px;
  text-shadow: 0 0 10px color-mix(in srgb, var(--mod-color) 65%, transparent);
  pointer-events: none;
  z-index: 2;
}

.mod-hud-main {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding-top: 2px;
}

.mod-hud-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #F4F7FF;
  text-align: left;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.module-card--visual .mod-hud-main {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding-top: 2px;
}

.module-card--visual .mod-hud-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #F4F7FF;
  text-align: left;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mod-hud-title-l1,
.mod-hud-title-l2 {
  display: block;
}

.mod-hud-title-l2 {
  font-size: 12px;
  font-weight: 650;
  color: rgba(244,247,255,0.95);
}

.mod-hud-levels {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.78);
  text-align: left;
  line-height: 1.3;
}

/* Grid Tronco: 4 por l?nea; visuales altos, ?conos no se estiran */
.module-group[data-group="tronco"] .modules-grid,
.module-group[data-group="rotaciones"] .modules-grid,
.module-group[data-group="herramientas"] .modules-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
  justify-items: stretch;
  align-items: start;
  gap: 14px;
}

@media (max-width: 1100px) {
  .module-group[data-group="tronco"] .modules-grid,
  .module-group[data-group="rotaciones"] .modules-grid,
  .module-group[data-group="herramientas"] .modules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .module-group[data-group="tronco"] .modules-grid,
  .module-group[data-group="rotaciones"] .modules-grid,
  .module-group[data-group="herramientas"] .modules-grid {
    grid-template-columns: 1fr;
  }
  .module-card--visual {
    max-width: 280px;
    max-height: 520px;
    justify-self: center;
  }
}

/* ?? P?gina de m?dulo: panel de completitud + temas ?? */
.mod-page-hero {
  display: block;
  padding: 0;
  margin-bottom: 18px;
  border-radius: 0;
  border: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
}

.mod-page-hero .mod-hud {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 0;
}

.mod-page-hero .mod-hud-panel {
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  clip-path: none;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--mod-color) 45%, transparent);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--mod-color) 14%, transparent), transparent 55%),
    rgba(8, 10, 18, 0.80);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mod-color) 30%, transparent),
    0 8px 28px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

.mod-page-hero .mod-hud-gauge {
  justify-self: center;
}

.mod-page-hero .mod-gauge-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}

.mod-page-hero .mod-gauge-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.mod-page-hero .mod-hud-main {
  gap: 5px;
}

.mod-page-hero .mod-hud-title {
  font-size: 19px;
  line-height: 1.2;
}

.mod-page-hero .mod-hud-title-l1 {
  font-size: 19px;
  font-weight: 800;
}

.mod-page-hero .mod-hud-title-l2 {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.8;
}

.mod-page-hero .mod-hud-levels {
  font-size: 12px;
  letter-spacing: 0.3px;
  opacity: 0.7;
}

/* ?? Selector de modo (Aprender / Practicar / Evaluar) ?? */
.mod-mode-selector {
  display: flex;
  gap: 10px;
  margin: 18px 0 14px;
}

.mod-mode-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px 10px 13px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  /* Frosted glass */
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 20px rgba(0,0,0,0.22);
  cursor: pointer;
  color: rgba(255,255,255,0.55);
  font: inherit;
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
}

.mod-mode-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, transparent 55%);
  pointer-events: none;
}

.mod-mode-btn:hover {
  border-color: color-mix(in srgb, var(--mod-color) 55%, rgba(255,255,255,0.15));
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 28px rgba(0,0,0,0.28);
}

.mod-mode-btn.active {
  border-color: color-mix(in srgb, var(--mod-color) 70%, transparent);
  background: color-mix(in srgb, var(--mod-color) 16%, rgba(255,255,255,0.06));
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  color: #fff;
  box-shadow:
    0 0 20px color-mix(in srgb, var(--mod-color) 30%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 6px 24px rgba(0,0,0,0.30);
}

.mod-mode-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 2px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.mod-mode-btn.active .mod-mode-icon {
  background: color-mix(in srgb, var(--mod-color) 25%, rgba(255,255,255,0.08));
  border-color: color-mix(in srgb, var(--mod-color) 50%, transparent);
  color: var(--mod-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mod-color) 35%, transparent);
}

.mod-mode-btn:hover .mod-mode-icon {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}

.mod-mode-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.mod-mode-sub {
  font-size: 10.5px;
  opacity: 0.5;
  line-height: 1.3;
  text-align: center;
}

.mod-mode-btn.active .mod-mode-sub { opacity: 0.7; }

.mod-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 20px;
  color: var(--text-dim);
}

.mod-coming-soon-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.mod-coming-soon-sub {
  font-size: 12.5px;
  opacity: 0.6;
  max-width: 320px;
  text-align: center;
  line-height: 1.55;
  margin: 0;
}

/* ?? Topics list ?? */
.mod-topics {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mod-topic {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
  width: 100%;
  color: inherit;
  font: inherit;
}

.mod-topic:hover {
  border-color: color-mix(in srgb, var(--mod-color) 45%, transparent);
  background: color-mix(in srgb, var(--mod-color) 8%, transparent);
}

.mod-topic.is-done {
  border-color: color-mix(in srgb, var(--mod-color) 40%, transparent);
  background: color-mix(in srgb, var(--mod-color) 10%, transparent);
}

.mod-topic-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid color-mix(in srgb, var(--mod-color) 55%, transparent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(0,0,0,0.25);
}

.mod-topic.is-done .mod-topic-check {
  background: var(--mod-color);
  border-color: var(--mod-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--mod-color) 45%, transparent);
}

.mod-topic-check svg { opacity: 0; }
.mod-topic.is-done .mod-topic-check svg { opacity: 1; }

.mod-topic-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.mod-topic-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.mod-topic.is-done .mod-topic-badge {
  color: var(--mod-color);
}

@media (max-width: 700px) {
  .mod-page-hero .mod-hud-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .mod-page-hero .mod-hud-title,
  .mod-page-hero .mod-hud-levels { text-align: center; }
}


/* ????????????????????????????????????????????????????????????
   RESPONSIVE ? tablet + tel?fono
???????????????????????????????????????????????????????????? */

/* Bot?n men? + backdrop (inyectados por JS) */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--glass) 80%, transparent);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  z-index: 120;
}
.nav-burger svg { width: 18px; height: 18px; display: block; }

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4, 8, 20, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

@media (max-width: 1200px) {
  .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ministats-row { grid-template-columns: repeat(2, 1fr); }
  .kpi-value { font-size: 28px; }
  .kpi-content--racha .kpi-value { font-size: 30px; }
  .kpi-figure--racha { width: 64px; height: 64px; }
  .kpi-card,
  .kpi-content { min-height: 156px; }
}

/* ?? Tablet (?1024px) ?? */
@media (max-width: 1024px) {
  .nav-burger { display: inline-flex; }

  .nav-backdrop {
    display: block;
  }
  body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar {
    width: min(280px, 86vw);
    transform: translateX(-105%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), width 0.24s ease;
    box-shadow: none;
  }
  body.nav-open .sidebar {
    transform: translateX(0);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.45);
  }

  /* En m?vil/tablet no usar sidebar colapsado por iconos */
  body.sidebar-collapsed .sidebar { width: min(280px, 86vw); }
  body.sidebar-collapsed .main { margin-left: 0; }
  body.sidebar-collapsed .logo-wordmark { display: flex; }
  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .sidebar-action .nav-label {
    opacity: 1;
    width: auto;
  }
  body.sidebar-collapsed .nav-item,
  body.sidebar-collapsed .sidebar-action {
    justify-content: flex-start;
    padding-left: 14px;
  }
  body.sidebar-collapsed .nav-group-toggle .nav-chevron {
    display: block;
  }

  .main {
    margin-left: 0;
    padding: 18px 20px 48px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  .topbar {
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }

  .topbar-leading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
  }

  .search-wrap { flex: 1; min-width: 0; }
  .search-input { width: 100%; max-width: 100%; }

  .page-title {
    font-size: 24px;
    margin-bottom: 18px;
  }

  .modules-title {
    font-size: 20px;
  }

  .kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .module-group[data-group="tronco"] .modules-grid,
  .module-group[data-group="rotaciones"] .modules-grid,
  .module-group[data-group="herramientas"] .modules-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .module-card--visual {
    max-height: 460px;
  }

  .module-lock-hud {
    width: 96px;
    height: 96px;
  }
  .module-lock-orbit--outer { width: 96px; height: 96px; }
  .module-lock-orbit--mid { width: 76px; height: 76px; }
  .module-lock-orbit--inner { width: 58px; height: 58px; }
  .module-lock-core { width: 46px; height: 46px; }
  .module-lock-cross--h { width: 104px; }
  .module-lock-cross--v { height: 104px; }

  .settings-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .logros-hero {
    padding: 18px 20px;
    gap: 22px;
  }

  .progreso-mod-row {
    grid-template-columns: 12px 1fr auto;
  }

  .mascota-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .velion-cat {
    transform: scale(0.9);
    transform-origin: bottom left;
  }
}

@media (max-width: 960px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col        { grid-template-columns: 1fr; }
  .stats-card     { flex-direction: column; }
  .racha-panel    { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .stats-vdivider { display: none; }
  .modules-grid   { grid-template-columns: repeat(2, 1fr); }

  .module-group[data-group="tronco"] .modules-grid,
  .module-group[data-group="rotaciones"] .modules-grid,
  .module-group[data-group="herramientas"] .modules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mod-mode-selector {
    gap: 8px;
  }

  .mod-mode-btn {
    padding: 14px 8px 12px;
  }

  .fondo-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .theme-btns--metal {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ?? Tel?fono (?640px) ?? */
@media (max-width: 640px) {
  .main {
    padding: 14px 14px 40px;
  }

  .page-title {
    font-size: 20px;
    letter-spacing: 0.4px;
    margin-bottom: 14px;
  }

  .progreso-page-sub,
  .settings-page-sub {
    font-size: 12px;
    padding: 0 4px;
  }

  .kpi-row {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }

  .kpi-card,
  .kpi-content { min-height: 140px; }
  .kpi-value { font-size: 26px; }

  .modules-grid,
  .module-group[data-group="tronco"] .modules-grid,
  .module-group[data-group="rotaciones"] .modules-grid,
  .module-group[data-group="herramientas"] .modules-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .module-card--visual {
    aspect-ratio: 3 / 5;
    max-height: 380px;
    border-radius: 12px;
  }

  .module-lock-hud {
    width: 84px;
    height: 84px;
  }
  .module-lock-orbit--outer { width: 84px; height: 84px; }
  .module-lock-orbit--mid { width: 66px; height: 66px; }
  .module-lock-orbit--inner { width: 50px; height: 50px; }
  .module-lock-core { width: 40px; height: 40px; }
  .module-lock-icon { width: 22px; height: 22px; }
  .module-lock-cross--h { width: 92px; }
  .module-lock-cross--v { height: 92px; }
  .module-lock-label { font-size: 7px; top: -14px; }
  .module-lock-progress i { width: 5px; height: 5px; }

  .user-greeting {
    font-size: 12px;
    max-width: 42vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .search-input {
    font-size: 16px; /* evita zoom iOS */
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .improvement-panel,
  .glass-panel {
    border-radius: 14px;
  }

  .glass-panel {
    padding: 16px;
  }

  .ministats-row {
    grid-template-columns: 1fr;
  }

  .mod-mode-selector {
    flex-direction: column;
  }

  .mod-mode-btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    text-align: left;
  }

  .mod-mode-sub {
    text-align: left;
  }

  .mod-mode-icon {
    margin-bottom: 0;
  }

  .logros-hero {
    flex-direction: column;
    align-items: center;
    padding: 16px;
  }

  .logros-hero-stats {
    width: 100%;
    flex-direction: column;
  }

  .logros-metal-stat {
    min-width: 0;
    width: 100%;
  }

  .logros-grid--badges {
    grid-template-columns: 1fr;
  }

  .settings-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .settings-page-hd {
    flex-wrap: wrap;
    gap: 10px;
  }

  .fondo-btns {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mascota-skin-grid {
    grid-template-columns: 1fr;
  }

  .mascota-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mascota-stage {
    padding: 20px 16px;
  }

  .progreso-mod-pct {
    font-size: 13px;
  }

  .sidebar-logo {
    padding: 18px 14px 14px;
  }

  .logo-emblem {
    width: 72px;
    height: 72px;
  }

  .velion-cat {
    transform: scale(0.82);
  }

  body.nav-open {
    overflow: hidden;
  }
}

@media (max-width: 420px) {
  .modules-grid,
  .module-group[data-group="tronco"] .modules-grid,
  .module-group[data-group="rotaciones"] .modules-grid,
  .module-group[data-group="herramientas"] .modules-grid {
    grid-template-columns: 1fr;
  }

  .module-card--visual {
    max-height: 440px;
    aspect-ratio: 8 / 12;
  }

  .user-greeting strong {
    font-weight: 700;
  }
}


/* ????????????????????????????????????????????????????????????
   PANEL DE AJUSTES
???????????????????????????????????????????????????????????? */

/* T?tulo de la secci?n (reutiliza .modules-title pero con margen top) */
.settings-title { margin-top: 52px; }

/* Grid de 2 cards lado a lado */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}

/* Card individual de ajuste (hereda glass-panel padding/shadow) */
.settings-card { display: flex; flex-direction: column; gap: 14px; }

/* Cabecera de cada card */
.settings-card-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.settings-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
}

.settings-card-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
}

/* ?? Fila de toggle ?? */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.setting-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.setting-select {
  min-width: 160px;
  max-width: 220px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(8, 10, 18, 0.55);
  color: var(--text, #eee);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.setting-select:focus {
  border-color: rgba(255,255,255,0.28);
}

/* ?? Toggle switch (checkbox estilizado) ?? */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  transition: background 0.22s, border-color 0.22s;
}

.toggle-track::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-dim);
  top: 2px;
  left: 2px;
  transition: transform 0.22s, background 0.22s;
}

.toggle-switch input:checked + .toggle-track {
  background: rgba(201, 162, 75, 0.22);
  border-color: rgba(201, 162, 75, 0.48);
}

.toggle-switch input:checked + .toggle-track::before {
  transform: translateX(18px);
  background: #C9A24B;
}

/* ?? Botones de fondo animado ?? */
.fondo-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fondo-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.fondo-btn:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(91,163,255,0.35);
}

.fondo-btn.active {
  border-color: rgba(91,163,255,0.55);
  background: rgba(91,163,255,0.10);
  box-shadow: 0 0 18px rgba(91,163,255,0.12);
}

.fondo-btn-preview {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
}

.fondo-preview--auto {
  background:
    linear-gradient(135deg, rgba(74,127,245,0.7), rgba(16,24,48,0.9) 55%, rgba(201,162,75,0.55));
}
.fondo-preview--neural {
  background:
    radial-gradient(circle at 30% 40%, rgba(140,200,255,0.9), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(74,127,245,0.7), transparent 45%),
    #071022;
}
.fondo-preview--vitalis {
  background:
    radial-gradient(circle at 40% 50%, rgba(45,212,191,0.75), transparent 42%),
    radial-gradient(circle at 75% 35%, rgba(56,189,248,0.45), transparent 40%),
    #061418;
}
.fondo-preview--none {
  background: linear-gradient(160deg, #121826, #070a12);
}

.fondo-btn-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
}

.fondo-btn-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
}

.fondo-btn.is-locked {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.fondo-btn:disabled {
  pointer-events: none;
}

/* ?? Botones de tema ?? */
.theme-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.theme-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
  text-align: left;
}

.theme-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}

.theme-btn.active {
  border-color: rgba(201, 162, 75, 0.55);
  background: rgba(201, 162, 75, 0.08);
}

/* Swatch de color de cada tema */
.theme-btn-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.10);
}

.theme-swatch--gold  { background: linear-gradient(135deg, #0A0C10 50%, #C9A24B 100%); }
.theme-swatch--rosegold { background: linear-gradient(135deg, #0A080A 50%, #E8A4B4 100%); }
.theme-swatch--dark  { background: linear-gradient(135deg, #030610 50%, #3B5AF5 100%); }
.theme-swatch--light { background: linear-gradient(135deg, #0C1430 50%, #5BA3FF 100%); }

.theme-btn-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

.theme-btn-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
}

/* ?? Mantarraya oro rosa (fondo central + estrellas) ?? */
.manta-bg {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(78vw, 820px);
  max-height: 88vh;
  height: auto;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.72;
  filter:
    drop-shadow(0 0 28px rgba(232, 164, 180, 0.45))
    drop-shadow(0 0 60px rgba(255, 180, 200, 0.22));
}

body.universe-mode .manta-bg {
  opacity: 0.88;
  width: min(86vw, 920px);
}

/* ?? Fondo red neuronal (temas azules) ? imagen id?ntica al render ?? */
.neural-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.9;
  animation: neural-bg-breathe 16s ease-in-out infinite;
}

@keyframes neural-bg-breathe {
  0%, 100% { opacity: 0.84; }
  50% { opacity: 0.96; }
}

#ambient-bg-canvas {
  z-index: 0;
}

body.universe-mode .neural-bg {
  opacity: 1;
  animation: none;
}

/* ?? Constelaci?n conejo (tema dorado, lado izquierdo) ?? */
.conejo-dorado-bg {
  position: fixed;
  left: max(12px, calc(var(--sidebar-w, 72px) + 8px));
  top: 50%;
  transform: translateY(-52%);
  width: min(34vw, 380px);
  max-height: 72vh;
  height: auto;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.78;
  filter: none;
}

body.universe-mode .conejo-dorado-bg {
  opacity: 0.9;
  width: min(40vw, 440px);
}

@media (max-width: 900px) {
  .conejo-dorado-bg {
    width: min(42vw, 260px);
    opacity: 0.55;
    left: 8px;
  }
}

/* ?? Constelaci?n coraz?n (tema dorado, centro) ?? */
.corazon-dorado-bg {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  width: min(28vw, 300px);
  max-height: 58vh;
  height: auto;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.72;
  filter:
    drop-shadow(0 0 18px rgba(212, 170, 78, 0.55))
    drop-shadow(0 0 42px rgba(245, 208, 96, 0.28));
}

body.universe-mode .corazon-dorado-bg {
  opacity: 0.88;
  width: min(34vw, 360px);
}

@media (max-width: 900px) {
  .corazon-dorado-bg {
    width: min(36vw, 220px);
    opacity: 0.5;
  }
}

/* ?? Constelaci?n ping?ino (tema dorado, lado derecho) ?? */
.pinguino-dorado-bg {
  position: fixed;
  right: max(12px, 8px);
  top: 50%;
  transform: translateY(-52%);
  width: min(34vw, 380px);
  max-height: 72vh;
  height: auto;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.78;
  filter:
    drop-shadow(0 0 18px rgba(212, 170, 78, 0.55))
    drop-shadow(0 0 42px rgba(245, 208, 96, 0.28));
}

body.universe-mode .pinguino-dorado-bg {
  opacity: 0.9;
  width: min(40vw, 440px);
}

@media (max-width: 900px) {
  .pinguino-dorado-bg {
    width: min(42vw, 260px);
    opacity: 0.55;
    right: 8px;
  }
}

/* Asegura z-index del sidebar y main por encima del canvas de part?culas */
.main    { position: relative; z-index: 1; }


/* ????????????????????????????????????????????????????????????
   SIDEBAR COLAPSABLE
???????????????????????????????????????????????????????????? */

/* El logo act?a como toggle ? cursor pointer */
.sidebar-logo { cursor: pointer; user-select: none; }
.sidebar-logo:hover .logo-emblem {
  opacity: 0.9;
  transition: opacity 0.15s;
}
.sidebar-logo:focus {
  outline: none;
}
.sidebar-logo:focus .logo-emblem,
.sidebar-logo:active .logo-emblem {
  filter: none;
  box-shadow: none;
  outline: none;
}

/* Etiquetas de texto en nav */
.nav-label {
  transition: opacity 0.18s, width 0.24s;
  white-space: nowrap;
  overflow: hidden;
}

/* ?? Estado COLAPSADO (class en <body>) ?? */
body.sidebar-collapsed .sidebar    { width: 64px; }
body.sidebar-collapsed .main       { margin-left: 64px; }

/* Logo: oculta wordmark, centra ?cono */
body.sidebar-collapsed .logo-wordmark { display: none; }
body.sidebar-collapsed .sidebar-logo  { padding: 16px 0; }
body.sidebar-collapsed .logo-emblem   { width: 48px; height: 48px; }

/* Nav items: centra el ?cono y oculta el label */
body.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 10px 0;
}
body.sidebar-collapsed .nav-label    { opacity: 0; width: 0; }
body.sidebar-collapsed .nav-item.active { padding-left: 0; }

/* Footer actions */
body.sidebar-collapsed .sidebar-action {
  justify-content: center;
  padding: 10px 0;
}
body.sidebar-collapsed .sidebar-action .nav-label { opacity: 0; width: 0; }

/* Separador */
body.sidebar-collapsed .sidebar-sep { margin: 2px 8px; }

/* Scrollbar m?s estrecho cuando colapsado */
body.sidebar-collapsed .sidebar::-webkit-scrollbar { width: 2px; }

/* Tooltip al hacer hover sobre un nav-item colapsado */
body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .sidebar-action {
  position: relative;
}

body.sidebar-collapsed .nav-item:hover::after,
body.sidebar-collapsed .sidebar-action:hover::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10, 14, 40, 0.96);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  backdrop-filter: blur(12px);
}


/* ????????????????????????????????????????????????????????????
   P?GINA DE AJUSTES ? elementos exclusivos
???????????????????????????????????????????????????????????? */

/* Enlace "Volver al dashboard" en el topbar */
.settings-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.13s;
}
.settings-back-link:hover { color: var(--text); }

/* Cabecera de la p?gina Ajustes */
.settings-page-hd {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}

.settings-page-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin: 4px 0 0;
}

.settings-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0 28px;
}

/* Etiqueta de secci?n tipo group-header (reutiliza .module-group-header) */
.settings-section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

/* Estado del toggle (texto "Activado" / "Desactivado") */
.setting-label-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.setting-hint {
  font-size: 11px;
  color: var(--text-faint);
  transition: color 0.2s;
}
.setting-hint.on { color: #C9A24B; }

/* Check de confirmaci?n dentro del bot?n de tema ? oculto por defecto */
.theme-btn-check { margin-left: auto; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.theme-btn.active .theme-btn-check { opacity: 1; }

/* Card placeholder (secciones futuras) */
.settings-card--placeholder {
  opacity: 0.55;
  pointer-events: none;
}

/* Badge "Pr?ximamente" */
.settings-badge-soon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}


/* ????????????????????????????????????????????????????????????
   TEMA DORADO ? Overrides visuales + efecto cromo brillante
   Todos los selectores van prefijados con [data-theme="dorado"], [data-theme="oro-rosa"]
???????????????????????????????????????????????????????????? */

/* ?? Animaci?n de destello cromado ?? */
@keyframes gold-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ?? Fondo del body: negro puro, sin haze dorado ?? */
[data-theme="dorado"] body.dash-body , [data-theme="oro-rosa"] body.dash-body {
  background-color: #000000;
  background-image: none;
}

/* ?? Nav activo: borde dorado + fondo dorado tintado ?? */
[data-theme="dorado"] .nav-item.active , [data-theme="oro-rosa"] .nav-item.active {
  background: rgba(var(--gold-rgb), 0.13);
  border-left-color: var(--gold);
  color: var(--gold);
}

/* ?? Nav activo SVG: colorear ?cono en dorado ?? */
[data-theme="dorado"] .nav-item.active .nav-icon path, [data-theme="oro-rosa"] .nav-item.active .nav-icon path,
[data-theme="dorado"] .nav-item.active .nav-icon rect, [data-theme="oro-rosa"] .nav-item.active .nav-icon rect,
[data-theme="dorado"] .nav-item.active .nav-icon circle , [data-theme="oro-rosa"] .nav-item.active .nav-icon circle {
  stroke: var(--gold);
}

/* ?? Hover nav: tint dorado suave ?? */
[data-theme="dorado"] .nav-item:hover , [data-theme="oro-rosa"] .nav-item:hover {
  background: rgba(var(--gold-rgb), 0.07);
  color: var(--text);
}

/* ?? Sidebar: borde derecho con brillo dorado ?? */
[data-theme="dorado"] .sidebar , [data-theme="oro-rosa"] .sidebar {
  border-right-color: rgba(var(--gold-rgb), 0.22);
  background:
    linear-gradient(180deg, rgba(var(--metal-star), 0.08) 0%, transparent 28%),
    color-mix(in srgb, var(--glass-sidebar) 88%, transparent);
  backdrop-filter: blur(48px) saturate(1.4);
  -webkit-backdrop-filter: blur(48px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(var(--metal-star), 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.03),
    8px 0 28px rgba(var(--gold-rgb), 0.12);
}

/* ?? Sidebar logo: sin halo/luz cuadrada al hover o clic ?? */
[data-theme="dorado"] .sidebar-logo:hover .logo-emblem, [data-theme="oro-rosa"] .sidebar-logo:hover .logo-emblem,
[data-theme="dorado"] .sidebar-logo:active .logo-emblem, [data-theme="oro-rosa"] .sidebar-logo:active .logo-emblem,
[data-theme="dorado"] .sidebar-logo:focus .logo-emblem , [data-theme="oro-rosa"] .sidebar-logo:focus .logo-emblem {
  filter: none;
  opacity: 1;
  outline: none;
  box-shadow: none;
}

/* ?? Logo: "Coreum" con gradiente met?lico ?? */
[data-theme="dorado"] .logo-coreum , [data-theme="oro-rosa"] .logo-coreum {
  background-image: var(--metal-logo-coreum);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ?? Topbar: borde inferior dorado ?? */
[data-theme="dorado"] .topbar , [data-theme="oro-rosa"] .topbar {
  border-bottom-color: rgba(var(--gold-rgb), 0.18);
}

/* ?? Search input: foco en dorado ?? */
[data-theme="dorado"] .search-input:focus , [data-theme="oro-rosa"] .search-input:focus {
  border-color: rgba(var(--gold-rgb), 0.60);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.14);
  outline: none;
}

/* ?? Panel-box: borde dorado tintado ?? */
[data-theme="dorado"] .panel-box , [data-theme="oro-rosa"] .panel-box {
  border-color: rgba(var(--gold-rgb), 0.18);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55),
              0 0 0 1px rgba(var(--gold-rgb), 0.08),
              inset 0 1px 0 rgba(var(--gold-rgb), 0.07);
}

/* ?? ?conos SVG de m?dulos: todos met?licos (excepto visuales) ?? */
[data-theme="dorado"] .module-card:not(.module-card--visual) .module-icon-box svg path,
[data-theme="oro-rosa"] .module-card:not(.module-card--visual) .module-icon-box svg path,
[data-theme="dorado"] .module-card:not(.module-card--visual) .module-icon-box svg circle,
[data-theme="oro-rosa"] .module-card:not(.module-card--visual) .module-icon-box svg circle,
[data-theme="dorado"] .module-card:not(.module-card--visual) .module-icon-box svg rect,
[data-theme="oro-rosa"] .module-card:not(.module-card--visual) .module-icon-box svg rect,
[data-theme="dorado"] .module-card:not(.module-card--visual) .module-icon-box svg line,
[data-theme="oro-rosa"] .module-card:not(.module-card--visual) .module-icon-box svg line,
[data-theme="dorado"] .module-card:not(.module-card--visual) .module-icon-box svg polyline,
[data-theme="oro-rosa"] .module-card:not(.module-card--visual) .module-icon-box svg polyline,
[data-theme="dorado"] .module-card:not(.module-card--visual) .module-icon-box svg ellipse,
[data-theme="oro-rosa"] .module-card:not(.module-card--visual) .module-icon-box svg ellipse {
  stroke: var(--gold) !important;
}
/* Fills de color ? metal transl?cido */
[data-theme="dorado"] .module-card:not(.module-card--visual) .module-icon-box svg [fill]:not([fill="none"]):not([fill="transparent"]),
[data-theme="oro-rosa"] .module-card:not(.module-card--visual) .module-icon-box svg [fill]:not([fill="none"]):not([fill="transparent"]) {
  fill: rgba(var(--gold-rgb), 0.18) !important;
}
/* Im?genes de ?cono antiguas: tinte met?lico (no h?roes visuales) */
[data-theme="dorado"] .module-card:not(.module-card--visual) .module-icon-box img,
[data-theme="oro-rosa"] .module-card:not(.module-card--visual) .module-icon-box img {
  filter: sepia(0.5) hue-rotate(-10deg) saturate(1.8) brightness(1.05) !important;
  mix-blend-mode: screen !important;
}
[data-theme="oro-rosa"] .module-card:not(.module-card--visual) .module-icon-box img {
  filter: sepia(0.55) hue-rotate(300deg) saturate(1.6) brightness(1.05) !important;
}

/* ????????????????????????????????????????????????????????????
   TEMA DORADO ? M?dulos visuales 100% oro (solo dorado)
   Arte multicolor ? tinte met?lico dorado; HUD/gauge en --gold
???????????????????????????????????????????????????????????? */
[data-theme="dorado"] .module-card--visual,
[data-theme="dorado"] .module-card--visual .mod-hud,
[data-theme="dorado"] #mod-root,
[data-theme="dorado"] #mod-root .mod-hud {
  --mod-color: var(--gold) !important;
}
[data-theme="dorado"] .module-card--visual {
  border: 1px solid rgba(var(--gold-rgb), 0.16);
  background: #05070c;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}
[data-theme="dorado"] .mod-page-hero {
  border-color: rgba(var(--gold-rgb), 0.35);
  background:
    linear-gradient(120deg, rgba(var(--gold-rgb), 0.14), transparent 55%),
    rgba(8, 6, 2, 0.78);
}
[data-theme="dorado"] .mod-page-hero .mod-hud-panel {
  border-color: rgba(var(--gold-rgb), 0.4);
}
[data-theme="dorado"] .mod-gauge-fill {
  stroke: var(--gold) !important;
  filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.75));
}
[data-theme="dorado"] #mod-dot {
  background: var(--gold) !important;
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.7) !important;
}
[data-theme="dorado"] .module-card--visual:hover {
  border-color: rgba(var(--gold-rgb), 0.38);
  box-shadow:
    0 14px 40px rgba(0,0,0,0.55),
    0 0 28px rgba(var(--gold-rgb), 0.22);
}
/* Anatom?a: PNGs -dorado / -oro-rosa reales (sin filter sepia) */
[data-theme="dorado"] .module-card--visual .module-full-art,
[data-theme="oro-rosa"] .module-card--visual .module-full-art {
  filter: none;
}
[data-theme="dorado"] .module-card--visual .module-art-fade {
  background:
    linear-gradient(to top, rgba(8,6,2,0.82) 0%, rgba(8,6,2,0.28) 16%, transparent 36%);
}
[data-theme="dorado"] .module-card--visual .mod-hud-panel {
  background:
    linear-gradient(135deg, rgba(var(--gold-rgb), 0.2), transparent 42%),
    rgba(8, 6, 2, 0.86);
  box-shadow:
    0 0 0 1px rgba(var(--gold-rgb), 0.55),
    0 8px 22px rgba(0,0,0,0.45),
    0 0 18px rgba(var(--gold-rgb), 0.2),
    inset 0 0 20px rgba(var(--gold-rgb), 0.08);
}
[data-theme="dorado"] .module-card--visual .mod-gauge-fill {
  stroke: var(--gold) !important;
  filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.75));
}
[data-theme="dorado"] .module-card--visual .mod-gauge-track {
  stroke: rgba(var(--gold-rgb), 0.18) !important;
}
[data-theme="dorado"] .module-card--visual .mod-gauge-ticks {
  stroke: rgba(var(--gold-rgb), 0.35) !important;
}
[data-theme="dorado"] .mod-hud-title,
[data-theme="dorado"] .mod-gauge-pct {
  color: #F5E6B8;
  -webkit-text-fill-color: #F5E6B8;
  background: none;
  filter: none;
  text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.45);
}
[data-theme="dorado"] .mod-hud-levels,
[data-theme="dorado"] .mod-hud-meta {
  color: rgba(232, 198, 90, 0.78);
  -webkit-text-fill-color: rgba(232, 198, 90, 0.78);
  background: none;
}

/* Oro rosa: HUD met?lico, arte con tinte rose-gold (no azul/rojo) */
[data-theme="oro-rosa"] .module-card--visual,
[data-theme="oro-rosa"] .module-card--visual .mod-hud,
[data-theme="oro-rosa"] #mod-root,
[data-theme="oro-rosa"] #mod-root .mod-hud {
  --mod-color: var(--gold) !important;
}
[data-theme="oro-rosa"] .module-card--visual {
  border-color: rgba(var(--gold-rgb), 0.2);
  background: #05070c;
}
[data-theme="oro-rosa"] .mod-gauge-fill {
  stroke: var(--gold) !important;
}
[data-theme="oro-rosa"] .module-card--visual:hover {
  border-color: rgba(var(--gold-rgb), 0.4);
  box-shadow:
    0 14px 40px rgba(0,0,0,0.55),
    0 0 28px rgba(var(--gold-rgb), 0.22);
}
[data-theme="oro-rosa"] .module-card--visual .mod-gauge-fill {
  stroke: var(--gold) !important;
}
[data-theme="oro-rosa"] .mod-hud-title,
[data-theme="oro-rosa"] .mod-gauge-pct {
  color: #F8E4EA;
  -webkit-text-fill-color: #F8E4EA;
  background: none;
  filter: none;
}
[data-theme="oro-rosa"] .mod-hud-levels,
[data-theme="oro-rosa"] .mod-hud-meta {
  color: rgba(232, 164, 180, 0.82);
  -webkit-text-fill-color: rgba(232, 164, 180, 0.82);
  background: none;
}

/* ????????????????????????????????????????????????????????????
   TEMA DORADO ? KPIs + flama unificados en oro
???????????????????????????????????????????????????????????? */
[data-theme="dorado"] .kpi-card,
[data-theme="dorado"] .kpi-card--orange,
[data-theme="dorado"] .kpi-card--blue,
[data-theme="dorado"] .kpi-card--purple,
[data-theme="dorado"] .kpi-card--green,
[data-theme="dorado"] .kpi-card--gold {
  --kpi: var(--gold) !important;
  border-color: rgba(var(--gold-rgb), 0.28);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.45),
    0 0 22px rgba(var(--gold-rgb), 0.16),
    inset 0 0 24px rgba(var(--gold-rgb), 0.06);
}
[data-theme="dorado"] .kpi-card:hover {
  border-color: rgba(var(--gold-rgb), 0.5);
  box-shadow:
    0 14px 36px rgba(0,0,0,0.5),
    0 0 34px rgba(var(--gold-rgb), 0.28),
    inset 0 0 28px rgba(var(--gold-rgb), 0.1);
}
[data-theme="dorado"] .kpi-content--racha .kpi-label,
[data-theme="dorado"] .kpi-meta--tint {
  color: color-mix(in srgb, var(--gold) 78%, #fff 22%);
}
[data-theme="dorado"] .kpi-meta--up {
  color: var(--metal-bright);
}
[data-theme="dorado"] .kpi-card--racha:focus-visible {
  outline-color: var(--gold);
}
/* Flama SVG ? oro */
[data-theme="dorado"] #rachaAura stop:nth-child(1) {
  stop-color: #F0C840;
  stop-opacity: 0.55;
}
[data-theme="dorado"] #rachaAura stop:nth-child(2) {
  stop-color: #D4AA4E;
  stop-opacity: 0;
}
[data-theme="dorado"] #rachaFlame stop:nth-child(1) { stop-color: #FFF6D0; }
[data-theme="dorado"] #rachaFlame stop:nth-child(2) { stop-color: #E8C65A; }
[data-theme="dorado"] #rachaFlame stop:nth-child(3) { stop-color: #A07828; }
[data-theme="dorado"] .racha-flame {
  filter: drop-shadow(0 0 12px rgba(240, 200, 64, 0.85));
}
[data-theme="dorado"] .racha-flame-core {
  fill: #FFF8E0 !important;
}

/* Oro rosa: KPIs + flama rose-gold */
[data-theme="oro-rosa"] .kpi-card,
[data-theme="oro-rosa"] .kpi-card--orange,
[data-theme="oro-rosa"] .kpi-card--blue,
[data-theme="oro-rosa"] .kpi-card--purple,
[data-theme="oro-rosa"] .kpi-card--green,
[data-theme="oro-rosa"] .kpi-card--gold {
  --kpi: var(--gold) !important;
  border-color: rgba(var(--gold-rgb), 0.28);
}
[data-theme="oro-rosa"] #rachaAura stop:nth-child(1) {
  stop-color: #F0B8C8;
  stop-opacity: 0.55;
}
[data-theme="oro-rosa"] #rachaAura stop:nth-child(2) {
  stop-color: #E8A4B4;
  stop-opacity: 0;
}
[data-theme="oro-rosa"] #rachaFlame stop:nth-child(1) { stop-color: #FFE8EE; }
[data-theme="oro-rosa"] #rachaFlame stop:nth-child(2) { stop-color: #E8A4B4; }
[data-theme="oro-rosa"] #rachaFlame stop:nth-child(3) { stop-color: #C07088; }
[data-theme="oro-rosa"] .racha-flame {
  filter: drop-shadow(0 0 12px rgba(232, 164, 180, 0.85));
}
[data-theme="oro-rosa"] .racha-flame-core {
  fill: #FFF0F4 !important;
}

/* Module cards normales (no visuales): acentos met?licos */
[data-theme="dorado"] .module-card:not(.module-card--visual),
[data-theme="oro-rosa"] .module-card:not(.module-card--visual) {
  border-color: rgba(var(--gold-rgb), 0.22);
}
[data-theme="dorado"] .module-card:not(.module-card--visual):hover,
[data-theme="oro-rosa"] .module-card:not(.module-card--visual):hover {
  box-shadow: 0 12px 36px rgba(0,0,0,0.55),
              0 0 16px rgba(var(--gold-rgb), 0.18);
  border-color: rgba(var(--gold-rgb), 0.45);
}
[data-theme="dorado"] .module-card:not(.module-card--visual) .module-icon-box,
[data-theme="oro-rosa"] .module-card:not(.module-card--visual) .module-icon-box {
  border-color: rgba(var(--gold-rgb), 0.30);
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.15);
}

/* ?? Badge azul ? metal ?? */
[data-theme="dorado"] .badge--blue , [data-theme="oro-rosa"] .badge--blue {
  background: rgba(var(--gold-rgb), 0.13);
  border-color: rgba(var(--gold-rgb), 0.28);
}

/* ?? Dot de estado azul ? metal ?? */
[data-theme="dorado"] .dot--blue , [data-theme="oro-rosa"] .dot--blue {
  background: var(--gold);
  box-shadow: 0 0 7px rgba(var(--gold-rgb), 0.65);
}

/* ?? Identity dot ? metal ?? */
[data-theme="dorado"] .identity-dot , [data-theme="oro-rosa"] .identity-dot {
  background: var(--gold);
  box-shadow: 0 0 7px rgba(var(--gold-rgb), 0.65);
}

/* ?? Scrollbar del sidebar ? metal ?? */
[data-theme="dorado"] .sidebar::-webkit-scrollbar-thumb , [data-theme="oro-rosa"] .sidebar::-webkit-scrollbar-thumb {
  background: rgba(var(--gold-rgb), 0.30);
}

/* ?? Separadores y bordes de secci?n ? metal tenue ?? */
[data-theme="dorado"] .sidebar-sep, [data-theme="oro-rosa"] .sidebar-sep,
[data-theme="dorado"] .sidebar-footer , [data-theme="oro-rosa"] .sidebar-footer {
  border-color: rgba(var(--gold-rgb), 0.14);
}
[data-theme="dorado"] .sidebar-logo , [data-theme="oro-rosa"] .sidebar-logo {
  border-bottom-color: rgba(var(--gold-rgb), 0.18);
}

/* ?? T?tulos de secci?n del dashboard (stat-section-title) ?? */
[data-theme="dorado"] .stat-section-title , [data-theme="oro-rosa"] .stat-section-title {
  color: var(--gold);
}

/* ?? Group headers de m?dulos ?? */
[data-theme="dorado"] .group-title , [data-theme="oro-rosa"] .group-title {
  text-shadow: none;
}

/* ?? Efecto CROMO BRILLANTE: L?neas del grupo y elementos gold reciben destello ?? */
[data-theme="dorado"] .group-rule , [data-theme="oro-rosa"] .group-rule {
  background: var(--_gc);
  background-size: 200% 100%;
  opacity: 0.7;
  animation: gold-shimmer 4s linear infinite;
}

/* ?? Progress bars y stat vals: acento metal ?? */
[data-theme="dorado"] .progress-fill , [data-theme="oro-rosa"] .progress-fill {
  background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--metal-bright));
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.50);
}

/* ?? Bot?n de tema activo: brillo dorado ?? */
[data-theme="dorado"] .theme-btn.active {
  border-color: rgba(212, 170, 78, 0.70);
  box-shadow: 0 0 12px rgba(212, 170, 78, 0.20);
}
[data-theme="oro-rosa"] .theme-btn.active {
  border-color: rgba(232, 164, 180, 0.70);
  box-shadow: 0 0 12px rgba(232, 164, 180, 0.20);
}

/* ?? Swatch del tema dorado: gradiente cromado ?? */
[data-theme="dorado"] .theme-swatch--gold {
  background: var(--_gc);
  background-size: 200% 100%;
  animation: gold-shimmer 3s linear infinite;
  border-color: rgba(212, 170, 78, 0.40);
}
[data-theme="oro-rosa"] .theme-swatch--rosegold {
  background: var(--_gc);
  background-size: 200% 100%;
  animation: gold-shimmer 3s linear infinite;
  border-color: rgba(232, 164, 180, 0.40);
}


/* ????????????????????????????????????????????????????????????
   TEMA DORADO ? Textos en dorado cromado (nada plateado)
???????????????????????????????????????????????????????????? */

/* T?tulos: plateado ? dorado cromado */
[data-theme="dorado"] .page-title, [data-theme="oro-rosa"] .page-title,
[data-theme="dorado"] .panel-hd-title, [data-theme="oro-rosa"] .panel-hd-title,
[data-theme="dorado"] .improvement-title, [data-theme="oro-rosa"] .improvement-title,
[data-theme="dorado"] .group-title, [data-theme="oro-rosa"] .group-title,
[data-theme="dorado"] .modules-title, [data-theme="oro-rosa"] .modules-title,
[data-theme="dorado"] .settings-page-hd .page-title, [data-theme="oro-rosa"] .settings-page-hd .page-title,
[data-theme="dorado"] .settings-page-sub, [data-theme="oro-rosa"] .settings-page-sub,
[data-theme="dorado"] .logros-stat-val, [data-theme="oro-rosa"] .logros-stat-val,
[data-theme="dorado"] .logros-gauge-pct, [data-theme="oro-rosa"] .logros-gauge-pct,
[data-theme="dorado"] .logo-velion , [data-theme="oro-rosa"] .logo-velion {
  background-image: var(--_chrome-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: none;
  filter: none;
}

/* N?meros y valores: dorado cromado */
[data-theme="dorado"] .racha-number, [data-theme="oro-rosa"] .racha-number,
[data-theme="dorado"] .stat-val, [data-theme="oro-rosa"] .stat-val,
[data-theme="dorado"] .impr-pct, [data-theme="oro-rosa"] .impr-pct,
[data-theme="dorado"] .ministat-val , [data-theme="oro-rosa"] .ministat-val {
  background-image: var(--_chrome-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Etiquetas y textos dim: metal (no p?lido/plateado) */
[data-theme="dorado"] .stat-label, [data-theme="oro-rosa"] .stat-label,
[data-theme="dorado"] .stat-delta, [data-theme="oro-rosa"] .stat-delta,
[data-theme="dorado"] .racha-subtitle, [data-theme="oro-rosa"] .racha-subtitle,
[data-theme="dorado"] .racha-unit, [data-theme="oro-rosa"] .racha-unit,
[data-theme="dorado"] .impr-sub, [data-theme="oro-rosa"] .impr-sub,
[data-theme="dorado"] .impr-pct-label, [data-theme="oro-rosa"] .impr-pct-label,
[data-theme="dorado"] .chart-label, [data-theme="oro-rosa"] .chart-label,
[data-theme="dorado"] .chart-labels span, [data-theme="oro-rosa"] .chart-labels span,
[data-theme="dorado"] .user-greeting, [data-theme="oro-rosa"] .user-greeting,
[data-theme="dorado"] .module-name, [data-theme="oro-rosa"] .module-name,
[data-theme="dorado"] .ministat-lbl, [data-theme="oro-rosa"] .ministat-lbl,
[data-theme="dorado"] .ministat-sub, [data-theme="oro-rosa"] .ministat-sub,
[data-theme="dorado"] .module-desc, [data-theme="oro-rosa"] .module-desc,
[data-theme="dorado"] .setting-hint, [data-theme="oro-rosa"] .setting-hint,
[data-theme="dorado"] .setting-label, [data-theme="oro-rosa"] .setting-label,
[data-theme="dorado"] .settings-back-link, [data-theme="oro-rosa"] .settings-back-link,
[data-theme="dorado"] .logros-stat-lbl , [data-theme="oro-rosa"] .logros-stat-lbl {
  color: var(--metal-label);
  -webkit-text-fill-color: var(--metal-label);
  background: none;
}

/* Nombres y ?nfasis: cromado vivo */
[data-theme="dorado"] .impr-name, [data-theme="oro-rosa"] .impr-name,
[data-theme="dorado"] .racha-title, [data-theme="oro-rosa"] .racha-title,
[data-theme="dorado"] .user-greeting strong, [data-theme="oro-rosa"] .user-greeting strong,
[data-theme="dorado"] .logro-title , [data-theme="oro-rosa"] .logro-title {
  background-image: var(--_chrome-gold-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Nav + footer: metal (antes se ve?a p?lido) */
[data-theme="dorado"] .nav-item, [data-theme="oro-rosa"] .nav-item,
[data-theme="dorado"] .sidebar-action , [data-theme="oro-rosa"] .sidebar-action {
  color: var(--metal-nav);
}
[data-theme="dorado"] .nav-item:hover, [data-theme="oro-rosa"] .nav-item:hover,
[data-theme="dorado"] .sidebar-action:hover, [data-theme="oro-rosa"] .sidebar-action:hover,
[data-theme="dorado"] .nav-item.active , [data-theme="oro-rosa"] .nav-item.active {
  color: var(--metal-bright);
}
[data-theme="dorado"] .nav-item .nav-icon path, [data-theme="oro-rosa"] .nav-item .nav-icon path,
[data-theme="dorado"] .nav-item .nav-icon rect, [data-theme="oro-rosa"] .nav-item .nav-icon rect,
[data-theme="dorado"] .nav-item .nav-icon circle, [data-theme="oro-rosa"] .nav-item .nav-icon circle,
[data-theme="dorado"] .nav-item .nav-icon line, [data-theme="oro-rosa"] .nav-item .nav-icon line,
[data-theme="dorado"] .nav-item .nav-icon polyline , [data-theme="oro-rosa"] .nav-item .nav-icon polyline {
  stroke: var(--metal-label);
}

/* ?? ?cono de b?squeda: metal ?? */
[data-theme="dorado"] .search-icon path, [data-theme="oro-rosa"] .search-icon path,
[data-theme="dorado"] .search-icon circle , [data-theme="oro-rosa"] .search-icon circle {
  stroke: var(--text-dim);
}
[data-theme="dorado"] .search-input , [data-theme="oro-rosa"] .search-input {
  color: var(--gold);
  background: rgba(var(--gold-rgb), 0.05);
}
[data-theme="dorado"] .search-input::placeholder , [data-theme="oro-rosa"] .search-input::placeholder {
  color: var(--metal-faint);
}

/* ?? Avatar del usuario: borde metal ?? */
[data-theme="dorado"] .user-avatar , [data-theme="oro-rosa"] .user-avatar {
  border-color: rgba(var(--gold-rgb), 0.35);
  background: rgba(var(--gold-rgb), 0.08);
}

/* ?? Racha panel: vidrio c?lido esmerilado ?? */
[data-theme="dorado"] .racha-panel , [data-theme="oro-rosa"] .racha-panel {
  background:
    linear-gradient(160deg, rgba(var(--metal-star-glow), 0.12) 0%, transparent 50%),
    var(--metal-racha-bg);
  border-right-color: rgba(var(--gold-rgb), 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
[data-theme="dorado"] .racha-icon-badge , [data-theme="oro-rosa"] .racha-icon-badge {
  background: rgba(var(--gold-rgb), 0.14);
  border-color: rgba(var(--gold-rgb), 0.32);
}
[data-theme="dorado"] .racha-icon-badge svg [fill],
[data-theme="oro-rosa"] .racha-icon-badge svg [fill] {
  fill: var(--gold) !important;
}

/* ?? Stats card: vidrio esmerilado (estilo Logros) ?? */
[data-theme="dorado"] .stats-card , [data-theme="oro-rosa"] .stats-card {
  background:
    linear-gradient(135deg, rgba(var(--metal-star-glow), 0.10) 0%, transparent 45%),
    var(--glass);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border-color: rgba(var(--gold-rgb), 0.28);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(var(--metal-star), 0.18),
    inset 0 -1px 0 rgba(0,0,0,0.25);
}

/* ?? Divisores internos del stat grid: metal ?? */
[data-theme="dorado"] .stat-mini--bl, [data-theme="oro-rosa"] .stat-mini--bl,
[data-theme="dorado"] .stat-mini--b, [data-theme="oro-rosa"] .stat-mini--b,
[data-theme="dorado"] .stat-mini--l , [data-theme="oro-rosa"] .stat-mini--l {
  border-color: rgba(var(--gold-rgb), 0.12);
}
[data-theme="dorado"] .stats-vdivider , [data-theme="oro-rosa"] .stats-vdivider {
  background: rgba(var(--gold-rgb), 0.18);
}

/* ?? Badges de ?cono: todos metal ?? */
[data-theme="dorado"] .badge--blue, [data-theme="oro-rosa"] .badge--blue,
[data-theme="dorado"] .badge--purple, [data-theme="oro-rosa"] .badge--purple,
[data-theme="dorado"] .badge--green, [data-theme="oro-rosa"] .badge--green,
[data-theme="dorado"] .badge--gold , [data-theme="oro-rosa"] .badge--gold {
  background: rgba(var(--gold-rgb), 0.12);
  border-color: rgba(var(--gold-rgb), 0.28);
}

/* ?? ?conos SVG dentro de badges: metal ?? */
[data-theme="dorado"] .stat-icon-badge svg path, [data-theme="oro-rosa"] .stat-icon-badge svg path,
[data-theme="dorado"] .stat-icon-badge svg circle, [data-theme="oro-rosa"] .stat-icon-badge svg circle,
[data-theme="dorado"] .stat-icon-badge svg rect, [data-theme="oro-rosa"] .stat-icon-badge svg rect,
[data-theme="dorado"] .stat-icon-badge svg polyline , [data-theme="oro-rosa"] .stat-icon-badge svg polyline {
  stroke: var(--gold);
}

/* ?? Panel de mejoras: vidrio esmerilado ?? */
[data-theme="dorado"] .improvement-panel , [data-theme="oro-rosa"] .improvement-panel {
  background:
    linear-gradient(160deg, rgba(var(--metal-star-glow), 0.10) 0%, transparent 42%),
    var(--glass-danger);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border-color: var(--border-danger);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(var(--metal-star), 0.16),
    inset 0 -1px 0 rgba(0,0,0,0.25);
}
[data-theme="dorado"] .impr-warn-icon path, [data-theme="oro-rosa"] .impr-warn-icon path,
[data-theme="dorado"] .impr-warn-icon polygon, [data-theme="oro-rosa"] .impr-warn-icon polygon,
[data-theme="dorado"] .impr-header-icon path , [data-theme="oro-rosa"] .impr-header-icon path {
  stroke: var(--gold);
}

/* ?? Barras de progreso: gradiente cromado ?? */
[data-theme="dorado"] .impr-bar-track , [data-theme="oro-rosa"] .impr-bar-track {
  background: rgba(var(--gold-rgb), 0.10);
  border-radius: 3px;
}
[data-theme="dorado"] .impr-bar , [data-theme="oro-rosa"] .impr-bar {
  background: var(--_gc);
  background-size: 200% 100%;
  animation: gold-shimmer 4s linear infinite;
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.50);
}

/* ?? Glass panels (gr?ficas): vidrio esmerilado ?? */
[data-theme="dorado"] .glass-panel , [data-theme="oro-rosa"] .glass-panel {
  background:
    linear-gradient(160deg, rgba(var(--metal-star-glow), 0.10) 0%, transparent 42%),
    color-mix(in srgb, var(--glass) 70%, transparent);
  backdrop-filter: blur(36px) saturate(1.25);
  -webkit-backdrop-filter: blur(36px) saturate(1.25);
  border-color: rgba(var(--gold-rgb), 0.26);
  box-shadow:
    0 10px 32px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(var(--metal-star), 0.16),
    inset 0 -1px 0 rgba(0,0,0,0.22);
}
[data-theme="dorado"] .panel-hd , [data-theme="oro-rosa"] .panel-hd {
  border-bottom-color: rgba(var(--gold-rgb), 0.12);
}
[data-theme="dorado"] .dot--blue, [data-theme="oro-rosa"] .dot--blue,
[data-theme="dorado"] .dot--green , [data-theme="oro-rosa"] .dot--green {
  background: var(--gold);
  box-shadow: 0 0 7px rgba(var(--gold-rgb), 0.65);
}

/* ????????????????????????????????????????????????????????????
   TEMAS MET?LICOS ? Gr?ficas
???????????????????????????????????????????????????????????? */

/* ?? Gr?fica de l?nea: trazo y puntos ?? */
[data-theme="dorado"] .line-chart-svg path[stroke] , [data-theme="oro-rosa"] .line-chart-svg path[stroke] {
  stroke: var(--gold) !important;
}
[data-theme="dorado"] .line-chart-svg circle , [data-theme="oro-rosa"] .line-chart-svg circle {
  fill: var(--metal-hot) !important;
  stroke: none !important;
}
/* El ?rea rellena (fill=url) la controla JS via el gradiente */

/* ?? Donut: 4 segmentos (Excelente / Bueno / Regular / Refuerzo) ?? */
/* Fondo del anillo */
[data-theme="dorado"] .donut-svg circle:nth-child(1) , [data-theme="oro-rosa"] .donut-svg circle:nth-child(1) {
  stroke: rgba(var(--gold-rgb), 0.10) !important;
}
/* Excelente */
[data-theme="dorado"] .donut-svg circle:nth-child(2) , [data-theme="oro-rosa"] .donut-svg circle:nth-child(2) {
  stroke: var(--metal-bright) !important;
}
/* Bueno */
[data-theme="dorado"] .donut-svg circle:nth-child(3) , [data-theme="oro-rosa"] .donut-svg circle:nth-child(3) {
  stroke: var(--metal-mid) !important;
}
/* Regular */
[data-theme="dorado"] .donut-svg circle:nth-child(4) , [data-theme="oro-rosa"] .donut-svg circle:nth-child(4) {
  stroke: var(--metal-deep) !important;
}
/* Necesita refuerzo */
[data-theme="dorado"] .donut-svg circle:nth-child(5) , [data-theme="oro-rosa"] .donut-svg circle:nth-child(5) {
  stroke: var(--metal-dark) !important;
}

/* ?? Mini-stat icons (badges superiores e inferiores) ?? */
[data-theme="dorado"] .stat-icon-badge svg path, [data-theme="oro-rosa"] .stat-icon-badge svg path,
[data-theme="dorado"] .stat-icon-badge svg polyline, [data-theme="oro-rosa"] .stat-icon-badge svg polyline,
[data-theme="dorado"] .stat-icon-badge svg rect , [data-theme="oro-rosa"] .stat-icon-badge svg rect {
  stroke: var(--gold) !important;
  fill: none !important;
}
[data-theme="dorado"] .stat-icon-badge svg circle , [data-theme="oro-rosa"] .stat-icon-badge svg circle {
  stroke: var(--gold) !important;
}
[data-theme="dorado"] .stat-icon-badge svg circle[fill]:not([fill="none"]) , [data-theme="oro-rosa"] .stat-icon-badge svg circle[fill]:not([fill="none"]) {
  fill: var(--gold) !important;
}

/* ?? Mini-stat cards (82%, 2.3min, +15%, 92%) ?? */
[data-theme="dorado"] .ministat-icon , [data-theme="oro-rosa"] .ministat-icon {
  background: rgba(var(--gold-rgb), 0.10) !important;
  border-color: rgba(var(--gold-rgb), 0.25) !important;
}
[data-theme="dorado"] .ministat-icon svg path , [data-theme="oro-rosa"] .ministat-icon svg path {
  stroke: var(--gold) !important;
}
[data-theme="dorado"] .ministat-icon svg path[fill]:not([fill="none"]) , [data-theme="oro-rosa"] .ministat-icon svg path[fill]:not([fill="none"]) {
  fill: rgba(var(--gold-rgb), 0.25) !important;
}
[data-theme="dorado"] .ministat-icon svg polyline, [data-theme="oro-rosa"] .ministat-icon svg polyline,
[data-theme="dorado"] .ministat-icon svg circle , [data-theme="oro-rosa"] .ministat-icon svg circle {
  stroke: var(--gold) !important;
}
/* ministat: colores vienen del bloque cromado arriba */
[data-theme="dorado"] .ministat-card , [data-theme="oro-rosa"] .ministat-card {
  background:
    linear-gradient(160deg, rgba(var(--metal-star-glow), 0.10) 0%, transparent 42%),
    var(--glass);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-color: rgba(var(--gold-rgb), 0.24);
  box-shadow:
    0 8px 28px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(var(--metal-star), 0.16);
}


/* ????????????????????????????????????????????????????????????
   ESTRELLA SECRETA + MODO UNIVERSO
???????????????????????????????????????????????????????????? */

.secret-star {
  display: none; /* solo en temas met?licos */
  width: 5px;
  height: 5px;
  margin: 56px auto 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(var(--metal-star), 0.55);
  box-shadow:
    0 0 4px 1px rgba(var(--metal-star-glow), 0.55),
    0 0 10px 2px rgba(var(--gold-rgb), 0.25);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

/* Visible solo con temas met?licos (o en modo universo para poder salir) */
[data-theme="dorado"] .secret-star, [data-theme="oro-rosa"] .secret-star,
body.universe-mode .secret-star {
  display: block;
}
.secret-star:hover {
  opacity: 1;
  transform: scale(1.6);
  box-shadow:
    0 0 6px 2px rgba(var(--metal-star-glow), 0.8),
    0 0 16px 4px rgba(var(--gold-rgb), 0.4);
}
.secret-star:active {
  transform: scale(1.1);
}

/* Modo universo: oculta UI, solo fondo de estrellas */
body.universe-mode .sidebar {
  display: none !important;
}
body.universe-mode .main > *:not(#secret-star) {
  display: none !important;
}
body.universe-mode .main {
  margin-left: 0 !important;
  padding: 0;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
body.universe-mode #secret-star {
  position: fixed;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  opacity: 1;
  margin: 0;
  width: 6px;
  height: 6px;
  background: rgba(var(--metal-star), 0.95);
  animation: secret-star-pulse 2.4s ease-in-out infinite;
}
body.universe-mode #secret-star:hover {
  transform: translateX(-50%) scale(1.8);
}

@keyframes secret-star-pulse {
  0%, 100% {
    opacity: 0.65;
    box-shadow: 0 0 4px 1px rgba(var(--metal-star-glow),0.5), 0 0 12px 3px rgba(var(--gold-rgb),0.25);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 8px 2px rgba(var(--metal-star-glow),0.9), 0 0 20px 6px rgba(var(--gold-rgb),0.45);
  }
}

/* En modo universo el body es negro absoluto */
body.universe-mode.dash-body {
  background: #000 !important;
  background-image: none !important;
}

/* ?? Deltas / variaciones: metal en vez de verde ?? */
[data-theme="dorado"] .delta--green , [data-theme="oro-rosa"] .delta--green {
  color: var(--metal-label);
}

/* ?? Sidebar actions: texto metal ?? */
[data-theme="dorado"] .sidebar-action , [data-theme="oro-rosa"] .sidebar-action {
  color: var(--metal-nav);
}
[data-theme="dorado"] .sidebar-action:hover , [data-theme="oro-rosa"] .sidebar-action:hover {
  color: var(--metal-hover);
  background: rgba(var(--gold-rgb), 0.07);
}

/* ?? Footer acciones SVG: metal ?? */
[data-theme="dorado"] .sidebar-action .nav-icon path, [data-theme="oro-rosa"] .sidebar-action .nav-icon path,
[data-theme="dorado"] .sidebar-action .nav-icon circle, [data-theme="oro-rosa"] .sidebar-action .nav-icon circle,
[data-theme="dorado"] .sidebar-action .nav-icon rect , [data-theme="oro-rosa"] .sidebar-action .nav-icon rect {
  stroke: var(--metal-label);
}
[data-theme="dorado"] .sidebar-action:hover .nav-icon path, [data-theme="oro-rosa"] .sidebar-action:hover .nav-icon path,
[data-theme="dorado"] .sidebar-action:hover .nav-icon circle, [data-theme="oro-rosa"] .sidebar-action:hover .nav-icon circle,
[data-theme="dorado"] .sidebar-action:hover .nav-icon rect , [data-theme="oro-rosa"] .sidebar-action:hover .nav-icon rect {
  stroke: var(--metal-hover);
}


/* ????????????????????????????????????????????????????????????
   P?GINA DE LOGROS ? glass / metal (referencia)
???????????????????????????????????????????????????????????? */

.logros-page-title {
  margin-bottom: 20px;
}

/* ?? Hero resumen: anillo + stats en vidrio azul ?? */
.logros-hero {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 22px 28px;
  margin-bottom: 28px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(120, 170, 255, 0.10) 0%, transparent 45%),
    rgba(16, 36, 88, 0.42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(120, 170, 255, 0.28);
  box-shadow:
    0 12px 40px rgba(4, 12, 40, 0.45),
    inset 0 1px 0 rgba(180, 210, 255, 0.18),
    inset 0 -1px 0 rgba(20, 40, 90, 0.35);
}

.logros-hero::before,
.logros-hero::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(150, 190, 255, 0.45);
  pointer-events: none;
}
.logros-hero::before {
  top: 10px; left: 10px;
  border-right: none; border-bottom: none;
}
.logros-hero::after {
  bottom: 10px; right: 10px;
  border-left: none; border-top: none;
}

.logros-hero-gauge {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.logros-gauge {
  display: block;
  filter: drop-shadow(0 0 10px rgba(80, 220, 230, 0.35));
}

.logros-gauge-track {
  stroke: rgba(120, 160, 200, 0.22);
}

.logros-gauge-fill {
  stroke: #5CE1E6;
  filter: drop-shadow(0 0 6px rgba(92, 225, 230, 0.7));
}

.logros-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.logros-gauge-pct {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #E8EEF8;
  line-height: 1;
}

.logros-gauge-lbl {
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 4px;
}

.logros-hero-stats {
  display: flex;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
}

.logros-metal-stat {
  flex: 1;
  min-width: 120px;
  padding: 16px 14px;
  text-align: center;
  border-radius: 12px;
  background:
    linear-gradient(160deg, rgba(140, 180, 255, 0.16) 0%, transparent 50%),
    rgba(24, 48, 110, 0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(130, 175, 255, 0.32);
  box-shadow:
    0 6px 18px rgba(8, 20, 60, 0.35),
    inset 0 1px 0 rgba(190, 215, 255, 0.22);
}

.logros-metal-val {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(180deg, #F0F6FF 0%, #A8C4F0 50%, #6A90D0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}

.logros-metal-lbl {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: rgba(170, 200, 255, 0.75);
  font-weight: 600;
}

.logros-section-hd {
  margin: 10px 0 18px;
}

.logros-section-hd--progress .group-rule {
  background: linear-gradient(90deg, transparent, rgba(92, 225, 230, 0.45), transparent);
}

.logros-grid--badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

/* ?? Cards de insignia ? vidrio azul esmerilado ?? */
.logro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 16px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  background:
    linear-gradient(160deg, rgba(130, 175, 255, 0.14) 0%, transparent 42%),
    rgba(18, 40, 96, 0.36);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Bisel de vidrio */
.logro-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 1px 1px 0 rgba(180, 210, 255, 0.22),
    inset -1px -1px 0 rgba(10, 30, 80, 0.3);
}

.logro-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(160, 200, 255, 0.05) 0.55px, transparent 0.65px);
  background-size: 3px 3px;
  pointer-events: none;
  opacity: 0.55;
}

.logro-card--unlocked {
  border: 1px solid rgba(120, 170, 255, 0.30);
  box-shadow:
    0 10px 28px rgba(6, 16, 50, 0.4),
    0 0 0 1px rgba(40, 80, 160, 0.12);
}

.logro-card--unlocked:hover {
  border-color: rgba(92, 225, 230, 0.45);
  box-shadow:
    0 12px 34px rgba(6, 16, 50, 0.5),
    0 0 22px rgba(92, 225, 230, 0.12);
  transform: translateY(-2px);
}

.logro-card--progress {
  border: 1px solid rgba(100, 150, 220, 0.20);
  opacity: 0.82;
  background:
    linear-gradient(160deg, rgba(100, 150, 230, 0.08) 0%, transparent 45%),
    rgba(14, 30, 72, 0.28);
}

.logro-card--progress:hover {
  opacity: 0.92;
  border-color: rgba(92, 225, 230, 0.35);
  transform: translateY(-2px);
}

.logro-brand {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 8px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(180, 200, 220, 0.28);
  z-index: 2;
  font-weight: 600;
}

.logro-sparkle {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 11px;
  color: rgba(92, 225, 230, 0.7);
  z-index: 2;
  text-shadow: 0 0 8px rgba(92, 225, 230, 0.6);
  animation: logro-twinkle 2.4s ease-in-out infinite;
}

@keyframes logro-twinkle {
  0%, 100% { opacity: 0.45; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

.logro-medal {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: #E8C65A;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,245,200,0.35), transparent 50%),
    radial-gradient(circle at 70% 75%, rgba(140,100,30,0.35), transparent 55%),
    linear-gradient(145deg, #5A4A20, #2A2210);
  border: 2px solid rgba(232, 198, 90, 0.55);
  box-shadow:
    0 0 18px rgba(201, 162, 75, 0.28),
    inset 0 2px 4px rgba(255,255,255,0.2),
    inset 0 -3px 6px rgba(0,0,0,0.4);
  position: relative;
  z-index: 1;
}

.logro-card--unlocked:nth-child(even) .logro-medal {
  color: #C8D4E8;
  background:
    radial-gradient(circle at 32% 28%, rgba(230,240,255,0.3), transparent 50%),
    radial-gradient(circle at 70% 75%, rgba(60,80,120,0.4), transparent 55%),
    linear-gradient(145deg, #4A5568, #1A2030);
  border-color: rgba(180, 200, 230, 0.5);
  box-shadow:
    0 0 16px rgba(120, 160, 220, 0.22),
    inset 0 2px 4px rgba(255,255,255,0.18),
    inset 0 -3px 6px rgba(0,0,0,0.4);
}

.logro-card--progress .logro-medal {
  width: 64px;
  height: 64px;
  color: #7A9ABB;
  background: rgba(91, 163, 255, 0.06);
  border: 1.5px solid rgba(120, 160, 200, 0.28);
  box-shadow: none;
  filter: grayscale(0.25) brightness(0.85);
}

.logro-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #F0F4FA;
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
  line-height: 1.3;
}

.logro-desc {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.45;
  margin: 0 0 14px;
  position: relative;
  z-index: 1;
  max-width: 200px;
}

.logro-date-pill {
  margin-top: auto;
  position: relative;
  z-index: 1;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20, 40, 90, 0.55);
  border: 1px solid rgba(120, 170, 255, 0.22);
}

.logro-date {
  font-size: 10.5px;
  color: rgba(180, 205, 245, 0.88);
  font-weight: 500;
}

.logro-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  position: relative;
  z-index: 1;
}

.logro-bar-track {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.logro-bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #2A9AA0, #5CE1E6, #A8F4F7);
  box-shadow: 0 0 8px rgba(92, 225, 230, 0.65);
}

.logro-pct {
  font-size: 11px;
  color: #8FDDE0;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 700;
}

/* Tema met?lico ? vidrio (dorado / oro rosa v?a vars) */
[data-theme="dorado"] .logros-hero , [data-theme="oro-rosa"] .logros-hero {
  border-color: rgba(var(--gold-rgb), 0.30);
  background:
    linear-gradient(135deg, rgba(var(--metal-star-glow), 0.08) 0%, transparent 45%),
    rgba(20, 12, 14, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
[data-theme="dorado"] .logros-gauge , [data-theme="oro-rosa"] .logros-gauge {
  filter: drop-shadow(0 0 10px rgba(var(--gold-rgb), 0.4));
}
[data-theme="dorado"] .logros-gauge-fill , [data-theme="oro-rosa"] .logros-gauge-fill {
  stroke: var(--gold);
  filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.7));
}
[data-theme="dorado"] .logros-gauge-pct , [data-theme="oro-rosa"] .logros-gauge-pct {
  color: var(--metal-hover);
}
[data-theme="dorado"] .logros-metal-stat , [data-theme="oro-rosa"] .logros-metal-stat {
  background:
    linear-gradient(160deg, rgba(var(--metal-star-glow), 0.14) 0%, transparent 50%),
    rgba(28, 16, 20, 0.42);
  border-color: rgba(var(--gold-rgb), 0.36);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(var(--metal-star), 0.18);
}
[data-theme="dorado"] .logros-metal-val , [data-theme="oro-rosa"] .logros-metal-val {
  background-image: var(--_chrome-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="dorado"] .logros-metal-lbl , [data-theme="oro-rosa"] .logros-metal-lbl {
  color: rgba(var(--gold-rgb), 0.7);
}
[data-theme="dorado"] .logro-card , [data-theme="oro-rosa"] .logro-card {
  background:
    linear-gradient(160deg, rgba(var(--metal-star-glow), 0.10) 0%, transparent 42%),
    rgba(18, 12, 14, 0.40);
}
[data-theme="dorado"] .logro-card--unlocked , [data-theme="oro-rosa"] .logro-card--unlocked {
  border-color: rgba(var(--gold-rgb), 0.34);
}
[data-theme="dorado"] .logro-card--unlocked:hover , [data-theme="oro-rosa"] .logro-card--unlocked:hover {
  border-color: rgba(var(--gold-rgb), 0.55);
  box-shadow:
    0 12px 34px rgba(0,0,0,0.55),
    0 0 20px rgba(var(--gold-rgb), 0.16);
}
[data-theme="dorado"] .logro-card--progress , [data-theme="oro-rosa"] .logro-card--progress {
  border-color: rgba(var(--gold-rgb), 0.20);
  background:
    linear-gradient(160deg, rgba(var(--metal-star-glow), 0.06) 0%, transparent 45%),
    rgba(14, 10, 12, 0.32);
}
[data-theme="dorado"] .logro-card--progress:hover , [data-theme="oro-rosa"] .logro-card--progress:hover {
  border-color: rgba(var(--gold-rgb), 0.4);
}
[data-theme="dorado"] .logro-card--progress .logro-medal , [data-theme="oro-rosa"] .logro-card--progress .logro-medal {
  color: var(--metal-label);
  filter: none;
  border-color: rgba(var(--gold-rgb), 0.3);
}
[data-theme="dorado"] .logro-bar , [data-theme="oro-rosa"] .logro-bar {
  background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--metal-bright));
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.55);
}
[data-theme="dorado"] .logro-pct , [data-theme="oro-rosa"] .logro-pct {
  color: var(--gold);
}
[data-theme="dorado"] .logro-sparkle , [data-theme="oro-rosa"] .logro-sparkle {
  color: rgba(var(--gold-rgb), 0.8);
  text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.6);
}
[data-theme="dorado"] .logros-section-hd--progress .group-rule , [data-theme="oro-rosa"] .logros-section-hd--progress .group-rule {
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.5), transparent);
}
[data-theme="dorado"] .logro-date-pill , [data-theme="oro-rosa"] .logro-date-pill {
  border-color: rgba(var(--gold-rgb), 0.22);
  background: rgba(20, 12, 14, 0.55);
}
[data-theme="dorado"] .logro-date , [data-theme="oro-rosa"] .logro-date {
  color: rgba(var(--gold-rgb), 0.85);
}

@media (max-width: 1100px) {
  .logros-grid--badges { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .logros-hero { flex-direction: column; gap: 20px; }
  .logros-hero-stats { width: 100%; }
  .logros-grid--badges { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .logros-grid--badges { grid-template-columns: 1fr; }
  .logros-metal-stat { min-width: 0; }
}

/* ?? Colecci?n de los fundadores ?? */
.logros-section-hd--fundadores {
  margin-top: 8px;
}
.logros-section-hd--fundadores .group-rule {
  background: linear-gradient(90deg, transparent, rgba(232, 198, 90, 0.55), transparent);
}

.logros-fundadores-sub {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  max-width: 520px;
  margin: -6px auto 20px;
  line-height: 1.45;
}

.logros-grid--fundadores {
  grid-template-columns: repeat(2, minmax(0, 280px));
  justify-content: center;
}

.logro-card--fundador {
  border: 2px solid rgba(232, 198, 90, 0.45);
  box-shadow:
    0 10px 28px rgba(6, 16, 50, 0.4),
    0 0 0 1px rgba(212, 170, 78, 0.25),
    inset 0 0 0 1px rgba(255, 240, 180, 0.12);
  background:
    linear-gradient(160deg, rgba(255, 220, 120, 0.12) 0%, transparent 45%),
    rgba(28, 36, 80, 0.38);
}

.logro-card--fundador:hover {
  border-color: rgba(245, 208, 96, 0.7);
  box-shadow:
    0 12px 34px rgba(6, 16, 50, 0.5),
    0 0 24px rgba(212, 170, 78, 0.2),
    inset 0 0 0 1px rgba(255, 240, 180, 0.18);
}

.logro-fundador-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: #F5E08A;
  background: rgba(40, 30, 8, 0.75);
  border: 1px solid rgba(232, 198, 90, 0.45);
  box-shadow: 0 0 10px rgba(212, 170, 78, 0.25);
}

.logro-medal--stars {
  color: #F5D060 !important;
  border-color: rgba(245, 208, 96, 0.65) !important;
  box-shadow:
    0 0 22px rgba(232, 198, 90, 0.4),
    inset 0 2px 4px rgba(255,255,255,0.22),
    inset 0 -3px 6px rgba(0,0,0,0.4) !important;
}

[data-theme="dorado"] .logro-card--fundador , [data-theme="oro-rosa"] .logro-card--fundador {
  border-color: rgba(var(--gold-rgb), 0.55);
  background:
    linear-gradient(160deg, rgba(var(--metal-star-glow), 0.14) 0%, transparent 45%),
    rgba(20, 12, 14, 0.5);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.4),
    0 0 0 1px rgba(var(--gold-rgb), 0.25),
    inset 0 0 0 1px rgba(var(--metal-star), 0.12);
}
[data-theme="dorado"] .logros-fundadores-sub , [data-theme="oro-rosa"] .logros-fundadores-sub {
  color: var(--metal-label);
}
[data-theme="dorado"] .logro-fundador-badge , [data-theme="oro-rosa"] .logro-fundador-badge {
  color: var(--metal-hover);
  background: rgba(20, 12, 14, 0.75);
  border-color: rgba(var(--gold-rgb), 0.45);
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.25);
}
[data-theme="dorado"] .logro-medal--stars , [data-theme="oro-rosa"] .logro-medal--stars {
  color: var(--metal-bright) !important;
  border-color: rgba(var(--gold-rgb), 0.65) !important;
  box-shadow:
    0 0 22px rgba(var(--gold-rgb), 0.4),
    inset 0 2px 4px rgba(255,255,255,0.22),
    inset 0 -3px 6px rgba(0,0,0,0.4) !important;
}
[data-theme="dorado"] .logros-section-hd--fundadores .group-rule ,
[data-theme="oro-rosa"] .logros-section-hd--fundadores .group-rule {
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.55), transparent);
}

@media (max-width: 560px) {
  .logros-grid--fundadores { grid-template-columns: 1fr; }
}


/* ????????????????????????????????????????????????????????????
   T?TULOS ? plateado cromado + brillo opcional
???????????????????????????????????????????????????????????? */

.page-title,
.modules-title,
.group-title,
.panel-hd-title,
.improvement-title,
.settings-page-hd .page-title {
  background-image: linear-gradient(180deg,
    #F5F5F7 0%,
    #C8CAD0 28%,
    #F0F0F2 52%,
    #9EA2AB 78%,
    #D8DAE0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.settings-page-sub {
  background-image: linear-gradient(180deg,
    #D8DAE0 0%, #A8ABB4 45%, #C4C7CE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Brillo luminoso en t?tulos (activable desde Configuraci?n) */
html.title-glow .page-title,
html.title-glow .modules-title,
html.title-glow .group-title,
html.title-glow .panel-hd-title,
html.title-glow .improvement-title,
html.title-glow .settings-page-hd .page-title,
html.title-glow .settings-page-sub {
  filter:
    drop-shadow(0 0 4px rgba(220, 225, 240, 0.55))
    drop-shadow(0 0 12px rgba(180, 190, 220, 0.35));
}

/* En tema dorado el brillo tambi?n es dorado */
[data-theme="dorado"].title-glow .page-title,
[data-theme="dorado"].title-glow .modules-title,
[data-theme="dorado"].title-glow .group-title,
[data-theme="dorado"].title-glow .panel-hd-title,
[data-theme="dorado"].title-glow .improvement-title,
[data-theme="dorado"].title-glow .settings-page-hd .page-title,
[data-theme="dorado"].title-glow .settings-page-sub {
  filter:
    drop-shadow(0 0 4px rgba(232, 198, 90, 0.55))
    drop-shadow(0 0 12px rgba(201, 162, 75, 0.40));
}

[data-theme="oro-rosa"].title-glow .page-title,
[data-theme="oro-rosa"].title-glow .modules-title,
[data-theme="oro-rosa"].title-glow .group-title,
[data-theme="oro-rosa"].title-glow .panel-hd-title,
[data-theme="oro-rosa"].title-glow .improvement-title,
[data-theme="oro-rosa"].title-glow .settings-page-hd .page-title,
[data-theme="oro-rosa"].title-glow .settings-page-sub {
  filter:
    drop-shadow(0 0 4px rgba(240, 196, 206, 0.55))
    drop-shadow(0 0 12px rgba(232, 164, 180, 0.40));
}

/* Diurno: titulos azul metalico (gana al plateado cromado) */
[data-theme="diurno"] .page-title,
[data-theme="diurno"] .modules-title,
[data-theme="diurno"] .group-title,
[data-theme="diurno"] .panel-hd-title,
[data-theme="diurno"] .improvement-title,
[data-theme="diurno"] .settings-page-hd .page-title,
[data-theme="diurno"] .settings-page-sub {
  background-image: linear-gradient(180deg,
    #9BB8F0 0%,
    #5A82D0 28%,
    #7BA3E8 48%,
    #2A4A8C 78%,
    #4A78C8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: none;
  text-shadow: none;
}

[data-theme="diurno"].title-glow .page-title,
[data-theme="diurno"].title-glow .modules-title,
[data-theme="diurno"].title-glow .group-title,
[data-theme="diurno"].title-glow .panel-hd-title,
[data-theme="diurno"].title-glow .improvement-title,
[data-theme="diurno"].title-glow .settings-page-hd .page-title,
[data-theme="diurno"].title-glow .settings-page-sub {
  filter:
    drop-shadow(0 0 4px rgba(90, 130, 210, 0.35))
    drop-shadow(0 0 12px rgba(70, 110, 180, 0.22));
}

[data-theme="diurno"] .kpi-label {
  color: rgba(42, 74, 140, 0.72);
}
[data-theme="diurno"] .kpi-value {
  color: #1E3A7A;
  text-shadow: 0 1px 8px rgba(70, 110, 180, 0.18);
}
[data-theme="diurno"] .kpi-meta {
  color: rgba(42, 74, 140, 0.55);
}
[data-theme="diurno"] .kpi-meta--tint {
  color: color-mix(in srgb, var(--kpi) 55%, #2A4A8C 45%);
}

[data-theme="diurno"] .impr-sub,
[data-theme="diurno"] .impr-name,
[data-theme="diurno"] .stat-label,
[data-theme="diurno"] .stat-value,
[data-theme="diurno"] .chart-labels span,
[data-theme="diurno"] .chart-label {
  -webkit-text-fill-color: unset;
  background: none;
  color: var(--text);
}

[data-theme="diurno"] .impr-sub {
  color: var(--text-dim);
}

/* Diurno: hero del modulo + selector Aprender/Practicar/Evaluar */
[data-theme="diurno"] .mod-page-hero .mod-hud-panel {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--mod-color) 12%, transparent), transparent 55%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(245, 248, 255, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 10px 28px rgba(40, 70, 140, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px color-mix(in srgb, var(--mod-color) 22%, transparent);
}

[data-theme="diurno"] .mod-page-hero .mod-hud-title,
[data-theme="diurno"] .mod-page-hero .mod-hud-title-l1,
[data-theme="diurno"] .mod-page-hero .mod-hud-title-l2 {
  color: #2A4A8C;
  text-shadow: none;
  -webkit-text-fill-color: #2A4A8C;
  background: none;
}

[data-theme="diurno"] .mod-page-hero .mod-hud-title-l1 {
  background: linear-gradient(180deg, #7BA3E8 0%, #3A5FA0 50%, #1E3A6E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-theme="diurno"] .mod-page-hero .mod-hud-levels {
  color: #5A78B0;
  opacity: 1;
}

[data-theme="diurno"] .mod-page-hero .mod-gauge-pct,
[data-theme="diurno"] .mod-gauge-pct {
  color: #1E3A7A;
  text-shadow: 0 1px 6px rgba(70, 110, 180, 0.2);
}

[data-theme="diurno"] .mod-mode-btn {
  border: 1px solid rgba(70, 110, 180, 0.16);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(245, 248, 255, 0.58));
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 20px rgba(40, 70, 140, 0.08);
  color: #3A5FA0;
}

[data-theme="diurno"] .mod-mode-btn::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0%, transparent 55%);
}

[data-theme="diurno"] .mod-mode-btn:hover {
  border-color: color-mix(in srgb, var(--mod-color) 45%, rgba(70, 110, 180, 0.25));
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(240, 246, 255, 0.75));
  color: #1E3A7A;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 10px 28px rgba(40, 70, 140, 0.12);
}

[data-theme="diurno"] .mod-mode-btn.active {
  border-color: color-mix(in srgb, var(--mod-color) 55%, transparent);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--mod-color) 14%, #fff),
      rgba(255, 255, 255, 0.82));
  color: #1E3A7A;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--mod-color) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 8px 24px rgba(40, 70, 140, 0.10);
}

[data-theme="diurno"] .mod-mode-icon {
  background: rgba(70, 110, 180, 0.08);
  border-color: rgba(70, 110, 180, 0.16);
  color: #3A5FA0;
}

[data-theme="diurno"] .mod-mode-btn.active .mod-mode-icon {
  background: color-mix(in srgb, var(--mod-color) 18%, #fff);
  border-color: color-mix(in srgb, var(--mod-color) 45%, transparent);
  color: var(--mod-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mod-color) 28%, transparent);
}

[data-theme="diurno"] .mod-mode-btn:hover .mod-mode-icon {
  background: rgba(70, 110, 180, 0.12);
  border-color: rgba(70, 110, 180, 0.22);
}

[data-theme="diurno"] .mod-mode-sub {
  opacity: 0.7;
  color: #5A78B0;
}

[data-theme="diurno"] .mod-mode-btn.active .mod-mode-sub {
  opacity: 0.85;
  color: #3A5FA0;
}

[data-theme="diurno"] .mod-panel.glass-panel {
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--mod-color) 10%, transparent), transparent 55%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(245, 248, 255, 0.58));
}

[data-theme="diurno"] .mod-topic {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(70, 110, 180, 0.14);
}

/* Diurno: Logros ? hero, stats y cards en vidrio claro + azul metalico */
[data-theme="diurno"] .logros-hero {
  background:
    linear-gradient(135deg, rgba(120, 170, 255, 0.12) 0%, transparent 45%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(245, 248, 255, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 10px 32px rgba(40, 70, 140, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(70, 110, 180, 0.06);
}

[data-theme="diurno"] .logros-hero::before,
[data-theme="diurno"] .logros-hero::after {
  border-color: rgba(90, 130, 200, 0.35);
}

[data-theme="diurno"] .logros-gauge {
  filter: drop-shadow(0 0 8px rgba(70, 140, 220, 0.25));
}

[data-theme="diurno"] .logros-gauge-track {
  stroke: rgba(70, 110, 180, 0.18);
}

[data-theme="diurno"] .logros-gauge-fill {
  stroke: #3B6FE8;
  filter: drop-shadow(0 0 5px rgba(59, 111, 232, 0.45));
}

[data-theme="diurno"] .logros-gauge-pct {
  color: #1E3A7A;
  background: none;
  -webkit-text-fill-color: #1E3A7A;
  text-shadow: none;
}

[data-theme="diurno"] .logros-gauge-lbl {
  color: #5A78B0;
}

[data-theme="diurno"] .logros-metal-stat {
  background:
    linear-gradient(160deg, rgba(90, 140, 230, 0.10) 0%, transparent 50%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.82), rgba(240, 246, 255, 0.65));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 6px 18px rgba(40, 70, 140, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

[data-theme="diurno"] .logros-metal-val {
  background: linear-gradient(180deg, #7BA3E8 0%, #3A5FA0 50%, #1E3A6E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-theme="diurno"] .logros-metal-lbl {
  color: #5A78B0;
  -webkit-text-fill-color: #5A78B0;
  background: none;
}

[data-theme="diurno"] .logro-card {
  background:
    linear-gradient(160deg, rgba(130, 175, 255, 0.10) 0%, transparent 42%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.82), rgba(245, 248, 255, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 8px 24px rgba(40, 70, 140, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

[data-theme="diurno"] .logro-card::after {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(70, 110, 180, 0.08);
}

[data-theme="diurno"] .logro-card::before {
  opacity: 0.25;
  background-image: radial-gradient(rgba(90, 130, 200, 0.08) 0.55px, transparent 0.65px);
}

[data-theme="diurno"] .logro-card--unlocked {
  border-color: rgba(70, 110, 180, 0.18);
  box-shadow:
    0 8px 24px rgba(40, 70, 140, 0.10),
    0 0 0 1px rgba(70, 110, 180, 0.06);
}

[data-theme="diurno"] .logro-card--unlocked:hover {
  border-color: rgba(59, 111, 232, 0.35);
  box-shadow:
    0 12px 30px rgba(40, 70, 140, 0.12),
    0 0 18px rgba(59, 111, 232, 0.10);
}

[data-theme="diurno"] .logro-card--progress {
  opacity: 1;
  background:
    linear-gradient(160deg, rgba(100, 150, 230, 0.06) 0%, transparent 45%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.70), rgba(245, 248, 255, 0.52));
  border-color: rgba(70, 110, 180, 0.14);
}

[data-theme="diurno"] .logro-card--progress:hover {
  border-color: rgba(59, 111, 232, 0.30);
}

[data-theme="diurno"] .logro-title {
  color: #2A4A8C;
  background: linear-gradient(180deg, #7BA3E8 0%, #3A5FA0 55%, #1E3A6E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="diurno"] .logro-desc {
  color: #5A78B0;
  -webkit-text-fill-color: #5A78B0;
  background: none;
}

[data-theme="diurno"] .logro-brand {
  color: rgba(90, 120, 180, 0.35);
}

[data-theme="diurno"] .logro-date-pill {
  background: rgba(70, 110, 180, 0.08);
  border-color: rgba(70, 110, 180, 0.18);
}

[data-theme="diurno"] .logro-date {
  color: #3A5FA0;
}

[data-theme="diurno"] .logro-pct {
  color: #3A5FA0;
}

[data-theme="diurno"] .logro-bar-track {
  background: rgba(70, 110, 180, 0.12);
}

[data-theme="diurno"] .logros-section-hd--progress .group-rule {
  background: linear-gradient(90deg, transparent, rgba(59, 111, 232, 0.40), transparent);
}

[data-theme="diurno"] .logro-card--fundador {
  background:
    linear-gradient(160deg, rgba(201, 162, 75, 0.10) 0%, transparent 45%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.85), rgba(255, 250, 240, 0.65));
  border-color: rgba(184, 134, 46, 0.28);
}

/* P?gina Progreso */
.progreso-page-sub {
  text-align: center;
  margin: -12px 0 22px;
  font-size: 13px;
  color: var(--text-dim);
}

.progreso-mod-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 40px;
}

.progreso-mod-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 8px;
  align-items: center;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.progreso-mod-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--mod-color) 45%, transparent);
}

.progreso-mod-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  grid-row: 1 / 2;
}

.progreso-mod-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.progreso-mod-name {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}

.progreso-mod-meta {
  font-size: 11px;
  color: var(--text-dim);
}

.progreso-mod-pct {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
}

.progreso-mod-bar {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.progreso-mod-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

[data-theme="diurno"] .progreso-page-sub {
  color: #5A78B0;
}

[data-theme="diurno"] .progreso-mod-row {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(245, 248, 255, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 22px rgba(40, 70, 140, 0.08);
}

[data-theme="diurno"] .progreso-mod-name,
[data-theme="diurno"] .progreso-mod-pct {
  color: #2A4A8C;
}

[data-theme="diurno"] .progreso-mod-meta {
  color: #5A78B0;
}

[data-theme="diurno"] .progreso-mod-bar {
  background: rgba(70, 110, 180, 0.12);
}

/* Mascotas page + settings */
.mascota-stage {
  position: relative;
  overflow: hidden;
  padding: 28px 26px;
  margin-bottom: 20px;
  min-height: 140px;
}

.mascota-stage-glow {
  position: absolute;
  right: -40px;
  top: -50px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 194, 138, 0.28), transparent 68%);
  pointer-events: none;
}

.mascota-stage.is-off {
  opacity: 0.72;
}

.mascota-live-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.mascota-stage-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 750;
  color: var(--text);
}

.mascota-stage-desc {
  margin: 0;
  max-width: 520px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}

.mascota-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.mascota-skin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mascota-skin-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.mascota-skin-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(244, 194, 138, 0.45);
}

.mascota-skin-btn.active {
  border-color: rgba(244, 194, 138, 0.65);
  background: rgba(244, 194, 138, 0.12);
  box-shadow: 0 0 18px rgba(244, 194, 138, 0.12);
}

.mascota-skin-swatch {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  margin-bottom: 4px;
}

.mascota-skin-swatch--pixel {
  background:
    linear-gradient(135deg, #F4C28A 0%, #E8A070 40%, #8B6A4A 100%);
}

.mascota-skin-swatch--oro {
  background:
    linear-gradient(135deg, #FFF0B0 0%, #E8C65A 35%, #A07828 75%, #6B4B14 100%);
}

.mascota-skin-label {
  font-size: 13px;
  font-weight: 700;
}

.mascota-skin-sub {
  font-size: 11px;
  color: var(--text-dim);
}

.mascota-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.mascota-action-btn {
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}

.mascota-action-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(244, 194, 138, 0.5);
  background: rgba(244, 194, 138, 0.12);
}

.mascota-more-link {
  color: var(--blue-a);
  text-decoration: none;
  font-weight: 600;
}
.mascota-more-link:hover {
  text-decoration: underline;
}

[data-theme="diurno"] .mascota-stage,
[data-theme="diurno"] .mascota-skin-btn,
[data-theme="diurno"] .mascota-action-btn {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(245, 248, 255, 0.58));
  border-color: rgba(255, 255, 255, 0.9);
  color: #2A4A8C;
}

[data-theme="diurno"] .mascota-stage-title,
[data-theme="diurno"] .mascota-skin-label {
  color: #2A4A8C;
}

[data-theme="diurno"] .mascota-stage-desc,
[data-theme="diurno"] .mascota-skin-sub,
[data-theme="diurno"] .mascota-live-badge {
  color: #5A78B0;
}

[data-theme="diurno"] .mascota-skin-btn.active,
[data-theme="diurno"] .mascota-action-btn:hover {
  border-color: rgba(184, 134, 46, 0.45);
  background: rgba(244, 194, 138, 0.18);
}

.temas-fondos-card {
  margin-bottom: 8px;
}

.theme-btns--metal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 640px) {
  .theme-btns--metal {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .mascota-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ?? Oro Rosa: toggles residuales ?? */
[data-theme="dorado"] .setting-hint.on,
[data-theme="oro-rosa"] .setting-hint.on {
  color: var(--gold);
}
[data-theme="dorado"] .toggle-switch input:checked + .toggle-track,
[data-theme="oro-rosa"] .toggle-switch input:checked + .toggle-track {
  background: rgba(var(--gold-rgb), 0.22);
  border-color: rgba(var(--gold-rgb), 0.48);
}
[data-theme="dorado"] .toggle-switch input:checked + .toggle-track::before,
[data-theme="oro-rosa"] .toggle-switch input:checked + .toggle-track::before {
  background: var(--gold);
}




/* ============================================================
   MASCOTA ? Gato pixel dibujado en canvas (sin recorte)
============================================================ */
.velion-cat {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9998;
  pointer-events: auto;
  cursor: grab;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35));
}
.velion-cat.is-held {
  cursor: grabbing;
  z-index: 10001;
  filter: drop-shadow(0 14px 16px rgba(0,0,0,0.42));
}
.velion-cat.is-held .velion-cat-shadow {
  opacity: 0.18;
  transform: translateY(22px) scaleX(0.55);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.velion-cat.is-gold {
  filter:
    drop-shadow(0 0 4px rgba(255, 210, 90, 0.55))
    drop-shadow(0 2px 8px rgba(180, 110, 20, 0.55));
}
.velion-cat.is-gold.is-held {
  filter:
    drop-shadow(0 0 6px rgba(255, 220, 120, 0.65))
    drop-shadow(0 12px 18px rgba(140, 85, 15, 0.55));
}
.velion-cat[data-state="climb"] .velion-cat-shadow {
  opacity: 0.35;
}
.velion-cat[hidden] { display: none !important; }
.velion-cat-canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  pointer-events: none;
  transform-origin: 50% 28%;
}
.velion-cat-shadow {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 1px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0,0,0,0.28);
  filter: blur(2px);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
}
.velion-cat[data-state="jump"] .velion-cat-shadow,
.velion-cat[data-state="climb"] .velion-cat-shadow {
  opacity: 0.2;
  transform: scaleX(0.6);
}
.velion-cat-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.velion-cat-heart {
  position: absolute;
  bottom: 70%;
  color: #ff8fb3;
  font-size: 11px;
  animation: cat-heart-up 1s ease-out forwards;
  text-shadow: 0 0 6px rgba(255,143,179,0.55);
}
@keyframes cat-heart-up {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px) scale(1.1); }
}
.velion-cat.is-purring {
  animation: cat-purr 0.11s steps(2) 12;
}
@keyframes cat-purr {
  0%, 100% { filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35)); }
  50% { filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35)) brightness(1.08); }
}
.velion-cat:hover {
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35)) brightness(1.04);
}