/*
 * ILÉ ÁJÉ — sistema visual definitivo
 * La interfaz usa una sola base bosque/marfil/oro. Los colores semánticos
 * quedan reservados para estados, avisos y progreso.
 */
:root {
  --ia-forest-950: #040806;
  --ia-forest-900: #07100a;
  --ia-forest-850: #0a1510;
  --ia-forest-800: #0d1b14;
  --ia-ivory: #f4eddd;
  --ia-ivory-muted: rgba(244, 237, 221, .68);
  --ia-gold: #c4a35f;
  --ia-gold-bright: #dfc47f;
  --ia-gold-soft: rgba(196, 163, 95, .12);
  --ia-line: rgba(196, 163, 95, .22);
  --ia-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  --ia-radius-sm: 10px;
  --ia-radius-md: 14px;
  --ia-radius-lg: 18px;

  --bg-app: var(--ia-forest-950);
  --bg-card: var(--ia-forest-850);
  --bg-banner: var(--ia-forest-800);
  --bosque: var(--ia-forest-900);
  --bosque-2: var(--ia-forest-950);
  --bosque-3: #020503;
  --forest: var(--ia-forest-900);
  --forest-2: var(--ia-forest-800);
  --papel: var(--ia-forest-950);
  --papel-2: var(--ia-forest-850);
  --marfil: var(--ia-ivory);
  --marfil-suave: var(--ia-ivory-muted);
  --marfil-tenue: rgba(244, 237, 221, .45);
  --tinta: var(--ia-ivory);
  --tinta-suave: var(--ia-ivory-muted);
  --text-main: var(--ia-ivory);
  --text-muted: var(--ia-ivory-muted);
  --gold: var(--ia-gold);
  --gold-light: var(--ia-gold-bright);
  --oro: var(--ia-gold);
  --oro-claro: var(--ia-gold-bright);
  --oro-tenue: var(--ia-line);
  --filo: var(--ia-line);
  --filo-oscuro: var(--ia-line);
  --color-bg-ivory: var(--ia-forest-950);
  --color-bg-card: var(--ia-forest-850);
  --color-primary-emerald: var(--ia-forest-800);
  --color-accent-gold: var(--ia-gold);
  --color-accent-gold-light: var(--ia-gold-bright);
  --color-text-dark: var(--ia-ivory);
  --color-text-muted: var(--ia-ivory-muted);
  --line: var(--ia-line);
}

html { color-scheme: dark; }

body,
#root,
.dashboard-layout,
.main-content,
.admin-cuerpo,
.admin-cuerpo > main {
  background: var(--ia-forest-950) !important;
  color: var(--ia-ivory) !important;
}

/* Menú único para usuario, administrador y maestro */
.sidebar,
.ile-sidebar,
.admin {
  width: 292px !important;
  background:
    radial-gradient(110% 44% at 50% -8%, rgba(196, 163, 95, .15), transparent 62%),
    linear-gradient(180deg, var(--ia-forest-800), var(--ia-forest-950)) !important;
  border-right: 1px solid var(--ia-line) !important;
  box-shadow: 18px 0 42px rgba(0, 0, 0, .2);
}

.sidebar .brand,
.ile-sidebar .marca,
.admin .admin-head {
  border-color: var(--ia-line) !important;
}

.nav-label,
.ile-sidebar .nav-sec,
.admin .nav-sec {
  color: rgba(244, 237, 221, .42) !important;
  letter-spacing: .18em !important;
  font-size: 10px !important;
}

.nav-item,
.ile-sidebar .item,
.admin .item {
  min-height: 46px;
  color: var(--ia-ivory-muted) !important;
  border: 1px solid transparent !important;
  border-radius: var(--ia-radius-sm) !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  line-height: 1.25;
}

.nav-item:hover,
.ile-sidebar .item:hover,
.admin .item:hover {
  color: var(--ia-ivory) !important;
  background: rgba(244, 237, 221, .055) !important;
  border-color: rgba(244, 237, 221, .07) !important;
  transform: translateX(2px);
}

.nav-item.active,
.ile-sidebar .item.on,
.admin .item.on {
  color: var(--ia-gold-bright) !important;
  background: linear-gradient(90deg, rgba(196, 163, 95, .17), rgba(196, 163, 95, .035)) !important;
  border-color: rgba(196, 163, 95, .2) !important;
  box-shadow: inset 3px 0 0 var(--ia-gold), 0 8px 22px rgba(0, 0, 0, .12) !important;
  transform: none !important;
}

.nav-item.active::before,
.ile-sidebar .item.on::before,
.admin .item.on::before {
  display: none !important;
}

.nav-item svg,
.ile-sidebar .item svg,
.admin .item svg {
  color: currentColor;
  opacity: .86 !important;
}

.main-content { margin-left: 292px !important; }

/* Superficies y jerarquía */
.card,
.sidebar-card,
.panel,
.modal-content,
.admin-academic-wrapper > section,
.admin-appointments-wrapper > section,
.admin-history-wrapper > section {
  background: linear-gradient(145deg, rgba(13, 27, 20, .96), rgba(7, 16, 10, .98)) !important;
  color: var(--ia-ivory) !important;
  border: 1px solid var(--ia-line) !important;
  border-radius: var(--ia-radius-lg) !important;
  box-shadow: var(--ia-shadow) !important;
}

h1, h2, h3, h4, h5, h6 { color: var(--ia-ivory) !important; }
p, li, td, th, label, small { border-color: var(--ia-line); }
.text-muted { color: var(--ia-ivory-muted) !important; }

/* Controles consistentes */
.btn-primary,
.btn-gold,
.btn-oro {
  background: var(--ia-gold) !important;
  color: #09100b !important;
  border: 1px solid var(--ia-gold) !important;
  border-radius: var(--ia-radius-sm) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-gold:hover,
.btn-oro:hover {
  background: var(--ia-gold-bright) !important;
  border-color: var(--ia-gold-bright) !important;
  transform: translateY(-1px);
}

.btn-outline,
.tab-btn {
  background: transparent !important;
  color: var(--ia-gold-bright) !important;
  border: 1px solid var(--ia-line) !important;
  border-radius: var(--ia-radius-sm) !important;
}

input, select, textarea,
.input-field, .inp, .pago-inp input {
  background: #fbf8f0 !important;
  color: #152019 !important;
  -webkit-text-fill-color: #152019 !important;
  border: 1px solid #d8cfba !important;
  border-radius: var(--ia-radius-sm) !important;
  box-shadow: none !important;
}

input:focus, select:focus, textarea:focus,
.input-field:focus, .inp:focus {
  outline: none !important;
  border-color: var(--ia-gold) !important;
  box-shadow: 0 0 0 3px rgba(196, 163, 95, .18) !important;
}

table { color: var(--ia-ivory); }
thead, th { background: rgba(196, 163, 95, .09) !important; }
td, th { border-color: var(--ia-line) !important; }

/* La página pública comparte exactamente la misma identidad */
.navbar {
  background: rgba(4, 8, 6, .9) !important;
  border-bottom-color: var(--ia-line) !important;
}

.btn-nav,
.btn-secondary { border-radius: var(--ia-radius-sm) !important; }

/* Colores vivos sólo para significado */
.badge-success { color: #7ed6a7 !important; background: rgba(61, 154, 106, .14) !important; }
.badge-warning { color: #edc77d !important; background: rgba(185, 126, 44, .15) !important; }
.badge-error, .btn-danger { color: #ef9a88 !important; background: rgba(176, 58, 46, .13) !important; }

:focus-visible {
  outline: 2px solid var(--ia-gold-bright) !important;
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .main-content { margin-left: 0 !important; }
}

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