/* ============================================================
   MISIÓN DIGITAL 5 ESTRELLAS IASD
   Premium Mobile-First Design System v2.0
   "Cada interacción, una semilla de salvación."
   ============================================================ */

/* ── Import fonts ── */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Backgrounds */
  --md-bg:           #07111f;
  --md-bg-2:         #0f172a;
  --md-bg-3:         #0a1628;
  --md-surface:      rgba(255,255,255,.06);
  --md-surface-2:    rgba(255,255,255,.10);
  --md-surface-3:    rgba(255,255,255,.15);
  --md-depth:        #050d1a;
  /* Borders */
  --md-border:       rgba(255,255,255,.12);
  --md-border-gold:  rgba(250,204,21,.35);
  /* Accent colors */
  --md-gold:         #facc15;
  --md-gold-2:       #f59e0b;
  --md-gold-glow:    rgba(250,204,21,.55);
  --md-gold-soft:    rgba(250,204,21,.18);
  --md-blue:         #38bdf8;
  --md-blue-2:       #2563eb;
  --md-blue-soft:    rgba(56,189,248,.15);
  --md-green:        #22c55e;
  --md-green-soft:   rgba(34,197,94,.15);
  --md-purple:       #8b5cf6;
  --md-purple-soft:  rgba(139,92,246,.15);
  --md-red:          #ef4444;
  --md-red-soft:     rgba(239,68,68,.15);
  /* Text */
  --md-text:         #f8fafc;
  --md-muted:        #94a3b8;
  --md-muted-2:      #64748b;
  --md-muted-3:      #475569;
  /* Layout */
  --sidebar-w:       260px;
  --nav-h:           68px;
  --topbar-h:        60px;
  /* Radii */
  --r-sm:            10px;
  --r-md:            16px;
  --r-lg:            22px;
  --r-xl:            30px;
  --r-pill:          999px;
  /* Shadows */
  --shadow-sm:       0 2px 12px rgba(0,0,0,.25);
  --shadow-md:       0 8px 32px rgba(0,0,0,.35);
  --shadow-lg:       0 24px 70px rgba(0,0,0,.45);
  --shadow-gold:     0 0 40px rgba(250,204,21,.28);
  --shadow-blue:     0 0 32px rgba(56,189,248,.2);
  /* Transitions */
  --t-fast:          150ms ease;
  --t-base:          250ms ease;
  --t-slow:          400ms ease;
  /* Viewport height fix (set by JS) */
  --vh:              1vh;
  font-size: 16px;
}

/* ── Light mode ── */
[data-theme="light"] {
  --md-bg:        #f1f5f9;
  --md-bg-2:      #e2e8f0;
  --md-bg-3:      #f8fafc;
  --md-surface:   rgba(255,255,255,.9);
  --md-surface-2: rgba(255,255,255,1);
  --md-surface-3: rgba(255,255,255,.8);
  --md-depth:     #cbd5e1;
  --md-border:    rgba(0,0,0,.1);
  --md-text:      #0f172a;
  --md-muted:     #475569;
  --md-muted-2:   #64748b;
  --md-muted-3:   #94a3b8;
  --shadow-md:    0 8px 32px rgba(0,0,0,.12);
  --shadow-lg:    0 24px 70px rgba(0,0,0,.15);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'IM Fell English', serif;
  background: var(--md-bg);
  color: var(--md-text);
  min-height: 100dvh;
  min-height: calc(var(--vh, 1vh) * 100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

/* Touch targets */
a, button, [role="button"], [role="tab"] {
  touch-action: manipulation;
  min-height: 44px;
}

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.md-layout {
  display: flex;
  min-height: 100dvh;
}

/* ── Sidebar (desktop) ── */
.md-sidebar {
  width: var(--sidebar-w);
  min-height: 100dvh;
  background: var(--md-depth);
  border-right: 1px solid var(--md-border);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-slow);
  overflow-y: auto;
  scrollbar-width: none;
}
.md-sidebar::-webkit-scrollbar { display: none; }

.md-sidebar-brand {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--md-border);
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}
.md-brand-stars { color: var(--md-gold); letter-spacing: .05em; font-size: .9rem; }
.md-brand-name  { font-family: 'Cinzel', serif; font-weight: 800; font-size: .95rem; }
.md-brand-role  { font-size: .68rem; color: var(--md-muted); display: block; margin-top: .1rem; }

.md-sidebar-nav { flex: 1; padding: .75rem 0; }

.md-nav-section {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--md-muted-3);
  padding: .75rem 1.25rem .2rem;
  font-family: 'Cinzel', serif;
}

.md-nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1.25rem;
  border-radius: 0;
  font-size: .87rem;
  font-weight: 500;
  color: var(--md-muted);
  transition: color var(--t-fast), background var(--t-fast);
  position: relative;
  min-height: 44px;
}
.md-nav-item:hover { color: var(--md-text); background: var(--md-surface); }
.md-nav-item.active {
  color: var(--md-gold);
  background: var(--md-gold-soft);
}
.md-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--md-gold);
  border-radius: 0 2px 2px 0;
}
.md-nav-icon { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0; }

.md-sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--md-border);
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}
.md-sidebar-user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--md-gold), var(--md-gold-2));
  color: #07111f;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem; font-family: 'Cinzel', serif;
  flex-shrink: 0;
  overflow: hidden;
}
.md-sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.md-sidebar-user-name { font-size: .82rem; font-weight: 600; }
.md-sidebar-user-role { font-size: .68rem; color: var(--md-muted); }
.md-sidebar-logout {
  margin-left: auto;
  color: var(--md-muted);
  font-size: 1.1rem;
  padding: .4rem;
  border-radius: var(--r-sm);
  transition: color var(--t-fast);
}
.md-sidebar-logout:hover { color: var(--md-red); }

/* ── Overlay ── */
.md-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(3px);
  z-index: 290;
}
.md-overlay.active { display: block; }

/* ── Main content ── */
.md-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ── Topbar ── */
.md-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--topbar-h);
  background: rgba(7,17,31,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--md-border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: .75rem;
}
[data-theme="light"] .md-topbar {
  background: rgba(241,245,249,.92);
}
.md-topbar-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  align-items: center; justify-content: center;
  font-size: 1.25rem;
  color: var(--md-muted);
  transition: color var(--t-fast), background var(--t-fast);
}
.md-topbar-toggle:hover { color: var(--md-text); background: var(--md-surface); }
.md-topbar-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: .95rem;
  flex: 1;
}
.md-topbar-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.md-theme-toggle {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  transition: background var(--t-fast), transform var(--t-base);
}
.md-theme-toggle:hover { transform: rotate(20deg); background: var(--md-surface-2); }
.md-topbar-notif {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  position: relative;
}
.md-notif-badge {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--md-red);
  color: #fff;
  font-size: .55rem;
  font-weight: 800;
  min-width: 1rem; height: 1rem;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--md-bg);
}

/* ── Page content ── */
.md-page-content {
  flex: 1;
  padding: 1.5rem 2rem calc(var(--nav-h) + 1.5rem);
  max-width: 900px;
  width: 100%;
}

/* ============================================================
   BOTTOM NAVIGATION (mobile)
   ============================================================ */
.md-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(7,17,31,.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--md-border);
  z-index: 280;
  height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom);
}
[data-theme="light"] .md-bottom-nav { background: rgba(241,245,249,.97); }

.md-bottom-nav-inner {
  display: flex;
  height: calc(var(--nav-h) - env(safe-area-inset-bottom, 0px));
}

.md-nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  color: var(--md-muted-3);
  font-size: .62rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-base);
  position: relative;
  padding: .4rem .25rem;
  min-height: var(--nav-h);
}
.md-nav-tab.active { color: var(--md-gold); }
.md-nav-tab.active .md-nav-tab-icon::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 2px;
  background: var(--md-gold);
  border-radius: var(--r-pill);
}
.md-nav-tab-icon {
  font-size: 1.3rem;
  position: relative;
  line-height: 1;
}
.md-nav-tab-badge {
  position: absolute;
  top: -4px; right: -8px;
  background: var(--md-red);
  color: #fff;
  font-size: .5rem;
  font-weight: 800;
  min-width: .85rem; height: .85rem;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  padding: 0 2px;
}

/* ============================================================
   CARDS BASE
   ============================================================ */
.md-card {
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.md-card:active { transform: scale(.99); }
.md-card-body { padding: 1.25rem 1.5rem; }
.md-card-sm .md-card-body { padding: .875rem 1.1rem; }

/* ============================================================
   BUTTONS
   ============================================================ */
.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.5rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .9rem;
  transition: transform var(--t-fast), opacity var(--t-fast), box-shadow var(--t-base);
  cursor: pointer;
  min-height: 46px;
  font-family: 'IM Fell English', serif;
  white-space: nowrap;
}
.md-btn:active { transform: scale(.97); }
.md-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.md-btn-primary {
  background: linear-gradient(135deg, var(--md-gold), var(--md-gold-2));
  color: #07111f;
  box-shadow: 0 4px 20px rgba(250,204,21,.35);
}
.md-btn-primary:hover { box-shadow: 0 6px 28px rgba(250,204,21,.55); transform: translateY(-1px); }

.md-btn-mission {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #fff;
  box-shadow: 0 4px 20px rgba(56,189,248,.35);
  font-size: 1rem;
  padding: .85rem 2rem;
  animation: missionBtnPulse 3s ease-in-out infinite;
}
.md-btn-mission:hover { box-shadow: 0 8px 32px rgba(56,189,248,.5); transform: translateY(-2px); animation: none; }

@keyframes missionBtnPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(56,189,248,.35); }
  50%       { box-shadow: 0 6px 32px rgba(56,189,248,.6), 0 0 0 4px rgba(56,189,248,.1); }
}

.md-btn-ghost {
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  color: var(--md-text);
}
.md-btn-ghost:hover { background: var(--md-surface-2); }

.md-btn-sm { padding: .45rem 1rem; font-size: .8rem; min-height: 36px; }
.md-btn-lg { padding: .95rem 2.5rem; font-size: 1.05rem; min-height: 52px; }
.md-btn-full { width: 100%; }

/* Loading state */
.md-btn.is-loading { pointer-events: none; }
.md-btn.is-loading .md-btn-text::after {
  content: '';
  display: inline-block;
  width: .9em; height: .9em;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  margin-left: .5rem;
  vertical-align: middle;
}

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

/* ============================================================
   HERO PARTICIPANTE
   ============================================================ */
.md-hero {
  background: linear-gradient(135deg,
    rgba(37,99,235,.2) 0%,
    rgba(139,92,246,.15) 40%,
    rgba(56,189,248,.1) 100%);
  border: 1px solid rgba(56,189,248,.2);
  border-radius: var(--r-xl);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
  animation: mdFadeUp .55s ease both;
}
.md-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23facc15' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.md-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.md-hero-greeting {
  font-size: 1.45rem;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  line-height: 1.2;
}
.md-hero-subtitle {
  font-size: .85rem;
  color: var(--md-muted);
  margin-top: .25rem;
}
.md-hero-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid var(--md-gold-soft);
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--md-gold), var(--md-gold-2));
  color: #07111f;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 1.2rem;
}
.md-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Stats row */
.md-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1rem;
}
.md-hero-stat {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--md-border);
  border-radius: var(--r-md);
  padding: .75rem;
  text-align: center;
}
[data-theme="light"] .md-hero-stat { background: rgba(255,255,255,.7); }
.md-hero-stat-icon { font-size: 1.2rem; display: block; margin-bottom: .15rem; }
.md-hero-stat-value {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--md-gold);
  display: block;
  line-height: 1.1;
}
.md-hero-stat-label {
  font-size: .65rem;
  color: var(--md-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: block;
  margin-top: .1rem;
}

/* Level + progress */
.md-hero-level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.md-level-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--md-gold-soft);
  border: 1px solid var(--md-border-gold);
  border-radius: var(--r-pill);
  padding: .3rem .9rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--md-gold);
}
.md-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(249,115,22,.15);
  border: 1px solid rgba(249,115,22,.3);
  border-radius: var(--r-pill);
  padding: .3rem .75rem;
  font-size: .78rem;
  font-weight: 700;
  color: #fb923c;
}
.md-level-progress-wrap { width: 100%; margin-top: .5rem; }
.md-level-progress-bar {
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.md-level-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--md-gold), var(--md-gold-2));
  border-radius: var(--r-pill);
  transition: width 1s cubic-bezier(.4, 0, .2, 1);
}
.md-level-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: var(--md-muted);
  margin-top: .3rem;
}

/* ============================================================
   5 ESTRELLAS — EL CORAZÓN VISUAL
   ============================================================ */
.md-stars-section {
  margin-bottom: 1.25rem;
  animation: mdFadeUp .6s ease .1s both;
}
.md-stars-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .875rem;
  padding: 0 .25rem;
}
.md-stars-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: .9rem;
}
.md-stars-global-pct {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--md-gold);
}

.md-stars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
}

.md-star-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .75rem .4rem;
  border-radius: var(--r-md);
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  cursor: pointer;
  transition: transform var(--t-base), box-shadow var(--t-base),
              border-color var(--t-base), background var(--t-base);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.md-star-item:active { transform: scale(.95); }
.md-star-item:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 2px; }

/* ── Vacía ── */
.md-star-item.is-empty .md-star-icon { color: var(--md-muted-3); font-size: 1.6rem; }

/* ── Parcial ── */
.md-star-item.is-partial {
  background: linear-gradient(135deg, rgba(250,204,21,.06), rgba(250,204,21,.02));
  border-color: rgba(250,204,21,.2);
}
.md-star-item.is-partial .md-star-icon {
  color: var(--md-gold-2);
  font-size: 1.6rem;
  filter: drop-shadow(0 0 6px rgba(250,204,21,.4));
}

/* ── Completa ── */
.md-star-item.is-complete {
  background: linear-gradient(135deg, rgba(250,204,21,.14), rgba(250,204,21,.06));
  border-color: var(--md-border-gold);
  box-shadow: 0 0 20px rgba(250,204,21,.12);
}
.md-star-item.is-complete .md-star-icon {
  color: var(--md-gold);
  font-size: 1.7rem;
  text-shadow:
    0 0 8px rgba(250,204,21,.9),
    0 0 24px rgba(250,204,21,.5),
    0 0 40px rgba(250,204,21,.3);
  animation: starComplete 3s ease-in-out infinite;
}

/* ── Próxima (next) ── */
.md-star-item.is-next {
  background: linear-gradient(135deg, rgba(250,204,21,.1), rgba(250,204,21,.04));
  border-color: rgba(250,204,21,.35);
}
.md-star-item.is-next .md-star-icon {
  color: var(--md-gold);
  font-size: 1.65rem;
  animation: mdStarPulse 1.8s ease-in-out infinite;
}
.md-star-item.is-next::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(250,204,21,.3), transparent);
  opacity: 0;
  animation: shimmer 2.5s ease-in-out infinite;
}

/* ── Recién completada ── */
.md-star-item.is-just-completed .md-star-icon {
  animation: starSparkle .8s ease both;
}

.md-star-icon {
  line-height: 1;
  position: relative;
  z-index: 1;
  transition: transform var(--t-base);
}
.md-star-name {
  font-size: .58rem;
  font-weight: 600;
  text-align: center;
  color: var(--md-muted);
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.md-star-item.is-complete .md-star-name,
.md-star-item.is-partial .md-star-name,
.md-star-item.is-next .md-star-name { color: var(--md-gold); }

/* Mini progress ring (SVG inline) */
.md-star-ring {
  position: absolute;
  top: .35rem; right: .35rem;
  width: 18px; height: 18px;
  z-index: 1;
}
.md-star-ring-bg  { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 2.5; }
.md-star-ring-fill {
  fill: none;
  stroke: var(--md-gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 50.27;     /* 2π × r (r=8) */
  stroke-dashoffset: 50.27;
  transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
}

/* Animaciones de estrellas */
@keyframes mdStarPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 8px rgba(250,204,21,.3)); }
  50%       { transform: scale(1.12); filter: drop-shadow(0 0 22px rgba(250,204,21,.8)); }
}
@keyframes starComplete {
  0%, 100% { text-shadow: 0 0 8px rgba(250,204,21,.9), 0 0 24px rgba(250,204,21,.5); }
  50%       { text-shadow: 0 0 14px rgba(250,204,21,1), 0 0 36px rgba(250,204,21,.8), 0 0 60px rgba(250,204,21,.4); }
}
@keyframes starSparkle {
  0%   { transform: scale(.6) rotate(-15deg); opacity: 0; }
  50%  { transform: scale(1.3) rotate(5deg);  opacity: 1; }
  100% { transform: scale(1)   rotate(0);     opacity: 1; }
}
@keyframes shimmer {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}

/* ============================================================
   MISIÓN DE HOY
   ============================================================ */
.md-mission-card {
  background: linear-gradient(135deg, rgba(37,99,235,.15), rgba(56,189,248,.08));
  border: 1px solid rgba(56,189,248,.25);
  border-radius: var(--r-xl);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  animation: mdFadeUp .65s ease .2s both;
  position: relative;
  overflow: hidden;
}
.md-mission-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -20px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(56,189,248,.12) 0%, transparent 70%);
  pointer-events: none;
}

.md-mission-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--md-blue-soft);
  border: 1px solid rgba(56,189,248,.3);
  border-radius: var(--r-pill);
  padding: .2rem .7rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--md-blue);
  margin-bottom: .65rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.md-mission-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: .35rem;
}
.md-mission-desc {
  font-size: .85rem;
  color: var(--md-muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Código misionero */
.md-code-box {
  background: rgba(250,204,21,.08);
  border: 1px dashed rgba(250,204,21,.45);
  border-radius: var(--r-md);
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.md-code-box:hover { background: rgba(250,204,21,.13); border-color: rgba(250,204,21,.6); }
.md-code-box:active { transform: scale(.99); }

.md-code-label {
  font-size: .68rem;
  color: var(--md-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  display: block;
  margin-bottom: .1rem;
}
.md-code-value {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--md-gold);
  letter-spacing: .15em;
}
.md-code-copy-btn {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: rgba(250,204,21,.15);
  color: var(--md-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  transition: background var(--t-fast), transform var(--t-fast);
}
.md-code-copy-btn:hover  { background: rgba(250,204,21,.25); }
.md-code-copy-btn.copied { background: var(--md-green-soft); color: var(--md-green); transform: scale(1.1); }

/* Mission action buttons */
.md-mission-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.md-mission-actions .md-btn-mission { flex: 1; min-width: 0; }

/* Estado de misión */
.md-mission-status {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .875rem;
  border-radius: var(--r-md);
  font-size: .85rem;
  font-weight: 600;
  margin-top: .75rem;
}
.md-mission-status.waiting {
  background: rgba(250,204,21,.1);
  border: 1px solid rgba(250,204,21,.25);
  color: var(--md-gold);
}
.md-mission-status.completed {
  background: var(--md-green-soft);
  border: 1px solid rgba(34,197,94,.3);
  color: var(--md-green);
}
.md-mission-status.analyzing {
  background: var(--md-blue-soft);
  border: 1px solid rgba(56,189,248,.3);
  color: var(--md-blue);
}
.md-mission-status .status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: dotPulse 1.5s ease-in-out infinite;
}
.waiting   .status-dot { background: var(--md-gold); }
.analyzing .status-dot { background: var(--md-blue); }
.completed .status-dot { background: var(--md-green); animation: none; }

@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}

/* ============================================================
   MOTIVACIÓN / PROGRESO
   ============================================================ */
.md-motivation-card {
  background: linear-gradient(135deg, rgba(250,204,21,.1), rgba(250,204,21,.04));
  border: 1px solid var(--md-border-gold);
  border-radius: var(--r-lg);
  padding: .875rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  animation: mdFadeUp .7s ease .3s both;
}
.md-motivation-icon { font-size: 1.5rem; flex-shrink: 0; }
.md-motivation-text { flex: 1; }
.md-motivation-title { font-weight: 700; font-size: .9rem; }
.md-motivation-sub   { font-size: .78rem; color: var(--md-muted); }
.md-motivation-cta {
  flex-shrink: 0;
  background: var(--md-gold-soft);
  border: 1px solid var(--md-border-gold);
  border-radius: var(--r-pill);
  padding: .3rem .75rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--md-gold);
}

/* ============================================================
   RANKING MINI
   ============================================================ */
.md-ranking-card {
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  border-radius: var(--r-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  animation: mdFadeUp .75s ease .35s both;
}
.md-ranking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .875rem;
}
.md-ranking-title { font-weight: 700; font-size: .9rem; }
.md-ranking-link  { font-size: .78rem; color: var(--md-blue); font-weight: 600; }

.md-ranking-my-position {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: linear-gradient(135deg, rgba(250,204,21,.12), rgba(250,204,21,.04));
  border: 1px solid var(--md-border-gold);
  border-radius: var(--r-md);
  padding: .75rem 1rem;
  margin-bottom: .75rem;
}
.md-rank-pos {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--md-gold);
  line-height: 1;
  min-width: 2rem;
  text-align: center;
}
.md-rank-label { font-size: .7rem; color: var(--md-muted); }
.md-rank-pts   { font-family: 'Cinzel', serif; font-weight: 800; font-size: .95rem; }
.md-rank-trend {
  margin-left: auto;
  font-size: 1rem;
  font-weight: 800;
}
.md-rank-trend.up   { color: var(--md-green); }
.md-rank-trend.down { color: var(--md-red); }
.md-rank-trend.same { color: var(--md-muted); }

.md-ranking-list { display: flex; flex-direction: column; gap: .4rem; }
.md-ranking-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .625rem;
  border-radius: var(--r-sm);
  font-size: .85rem;
}
.md-ranking-row.is-me {
  background: var(--md-gold-soft);
  border: 1px solid var(--md-border-gold);
}
.md-rank-num {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: .8rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.md-rank-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--md-surface-2);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  overflow: hidden;
}
.md-rank-avatar img { width: 100%; height: 100%; object-fit: cover; }
.md-rank-name  { flex: 1; font-size: .82rem; font-weight: 500; }
.md-rank-score { font-family: 'Cinzel', serif; font-size: .82rem; font-weight: 700; color: var(--md-gold); }

/* ============================================================
   RECOMPENSA CERCANA
   ============================================================ */
.md-reward-card {
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(139,92,246,.05));
  border: 1px solid rgba(139,92,246,.3);
  border-radius: var(--r-lg);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 1.25rem;
  animation: mdFadeUp .8s ease .4s both;
  cursor: pointer;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.md-reward-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(139,92,246,.2); }
.md-reward-card:active { transform: scale(.99); }
.md-reward-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: rgba(139,92,246,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.md-reward-label { font-size: .68rem; color: var(--md-purple); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.md-reward-name  { font-weight: 700; font-size: .92rem; }
.md-reward-progress-wrap { margin-top: .35rem; }
.md-reward-progress-bar {
  height: 5px;
  background: rgba(255,255,255,.1);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.md-reward-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--md-purple), #a78bfa);
  border-radius: var(--r-pill);
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.md-reward-pts-needed {
  font-size: .7rem;
  color: var(--md-muted);
  margin-top: .2rem;
}
.md-reward-chevron { margin-left: auto; color: var(--md-muted); font-size: .9rem; }

/* ============================================================
   BOTTOM SHEET
   ============================================================ */
.md-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 800;
  align-items: flex-end;
  animation: fadeIn var(--t-base) ease;
}
.md-sheet-overlay.open { display: flex; }

.md-sheet {
  background: var(--md-bg-2);
  border: 1px solid var(--md-border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 0 1.5rem 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: slideUp .35s cubic-bezier(.4, 0, .2, 1);
}
.md-sheet-handle {
  width: 36px; height: 4px;
  background: var(--md-muted-3);
  border-radius: var(--r-pill);
  margin: .875rem auto .5rem;
}
.md-sheet-title {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: .25rem;
}
.md-sheet-subtitle { font-size: .85rem; color: var(--md-muted); margin-bottom: 1.25rem; }
.md-sheet-divider { height: 1px; background: var(--md-border); margin: 1rem 0; }

/* Star detail sheet */
.md-sheet-star-icon {
  font-size: 3rem;
  text-align: center;
  margin: .5rem 0 1rem;
  display: block;
}
.md-sheet-pct {
  font-family: 'Cinzel', serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--md-gold);
  text-align: center;
  display: block;
  line-height: 1;
  margin-bottom: .25rem;
}
.md-sheet-progress {
  height: 10px;
  background: rgba(255,255,255,.08);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: .5rem;
}
.md-sheet-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--md-gold), var(--md-gold-2));
  border-radius: var(--r-pill);
  transition: width 1s ease .2s;
}
.md-sheet-pts-row {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--md-muted);
  margin-bottom: 1.25rem;
}

/* ============================================================
   ACHIEVEMENT TOAST (completar misión)
   ============================================================ */
.md-achievement-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.md-achievement-overlay.open { display: flex; }

.md-achievement-modal {
  background: var(--md-bg-2);
  border: 1px solid rgba(250,204,21,.35);
  border-radius: var(--r-xl);
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 340px;
  width: 100%;
  position: relative;
  animation: achieveIn .5s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 60px rgba(250,204,21,.2), var(--shadow-lg);
}
.md-achieve-emoji  { font-size: 3.5rem; display: block; margin-bottom: .75rem; }
.md-achieve-title  { font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.5rem; margin-bottom: .35rem; }
.md-achieve-sub    { font-size: .9rem; color: var(--md-muted); margin-bottom: 1.5rem; line-height: 1.5; }
.md-achieve-points {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--md-gold-soft);
  border: 1px solid var(--md-border-gold);
  border-radius: var(--r-pill);
  padding: .5rem 1.5rem;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--md-gold);
  margin-bottom: 1.5rem;
  animation: pointsFloat .8s ease both;
}
.md-achieve-verse  { font-size: .8rem; color: var(--md-muted); font-style: italic; line-height: 1.5; }
.md-achieve-close  {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--md-surface);
  color: var(--md-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
}

/* Confetti partículas */
.md-confetti-piece {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 2px;
  animation: confettiFall 2.5s ease forwards;
  z-index: 901;
  pointer-events: none;
}
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0);   opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Puntos flotantes */
.md-points-float {
  position: fixed;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--md-gold);
  pointer-events: none;
  z-index: 902;
  text-shadow: 0 0 12px rgba(250,204,21,.7);
  animation: pointsFloatUp 1.5s ease forwards;
}
@keyframes pointsFloatUp {
  0%   { transform: translateY(0) scale(.8);  opacity: 1; }
  60%  { transform: translateY(-50px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-90px) scale(.9);  opacity: 0; }
}

/* ============================================================
   MINI TOAST (feedback rápido)
   ============================================================ */
.md-toast-container {
  position: fixed;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + .875rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 850;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
}
.md-toast {
  background: var(--md-bg-2);
  border: 1px solid var(--md-border);
  border-radius: var(--r-pill);
  padding: .55rem 1.25rem;
  font-size: .85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  max-width: calc(100vw - 2rem);
  overflow: hidden;
  text-overflow: ellipsis;
  animation: toastIn .3s cubic-bezier(.34,1.56,.64,1);
}
.md-toast.success { border-color: rgba(34,197,94,.4);   color: var(--md-green); }
.md-toast.error   { border-color: rgba(239,68,68,.4);   color: var(--md-red); }
.md-toast.info    { border-color: rgba(56,189,248,.4);  color: var(--md-blue); }
.md-toast.warning { border-color: rgba(250,204,21,.4);  color: var(--md-gold); }
.md-toast.fade-out { animation: toastOut .3s ease forwards; }

/* ============================================================
   AI SUGGESTION CARD
   ============================================================ */
.md-ai-card {
  background: linear-gradient(135deg, rgba(139,92,246,.1), rgba(56,189,248,.06));
  border: 1px solid rgba(139,92,246,.25);
  border-radius: var(--r-lg);
  padding: .875rem 1.1rem;
  display: flex;
  gap: .75rem;
  margin-bottom: 1.25rem;
  animation: mdFadeUp .85s ease .45s both;
}
.md-ai-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: .1rem; }
.md-ai-text { flex: 1; }
.md-ai-label { font-size: .65rem; color: var(--md-purple); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: .2rem; }
.md-ai-msg   { font-size: .85rem; color: var(--md-text); line-height: 1.45; }

/* ============================================================
   SKELETON LOADER
   ============================================================ */
.md-skeleton {
  background: linear-gradient(90deg,
    var(--md-surface) 25%,
    var(--md-surface-2) 50%,
    var(--md-surface) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   ANIMACIONES DE ENTRADA
   ============================================================ */
@keyframes mdFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0);    }
}
@keyframes achieveIn {
  from { transform: scale(.7) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0);     opacity: 1; }
}
@keyframes pointsFloat {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes toastIn {
  from { transform: translateY(8px) scale(.95); opacity: 0; }
  to   { transform: translateY(0)   scale(1);   opacity: 1; }
}
@keyframes toastOut {
  to { transform: translateY(6px) scale(.95); opacity: 0; }
}

/* Stagger delay para tarjetas */
.md-stagger-1 { animation-delay: .05s; }
.md-stagger-2 { animation-delay: .1s; }
.md-stagger-3 { animation-delay: .18s; }
.md-stagger-4 { animation-delay: .28s; }
.md-stagger-5 { animation-delay: .38s; }

/* ============================================================
   ALERTAS FLASH
   ============================================================ */
.md-flash {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.25rem;
  border-radius: var(--r-md);
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: 1rem;
  animation: mdFadeUp .4s ease;
}
.md-flash-success { background: var(--md-green-soft); border: 1px solid rgba(34,197,94,.3); color: var(--md-green); }
.md-flash-error   { background: var(--md-red-soft);   border: 1px solid rgba(239,68,68,.3);  color: var(--md-red); }

/* ============================================================
   TOPBAR ADMIN/LEADER OVERRIDES
   ============================================================ */
.topbar  { /* keep old topbar compatible */
  position: sticky; top: 0; z-index: 200;
  height: var(--topbar-h);
  background: rgba(7,17,31,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--md-border);
  display: flex; align-items: center;
  padding: 0 1.5rem; gap: .75rem;
}
.topbar-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  align-items: center; justify-content: center;
  font-size: 1.25rem;
  color: var(--md-muted);
}
.topbar-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: .95rem; flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.topbar-alert {
  display: flex; align-items: center; gap: .35rem;
  background: rgba(239,68,68,.15); color: var(--md-red);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: var(--r-pill); padding: .25rem .7rem;
  font-size: .78rem; font-weight: 700;
  position: relative;
}
.topbar-badge {
  background: var(--md-red); color: #fff;
  border-radius: var(--r-pill);
  padding: .05rem .4rem; font-size: .65rem; font-weight: 800;
}
.topbar-admin-tag {
  background: var(--md-gold-soft); color: var(--md-gold);
  border: 1px solid var(--md-border-gold);
  border-radius: var(--r-pill); padding: .25rem .75rem;
  font-size: .75rem; font-weight: 700;
}

/* Old sidebar compatibility */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100dvh;
  background: var(--md-depth);
  border-right: 1px solid var(--md-border);
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 300;
  display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar-brand {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--md-border);
  display: flex; align-items: center; gap: .75rem;
}
.brand-stars { color: var(--md-gold); letter-spacing: .05em; font-size: .9rem; }
.brand-name  { font-family: 'Cinzel', serif; font-weight: 800; font-size: .95rem; display: block; }
.brand-role  { font-size: .68rem; color: var(--md-muted); display: block; margin-top: .1rem; }
.sidebar-nav { flex: 1; padding: .75rem 0; }
.nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.25rem;
  font-size: .87rem; font-weight: 500;
  color: var(--md-muted);
  transition: color var(--t-fast), background var(--t-fast);
  position: relative; min-height: 44px;
}
.nav-item:hover  { color: var(--md-text); background: var(--md-surface); }
.nav-item.active { color: var(--md-gold); background: var(--md-gold-soft); }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; background: var(--md-gold); border-radius: 0 2px 2px 0;
}
.nav-icon { font-size: 1.1rem; width: 22px; text-align: center; }
.sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--md-border);
  display: flex; align-items: center; gap: .75rem;
}
.sidebar-user { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 0; }
.sidebar-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--md-gold), var(--md-gold-2));
  color: #07111f; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem; flex-shrink: 0; overflow: hidden;
}
.sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user-info { min-width: 0; }
.sidebar-user-name { font-size: .82rem; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: .68rem; color: var(--md-muted); display: block; }
.sidebar-logout {
  color: var(--md-muted); font-size: 1.1rem;
  padding: .4rem; border-radius: var(--r-sm);
  transition: color var(--t-fast); text-decoration: none;
}
.sidebar-logout:hover { color: var(--md-red); }
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(3px); z-index: 290;
}
.sidebar-overlay.active { display: block; }

.main-content { margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100dvh; }
.page-content  { flex: 1; padding: 1.5rem 2rem calc(var(--nav-h) + 1.5rem); }
.page-breadcrumb {
  display: flex; align-items: center; gap: .35rem;
  padding: .6rem 2rem; font-size: .78rem; color: var(--md-muted);
  border-bottom: 1px solid var(--md-border); background: var(--md-bg-3);
}
.page-breadcrumb a { color: var(--md-blue); }
.bc-current { color: var(--md-text); }

.alert-flash {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.25rem; font-size: .875rem; font-weight: 600; margin-bottom: 1rem;
}
.alert-flash--success { background: var(--md-green-soft); border: 1px solid rgba(34,197,94,.3); color: var(--md-green); }
.alert-flash--error   { background: var(--md-red-soft);   border: 1px solid rgba(239,68,68,.3);  color: var(--md-red); }
.toast-container {
  position: fixed; bottom: calc(var(--nav-h) + 1rem); right: 1rem;
  z-index: 850; display: flex; flex-direction: column; gap: .5rem;
}

/* Old mobile nav compatibility */
.mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(7,17,31,.96);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--md-border);
  z-index: 280; height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav-inner { display: flex; height: calc(var(--nav-h) - env(safe-area-inset-bottom, 0px)); }
.mobile-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; color: var(--md-muted-3); font-size: .62rem; font-weight: 600;
  text-decoration: none; transition: color var(--t-base); position: relative;
  padding: .5rem .25rem; min-height: var(--nav-h);
}
.mobile-nav-item.active { color: var(--md-gold); }
.mobile-nav-item.active .nav-icon-mobile::after {
  content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2px; background: var(--md-gold); border-radius: var(--r-pill);
}
.nav-icon-mobile { font-size: 1.3rem; position: relative; }
.mobile-notif-badge {
  position: absolute; top: -3px; right: -6px;
  background: var(--md-red); color: white;
  font-size: .55rem; font-weight: 800;
  width: .9rem; height: .9rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.admin-mobile-nav-badge {
  position: absolute; top: 2px; right: 6px;
  background: var(--md-red); color: #fff;
  font-size: .52rem; font-weight: 800;
  min-width: .9rem; height: .9rem; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; padding: 0 2px;
}

/* Admin: section titles */
.admin-sidebar .nav-section-title,
.nav-section-title {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--md-muted-3); padding: .75rem 1.25rem .2rem;
  font-family: 'Cinzel', serif;
}
.admin-badge {
  background: var(--md-red); color: #fff;
  font-size: .6rem; padding: 2px 6px; border-radius: 10px; font-weight: 700;
}
.leader-badge {
  background: linear-gradient(135deg, var(--md-purple), #6d28d9);
  color: #fff; font-size: .65rem; padding: 2px 8px;
  border-radius: 10px; font-weight: 700; letter-spacing: .03em;
}
.validation-badge {
  background: var(--md-gold); color: var(--md-bg);
  font-size: .6rem; padding: 2px 6px; border-radius: 8px; font-weight: 800;
}

/* Admin: table styles */
.table { color: var(--md-text); }
.table-card-mobile thead { background: rgba(255,255,255,.04); }
.table-card-mobile th,
.table-card-mobile td { border-color: var(--md-border) !important; }
.stat-mini {
  background: var(--md-surface); border-radius: var(--r-lg);
  padding: .75rem 1rem; display: flex; align-items: center; gap: .75rem;
  border: 1px solid var(--md-border);
}
.stat-mini-value { font-size: 1.35rem; font-weight: 700; font-family: 'Cinzel', serif; color: var(--md-gold); }
.stat-mini-label { font-size: .72rem; color: var(--md-muted); }

/* Form controls */
.form-control, .form-select {
  background: var(--md-surface) !important;
  border-color: var(--md-border) !important;
  color: var(--md-text) !important;
  border-radius: var(--r-md) !important;
  min-height: 44px;
}
.form-control::placeholder { color: var(--md-muted) !important; }
.form-control:focus, .form-select:focus {
  background: var(--md-surface-2) !important;
  border-color: rgba(56,189,248,.5) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.12) !important;
  color: var(--md-text) !important;
}
.form-label { color: var(--md-muted); font-size: .82rem; font-weight: 600; }
.form-text  { color: var(--md-muted-2) !important; }
.input-group-text {
  background: var(--md-surface) !important;
  border-color: var(--md-border) !important;
  color: var(--md-muted) !important;
}

/* Pagination */
.page-link {
  background: var(--md-surface) !important;
  border-color: var(--md-border) !important;
  color: var(--md-text) !important;
}
.page-item.active .page-link {
  background: var(--md-gold-soft) !important;
  border-color: var(--md-border-gold) !important;
  color: var(--md-gold) !important;
}

/* Modal */
.modal-content { background: var(--md-bg-2); border: 1px solid var(--md-border); border-radius: var(--r-xl) !important; }
.modal-header, .modal-footer { border-color: var(--md-border) !important; }
.btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }

/* Bootstrap overrides */
.badge { font-weight: 700; }
.rounded-4 { border-radius: var(--r-md) !important; }
.rounded-pill { border-radius: var(--r-pill) !important; }

/* ============================================================
   RESPONSIVE — BREAKPOINTS
   ============================================================ */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-260px); transition: transform .28s cubic-bezier(.4,0,.2,1); }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 32px rgba(0,0,0,.6); }
  .main-content { margin-left: 0; }
  .topbar { padding: .75rem 1rem; }
  .topbar-toggle { display: flex; }
  .page-content { padding: 1.25rem 1.25rem calc(var(--nav-h) + 1.25rem); }
  .mobile-nav { display: flex; }
  .md-page-content { padding: 1.25rem; padding-bottom: calc(var(--nav-h) + 1.25rem); }
}

/* ── Phablet (≤ 768px) ── */
@media (max-width: 768px) {
  .topbar-title { display: none; }
  .page-content { padding: 1rem .875rem calc(var(--nav-h) + 1rem); }
  .md-page-content { padding: 1rem .875rem calc(var(--nav-h) + 1rem); }
  .md-hero { padding: 1.25rem; }
  .md-hero-greeting { font-size: 1.25rem; }
  .md-hero-stats { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .md-stars-grid { gap: .4rem; }
  .md-star-item { padding: .65rem .35rem; }
  .md-star-name { font-size: .56rem; }
  .page-breadcrumb { display: none; }
  .table-card-mobile thead { display: none; }
  .table-card-mobile tr {
    display: block; margin-bottom: .5rem;
    border-radius: var(--r-md);
    background: var(--md-surface);
    border: 1px solid var(--md-border) !important;
    padding: .75rem 1rem;
  }
  .table-card-mobile td {
    display: flex; justify-content: space-between; align-items: center;
    padding: .25rem 0; border: none !important; font-size: .82rem;
  }
  .table-card-mobile td::before {
    content: attr(data-label);
    color: var(--md-muted); font-size: .7rem;
    text-transform: uppercase; letter-spacing: .06em;
    flex-shrink: 0; margin-right: .75rem;
  }
}

/* ── Teléfono (≤ 640px) ── */
@media (max-width: 640px) {
  :root { --nav-h: 62px; }
  .md-page-content,
  .page-content { padding: .875rem .75rem calc(var(--nav-h) + .875rem); }
  .md-hero-stats { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .md-hero-stat-value { font-size: 1rem; }
  .md-hero-stat-icon  { font-size: 1rem; }
  .md-stars-grid { grid-template-columns: repeat(5, 1fr); gap: .3rem; }
  .md-star-item  { padding: .55rem .25rem; border-radius: var(--r-sm); }
  .md-star-name  { font-size: .52rem; }
  .md-mission-card { padding: 1rem; }
  .md-code-value  { font-size: 1.1rem; }
  .md-mission-actions { flex-direction: column; }
  .md-mission-actions .md-btn { width: 100%; }
  .card-body, .p-4 { padding: .875rem !important; }
  .p-3 { padding: .65rem !important; }
  h1, .h1 { font-size: 1.4rem; }
  h2, .h2 { font-size: 1.2rem; }
}

/* ── Teléfono pequeño (≤ 480px) ── */
@media (max-width: 480px) {
  .md-stars-grid { grid-template-columns: repeat(5, 1fr); gap: .2rem; }
  .md-star-item  { padding: .5rem .15rem; }
  .md-star-icon  { font-size: 1.4rem !important; }
  .md-star-name  { display: none; }
  .md-hero-stats { grid-template-columns: repeat(3, 1fr); }
  .md-achievement-modal { padding: 2rem 1.25rem; }
}

/* ── 360px ── */
@media (max-width: 360px) {
  :root { --nav-h: 58px; }
  .md-hero-greeting { font-size: 1.1rem; }
  .md-code-value { font-size: 1rem; letter-spacing: .1em; }
  .mobile-nav-item { font-size: .55rem; }
}

/* ── Safe area iPhone ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .mobile-nav, .md-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  }
  .page-content, .md-page-content {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 1rem);
  }
}

/* ── Touch ── */
a, button, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Light mode overrides ── */
[data-theme="light"] .sidebar,
[data-theme="light"] .md-sidebar { background: #fff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .mobile-nav,
[data-theme="light"] .md-bottom-nav { background: rgba(255,255,255,.97); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .topbar { background: rgba(248,250,252,.92); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .nav-item { color: #475569; }
[data-theme="light"] .nav-item:hover { color: #0f172a; background: rgba(0,0,0,.05); }
[data-theme="light"] .md-card,
[data-theme="light"] .md-mission-card { border-color: rgba(0,0,0,.1); }
[data-theme="light"] .md-hero { border-color: rgba(37,99,235,.2); }
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
  background: #fff !important;
  border-color: rgba(0,0,0,.15) !important;
  color: #0f172a !important;
}

/* Utilities */
.hidden-mobile  { }
.show-mobile    { display: none; }
@media (max-width: 768px) {
  .hidden-mobile { display: none !important; }
  .show-mobile   { display: block !important; }
}
@media (min-width: 769px) {
  .hidden-desktop { display: none !important; }
}

/* ============================================================
   MEJORAS PREMIUM — Tanda 1 (seguras, no rompen estilos existentes)
   Agrega badge, form-control, focus ring, table, estados
   ============================================================ */

/* ── Form controls ── */
.form-control,
.form-select {
  background: rgba(255,255,255,.07);
  border: 1.5px solid var(--md-border);
  border-radius: .6rem;
  color: var(--md-text, #e2e8f0);
  padding: .55rem .85rem;
  font-size: .9rem;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--md-blue, #38bdf8);
  box-shadow: 0 0 0 3px rgba(56,189,248,.18);
}
.form-control::placeholder { color: var(--md-muted, #64748b); }
.form-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--md-muted, #94a3b8);
  letter-spacing: .4px;
  margin-bottom: .3rem;
  display: block;
}
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--md-red, #f87171) !important; }
.invalid-feedback { color: var(--md-red, #f87171); font-size: .75rem; margin-top: .2rem; }

/* ── Badge / pill labels ── */
.md-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .65rem;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3px;
}
.md-badge-gold    { background: rgba(250,204,21,.15); color: var(--md-gold, #facc15); border: 1px solid rgba(250,204,21,.3); }
.md-badge-blue    { background: rgba(56,189,248,.12); color: var(--md-blue, #38bdf8); border: 1px solid rgba(56,189,248,.25); }
.md-badge-green   { background: rgba(34,197,94,.12);  color: #4ade80; border: 1px solid rgba(34,197,94,.25); }
.md-badge-red     { background: rgba(248,113,113,.12); color: var(--md-red, #f87171); border: 1px solid rgba(248,113,113,.25); }
.md-badge-muted   { background: rgba(255,255,255,.07); color: var(--md-muted, #94a3b8); border: 1px solid var(--md-border); }

/* ── Button hierarchy ── */
.btn-primary-md {
  background: linear-gradient(135deg, var(--md-blue, #38bdf8), var(--md-blue-2, #2563eb));
  color: #fff;
  border: none;
  border-radius: .65rem;
  padding: .6rem 1.4rem;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  transition: opacity .18s, box-shadow .18s;
  box-shadow: 0 2px 12px rgba(56,189,248,.25);
}
.btn-primary-md:hover  { opacity: .9; box-shadow: 0 4px 20px rgba(56,189,248,.35); }
.btn-primary-md:active { opacity: .8; transform: translateY(1px); }
.btn-ghost-md {
  background: transparent;
  color: var(--md-muted, #94a3b8);
  border: 1.5px solid var(--md-border);
  border-radius: .65rem;
  padding: .55rem 1.25rem;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.btn-ghost-md:hover { border-color: var(--md-blue, #38bdf8); color: var(--md-text, #e2e8f0); }

/* ── Data tables (ejecutivo/líder) ── */
.md-data-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.md-data-table th {
  background: rgba(255,255,255,.04);
  color: var(--md-muted, #94a3b8);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: .65rem .9rem;
  border-bottom: 1.5px solid var(--md-border);
  text-align: left;
}
.md-data-table td {
  padding: .7rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--md-text, #e2e8f0);
  vertical-align: middle;
}
.md-data-table tr:hover td { background: rgba(255,255,255,.03); }

/* ── Estado de participante: chips rápidos ── */
.status-active   { color: #4ade80; }
.status-inactive { color: var(--md-red, #f87171); }
.status-pending  { color: var(--md-gold, #facc15); }

/* ── Flash / alert messages ── */
.md-flash         { border-radius: .6rem; padding: .7rem 1rem; font-size: .88rem; margin-bottom: .75rem; display: flex; align-items: flex-start; gap: .5rem; }
.md-flash-success { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25); color: #4ade80; }
.md-flash-error   { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); color: var(--md-red, #f87171); }
.md-flash-info    { background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.25); color: var(--md-blue, #38bdf8); }
.md-flash-warning { background: rgba(250,204,21,.1); border: 1px solid rgba(250,204,21,.25); color: var(--md-gold, #facc15); }

/* ── Skeleton loader ── */
@keyframes md-shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.md-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.05) 75%);
  background-size: 800px 100%;
  animation: md-shimmer 1.4s infinite linear;
  border-radius: .4rem;
}

/* ── Spacing utilities ── */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.text-muted { color: var(--md-muted, #94a3b8) !important; }
.text-gold   { color: var(--md-gold, #facc15) !important; }
.fw-bold     { font-weight: 700 !important; }

/* ============================================================
   VISUAL PREMIUM V3.1
   Role-aware polish: participant app, executive command center,
   leader operations. Safe overlay for existing screens.
   ============================================================ */

.md-body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.10), transparent 32rem),
    radial-gradient(circle at bottom right, rgba(250,204,21,.08), transparent 30rem),
    var(--md-bg);
}

.md-body h1,
.md-body h2,
.md-body h3,
.md-body .topbar-title,
.md-body .brand-name,
.md-body .md-hero-greeting {
  letter-spacing: 0;
}

.md-body .kq-verse {
  font-family: "Cinzel", Georgia, serif;
}

.md-role-executive #particleCanvas,
.md-role-executive .sacred-bg,
.md-role-leader #particleCanvas,
.md-role-leader .sacred-bg {
  opacity: .12;
}

.md-role-participant .page-content {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
}

.md-role-executive .page-content {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

.md-role-leader .page-content {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

.md-role-executive .sidebar,
.md-role-leader .sidebar {
  background:
    linear-gradient(180deg, rgba(5,13,26,.98), rgba(7,17,31,.98)),
    var(--md-depth);
  border-right-color: rgba(148,163,184,.16);
}

.md-role-participant .sidebar {
  background:
    linear-gradient(180deg, rgba(6,18,36,.98), rgba(5,13,26,.98)),
    var(--md-depth);
}

.md-role-executive .nav-icon,
.md-role-leader .nav-icon,
.md-role-participant .nav-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.07);
  font-size: .95rem;
}

.md-role-executive .nav-item,
.md-role-leader .nav-item,
.md-role-participant .nav-item {
  margin: .12rem .65rem;
  border-radius: 12px;
}

.md-role-executive .nav-item.active,
.md-role-leader .nav-item.active,
.md-role-participant .nav-item.active {
  background: rgba(250,204,21,.12);
  box-shadow: inset 0 0 0 1px rgba(250,204,21,.12);
}

.md-role-executive .topbar,
.md-role-leader .topbar,
.md-role-participant .topbar {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(7,17,31,.78);
}

.md-role-executive .inst-card,
.md-role-executive .assoc-glass,
.md-role-executive .dist-card,
.md-role-leader .md-card,
.md-role-participant .md-card,
.md-role-participant .md-mission-card,
.md-role-participant .md-ranking-card,
.md-role-participant .md-reward-card,
.md-role-participant .md-ai-card {
  border-radius: 18px !important;
  border-color: rgba(148,163,184,.16) !important;
  box-shadow: 0 18px 50px rgba(2,6,23,.34), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.md-role-executive .inst-card,
.md-role-executive .assoc-glass,
.md-role-executive .dist-card {
  background:
    linear-gradient(180deg, rgba(15,23,42,.94), rgba(2,6,23,.96)) !important;
}

.md-role-executive .inst-kpi,
.md-role-executive .assoc-kpi,
.md-role-executive .dist-kpi {
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.72)) !important;
  border-color: rgba(148,163,184,.14) !important;
}

.md-role-executive .inst-kpi:hover,
.md-role-executive .assoc-kpi:hover,
.md-role-executive .dist-kpi:hover {
  transform: translateY(-2px) !important;
}

.md-role-participant .md-hero {
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(37,99,235,.24), rgba(15,23,42,.96) 52%, rgba(250,204,21,.12)),
    var(--md-bg-2);
  box-shadow: 0 24px 70px rgba(2,6,23,.45), 0 0 0 1px rgba(255,255,255,.08);
}

.md-role-participant .md-hero-stat {
  border-radius: 16px;
  background: rgba(15,23,42,.52);
  border: 1px solid rgba(255,255,255,.08);
}

.md-app-dashboard {
  display: grid;
  gap: 1rem;
}

.md-app-quickbar {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: .75rem;
  margin: -.35rem 0 .45rem;
}

.md-app-action {
  min-height: 96px;
  padding: .95rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(15,23,42,.62);
  box-shadow: 0 12px 34px rgba(2,6,23,.22);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .2rem;
}

.md-app-action-primary {
  background:
    linear-gradient(135deg, rgba(56,189,248,.24), rgba(37,99,235,.18)),
    rgba(15,23,42,.72);
  border-color: rgba(56,189,248,.28);
}

.md-app-action-kicker {
  color: var(--md-muted);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.md-app-action strong {
  color: var(--md-text);
  font-size: .98rem;
  line-height: 1.2;
}

.md-app-action small {
  color: var(--md-muted);
  font-size: .76rem;
  line-height: 1.35;
}

.mobile-nav {
  box-shadow: 0 -16px 44px rgba(2,6,23,.42);
}

.mobile-nav-item {
  border-radius: 16px;
  margin: .35rem .15rem;
}

.mobile-nav-item.active {
  background: rgba(250,204,21,.10);
}

@media (max-width: 768px) {
  .md-app-quickbar {
    grid-template-columns: 1fr;
  }

  .md-app-action {
    min-height: 82px;
  }

  .md-role-executive .page-content,
  .md-role-leader .page-content,
  .md-role-participant .page-content {
    max-width: none;
  }
}

/* Hotfix Hostinger: asegurar que el contenido quede por encima del canvas/fondos decorativos. */
.main-content,
.page-content,
.topbar {
  position: relative;
  z-index: 1;
}
.sidebar,
.admin-sidebar,
.mobile-nav {
  position: fixed;
  z-index: 300;
}