/* =====================================================
   VARIABLES — Tema corporate (valores por defecto)
   Los ficheros theme-*.css solo sobreescriben este bloque.
   Para crear un tema nuevo, copiar un theme-*.css y ajustar
   los valores de las variables.
===================================================== */
:root {
  /* Fondo y superficies */
  --bg:           #f5f7fb;
  --card:         #ffffff;
  --text:         #101828;
  --muted:        #667085;
  --border:       #e5e7eb;
  --shadow:       0 12px 30px rgba(16,24,40,.08);

  /* Color de marca */
  --primary:        #4f46e5;
  --primary-soft:   #eef2ff;
  --primary-dark:   #3730a3;
  --accent:         #06b6d4;

  /* Colores semánticos */
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;

  /* Gradientes principales */
  --hero-gradient:          linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
  --login-gradient:         linear-gradient(160deg, #4f46e5 0%, #06b6d4 100%);
  --profile-gradient:       linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  --cta-gradient:           linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  --cta-gradient-hover:     linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
  --completion-gradient:    linear-gradient(90deg,  #16a34a, #15803d);

  /* Barras de progreso */
  --progress-bg:            #edf2f7;
  --progress-gradient:      linear-gradient(90deg, #22c55e, #10b981);
  --progress-adv-gradient:  linear-gradient(90deg, #818cf8, #4f46e5);

  /* Escenario interactivo */
  --scenario-hover-bg:      #e0e7ff;
  --scenario-hover-border:  #6366f1;
  --scenario-hover-text:    #3730a3;
  --scenario-correct-bg:    #d1fae5;
  --scenario-correct-border:#10b981;
  --scenario-correct-text:  #065f46;
  --scenario-wrong-bg:      #fee2e2;
  --scenario-wrong-border:  #ef4444;
  --scenario-wrong-text:    #7f1d1d;

  /* Panel de administración */
  --detail-bg:   #f5f8ff;
  --table-head:  #f8fafc;

  /* Navegación de examen */
  --exam-unlocked-border: #198754;
  --exam-unlocked-bg:     #f0fdf4;
  --exam-active-border:   var(--primary);
  --exam-active-bg:       var(--primary-soft);

  /* Milestone */
  --milestone-earned-border: #198754;
  --milestone-earned-bg:     #f0fdf4;

  /* Logo de texto */
  --logo-gradient: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
}


/* =====================================================
   BASE
===================================================== */
*, *::before, *::after { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { text-decoration: none; color: inherit }
img { max-width: 100%; display: block }

.container-xl { max-width: 1280px }
.text-muted    { color: var(--muted) !important }


/* =====================================================
   LOGOS
===================================================== */
img.logo-xs {
  max-height: 35px;
  margin-right: 10px;
}

/* Logo de texto (tipo text en site.json)
   El degradado se controla con --logo-gradient, definido en cada tema.
   Para cambiar el logo de texto de un tema basta añadir --logo-gradient
   en el bloque :root del fichero theme-*.css correspondiente.
*/
.logo-text {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  background: var(--logo-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-text-nav    { font-size: 1.5rem; margin-right: .25rem; }
.logo-text-footer { font-size: 1.1rem; opacity: .85; }
/* Tagline adyacente al logo: mismo tamaño y compensación de desplazamiento */
.logo-text-nav + span {
  font-size: 1.1rem;
  margin-top: 2px;
}
.logo-text .logo-icon {
  width: 1.1em;
  height: 1.1em;
  stroke-width: 2.2;
  flex-shrink: 0;
}
.logo-top img {
  max-height: 50px;
}
.logo-footer img {
  max-height: 90px;
  opacity: 0.9;
  display: inline;
}


/* =====================================================
   CARDS Y UTILIDADES
===================================================== */
.card-soft {
  background: var(--card);
  box-shadow: var(--shadow);
  border: 1px solid rgba(229,231,235,.9);
}
.card-soft:hover {
  transform: translateY(-2px);
  transition: 0.2s;
}
.bg-soft          { background: linear-gradient(180deg, #fff 0%, #fbfcff 100%) }
.border-soft      { border: 1px solid var(--border) }
.bg-primary-soft  { background: var(--primary-soft) }
.rounded-24       { border-radius: 24px }
.rounded-20       { border-radius: 20px }
.rounded-16       { border-radius: 16px }
.rounded-12       { border-radius: 12px }

.badge-course {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: .875rem;
  color: #0f172a;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  color: var(--primary);
  font-weight: 700;
}

.icon {
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
}
.icon-lg {
  width: 36px;
  height: 36px;
}


/* =====================================================
   HERO BANNER (student.php, admin.php)
===================================================== */
.hero-banner {
  background: var(--hero-gradient);
  color: #fff;
  border-radius: 28px;
  overflow: hidden;
}
.hero-banner .badge {
  border: 1px solid rgba(255,255,255,.15);
}


/* =====================================================
   PORTADA (home.php)
===================================================== */
.hero-home {
  background: var(--hero-gradient);
  color: white;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.10);
}
.cta-button {
  background: var(--cta-gradient);
  color: white;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 20px rgba(37,99,235,.25);
  transition: all 0.2s ease;
  text-decoration: none;
}
.cta-button:hover {
  background: var(--cta-gradient-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37,99,235,.35);
  color: white;
}


/* =====================================================
   LOGIN
===================================================== */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  max-width: 1100px;
  width: 100%;
  overflow: hidden;
  border-radius: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.login-side {
  background: var(--login-gradient);
  color: #fff;
  padding: 36px;
}
.login-side ul { padding-left: 18px }
.login-side li  { margin-bottom: 10px }

.footer-note {
  color: #94a3b8;
  font-size: .85rem;
  padding: 20px 0;
  text-align: center;
}


/* =====================================================
   DASHBOARD DEL ALUMNO (student_home.php)
===================================================== */
.profile-box {
  border-radius: 18px;
  padding: 24px;
  background: var(--profile-gradient);
  box-shadow: 0 8px 30px rgba(37,99,235,.25);
}

.level-card {
  border-radius: 16px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  cursor: pointer;
  border: 2px solid transparent;
}
.level-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.level-card.completed {
  border-color: #16a34a;
  background: linear-gradient(160deg, #f0fdf4 0%, #fff 60%) !important;
  box-shadow: 0 4px 20px rgba(22,163,74,.15);
}

.completion-banner {
  background: var(--completion-gradient);
  border-radius: 10px;
  color: #fff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.completion-banner .seal {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-box {
  background: var(--card);
  border-radius: 12px;
  padding: 14px 18px;
  text-align: center;
  min-width: 100px;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transition: 0.2s;
}
.stat-box:hover { transform: translateY(-2px) }

.text-purple        { color: #7c3aed }
.bg-purple-subtle   { background-color: #ede9fe; }
.btn-purple         { background-color: #7c3aed; border-color: #7c3aed; color: #fff; }
.btn-purple:hover   { background-color: #6d28d9; border-color: #6d28d9; color: #fff; }
.btn-purple:focus   { box-shadow: 0 0 0 .25rem rgba(124,58,237,.35); }
.btn-outline-purple { color: #7c3aed; border-color: #7c3aed; }
.btn-outline-purple:hover { background-color: #7c3aed; border-color: #7c3aed; color: #fff; }


/* =====================================================
   MOTOR ACADÉMICO (student.php)
===================================================== */
.sidebar-sticky { position: sticky; top: 88px }

.unit-item { cursor: pointer; transition: .2s ease }
.unit-item:hover { transform: translateY(-1px) }
.unit-item.active {
  background: var(--primary-soft);
  border-color: #c7d2fe;
}

.exam-nav-item { border: 2px dashed var(--border) }
.exam-nav-item.unlocked {
  border-color: var(--exam-unlocked-border);
  background: var(--exam-unlocked-bg);
}
.exam-nav-item.active {
  border-color: var(--exam-active-border);
  background: var(--exam-active-bg);
}

.milestone-card { border-left: 4px solid var(--border) }
.milestone-card.earned {
  border-left-color: var(--milestone-earned-border);
  background: var(--milestone-earned-bg);
}

.resource-item {
  transition: all 0.2s ease;
  cursor: pointer;
  border-color: var(--border);
}
.resource-item:hover {
  background-color: #f3f6fb;
  border-color: #dbeafe;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.resource-item svg { width: 20px; height: 20px; flex-shrink: 0 }

/* Escenario interactivo */
.scenario-card { border: 1px solid var(--border) }
.scenario-option {
  border-radius: 10px !important;
  font-size: .9rem;
  transition: all .15s ease;
}
.scenario-option:hover:not(:disabled) {
  background: var(--scenario-hover-bg);
  border-color: var(--scenario-hover-border);
  color: var(--scenario-hover-text);
  transform: translateX(3px);
}
.scenario-option.selected-correct {
  background: var(--scenario-correct-bg) !important;
  border-color: var(--scenario-correct-border) !important;
  color: var(--scenario-correct-text) !important;
}
.scenario-option.selected-wrong {
  background: var(--scenario-wrong-bg) !important;
  border-color: var(--scenario-wrong-border) !important;
  color: var(--scenario-wrong-text) !important;
}


/* =====================================================
   PROGRESS BARS
===================================================== */
.progress {
  height: 10px;
  background: var(--progress-bg);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar {
  background: var(--progress-gradient);
  height: 100%;
  border-radius: 999px;
}

/* Barras mini (admin) */
.progress-mini {
  height: 6px;
  border-radius: 99px;
  background: var(--progress-bg);
  overflow: hidden;
  min-width: 80px;
}
.progress-mini-bar {
  height: 100%;
  border-radius: 99px;
  background: var(--progress-gradient);
}
.progress-mini-bar.adv {
  background: var(--progress-adv-gradient);
}


/* =====================================================
   PANEL DE ADMINISTRACIÓN (admin.php)
===================================================== */
.stat-card {
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 16px;
  transition: transform .15s;
}
.stat-card:hover { transform: translateY(-2px) }

.question-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 16px;
}

.toggle-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.toggle-btn svg { transition: transform .2s; width: 14px; height: 14px }
[aria-expanded="true"] .toggle-btn svg { transform: rotate(180deg) }

.detail-cell { background: var(--detail-bg) }

.unit-chip {
  font-size: .72rem;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
  margin: 2px;
  font-weight: 500;
}

.table > :not(caption) > * > * { padding: .55rem .75rem }
.table-light th {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
  background: var(--table-head);
}


/* =====================================================
   TOASTS Y NOTIFICACIONES
===================================================== */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.achievement-toast {
  min-width: 280px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}


/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 991px) {
  .sidebar-sticky { position: static }
}