/* ============================================================
   MISIÓN DIGITAL 5 ESTRELLAS IASD
   HOTFIX V6 — MODO CLARO PREMIUM GLOBAL
   Compatible PHP 8.4 / Hostinger. No requiere cambios en DB.
   ============================================================ */

/*
  Este archivo se carga después de mission-stars.css y kingdom-quest.css.
  Por eso puede corregir variables, fondos, contraste e inconsistencias visuales
  sin tocar la lógica del sistema ni el archivo .env.
*/

[data-theme="light"] {
  /* Base clara: luminosa, no plana */
  --bg-base: #edf3ff;
  --bg-card: #ffffff;
  --bg-card-2: #f7f9ff;
  --bg-overlay: rgba(248, 250, 255, .90);
  --border-color: rgba(30, 41, 59, .13);
  --border-gold: rgba(180, 83, 9, .30);

  --text-primary: #101827;
  --text-secondary: #334155;
  --text-muted: #64748b;

  --xp-bar-bg: #e5ecfb;
  --gold-bright: #b7791f;
  --gold-deep: #92400e;
  --amber: #d97706;

  --color-complete: #059669;
  --color-complete-bg: rgba(5, 150, 105, .10);
  --color-streak: #dc2626;
  --color-streak-bg: rgba(220, 38, 38, .10);
  --color-locked: #6d28d9;
  --color-locked-bg: rgba(109, 40, 217, .10);
  --color-rank: #2563eb;
  --color-rank-bg: rgba(37, 99, 235, .10);
  --color-xp: #4f46e5;

  --glow-gold: 0 0 18px rgba(180, 83, 9, .18), 0 0 36px rgba(180, 83, 9, .08);
  --glow-indigo: 0 0 18px rgba(79, 70, 229, .16), 0 14px 34px rgba(30, 41, 59, .08);
  --card-shadow: 0 18px 48px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .72);
  --shine-gradient: linear-gradient(135deg, rgba(255, 255, 255, .45) 0%, transparent 55%);

  --md-bg: #edf3ff;
  --md-bg-2: #f7f9ff;
  --md-bg-3: #eef4ff;
  --md-surface: rgba(255, 255, 255, .74);
  --md-surface-2: rgba(255, 255, 255, .92);
  --md-surface-3: rgba(255, 255, 255, 1);
  --md-depth: #07111f;
  --md-border: rgba(30, 41, 59, .13);
  --md-border-gold: rgba(180, 83, 9, .28);
  --md-card: #ffffff;
  --md-card-2: #f7f9ff;
  --md-text: #101827;
  --md-muted: #475569;
  --md-muted-2: #64748b;
  --md-muted-3: #94a3b8;
  --md-gold: #b7791f;
  --md-gold-2: #92400e;
  --md-gold-glow: rgba(180, 83, 9, .20);
  --md-gold-soft: rgba(180, 83, 9, .09);
  --md-blue: #2563eb;
  --md-blue-2: #4f46e5;
  --md-blue-soft: rgba(37, 99, 235, .10);
  --md-green: #059669;
  --md-green-soft: rgba(5, 150, 105, .10);
  --md-purple: #6d28d9;
  --md-purple-soft: rgba(109, 40, 217, .10);
  --md-red: #dc2626;
  --md-red-soft: rgba(220, 38, 38, .10);
}

[data-theme="light"] body.md-body,
[data-theme="light"] body {
  color: var(--md-text) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(37, 99, 235, .16), transparent 30rem),
    radial-gradient(circle at 92% 12%, rgba(250, 204, 21, .16), transparent 28rem),
    radial-gradient(circle at 50% 100%, rgba(139, 92, 246, .12), transparent 34rem),
    linear-gradient(135deg, #f9fbff 0%, #eef4ff 47%, #eaf1ff 100%) !important;
}

[data-theme="light"] body::before {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .36), transparent 28%, rgba(255, 255, 255, .22) 72%, transparent),
    radial-gradient(ellipse 62% 42% at 50% -8%, rgba(37, 99, 235, .12), transparent 70%),
    radial-gradient(ellipse 46% 34% at 84% 84%, rgba(180, 83, 9, .10), transparent 62%) !important;
  opacity: 1 !important;
}

[data-theme="light"] #particleCanvas {
  opacity: .24 !important;
  mix-blend-mode: multiply;
}

[data-theme="light"] .sacred-bg { opacity: .55 !important; }
[data-theme="light"] .ray { background: linear-gradient(to bottom, rgba(79, 70, 229, .12), transparent) !important; }

/* Lienzo principal */
[data-theme="light"] .main-content,
[data-theme="light"] .md-main {
  background:
    radial-gradient(circle at 18% 10%, rgba(37, 99, 235, .08), transparent 24rem),
    radial-gradient(circle at 88% 0%, rgba(180, 83, 9, .08), transparent 22rem),
    linear-gradient(135deg, rgba(255, 255, 255, .42), rgba(239, 246, 255, .58)) !important;
}

[data-theme="light"] .page-content,
[data-theme="light"] .md-page-content {
  color: var(--md-text) !important;
}

/* Topbar clara elegante */
[data-theme="light"] .topbar,
[data-theme="light"] .md-topbar,
[data-theme="light"] .navbar {
  background: rgba(248, 250, 255, .88) !important;
  color: #101827 !important;
  border-bottom: 1px solid rgba(30, 41, 59, .10) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .08) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
}

[data-theme="light"] .topbar-title,
[data-theme="light"] .md-topbar-title,
[data-theme="light"] .topbar h1,
[data-theme="light"] .topbar h2,
[data-theme="light"] .topbar h3 {
  color: #101827 !important;
  text-shadow: none !important;
}

[data-theme="light"] .topbar-admin-tag,
[data-theme="light"] .md-theme-toggle,
[data-theme="light"] .topbar-alert,
[data-theme="light"] .topbar-toggle,
[data-theme="light"] .md-topbar-notif {
  background: rgba(255, 255, 255, .78) !important;
  color: #7c4a03 !important;
  border: 1px solid rgba(180, 83, 9, .20) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Sidebar: en modo claro se mantiene como panel premium oscuro para contraste */
[data-theme="light"] .sidebar,
[data-theme="light"] .md-sidebar,
[data-theme="light"] .admin-sidebar {
  background:
    radial-gradient(circle at 24% 0%, rgba(37, 99, 235, .14), transparent 16rem),
    linear-gradient(180deg, #08111f 0%, #07111f 48%, #050b14 100%) !important;
  color: #f8fafc !important;
  border-right: 1px solid rgba(148, 163, 184, .18) !important;
  box-shadow: 18px 0 54px rgba(15, 23, 42, .18) !important;
}

[data-theme="light"] .sidebar-brand,
[data-theme="light"] .md-sidebar-brand,
[data-theme="light"] .sidebar-footer,
[data-theme="light"] .md-sidebar-footer {
  border-color: rgba(148, 163, 184, .16) !important;
}

[data-theme="light"] .brand-name,
[data-theme="light"] .md-brand-name,
[data-theme="light"] .sidebar-user-name,
[data-theme="light"] .md-sidebar-user-name {
  color: #f8fafc !important;
}

[data-theme="light"] .brand-role,
[data-theme="light"] .md-brand-role,
[data-theme="light"] .sidebar-user-role,
[data-theme="light"] .md-sidebar-user-role,
[data-theme="light"] .nav-section-title,
[data-theme="light"] .md-nav-section {
  color: rgba(226, 232, 240, .64) !important;
}

[data-theme="light"] .nav-item,
[data-theme="light"] .md-nav-item {
  color: rgba(226, 232, 240, .78) !important;
  background: transparent !important;
}

[data-theme="light"] .nav-item:hover,
[data-theme="light"] .md-nav-item:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .075) !important;
}

[data-theme="light"] .nav-item.active,
[data-theme="light"] .md-nav-item.active {
  color: #fff7cc !important;
  background: linear-gradient(90deg, rgba(250, 204, 21, .18), rgba(250, 204, 21, .055)) !important;
  border-left: 3px solid #facc15 !important;
  box-shadow: 0 0 28px rgba(250, 204, 21, .16), inset 0 0 0 1px rgba(250, 204, 21, .08) !important;
}

[data-theme="light"] .nav-icon,
[data-theme="light"] .md-nav-icon {
  background: rgba(255, 255, 255, .075) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  color: #f8fafc !important;
}

[data-theme="light"] .nav-item.active .nav-icon,
[data-theme="light"] .md-nav-item.active .md-nav-icon {
  background: rgba(250, 204, 21, .16) !important;
  border-color: rgba(250, 204, 21, .25) !important;
}

/* Menú inferior móvil */
[data-theme="light"] .mobile-nav,
[data-theme="light"] .md-bottom-nav {
  background: rgba(248, 250, 255, .92) !important;
  border-top: 1px solid rgba(30, 41, 59, .12) !important;
  box-shadow: 0 -16px 44px rgba(15, 23, 42, .11) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

[data-theme="light"] .mobile-nav-item,
[data-theme="light"] .md-nav-tab {
  color: #475569 !important;
}

[data-theme="light"] .mobile-nav-item.active,
[data-theme="light"] .md-nav-tab.active {
  color: #7c4a03 !important;
  background: rgba(180, 83, 9, .08) !important;
}

/* Tarjetas generales claras */
[data-theme="light"] .md-card,
[data-theme="light"] .card,
[data-theme="light"] .stat-mini,
[data-theme="light"] .table-responsive,
[data-theme="light"] .modal-content,
[data-theme="light"] .md-sheet,
[data-theme="light"] .auth-card,
[data-theme="light"] .md-ranking-card,
[data-theme="light"] .md-reward-card,
[data-theme="light"] .md-ai-card,
[data-theme="light"] .md-motivation-card,
[data-theme="light"] .md-mission-card,
[data-theme="light"] .md-hero {
  background: rgba(255, 255, 255, .82) !important;
  color: #101827 !important;
  border: 1px solid rgba(30, 41, 59, .12) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .85) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}

[data-theme="light"] .md-card::before,
[data-theme="light"] .card::before,
[data-theme="light"] .auth-card::before {
  background: linear-gradient(135deg, rgba(255,255,255,.48), transparent 56%) !important;
}

/* Dashboards ejecutivos: conservar tarjetas oscuras, pero integradas al modo claro */
[data-theme="light"] .md-role-executive .inst-card,
[data-theme="light"] .md-role-executive .assoc-glass,
[data-theme="light"] .md-role-executive .dist-card,
[data-theme="light"] .md-role-executive .inst-kpi,
[data-theme="light"] .md-role-executive .assoc-kpi,
[data-theme="light"] .md-role-executive .dist-kpi,
[data-theme="light"] .md-role-executive .inst-sem,
[data-theme="light"] .md-role-executive .assoc-rank,
[data-theme="light"] .md-role-executive .dist-rank,
[data-theme="light"] .md-role-executive .dist-risk,
[data-theme="light"] .md-role-leader .dist-card,
[data-theme="light"] .md-role-leader .assoc-glass {
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .16), transparent 20rem),
    linear-gradient(160deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .98)) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .18) !important;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .22), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

[data-theme="light"] .md-role-executive .inst-card::before,
[data-theme="light"] .md-role-executive .assoc-glass::before,
[data-theme="light"] .md-role-executive .dist-card::before {
  background: linear-gradient(90deg, transparent, rgba(250, 204, 21, .18), transparent) !important;
}

/* Textos dentro de paneles ejecutivos oscuros: reparar opacidades inline muy bajas */
[data-theme="light"] .inst-card [style*="color:rgba(255,255,255"],
[data-theme="light"] .inst-kpi [style*="color:rgba(255,255,255"],
[data-theme="light"] .inst-sem [style*="color:rgba(255,255,255"],
[data-theme="light"] .assoc-glass [style*="color:rgba(255,255,255"],
[data-theme="light"] .assoc-kpi [style*="color:rgba(255,255,255"],
[data-theme="light"] .dist-card [style*="color:rgba(255,255,255"],
[data-theme="light"] .dist-kpi [style*="color:rgba(255,255,255"] {
  color: rgba(241, 245, 249, .82) !important;
}

[data-theme="light"] .inst-card [style*="fill:rgba(255,255,255"],
[data-theme="light"] .assoc-glass [style*="fill:rgba(255,255,255"],
[data-theme="light"] .dist-card [style*="fill:rgba(255,255,255"] {
  fill: rgba(241, 245, 249, .76) !important;
}

[data-theme="light"] .inst-card p,
[data-theme="light"] .inst-card small,
[data-theme="light"] .inst-card .text-muted,
[data-theme="light"] .assoc-glass p,
[data-theme="light"] .assoc-glass small,
[data-theme="light"] .assoc-glass .text-muted,
[data-theme="light"] .dist-card p,
[data-theme="light"] .dist-card small,
[data-theme="light"] .dist-card .text-muted {
  color: rgba(226, 232, 240, .80) !important;
}

[data-theme="light"] .inst-card h1,
[data-theme="light"] .inst-card h2,
[data-theme="light"] .inst-card h3,
[data-theme="light"] .inst-card h4,
[data-theme="light"] .assoc-glass h1,
[data-theme="light"] .assoc-glass h2,
[data-theme="light"] .assoc-glass h3,
[data-theme="light"] .dist-card h1,
[data-theme="light"] .dist-card h2,
[data-theme="light"] .dist-card h3 {
  color: #f8fafc !important;
}

[data-theme="light"] .inst-card .kq-verse,
[data-theme="light"] .assoc-glass .kq-verse,
[data-theme="light"] .dist-card .kq-verse {
  background: rgba(15, 23, 42, .72) !important;
  color: rgba(241, 245, 249, .86) !important;
  border-color: rgba(99, 102, 241, .26) !important;
  border-left-color: rgba(250, 204, 21, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Barras de progreso ejecutivas */
[data-theme="light"] .inst-bar-wrap,
[data-theme="light"] .assoc-bar-wrap,
[data-theme="light"] .dist-bar-wrap,
[data-theme="light"] .md-level-progress-bar,
[data-theme="light"] .md-reward-progress-bar {
  background: rgba(15, 23, 42, .10) !important;
  border: 1px solid rgba(30, 41, 59, .09) !important;
}

[data-theme="light"] .inst-card .inst-bar-wrap,
[data-theme="light"] .assoc-glass .assoc-bar-wrap,
[data-theme="light"] .dist-card .dist-bar-wrap {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

/* Participante: claro tipo app, legible y vivo */
[data-theme="light"] .md-role-participant .md-hero {
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .18), transparent 20rem),
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(239, 246, 255, .86)) !important;
}

[data-theme="light"] .md-role-participant .md-hero-stat,
[data-theme="light"] .md-role-participant .md-star-item,
[data-theme="light"] .md-role-participant .md-app-action {
  background: rgba(255, 255, 255, .76) !important;
  color: #101827 !important;
  border-color: rgba(30, 41, 59, .10) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

[data-theme="light"] .md-role-participant .md-app-action-primary {
  background: linear-gradient(135deg, rgba(37, 99, 235, .13), rgba(250, 204, 21, .10)), rgba(255,255,255,.84) !important;
  border-color: rgba(37, 99, 235, .20) !important;
}

/* Tipografía general en claro */
[data-theme="light"] h1:not(.auth-brand h1),
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .fw-bold,
[data-theme="light"] .fw-semibold,
[data-theme="light"] .md-hero-greeting,
[data-theme="light"] .md-mission-title,
[data-theme="light"] .md-ranking-title,
[data-theme="light"] .md-reward-name,
[data-theme="light"] .md-ai-msg {
  color: #101827 !important;
}

[data-theme="light"] .text-muted,
[data-theme="light"] .small,
[data-theme="light"] p,
[data-theme="light"] .form-label,
[data-theme="light"] .form-text,
[data-theme="light"] .card-text,
[data-theme="light"] .list-group-item,
[data-theme="light"] .md-hero-subtitle,
[data-theme="light"] .md-mission-desc,
[data-theme="light"] .md-rank-label,
[data-theme="light"] .md-reward-pts-needed,
[data-theme="light"] .md-sheet-subtitle,
[data-theme="light"] .page-breadcrumb,
[data-theme="light"] .page-subtitle,
[data-theme="light"] .section-subtitle {
  color: #475569 !important;
}

/* Tablas */
[data-theme="light"] .table,
[data-theme="light"] .md-data-table {
  color: #101827 !important;
}

[data-theme="light"] .table th,
[data-theme="light"] .md-data-table th {
  background: rgba(226, 232, 240, .70) !important;
  color: #334155 !important;
  border-color: rgba(30, 41, 59, .11) !important;
}

[data-theme="light"] .table td,
[data-theme="light"] .md-data-table td {
  color: #101827 !important;
  border-color: rgba(30, 41, 59, .08) !important;
}

[data-theme="light"] .table tbody tr:hover td,
[data-theme="light"] .md-data-table tr:hover td {
  background: rgba(37, 99, 235, .05) !important;
}

/* Formularios */
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] input,
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(30, 41, 59, .16) !important;
  color: #101827 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}

[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus,
[data-theme="light"] input:focus,
[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
  background: #fff !important;
  border-color: rgba(37, 99, 235, .55) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .13) !important;
  color: #101827 !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder,
[data-theme="light"] .form-control::placeholder {
  color: #94a3b8 !important;
}

/* Botones */
[data-theme="light"] .md-btn-primary,
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary-md,
[data-theme="light"] .md-btn-mission {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .22) !important;
}

[data-theme="light"] .md-btn-ghost,
[data-theme="light"] .btn-ghost-md,
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-outline-secondary {
  background: rgba(255, 255, 255, .70) !important;
  color: #334155 !important;
  border: 1px solid rgba(30, 41, 59, .14) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
}

/* Badges y alertas */
[data-theme="light"] .md-badge-muted,
[data-theme="light"] .badge.bg-secondary,
[data-theme="light"] .alert-flash,
[data-theme="light"] .md-flash {
  background: rgba(255, 255, 255, .82) !important;
  color: #334155 !important;
  border-color: rgba(30, 41, 59, .12) !important;
}

/* Modales/sheets */
[data-theme="light"] .modal-content,
[data-theme="light"] .md-sheet,
[data-theme="light"] .md-achievement-modal,
[data-theme="light"] .level-up-modal,
[data-theme="light"] .achievement-modal {
  background: rgba(255, 255, 255, .94) !important;
  color: #101827 !important;
}

[data-theme="light"] .modal-header,
[data-theme="light"] .modal-footer,
[data-theme="light"] .md-sheet-divider {
  border-color: rgba(30, 41, 59, .12) !important;
}

[data-theme="light"] .btn-close-white,
[data-theme="light"] .btn-close {
  filter: none !important;
}

/* Breadcrumb */
[data-theme="light"] .page-breadcrumb {
  background: rgba(248, 250, 255, .75) !important;
  border-color: rgba(30, 41, 59, .10) !important;
}

/* Login / auth */
[data-theme="light"] body.md-role-auth {
  background:
    radial-gradient(circle at 18% 8%, rgba(37, 99, 235, .14), transparent 30rem),
    radial-gradient(circle at 82% 88%, rgba(180, 83, 9, .12), transparent 28rem),
    linear-gradient(135deg, #f9fbff, #edf3ff) !important;
}

[data-theme="light"] .auth-page {
  background: transparent !important;
}

/* Scrollbar clara */
[data-theme="light"] ::-webkit-scrollbar-track { background: #edf3ff; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(37, 99, 235, .35); border-radius: 999px; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(37, 99, 235, .58); }

/* Evitar que textos dentro de tarjetas ejecutivas pierdan color por reglas Bootstrap/globales */
[data-theme="light"] .md-role-executive .inst-card .text-gold,
[data-theme="light"] .md-role-executive .assoc-glass .text-gold,
[data-theme="light"] .md-role-executive .dist-card .text-gold {
  color: #facc15 !important;
}

/* Responsive light polish */
@media (max-width: 1024px) {
  [data-theme="light"] .sidebar.open {
    box-shadow: 18px 0 60px rgba(15, 23, 42, .30) !important;
  }
}

@media (max-width: 768px) {
  [data-theme="light"] .page-content,
  [data-theme="light"] .md-page-content {
    background: transparent !important;
  }

  [data-theme="light"] .md-role-executive .inst-card,
  [data-theme="light"] .md-role-executive .assoc-glass,
  [data-theme="light"] .md-role-executive .dist-card {
    border-radius: 22px !important;
  }
}

/* ============================================================
   HOTFIX V7 — MODO CLARO EJECUTIVO PREMIUM REAL
   Objetivo: que el modo claro sea luminoso, profesional y legible,
   sin convertir el contenido central en tarjetas oscuras apagadas.
   Este bloque va al final para ganar prioridad sobre estilos inline/globales.
   ============================================================ */

html[data-theme="light"] {
  --v7-paper: #f7f9ff;
  --v7-paper-2: #eef4ff;
  --v7-ink: #0b1220;
  --v7-ink-2: #1e293b;
  --v7-muted: #64748b;
  --v7-muted-2: #8794a8;
  --v7-line: rgba(15, 23, 42, .12);
  --v7-line-2: rgba(15, 23, 42, .08);
  --v7-gold: #b7791f;
  --v7-gold-2: #d99a20;
  --v7-blue: #1d4ed8;
  --v7-green: #059669;
  --v7-purple: #6d28d9;
  --v7-red: #dc2626;
  --v7-shadow-soft: 0 18px 46px rgba(15, 23, 42, .10);
  --v7-shadow-card: 0 22px 58px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255,255,255,.92);
  --v7-shadow-hover: 0 30px 72px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255,255,255,.96);
}

html[data-theme="light"] body.md-body,
html[data-theme="light"] body {
  color: var(--v7-ink) !important;
  background:
    radial-gradient(circle at 12% -12%, rgba(37, 99, 235, .17), transparent 34rem),
    radial-gradient(circle at 88% 0%, rgba(217, 154, 32, .16), transparent 31rem),
    radial-gradient(circle at 50% 110%, rgba(109, 40, 217, .10), transparent 38rem),
    linear-gradient(135deg, #fbfdff 0%, #f3f7ff 46%, #eef4ff 100%) !important;
}

html[data-theme="light"] body.md-body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .42;
  background-image:
    linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
}

html[data-theme="light"] #particleCanvas,
html[data-theme="light"] .sacred-bg {
  opacity: .08 !important;
  mix-blend-mode: multiply !important;
}

/* Lienzo central premium luminoso */
html[data-theme="light"] .main-content,
html[data-theme="light"] .md-main {
  background:
    radial-gradient(circle at 18% 6%, rgba(37, 99, 235, .10), transparent 28rem),
    radial-gradient(circle at 88% 14%, rgba(217, 154, 32, .10), transparent 26rem),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(239,246,255,.78)) !important;
}

html[data-theme="light"] .page-content,
html[data-theme="light"] .md-page-content {
  color: var(--v7-ink) !important;
}

/* Sidebar claro: oscuro institucional, pero con texto limpio y no morado apagado */
html[data-theme="light"] body .sidebar,
html[data-theme="light"] body .md-sidebar,
html[data-theme="light"] body .admin-sidebar {
  background:
    radial-gradient(circle at 14% 0%, rgba(250, 204, 21, .08), transparent 12rem),
    radial-gradient(circle at 86% 8%, rgba(37, 99, 235, .14), transparent 16rem),
    linear-gradient(180deg, #07111f 0%, #081426 46%, #050b14 100%) !important;
  border-right: 1px solid rgba(148, 163, 184, .18) !important;
  box-shadow: 20px 0 54px rgba(15, 23, 42, .20) !important;
}

html[data-theme="light"] body .sidebar .brand-name,
html[data-theme="light"] body .sidebar .md-brand-name,
html[data-theme="light"] body .sidebar .sidebar-user-name {
  color: #f8fafc !important;
  opacity: 1 !important;
  text-shadow: 0 1px 16px rgba(250,204,21,.10) !important;
}

html[data-theme="light"] body .sidebar .brand-role,
html[data-theme="light"] body .sidebar .md-brand-role,
html[data-theme="light"] body .sidebar .sidebar-user-role,
html[data-theme="light"] body .sidebar .nav-section-title,
html[data-theme="light"] body .sidebar .md-nav-section {
  color: rgba(226, 232, 240, .72) !important;
  opacity: 1 !important;
}

html[data-theme="light"] body .sidebar .brand-stars {
  color: #facc15 !important;
  text-shadow: 0 0 20px rgba(250,204,21,.28) !important;
}

html[data-theme="light"] body .sidebar .nav-item,
html[data-theme="light"] body .sidebar .md-nav-item {
  color: rgba(226, 232, 240, .86) !important;
  text-shadow: none !important;
}

html[data-theme="light"] body .sidebar .nav-item:hover,
html[data-theme="light"] body .sidebar .md-nav-item:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,.08) !important;
}

html[data-theme="light"] body .sidebar .nav-item.active,
html[data-theme="light"] body .sidebar .md-nav-item.active {
  color: #ffffff !important;
  background: linear-gradient(90deg, rgba(250, 204, 21, .20), rgba(37, 99, 235, .08)) !important;
  border-left: 3px solid #facc15 !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.22), inset 0 0 0 1px rgba(250,204,21,.13) !important;
}

html[data-theme="light"] body .sidebar .nav-icon,
html[data-theme="light"] body .sidebar .md-nav-icon {
  color: #f8fafc !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Topbar premium clara */
html[data-theme="light"] .topbar,
html[data-theme="light"] .md-topbar,
html[data-theme="light"] .navbar {
  background: rgba(255,255,255,.82) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .10) !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .08) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
}

html[data-theme="light"] .topbar-title,
html[data-theme="light"] .md-topbar-title,
html[data-theme="light"] .topbar h1,
html[data-theme="light"] .topbar h2,
html[data-theme="light"] .topbar h3 {
  color: #121827 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .topbar-admin-tag,
html[data-theme="light"] .md-theme-toggle,
html[data-theme="light"] .topbar-alert,
html[data-theme="light"] .topbar-toggle,
html[data-theme="light"] .md-topbar-notif {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(180, 83, 9, .18) !important;
  color: #92400e !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* Dashboard ejecutivo: en modo claro NO usar paneles oscuros apagados */
html[data-theme="light"] body.md-role-executive .inst-card,
html[data-theme="light"] body.md-role-executive .assoc-glass,
html[data-theme="light"] body.md-role-executive .dist-card,
html[data-theme="light"] body.md-role-leader .dist-card,
html[data-theme="light"] body.md-role-leader .assoc-glass {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.91) 54%, rgba(239,246,255,.88)) !important;
  color: var(--v7-ink) !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-top: 1px solid rgba(217, 154, 32, .34) !important;
  box-shadow: var(--v7-shadow-card) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

html[data-theme="light"] body.md-role-executive .inst-card:hover,
html[data-theme="light"] body.md-role-executive .assoc-glass:hover,
html[data-theme="light"] body.md-role-executive .dist-card:hover {
  box-shadow: var(--v7-shadow-hover) !important;
}

html[data-theme="light"] body.md-role-executive .inst-card::before,
html[data-theme="light"] body.md-role-executive .assoc-glass::before,
html[data-theme="light"] body.md-role-executive .dist-card::before {
  background: linear-gradient(90deg, transparent, rgba(217,154,32,.42), rgba(37,99,235,.18), transparent) !important;
  height: 2px !important;
  left: 8% !important;
  right: 8% !important;
}

/* Hero ejecutivo con presencia institucional clara */
html[data-theme="light"] body.md-role-executive .page-content > .inst-card:first-of-type,
html[data-theme="light"] body.md-role-executive .page-content > .assoc-glass:first-of-type,
html[data-theme="light"] body.md-role-executive .page-content > .dist-card:first-of-type {
  background:
    radial-gradient(circle at 92% 8%, rgba(217,154,32,.14), transparent 18rem),
    radial-gradient(circle at 8% 0%, rgba(37,99,235,.12), transparent 18rem),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,245,249,.92)) !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-top: 1px solid rgba(217, 154, 32, .42) !important;
}

/* KPIs claros: contundentes y elegantes */
html[data-theme="light"] body.md-role-executive .inst-kpi,
html[data-theme="light"] body.md-role-executive .assoc-kpi,
html[data-theme="light"] body.md-role-executive .dist-kpi,
html[data-theme="light"] body.md-role-leader .dist-kpi,
html[data-theme="light"] body.md-role-leader .assoc-kpi {
  background:
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,250,252,.92)) !important;
  color: var(--v7-ink) !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
  box-shadow: 0 20px 48px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255,255,255,.94) !important;
}

html[data-theme="light"] body.md-role-executive .inst-kpi:hover,
html[data-theme="light"] body.md-role-executive .assoc-kpi:hover,
html[data-theme="light"] body.md-role-executive .dist-kpi:hover,
html[data-theme="light"] body.md-role-leader .dist-kpi:hover,
html[data-theme="light"] body.md-role-leader .assoc-kpi:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 30px 72px rgba(15, 23, 42, .15), 0 0 0 1px rgba(217,154,32,.10) !important;
}

/* Textos ejecutivos: reparar inline rgba(255,255,255,...) para fondo claro */
html[data-theme="light"] body.md-role-executive .inst-card [style*="color:rgba(255,255,255"],
html[data-theme="light"] body.md-role-executive .inst-kpi [style*="color:rgba(255,255,255"],
html[data-theme="light"] body.md-role-executive .inst-sem [style*="color:rgba(255,255,255"],
html[data-theme="light"] body.md-role-executive .assoc-glass [style*="color:rgba(255,255,255"],
html[data-theme="light"] body.md-role-executive .assoc-kpi [style*="color:rgba(255,255,255"],
html[data-theme="light"] body.md-role-executive .dist-card [style*="color:rgba(255,255,255"],
html[data-theme="light"] body.md-role-executive .dist-kpi [style*="color:rgba(255,255,255"] {
  color: var(--v7-muted) !important;
  opacity: 1 !important;
}

html[data-theme="light"] body.md-role-executive .inst-card p,
html[data-theme="light"] body.md-role-executive .inst-card small,
html[data-theme="light"] body.md-role-executive .assoc-glass p,
html[data-theme="light"] body.md-role-executive .assoc-glass small,
html[data-theme="light"] body.md-role-executive .dist-card p,
html[data-theme="light"] body.md-role-executive .dist-card small,
html[data-theme="light"] body.md-role-executive .text-muted,
html[data-theme="light"] body.md-role-executive .small {
  color: var(--v7-muted) !important;
}

html[data-theme="light"] body.md-role-executive .inst-card h1,
html[data-theme="light"] body.md-role-executive .assoc-glass h1,
html[data-theme="light"] body.md-role-executive .dist-card h1 {
  background: linear-gradient(135deg, #111827 0%, #1d4ed8 36%, #b7791f 74%, #92400e 100%) !important;
  background-size: 180% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
  text-shadow: none !important;
}

html[data-theme="light"] body.md-role-executive .inst-card h2,
html[data-theme="light"] body.md-role-executive .inst-card h3,
html[data-theme="light"] body.md-role-executive .inst-card h4,
html[data-theme="light"] body.md-role-executive .assoc-glass h2,
html[data-theme="light"] body.md-role-executive .assoc-glass h3,
html[data-theme="light"] body.md-role-executive .dist-card h2,
html[data-theme="light"] body.md-role-executive .dist-card h3 {
  color: var(--v7-ink) !important;
}

html[data-theme="light"] body.md-role-executive .kq-verse,
html[data-theme="light"] body.md-role-executive .inst-card .kq-verse,
html[data-theme="light"] body.md-role-executive .assoc-glass .kq-verse,
html[data-theme="light"] body.md-role-executive .dist-card .kq-verse {
  background: linear-gradient(135deg, rgba(37, 99, 235, .075), rgba(217, 154, 32, .075)) !important;
  color: #334155 !important;
  border: 1px solid rgba(37, 99, 235, .14) !important;
  border-left: 3px solid rgba(217, 154, 32, .62) !important;
  opacity: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88) !important;
}

/* Gauge y SVG legibles sobre claro */
html[data-theme="light"] body.md-role-executive .inst-card svg circle:first-child,
html[data-theme="light"] body.md-role-executive .assoc-glass svg circle:first-child,
html[data-theme="light"] body.md-role-executive .dist-card svg circle:first-child {
  stroke: rgba(148, 163, 184, .26) !important;
}

html[data-theme="light"] body.md-role-executive .inst-card svg text[style*="fill:rgba(255,255,255"],
html[data-theme="light"] body.md-role-executive .assoc-glass svg text[style*="fill:rgba(255,255,255"],
html[data-theme="light"] body.md-role-executive .dist-card svg text[style*="fill:rgba(255,255,255"] {
  fill: var(--v7-muted) !important;
  opacity: 1 !important;
}

/* Listas, semáforos, rankings y riesgos sobre claro */
html[data-theme="light"] body.md-role-executive .inst-sem,
html[data-theme="light"] body.md-role-executive .dist-risk,
html[data-theme="light"] body.md-role-executive .assoc-tab-wrap,
html[data-theme="light"] body.md-role-executive .assoc-tab-content {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(148, 163, 184, .16) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255,255,255,.88) !important;
}

html[data-theme="light"] body.md-role-executive .inst-rank:hover,
html[data-theme="light"] body.md-role-executive .assoc-rank:hover,
html[data-theme="light"] body.md-role-executive .dist-rank:hover {
  background: rgba(37, 99, 235, .055) !important;
}

html[data-theme="light"] body.md-role-executive .inst-bar-wrap,
html[data-theme="light"] body.md-role-executive .assoc-bar-wrap,
html[data-theme="light"] body.md-role-executive .dist-bar-wrap {
  background: rgba(148, 163, 184, .20) !important;
  border: 1px solid rgba(148, 163, 184, .12) !important;
}

html[data-theme="light"] body.md-role-executive .assoc-tab-btn,
html[data-theme="light"] body.md-role-executive .btn.rounded-pill,
html[data-theme="light"] body.md-role-executive .btn-sm.rounded-pill {
  background: rgba(255,255,255,.84) !important;
  color: #1e293b !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.07) !important;
}

html[data-theme="light"] body.md-role-executive .assoc-tab-btn.on,
html[data-theme="light"] body.md-role-executive .btn.rounded-pill:hover,
html[data-theme="light"] body.md-role-executive .btn-sm.rounded-pill:hover {
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(217,154,32,.12)), #fff !important;
  color: #0f172a !important;
  border-color: rgba(217,154,32,.28) !important;
}

html[data-theme="light"] body.md-role-executive .dist-dim,
html[data-theme="light"] body.md-role-executive .assoc-dim {
  background: rgba(255,255,255,.78) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* Tarjetas generales de todo el sistema */
html[data-theme="light"] .md-card,
html[data-theme="light"] .card,
html[data-theme="light"] .stat-mini,
html[data-theme="light"] .table-responsive,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .md-sheet,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .md-ranking-card,
html[data-theme="light"] .md-reward-card,
html[data-theme="light"] .md-ai-card,
html[data-theme="light"] .md-motivation-card,
html[data-theme="light"] .md-mission-card,
html[data-theme="light"] .md-hero {
  background: rgba(255,255,255,.92) !important;
  color: var(--v7-ink) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  box-shadow: var(--v7-shadow-soft) !important;
}

html[data-theme="light"] .md-card:hover,
html[data-theme="light"] .card:hover,
html[data-theme="light"] .md-mission-card:hover,
html[data-theme="light"] .md-ranking-card:hover,
html[data-theme="light"] .md-reward-card:hover {
  box-shadow: var(--v7-shadow-card) !important;
}

html[data-theme="light"] .table,
html[data-theme="light"] .md-data-table {
  color: var(--v7-ink) !important;
}

html[data-theme="light"] .table th,
html[data-theme="light"] .md-data-table th {
  background: linear-gradient(135deg, rgba(241,245,249,.96), rgba(226,232,240,.92)) !important;
  color: #334155 !important;
}

html[data-theme="light"] .table td,
html[data-theme="light"] .md-data-table td {
  color: var(--v7-ink-2) !important;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select {
  background: rgba(255,255,255,.96) !important;
  color: var(--v7-ink) !important;
  border: 1px solid rgba(148,163,184,.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 8px 20px rgba(15,23,42,.045) !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-select:focus {
  background: #ffffff !important;
  border-color: rgba(37,99,235,.58) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.14), 0 14px 30px rgba(15,23,42,.08) !important;
}

/* Participante en claro: mantener app viva, no apagada */
html[data-theme="light"] body.md-role-participant .md-hero {
  background:
    radial-gradient(circle at 90% 0%, rgba(217,154,32,.14), transparent 18rem),
    radial-gradient(circle at 8% 0%, rgba(37,99,235,.14), transparent 18rem),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.90)) !important;
}

html[data-theme="light"] body.md-role-participant .md-star-item,
html[data-theme="light"] body.md-role-participant .md-hero-stat,
html[data-theme="light"] body.md-role-participant .md-app-action {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(148,163,184,.18) !important;
  box-shadow: 0 16px 38px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

/* Mobile claro: más compacto y limpio */
@media (max-width: 768px) {
  html[data-theme="light"] .page-content,
  html[data-theme="light"] .md-page-content {
    padding-inline: .95rem !important;
  }

  html[data-theme="light"] body.md-role-executive .inst-card,
  html[data-theme="light"] body.md-role-executive .assoc-glass,
  html[data-theme="light"] body.md-role-executive .dist-card,
  html[data-theme="light"] body.md-role-executive .inst-kpi,
  html[data-theme="light"] body.md-role-executive .assoc-kpi,
  html[data-theme="light"] body.md-role-executive .dist-kpi {
    border-radius: 20px !important;
  }

  html[data-theme="light"] body .sidebar.open {
    box-shadow: 20px 0 70px rgba(15, 23, 42, .36) !important;
  }
}

/* ============================================================
   HOTFIX PRODUCCIÓN 7 ESTRELLAS - Tablas en modo oscuro
   Evita tablas blancas dentro de tarjetas premium administrativas.
   ============================================================ */
html[data-theme="dark"] .md-card .table-responsive,
[data-theme="dark"] .md-card .table-responsive {
  background: rgba(8, 13, 34, .72) !important;
  border: 1px solid rgba(122, 111, 255, .22) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}
html[data-theme="dark"] .md-card .table,
[data-theme="dark"] .md-card .table,
html[data-theme="dark"] .md-card .table > :not(caption) > * > *,
[data-theme="dark"] .md-card .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: rgba(244, 247, 255, .94) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] .md-card .table thead th,
[data-theme="dark"] .md-card .table thead th {
  color: rgba(248, 250, 252, .96) !important;
  background: rgba(255,255,255,.05) !important;
  font-family: 'Cinzel', serif;
}
html[data-theme="dark"] .md-card .table tbody tr:hover td,
[data-theme="dark"] .md-card .table tbody tr:hover td {
  background: rgba(124, 92, 255, .13) !important;
}
html[data-theme="dark"] .md-card .text-muted,
[data-theme="dark"] .md-card .text-muted {
  color: rgba(203, 213, 225, .74) !important;
}