/* =====================================================================
   BagStudy — capa visual para la plataforma (admin, docente, estudiante)
   Se carga en app.html encima del build. Solo cambia apariencia
   (colores, sombras, tipografía, animaciones); no altera la lógica.
   Los selectores usan #root para ganar a las utilidades de Tailwind.
   ===================================================================== */

:root {
  --bs-violet: #7c3aed;
  --bs-pink: #db2777;
  --bs-cyan: #0891b2;
  --bs-ink: #15131d;
  --bs-iris: linear-gradient(120deg, #7c3aed 0%, #c026d3 50%, #db2777 100%);
  --bs-line: rgba(124, 58, 237, .10);
  --bs-shadow: 0 1px 2px rgba(21,19,29,.04), 0 14px 34px -20px rgba(76,29,149,.28);
  --bs-shadow-hover: 0 2px 6px rgba(21,19,29,.05), 0 28px 50px -24px rgba(124,58,237,.45);
  --bs-ease: cubic-bezier(.2,.8,.2,1);
}

/* ---------- Fondo y tipografía ---------- */
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(900px 600px at 100% -10%, rgba(219,39,119,.07), transparent 60%),
    radial-gradient(800px 600px at -10% 10%, rgba(124,58,237,.08), transparent 60%),
    radial-gradient(700px 500px at 60% 110%, rgba(8,145,178,.06), transparent 60%),
    #f6f5fb !important;
  background-attachment: fixed !important;
}
::selection { background: rgba(124,58,237,.18); }
#root h1, #root h2,
#root .text-2xl.font-bold, #root .text-3xl.font-bold, #root .text-4xl {
  font-family: "Bricolage Grotesque", "Inter", sans-serif;
  letter-spacing: -0.02em;
}
#root h1.text-2xl, #root h1.text-3xl { font-weight: 800; }

/* Fondos grises planos de las vistas → transparentes para dejar ver el degradado */
#root .flex-1.ml-64,
#root .min-h-screen.bg-gray-50,
#root .h-screen.bg-gray-50 { background: transparent !important; }

/* ---------- Barra lateral ---------- */
#root .w-64.h-screen.fixed {
  background: rgba(255,255,255,.93) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  border-right-color: var(--bs-line) !important;
  box-shadow: 10px 0 40px -30px rgba(76,29,149,.35);
}
#root .w-64.h-screen.fixed .space-y-1 > button {
  position: relative;
  transition: transform .25s var(--bs-ease), background .25s, color .25s, box-shadow .25s !important;
}
#root .w-64.h-screen.fixed .space-y-1 > button:not(.shadow-sm):hover {
  transform: translateX(4px);
  background: rgba(124,58,237,.06) !important;
  color: var(--bs-violet) !important;
}
#root .w-64.h-screen.fixed .space-y-1 > button:not(.shadow-sm):hover svg { color: var(--bs-violet) !important; }
/* Opción activa */
#root .w-64.h-screen.fixed .space-y-1 > button.shadow-sm {
  background: var(--bs-iris) !important;
  background-size: 200% 100% !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px -12px rgba(192,38,211,.75) !important;
  animation: bs-flow 8s linear infinite;
}
#root .w-64.h-screen.fixed .space-y-1 > button.shadow-sm svg { color: #fff !important; }
#root .w-64.h-screen.fixed .space-y-1 > button.shadow-sm::before {
  content: ""; position: absolute; left: -16px; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--bs-iris);
}
#root .w-64.h-screen.fixed .space-y-1 > button:focus-visible { outline: 2px solid var(--bs-violet); outline-offset: 2px; }

/* ---------- Encabezados fijos (barra superior) ---------- */
#root .sticky.top-0 {
  background: rgba(255,255,255,.78) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom-color: var(--bs-line) !important;
}

/* ---------- Tarjetas ---------- */
/* Solo contenedores (div/section/article): los campos de texto también usan bg-white rounded-xl border */
#root div.bg-white.rounded-2xl,
#root div.bg-white.rounded-xl.border,
#root div.bg-white.rounded-3xl,
#root section.bg-white.rounded-2xl,
#root article.bg-white.rounded-2xl {
  border-color: var(--bs-line) !important;
  box-shadow: var(--bs-shadow);
  transition: transform .35s var(--bs-ease), box-shadow .35s var(--bs-ease), border-color .3s !important;
}
/* Tarjetas clicables (cursos, accesos): se elevan y brillan */
#root div.bg-white.rounded-2xl.group:hover,
#root div.bg-white.rounded-2xl.cursor-pointer:hover,
#root div.bg-white.rounded-xl.cursor-pointer:hover,
#root div.bg-white.rounded-3xl.group:hover {
  transform: translateY(-5px);
  box-shadow: var(--bs-shadow-hover);
  border-color: rgba(192,38,211,.28) !important;
}
/* Imágenes de portada: zoom suave */
#root img.object-cover { transition: transform .7s var(--bs-ease), filter .4s; }
#root .group:hover img.object-cover { transform: scale(1.06); filter: saturate(1.1); }

/* Tarjetas de estadísticas del dashboard (icono + número) */
#root .bg-white.rounded-2xl .text-3xl.font-bold:not(.text-white),
#root .bg-white.rounded-2xl .text-2xl.font-bold:not(h1):not(h2):not(.text-white) {
  background: linear-gradient(120deg, #15131d 30%, #7c3aed);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Botones principales ---------- */
#root button.bg-fuchsia-600, #root button.bg-fuchsia-500, #root a.bg-fuchsia-600,
#root button.bg-purple-600, #root button.bg-indigo-600, #root button.bg-blue-600, #root button.bg-violet-600 {
  background: var(--bs-iris) !important;
  background-size: 200% 100% !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px -12px rgba(192,38,211,.8);
  transition: transform .2s var(--bs-ease), box-shadow .25s, background-position .6s !important;
}
#root button.bg-fuchsia-600:not(:disabled):hover, #root button.bg-fuchsia-500:not(:disabled):hover, #root a.bg-fuchsia-600:hover,
#root button.bg-purple-600:not(:disabled):hover, #root button.bg-indigo-600:not(:disabled):hover,
#root button.bg-blue-600:not(:disabled):hover, #root button.bg-violet-600:not(:disabled):hover {
  transform: translateY(-2px);
  background-position: 100% 0 !important;
  box-shadow: 0 16px 32px -14px rgba(192,38,211,.9);
}
#root button:not(:disabled):active { transform: translateY(0) scale(.98); }
/* Brillo que cruza el botón */
#root button.bg-fuchsia-600:not(.absolute):not(.fixed),
#root button.bg-fuchsia-500:not(.absolute):not(.fixed) { position: relative; overflow: hidden; }
#root button.bg-fuchsia-600:not(.absolute):not(.fixed)::after,
#root button.bg-fuchsia-500:not(.absolute):not(.fixed)::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .7s ease;
}
#root button.bg-fuchsia-600:not(.absolute):not(.fixed):hover::after,
#root button.bg-fuchsia-500:not(.absolute):not(.fixed):hover::after { left: 130%; }

/* Botones suaves (bg-*-50) */
#root button.bg-fuchsia-50, #root button.bg-gray-50, #root button.bg-gray-100 {
  transition: transform .2s var(--bs-ease), background .2s, box-shadow .2s !important;
}
#root button.bg-fuchsia-50:hover { background: #fae8ff !important; box-shadow: 0 8px 18px -12px rgba(192,38,211,.6); transform: translateY(-1px); }

/* Ondas al hacer clic (las crea bagstudy-fx.js) */
.bs-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0);
  background: rgba(255,255,255,.45); animation: bs-ripple .6s ease-out forwards;
}
@keyframes bs-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- Campos de formulario ---------- */
#root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
#root textarea, #root select {
  transition: border-color .2s, box-shadow .2s, background-color .2s !important;
}
#root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
#root textarea:focus, #root select:focus {
  border-color: #a78bfa !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,.12) !important;
  outline: none !important;
}
#root input[type="checkbox"], #root input[type="radio"] { accent-color: var(--bs-violet); }

/* ---------- Ventanas emergentes (modales) ---------- */
#root .fixed.inset-0[class*="bg-black/"] {
  background: rgba(15,13,23,.5) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: bs-fade .25s ease both;
}
#root .fixed.inset-0[class*="bg-black/"] > div {
  animation: bs-pop .35s var(--bs-ease) both;
  box-shadow: 0 40px 100px -24px rgba(15,13,23,.55) !important;
}

/* ---------- Tablas ---------- */
#root table thead th {
  background: linear-gradient(180deg, #faf8ff, #f5f2fd) !important;
  color: #6b6580 !important; letter-spacing: .05em;
}
#root table tbody tr { transition: background .2s; }
#root table tbody tr:hover { background: #faf7ff !important; }

/* ---------- Etiquetas / chips de color ---------- */
#root .bg-fuchsia-50.text-fuchsia-600, #root .bg-fuchsia-100.text-fuchsia-700 {
  background: linear-gradient(120deg, #f5f0ff, #fdf0f8) !important;
  color: #a21caf !important;
}

/* ---------- Barras de progreso (relleno con ancho en línea) ---------- */
#root .rounded-full[style*="width"][class*="bg-"] {
  background: linear-gradient(90deg, #7c3aed, #db2777, #f59e0b) !important;
  background-size: 200% 100% !important;
  animation: bs-flow 4s linear infinite;
  transition: width 1s var(--bs-ease) !important;
}

/* ---------- Avatares y campana ---------- */
#root .rounded-full.bg-gradient-to-br { box-shadow: 0 6px 16px -6px rgba(124,58,237,.6); }

/* ---------- Inicio de sesión / registro: más compacto ---------- */
/* Contenedor de pantalla dividida: ocupa exactamente la ventana; el formulario se desplaza por dentro */
#root .flex.min-h-screen.w-full.bg-white.overflow-hidden { height: 100vh; min-height: 0; }
#root .flex.min-h-screen.w-full.bg-white.overflow-hidden > .flex-col.items-center.justify-center {
  overflow-y: auto;
  justify-content: safe center;
  padding: 24px 24px !important;
  background:
    radial-gradient(500px 300px at 0% 0%, rgba(124,58,237,.06), transparent 70%),
    radial-gradient(500px 300px at 100% 100%, rgba(219,39,119,.05), transparent 70%), #fff;
}
#root .flex.min-h-screen.w-full.bg-white.overflow-hidden .max-w-md { max-width: 400px; }
#root .flex.min-h-screen.w-full.bg-white .flex.justify-center.mb-8 { margin-bottom: 16px !important; }
#root .flex.min-h-screen.w-full.bg-white img.h-20 { height: 56px !important; }
#root .flex.min-h-screen.w-full.bg-white .text-center.mb-10 { margin-bottom: 22px !important; }
#root .flex.min-h-screen.w-full.bg-white .text-center.mb-10 .text-2xl { font-size: 26px; margin-bottom: 4px !important; }
#root .flex.min-h-screen.w-full.bg-white .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 14px !important; }
#root .flex.min-h-screen.w-full.bg-white label.mb-2 { margin-bottom: 6px !important; }
#root .flex.min-h-screen.w-full.bg-white input.py-3,
#root .flex.min-h-screen.w-full.bg-white select.py-3 { padding-top: 10px !important; padding-bottom: 10px !important; background-color: #fafafe !important; }
/* Panel de imagen derecho: más estrecho para que el formulario no se vea estirado */
#root .flex.min-h-screen.w-full.bg-white.overflow-hidden > .w-1\/2.relative { flex: 0 0 46%; width: 46% !important; }
#root .flex.min-h-screen.w-full.bg-white.overflow-hidden > .flex-col.items-center.justify-center { flex: 1 1 auto; }
@media (max-height: 760px) {
  #root .flex.min-h-screen.w-full.bg-white img.h-20 { height: 44px !important; }
  #root .flex.min-h-screen.w-full.bg-white .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 10px !important; }
}

/* Registro: campos en 2 columnas para que todo quepa sin desplazarse */
#root form.space-y-5:has(input[name="fullName"]) {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
}
#root .flex.min-h-screen.w-full.bg-white form.space-y-5:has(input[name="fullName"]) > :not([hidden]),
#root .flex.min-h-screen.w-full.bg-white form.space-y-5:has(input[name="fullName"]) > :not([hidden]) ~ :not([hidden]) { margin: 0 !important; min-width: 0; }
#root .flex.min-h-screen.w-full.bg-white form.space-y-5:has(input[name="fullName"]) > button[type="submit"] { grid-column: 1 / -1; margin-top: 6px !important; }
#root .max-w-md:has(input[name="fullName"]) { max-width: 560px !important; }
#root .max-w-md:has(input[name="fullName"]) .text-center.mb-10 { margin-bottom: 18px !important; }
#root .max-w-md:has(input[name="fullName"]) .flex.justify-center.mb-8 { margin-bottom: 10px !important; }
/* Nunca desplazar la página completa en inicio de sesión / registro */
html:has(#root .flex.min-h-screen.w-full.bg-white.overflow-hidden),
html:has(#root .flex.min-h-screen.w-full.bg-white.overflow-hidden) body { height: 100%; overflow: hidden; }
@media (max-width: 640px) {
  #root form.space-y-5:has(input[name="fullName"]) { grid-template-columns: 1fr; gap: 10px; }
  html:has(#root .flex.min-h-screen.w-full.bg-white.overflow-hidden),
  html:has(#root .flex.min-h-screen.w-full.bg-white.overflow-hidden) body { overflow: auto; height: auto; }
}

/* ---------- Animaciones globales ---------- */
@keyframes bs-flow { to { background-position: 200% 0; } }
@keyframes bs-fade { from { opacity: 0; } }
@keyframes bs-pop { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* ---------- Barra de desplazamiento ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #c4b5fd, #f0abfc); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a78bfa, #e879f9); }

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}