/* ============================================================
   Nexus Academy — Estilos del Área de Alumnos
   Paleta y componentes tomados de la landing principal
   ============================================================ */
:root{
  --bg:#0F0F13; --surface:#15151b; --surface2:#1E1E24; --text:#F5F5F7;
  --muted:#B8B8C3; --violet:#7C3AED; --violet2:#A855F7; --line:rgba(245,245,247,.12);
  --gold:#FFC857;
  --max:960px; --radius:22px; --shadow:0 20px 60px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Satoshi,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img,svg{display:block;max-width:100%}
.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.container-cursos{width:min(1440px,calc(100% - 40px));margin-inline:auto}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{letter-spacing:-.035em;line-height:1.05}
h1{font-size:clamp(1.8rem,4.4vw,2.6rem);margin-bottom:10px}
h2{font-size:1.4rem;margin-bottom:10px}
.muted{color:var(--muted)}
.accent{color:#b98cff}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;font-weight:800;transition:.22s ease;cursor:pointer;font-size:.95rem;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--violet),var(--violet2));color:#fff;box-shadow:0 14px 34px rgba(124,58,237,.28)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-secondary{border-color:var(--line);background:rgba(255,255,255,.035);color:#fff}
.btn-danger{background:#3a1420;color:#ff9db3;border:1px solid rgba(255,77,121,.35)}

.week-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(124,58,237,.16);border:1px solid rgba(168,85,247,.35);color:#d9c7ff;font-weight:800;font-size:.8rem;letter-spacing:.04em;padding:7px 15px;border-radius:999px;margin-bottom:16px}

header.topbar{padding:16px 0;border-bottom:1px solid var(--line)}
header.topbar .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand .logo-svg-completo{height:32px;width:auto;display:block}
.overlay-cargando-brand .logo-svg-completo{height:42px}
.topbar-actions{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.9rem;flex-wrap:wrap;row-gap:8px}

main{padding:40px 0 80px}
section{padding:24px 0}

.video-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(168,85,247,.3);box-shadow:var(--shadow);background:#000}

.overlay-cargando{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at top left,rgba(124,58,237,.18),transparent 55%),radial-gradient(ellipse at bottom right,rgba(168,85,247,.18),transparent 55%),#0a0a0f;z-index:5;text-align:center;padding:20px}
.tagline-cargando{color:var(--muted);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;margin:0 0 34px}
.spinner-cargando{width:76px;height:76px;border-radius:50%;border:4px solid rgba(168,85,247,.2);border-top-color:var(--violet2);box-shadow:0 0 18px rgba(168,85,247,.35);animation:girar-cargando 0.9s linear infinite;margin-bottom:26px}
@keyframes girar-cargando{to{transform:rotate(360deg)}}
.titulo-cargando{color:#fff;font-size:1.3rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px;font-weight:800}
.subtitulo-cargando{color:var(--muted);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 28px}
.barra-progreso-carga{width:min(260px,70%);height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.barra-progreso-carga-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--violet),var(--violet2))}
.barra-esperando{animation:pulso-esperando 1.1s ease-in-out infinite}
@keyframes pulso-esperando{0%,100%{opacity:1}50%{opacity:.45}}

.boton-play-grande{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:none;cursor:pointer;z-index:4;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--violet),var(--violet2));box-shadow:0 0 0 6px rgba(124,58,237,.18),0 14px 34px rgba(124,58,237,.4);transition:transform .15s ease}
.boton-play-grande:hover{transform:translate(-50%,-50%) scale(1.06)}
.boton-play-grande svg{margin-left:4px}

.credencial-box{margin-bottom:24px;padding:20px;border-radius:16px;background:rgba(124,58,237,.1);border:1px solid rgba(168,85,247,.35)}
.credencial-linea{margin:0 0 8px;font-size:.95rem;font-family:monospace;color:#fff}
.credencial-linea span{color:#d9c7ff;font-weight:700}

.btn-menu-puntitos{background:var(--surface2);border:1px solid var(--line);color:#fff;width:38px;height:38px;border-radius:10px;font-size:1.1rem;cursor:pointer;line-height:1}
.btn-menu-puntitos:hover{border-color:rgba(168,85,247,.5)}
.dropdown-acciones{display:none;position:absolute;top:calc(100% + 4px);right:0;z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;min-width:180px;flex-direction:column;gap:2px}
.dropdown-acciones.abierto{display:flex}
.dropdown-acciones a,.dropdown-acciones button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:8px;border:none;background:none;color:#fff;font-size:.88rem;cursor:pointer;white-space:nowrap}
.dropdown-acciones a:hover,.dropdown-acciones button:hover{background:var(--surface2)}
.dropdown-acciones .opcion-peligro{color:#ff9db3}
.dropdown-acciones form{margin:0}
.video-wrap iframe,.video-wrap video{position:absolute;inset:0;width:100%;height:100%;border:0}

.notes-box{margin-top:28px;border:1px solid rgba(255,200,87,.35);border-radius:20px;padding:26px;background:linear-gradient(135deg,rgba(255,200,87,.08),rgba(124,58,237,.08))}
.notes-box h3{color:var(--gold);margin-bottom:10px}
.notes-box .content{white-space:pre-wrap;color:#e9e9ee}

.card{background:linear-gradient(180deg,rgba(30,30,36,.72),rgba(20,20,25,.84));border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:14px}
.card h3{margin-bottom:6px}
.cards-list{display:flex;flex-direction:column;gap:14px}

.login-page{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow)}
.login-box .brand{justify-content:center;margin:0 auto 24px}
.login-box .logo-svg-completo{height:52px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px}
.field input,.field textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);color:var(--text)}
.field textarea{min-height:110px;resize:vertical}
.campo-clave-wrap{position:relative}
.campo-clave-wrap input{padding-right:46px}
.btn-ojito{position:absolute;top:50%;right:10px;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:1.1rem;padding:4px;line-height:1;opacity:.75}
.btn-ojito:hover{opacity:1}
.alert{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:.9rem}
.alert-error{background:rgba(255,77,121,.12);border:1px solid rgba(255,77,121,.35);color:#ffb3c2}
.alert-success{background:rgba(124,58,237,.14);border:1px solid rgba(168,85,247,.35);color:#d9c7ff}

table.admin-table{width:100%;border-collapse:collapse;margin-top:10px}
table.admin-table th,table.admin-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:middle;white-space:nowrap}
table.admin-table th{color:var(--muted);font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.05em}
.badge-on{color:#8fe3a8}
.badge-off{color:#ff9db3}
.actions-inline{display:flex;gap:8px}
.actions-inline form{display:inline}
.admin-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:28px}

/* ============================================================
   Archivos adjuntos, oferta con cronómetro, videos de muestra
   ============================================================ */
.adjuntos-box{margin-top:20px}
.adjunto-link{display:block;padding:10px 14px;margin-bottom:8px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);color:#fff}
.adjunto-link:hover{border-color:rgba(168,85,247,.4)}
.btn-descargar-adjuntos{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;border:none;background:linear-gradient(135deg,var(--violet),var(--violet2));color:#fff;font-weight:800;font-size:.9rem;cursor:pointer;white-space:nowrap;box-shadow:0 14px 34px rgba(124,58,237,.28)}
.adjuntos-dropdown{margin-top:14px;padding:14px;background:var(--surface2);border:1px solid var(--line);border-radius:14px}

.offer-banner{margin-top:28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:24px;border-radius:20px;border:1px solid rgba(255,200,87,.4);background:linear-gradient(135deg,rgba(255,200,87,.08),rgba(124,58,237,.08))}
.offer-icon{font-size:2rem;flex-shrink:0}
.offer-body{flex:1;min-width:220px}
.offer-label{font-size:.72rem;letter-spacing:.06em;color:var(--gold);font-weight:800}
.offer-body h3{margin:6px 0;font-size:1.15rem}
.offer-body p{margin:0;color:var(--muted);font-size:.9rem}
.offer-price{text-align:right;flex-shrink:0}
.offer-price .price-normal{display:block;text-decoration:line-through;color:var(--muted);font-size:.9rem}
.offer-price .price-final{display:block;color:var(--gold);font-size:1.4rem;font-weight:800}

.section-label{text-align:center;font-size:.75rem;letter-spacing:.08em;color:var(--muted);font-weight:800;margin-bottom:8px}

.preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:24px}
.preview-card{display:block;text-decoration:none;color:inherit}
.preview-thumb{position:relative;width:100%;padding-top:56%;border-radius:14px;overflow:hidden;background:var(--surface2);margin-bottom:10px}
.preview-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.preview-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(124,58,237,.85);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem}
.preview-duration{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;font-size:.72rem;padding:2px 8px;border-radius:6px}
.preview-card h4{margin:0 0 4px;font-size:.98rem}
.preview-card p{margin:0;font-size:.85rem}

.cta-box{margin-top:36px;padding:30px;border-radius:22px;border:1px solid rgba(168,85,247,.4);text-align:center}
.cta-box h2{margin:6px 0 10px}
.btn-whatsapp{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:14px 28px;border-radius:999px;background:#FFC857;color:#1a1400;font-weight:800;text-decoration:none}
.countdown{margin-top:22px;text-align:center}
.countdown-boxes{display:flex;justify-content:center;gap:10px;margin-top:10px}
.countdown-box{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:10px 16px;min-width:64px}
.countdown-box span{display:block;font-size:1.4rem;font-weight:800}
.countdown-box small{color:var(--muted);font-size:.65rem;letter-spacing:.05em}

@media (max-width: 720px){
  .offer-banner{flex-direction:column;text-align:center}
  .offer-price{text-align:center}

  .container{width:calc(100% - 28px)}
  main{padding:24px 0 56px}

  /* Menú superior: botones más chicos y que se acomoden en varias líneas */
  header.topbar .container{justify-content:center;text-align:center}
  .topbar-actions{justify-content:center;width:100%}
  .btn{min-height:42px;padding:0 16px;font-size:.85rem}

  /* Formularios: las columnas de 2 se apilan en 1 sola */
  .admin-section > form > div[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
    gap:0 !important;
  }

  .admin-section{padding:18px}
  .login-box{padding:24px}

  /* Botones de acción de las tablas (editar/borrar/etc) apilados y completos */
  .actions-inline{flex-direction:column;align-items:stretch;gap:6px}
  .actions-inline form,.actions-inline a{width:100%}
  .actions-inline .btn{width:100%}

  /* Tablas del admin: scroll horizontal en vez de romper el diseño */
  table.admin-table{display:block;overflow-x:auto;white-space:nowrap}

  h1{font-size:1.6rem}
  .video-wrap{border-radius:14px}
  .notes-box{padding:18px}

  /* Pantalla de "Cargando tu clase": la caja del video es mucho más baja en
     celular (misma proporción 16:9, pero menos ancho = menos alto en píxeles),
     así que todo adentro se achica para que quepa sin cortarse */
  .overlay-cargando{padding:8px}
  .overlay-cargando .brand{margin-bottom:2px !important;justify-content:center}
  .overlay-cargando .logo-svg-completo{height:30px !important}
  .tagline-cargando{font-size:.52rem;letter-spacing:.08em;margin-bottom:10px}
  .spinner-cargando{width:38px;height:38px;border-width:3px;margin-bottom:10px}
  .titulo-cargando{font-size:.85rem;letter-spacing:.06em;margin-bottom:3px}
  .subtitulo-cargando{font-size:.58rem;letter-spacing:.08em;margin-bottom:10px}
  .barra-progreso-carga{height:4px}
  .boton-play-grande{width:52px;height:52px}
  .boton-play-grande svg{width:20px;height:20px}
}

@media (max-width: 420px){
  .brand .logo-svg-completo{height:26px}
  .week-badge{font-size:.72rem;padding:6px 12px}
}

/* ============================================================
   Carrusel de clases + listado con miniatura (Mis clases)
   ============================================================ */
.carrusel-wrap{position:relative}
.clases-carrusel{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 18px;margin:0 0 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.clases-carrusel::-webkit-scrollbar{height:8px}
.clases-carrusel::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:999px}
.carrusel-card{flex:0 0 auto;width:270px;scroll-snap-align:start}
.carrusel-caratula{position:relative;width:100%;padding-top:135%;border-radius:14px;overflow:hidden;background:var(--surface2);border:1px solid var(--line)}
.carrusel-caratula img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carrusel-card h4{font-size:.92rem;margin:10px 0 0;line-height:1.3}
.carrusel-card .week-badge{margin:0 0 6px;font-size:.68rem;padding:5px 12px}

/* Flechas del carrusel: solo tienen sentido con mouse (desktop). En touch, el swipe ya alcanza */
.carrusel-flecha{display:none}
@media (hover: hover) and (pointer: fine){
  .carrusel-flecha{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:calc(50% - 14px);transform:translateY(-50%);
    width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
    background:rgba(15,15,19,.85);color:#fff;font-size:1.4rem;cursor:pointer;z-index:5;
    box-shadow:var(--shadow);transition:.15s ease
  }
  .carrusel-flecha:hover{background:var(--violet);border-color:var(--violet)}
  .carrusel-flecha-izq{left:-14px}
  .carrusel-flecha-der{right:-14px}
}

.clase-item-thumb{flex:0 0 auto;width:110px;height:66px;border-radius:10px;overflow:hidden;background:var(--surface2)}
.clase-item-thumb img{width:100%;height:100%;object-fit:cover}

/* Acordeón de "Todos los contenidos": colapsado solo muestra el título */
.clases-lista{display:flex;flex-direction:column;gap:10px}
.clase-acc{background:linear-gradient(180deg,rgba(30,30,36,.72),rgba(20,20,25,.84));border:1px solid var(--line);border-radius:16px;overflow:hidden}
.clase-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:14px 18px;font-weight:700}
.clase-acc summary::-webkit-details-marker{display:none}
.clase-acc-num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--surface2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--muted)}
.clase-acc-titulo-progreso{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.clase-acc-titulo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clase-acc-progreso-fila{display:flex;align-items:center;gap:10px}
.clase-acc-porcentaje{flex:0 0 auto;font-size:.78rem;font-weight:600}
.clase-acc-progreso-fila .curso-progreso-track{flex:1 1 auto;max-width:220px;margin-top:0}
.clase-acc-chevron{flex:0 0 auto;color:var(--muted);transition:transform .2s ease}
.clase-acc[open] .clase-acc-chevron{transform:rotate(180deg)}
.clase-acc-body{display:flex;gap:16px;padding:0 18px 18px;align-items:flex-start}
.clase-acc-adjuntos{display:flex;flex-direction:column;gap:6px}

@media (max-width: 640px){
  .carrusel-card{width:200px}
  .clase-acc-body{flex-direction:column}
  .clase-item-thumb{width:100%;height:auto;aspect-ratio:16/9}
  .curso-card{flex-basis:210px}
  .clase-acc summary{padding:12px 14px;gap:10px}
}

/* ============================================================
   Menú principal de cursos (lo primero que ve el alumno al entrar)
   ============================================================ */
.eyebrow-label{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:var(--muted);font-weight:800;margin:0 0 6px}

.cursos-menu{display:flex;gap:20px;overflow-x:auto;padding:6px 2px 18px;margin:0 0 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.cursos-menu::-webkit-scrollbar{height:8px}
.cursos-menu::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:999px}
.curso-card{flex:0 0 290px;scroll-snap-align:start;position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--line);min-height:420px;display:flex;align-items:flex-end;transition:opacity .25s ease,transform .25s ease,filter .25s ease}
.curso-caratula-fondo{position:absolute;inset:0;z-index:0}
.curso-caratula-fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.curso-caratula-fondo::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom, rgba(10,10,13,0) 30%, rgba(10,10,13,.65) 58%, rgba(8,8,11,.95) 100%)}
.curso-card-contenido{position:relative;z-index:1;padding:18px;width:100%}

/* Las tarjetas de cursos sin acceso arrancan apagadas, y se iluminan al interactuar */
.curso-card-bloqueada .curso-caratula-fondo{filter:grayscale(.45) brightness(.62)}
.curso-card-bloqueada:hover .curso-caratula-fondo,
.curso-card-bloqueada:focus-within .curso-caratula-fondo,
.curso-card-bloqueada:active .curso-caratula-fondo{filter:none}
.curso-caratula-fondo{transition:filter .25s ease}
.curso-candado{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;font-size:.95rem;backdrop-filter:blur(2px)}
.curso-card-footer{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.curso-clases-count{font-size:.82rem}
.curso-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;border-radius:12px;font-weight:800;font-size:.88rem;background:#2b2b33;color:#fff;transition:background .18s ease,transform .18s ease}
.curso-cta:hover,.curso-cta:focus-visible,.curso-cta:active{background:linear-gradient(135deg,var(--violet),var(--violet2))}
.curso-cta.inerte{opacity:.55;cursor:default}
.curso-cta.inerte:hover{background:#2b2b33}

/* Al pasar el mouse sobre el menú, la tarjeta activa se resalta y las demás se apagan un poco */
@media (hover: hover) and (pointer: fine){
  .cursos-menu:hover .curso-card{opacity:.55;transform:scale(.99)}
  .cursos-menu:hover .curso-card:hover{opacity:1;transform:scale(1)}
}

/* Nav decorativo del header (Inicio / Mis clases / Recursos / Comunidad) */
.topbar-nexus{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.nav-tabs-nexus{display:flex;align-items:center;gap:6px;flex:1 1 auto}
.nav-tabs-nexus a,.nav-tabs-nexus .inerte{padding:9px 18px;border-radius:999px;font-size:.88rem;font-weight:700;color:var(--muted)}
.nav-tabs-nexus a{color:var(--muted)}
.nav-tabs-nexus a.activo{background:rgba(124,58,237,.22);color:#fff}
.nav-tabs-nexus .inerte{cursor:default;opacity:.55}
@media (max-width: 780px){ .nav-tabs-nexus{display:none} }

/* Frase decorativa al lado del título */
.cursos-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cursos-tagline{font-style:italic;font-size:1.15rem;line-height:1.3;color:var(--muted);text-align:right;transform:rotate(-3deg);margin:6px 6px 0 0}
@media (max-width: 780px){ .cursos-tagline{display:none} }

/* Barra de progreso real, debajo de la tarjeta del curso al que ya tiene acceso */
.curso-progreso{margin-top:14px}
.curso-progreso-track{height:6px;border-radius:999px;background:var(--surface2);overflow:hidden}
.curso-progreso-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--violet),var(--violet2))}
.curso-progreso-label{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-top:6px}

/* ============================================================
   Lista de alumnos: filtro por categoría, progreso, ranking
   ============================================================ */
.alumnos-layout{display:flex;gap:24px;align-items:flex-start}
.alumnos-principal{flex:1 1 auto;min-width:0}
.alumnos-sidebar{flex:0 0 280px}
@media (max-width: 980px){ .alumnos-layout{flex-direction:column}.alumnos-sidebar{flex-basis:auto;width:100%} }

.alumnos-filtros{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:16px}
.filtro-categorias{display:flex;flex-wrap:wrap;gap:8px}
.chip-categoria{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);font-size:.78rem;cursor:pointer}
.chip-categoria input{accent-color:var(--violet)}

.btn-expandir-alumno{background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;padding:2px 6px}
.fila-cursos-alumno td{background:rgba(124,58,237,.06);padding:14px 18px}
.cursos-alumno-desglose{display:flex;flex-direction:column;gap:10px}
.curso-alumno-item{display:grid;grid-template-columns:1fr 120px 90px;align-items:center;gap:14px;font-size:.85rem}
.curso-alumno-nombre{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.curso-alumno-estado{text-align:right;color:var(--muted);white-space:nowrap}

.barra-progreso-mini{height:6px;border-radius:999px;background:var(--surface2);overflow:hidden;margin-bottom:4px}
.barra-progreso-mini-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--violet),var(--violet2))}

.ranking-box{background:linear-gradient(180deg,rgba(30,30,36,.72),rgba(20,20,25,.84));border:1px solid var(--line);border-radius:16px;padding:18px}
.ranking-box h3{margin:0 0 14px;font-size:1rem}
.ranking-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.ranking-item:first-child{border-top:none}
.ranking-puesto{flex:0 0 auto;font-weight:800;color:var(--muted);width:24px}
.ranking-info{flex:1 1 auto;min-width:0}
.ranking-info a{display:block;font-weight:700;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranking-estrellas{color:var(--violet2);font-size:.8rem;letter-spacing:1px}
.ranking-porcentaje{flex:0 0 auto;font-weight:800;font-size:.85rem}

/* ============================================================
   Ficha de detalle de un alumno
   ============================================================ */
.detalle-header{margin-bottom:18px}
.detalle-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.detalle-stat{background:linear-gradient(180deg,rgba(30,30,36,.72),rgba(20,20,25,.84));border:1px solid var(--line);border-radius:14px;padding:16px}
.detalle-stat strong{display:block;font-size:1.5rem;margin-bottom:4px}
.detalle-stat span{color:var(--muted);font-size:.8rem}

.detalle-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
@media (max-width: 860px){ .detalle-grid{grid-template-columns:1fr} }

.grafico-barras{display:flex;align-items:flex-end;gap:10px;height:140px;padding-top:10px}
.grafico-barra-col{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:8px}
.grafico-barra{width:100%;max-width:28px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--violet2),var(--violet))}
.grafico-barra-col span{font-size:.72rem}

.heatmap-horario{display:flex;flex-direction:column;gap:4px}
.heatmap-fila{display:grid;grid-template-columns:60px repeat(7,1fr);gap:4px;align-items:center}
.heatmap-fila-encabezado span{text-align:center;font-size:.72rem;color:var(--muted)}
.heatmap-fila span:first-child{font-size:.72rem}
.heatmap-celda{display:block;height:26px;border-radius:5px}

/* Banner final "Más cursos en camino" */
.cursos-banner{position:relative;overflow:hidden;margin-top:32px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 26px;border-radius:20px;background:linear-gradient(120deg,rgba(124,58,237,.38),rgba(15,15,19,.96) 55%);border:1px solid rgba(168,85,247,.35)}
.cursos-banner-texto{display:flex;align-items:center;gap:14px;z-index:1}
.cursos-banner-icono{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:#170a29;flex:0 0 auto}
.cursos-banner-marca{position:relative;text-align:right;z-index:1;padding-right:26px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.cursos-banner-marca svg{width:150px;height:auto;display:block}
.cursos-banner-marca span{font-weight:600;letter-spacing:0;font-size:.72rem;color:var(--muted)}

/* Logo animado en bucle: círculo -> X -> NE + US -> se sostiene -> se desvanece -> vuelve a ser círculo
   (usa el logo real, agrupado en <g> por letra dentro del propio SVG) */
.logo-animado{width:110px;height:auto;display:flex;align-items:center;justify-content:center}
.logo-animado .logo-svg-completo{width:100%;height:auto}
.logo-svg-circulo{fill:none;stroke:var(--violet2);stroke-width:6;filter:drop-shadow(0 0 6px rgba(168,85,247,.65));transform-origin:484px 122px;animation:girarCirculoLogo 6s ease-in-out infinite}
.logo-svg-x{transform-origin:484px 122px;animation:girarXLogoSvg 6s ease-in-out infinite}
.logo-svg-ne{transform-origin:180px 122px;animation:girarNeLogoSvg 6s ease-in-out infinite}
.logo-svg-us{transform-origin:830px 122px;animation:girarUsLogoSvg 6s ease-in-out infinite}

@keyframes girarCirculoLogo{
  0%,10%{opacity:1;transform:scale(1)}
  18%{opacity:0;transform:scale(1.4)}
  85%{opacity:0;transform:scale(1.4)}
  95%,100%{opacity:1;transform:scale(1)}
}
@keyframes girarXLogoSvg{
  0%,15%{opacity:0;transform:scale(.4)}
  24%{opacity:1;transform:scale(1)}
  76%{opacity:1;transform:scale(1)}
  85%,100%{opacity:0;transform:scale(.4)}
}
@keyframes girarNeLogoSvg{
  0%,22%{opacity:0;transform:translateX(60px)}
  32%{opacity:1;transform:translateX(0)}
  72%{opacity:1;transform:translateX(0)}
  80%,100%{opacity:0;transform:translateX(60px)}
}
@keyframes girarUsLogoSvg{
  0%,22%{opacity:0;transform:translateX(-60px)}
  32%{opacity:1;transform:translateX(0)}
  72%{opacity:1;transform:translateX(0)}
  80%,100%{opacity:0;transform:translateX(-60px)}
}