/* ============================================================
   APRUEBAYA — Design Tokens + Bootstrap Overrides
   Paleta extraída de Lovable src/index.css
   ============================================================ */

/* ── Fuentes ── */
:root {
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --radius-sm:    0.5rem;
  --radius-md:    0.75rem;
  --radius-lg:    1rem;
  --transition:   0.2s ease;
}

/* ── Modo OSCURO (default) ── */
[data-bs-theme="dark"],
:root {
  /* Backgrounds */
  --ay-bg:         hsl(222, 40%, 10%);
  --ay-surface:    hsl(222, 38%, 13%);
  --ay-surface-2:  hsl(222, 35%, 17%);
  --ay-border:     hsl(217, 33%, 17%);
  --ay-border-subtle: hsla(217, 33%, 60%, 0.10);

  /* Texto */
  --ay-text:       hsl(210, 40%, 98%);
  --ay-text-muted: hsl(215, 20%, 65%);

  /* Colores de marca */
  --ay-primary:    hsl(217, 91%, 60%);   /* azure — estudiante */
  --ay-primary-10: hsla(217, 91%, 60%, 0.10);
  --ay-primary-20: hsla(217, 91%, 60%, 0.20);
  --ay-primary-30: hsla(217, 91%, 60%, 0.30);

  --ay-secondary:  hsl(48, 96%, 53%);    /* gold — tutor */
  --ay-secondary-10: hsla(48, 96%, 53%, 0.10);
  --ay-secondary-20: hsla(48, 96%, 53%, 0.20);

  --ay-accent:     hsl(262, 83%, 62%);   /* violet — highlighted links / CTAs */

  --ay-danger:     hsl(0, 84%, 60%);
  --ay-success:    hsl(152, 69%, 42%);

  /* Bootstrap overrides */
  --bs-body-bg:           var(--ay-bg);
  --bs-body-color:        var(--ay-text);
  --bs-card-bg:           var(--ay-surface);
  --bs-border-color:      var(--ay-border);
  --bs-primary:           var(--ay-primary);
  --bs-primary-rgb:       59, 130, 246;
  --bs-secondary:         var(--ay-secondary);
  --bs-secondary-rgb:     245, 158, 11;
}

/* ── Modo CLARO ── */
[data-bs-theme="light"] {
  --ay-bg:         hsl(220, 25%, 92%);
  --ay-surface:    hsl(220, 20%, 97%);
  --ay-surface-2:  hsl(220, 18%, 88%);
  --ay-border:     hsl(220, 15%, 88%);
  --ay-border-subtle: hsla(220, 15%, 40%, 0.15);

  --ay-text:       hsl(222, 47%, 10%);
  --ay-text-muted: hsl(215, 15%, 45%);

  --ay-primary:    hsl(217, 80%, 50%);
  --ay-primary-10: hsla(217, 80%, 50%, 0.10);
  --ay-primary-20: hsla(217, 80%, 50%, 0.20);
  --ay-primary-30: hsla(217, 80%, 50%, 0.30);

  --ay-secondary:  hsl(40, 90%, 42%);
  --ay-secondary-10: hsla(40, 90%, 42%, 0.10);
  --ay-secondary-20: hsla(40, 90%, 42%, 0.20);

  --ay-accent:     hsl(262, 70%, 46%);

  --bs-body-bg:      var(--ay-bg);
  --bs-body-color:   var(--ay-text);
  --bs-card-bg:      var(--ay-surface);
  --bs-border-color: var(--ay-border);
}

/* ── Base tipográfica ── */
body {
  font-family: var(--font-body);
  background-color: var(--ay-bg);
  color: var(--ay-text);
  transition: background-color var(--transition), color var(--transition);
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4 {
  font-family: var(--font-display);
  font-weight: 700;
}

/* ── Cards ── */
.card {
  background-color: var(--ay-surface);
  border: 1px solid var(--ay-border);
  border-radius: var(--radius-md);
}

.card-glass {
  background-color: hsla(222, 47%, 8%, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--ay-border);
  border-radius: var(--radius-md);
}
[data-bs-theme="light"] .card-glass {
  background-color: hsla(0, 0%, 100%, 0.80);
}

/* ── Botones de marca ── */
.btn-azure {
  background-color: var(--ay-primary);
  color: #fff;
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
}
.btn-azure:hover {
  background-color: hsl(217, 91%, 52%);
  color: #fff;
}

.btn-gold {
  background-color: var(--ay-secondary);
  color: hsl(222, 47%, 6%);
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
}
.btn-gold:hover {
  background-color: hsl(48, 96%, 45%);
  color: hsl(222, 47%, 6%);
}

.btn-outline-azure {
  border: 1px solid var(--ay-primary);
  color: var(--ay-primary);
  background: transparent;
}
.btn-outline-azure:hover {
  background-color: var(--ay-primary-10);
  color: var(--ay-primary);
}

/* ── Sidebar genérico ── */
.ay-sidebar {
  width: 260px;
  min-height: 100vh;
  background-color: var(--ay-surface);
  border-right: 1px solid var(--ay-border);
  display: flex;
  flex-direction: column;
  transition: width var(--transition);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
}
.ay-sidebar.collapsed { width: 68px; }
.ay-sidebar .brand-text,
.ay-sidebar .nav-label {
  transition: opacity var(--transition), width var(--transition);
  white-space: nowrap;
  overflow: hidden;
}
.ay-sidebar.collapsed .brand-text,
.ay-sidebar.collapsed .nav-label { opacity: 0; width: 0; }

.ay-sidebar .nav-link {
  color: var(--ay-text-muted);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.ay-sidebar .nav-link:hover {
  background-color: var(--ay-surface-2);
  color: var(--ay-text);
}
.ay-sidebar .nav-link.active {
  background-color: var(--ay-primary-10);
  color: var(--ay-primary);
  border-left: 3px solid var(--ay-primary);
}

/* Sidebar tutor — active en gold */
.ay-sidebar.sidebar-tutor .nav-link.active {
  background-color: var(--ay-secondary-10);
  color: var(--ay-secondary);
  border-left: 3px solid var(--ay-secondary);
}

/* ── Main content offset cuando sidebar visible ── */
.ay-main {
  margin-left: 260px;
  transition: margin-left var(--transition);
}
.ay-sidebar.collapsed ~ .ay-main,
.sidebar-collapsed .ay-main { margin-left: 68px; }

@media (max-width: 991.98px) {
  /* Off-canvas panel below the 56px topbar, so the hamburger that opened it
     is never covered and can also close it */
  .ay-sidebar { transform: translateX(-100%); top: 56px; min-height: 0; height: calc(100vh - 56px); }
  .ay-sidebar.open { transform: translateX(0); }
  .ay-main { margin-left: 0 !important; }
}

/* ── Topbar de dashboards ── */
.ay-topbar {
  height: 56px;
  background-color: var(--ay-surface);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ay-border);
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  gap: 1rem;
}
.ay-topbar h6 {
  color: var(--ay-text);
  font-size: 0.95rem;
  font-family: var(--font-display);
  font-weight: 600;
}

/* ── Badge de estado ── */
.badge-azure {
  background-color: var(--ay-primary-20);
  color: var(--ay-primary);
  font-weight: 600;
}
.badge-gold {
  background-color: var(--ay-secondary-20);
  color: var(--ay-secondary);
  font-weight: 600;
}

/* ── Utilidades ── */
.text-azure   { color: var(--ay-primary) !important; }
.text-gold    { color: var(--ay-secondary) !important; }
.text-muted-ay { color: var(--ay-text-muted) !important; }
.bg-surface   { background-color: var(--ay-surface) !important; }
.bg-surface-2 { background-color: var(--ay-surface-2) !important; }
.border-ay    { border-color: var(--ay-border) !important; }

/* ── Retro grid (landing hero) ── */
.retro-grid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 200px;
  pointer-events: none;
  z-index: 0;
}
.retro-grid-inner {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  transform: rotateX(35deg);
  background-image:
    linear-gradient(to right, hsla(217, 91%, 60%, 0.12) 1px, transparent 0),
    linear-gradient(to bottom, hsla(217, 91%, 60%, 0.12) 1px, transparent 0);
  background-size: 60px 60px;
  animation: retro-grid-scroll 20s linear infinite;
}
@keyframes retro-grid-scroll {
  0%   { transform: rotateX(35deg) translateY(0); }
  100% { transform: rotateX(35deg) translateY(60px); }
}
.retro-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ay-bg) 10%, transparent 60%);
}

/* Collapsible session/simulator card shell (shared by tutor history,
   student history and simulators list) */
.accordion-toggle .chevron-icon {
  display:inline-block; flex-shrink:0; transition:transform 0.3s ease;
}
.accordion-toggle.collapsed .chevron-icon { transform:rotate(-90deg); }
.session-toggle {
  width:100%; display:flex; align-items:center; gap:8px;
  background:transparent; border:none; padding:0;
  color:var(--ay-text); text-align:left; cursor:pointer;
}
.session-summary { font-size:0.8rem; color:var(--ay-text-muted); }