/* =====================================================================
   assets/css/app.css — Sistema de diseño "oscuro premium"
   AulaViva · Plataforma de Cursos.
   Hoja única para toda la app: landing, auth y paneles.
   Reemplaza a main.css y panel.css.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* =====================================================================
   1. Variables (todo en un solo :root)
   ===================================================================== */
:root{
  color-scheme: dark;                /* scrollbars y UI nativa en oscuro */

  /* — Fondo oscuro en capas (no negro plano: azul-petróleo profundo) — */
  --bg-0:#0a0e14;          /* fondo base */
  --bg-1:#11161f;          /* superficies */
  --bg-2:#171d28;          /* tarjetas */
  --bg-3:#1f2734;          /* hover / inputs */
  --linea:#2a3340;         /* bordes sutiles */
  --linea-fuerte:#3a4453;

  /* — Texto — */
  --txt:#eef1f6;           /* principal */
  --txt-2:#aeb6c2;         /* secundario */
  --txt-3:#7d8799;         /* terciario / hints (contraste ≥4.5:1) */

  /* — Acento: ámbar cálido + verde-menta como secundario — */
  --acento:#f0b429;        /* dorado/ámbar */
  --acento-2:#ffd166;
  --menta:#3ddc97;         /* éxito / gratis */
  --rojo:#ff5d6c;          /* peligro */
  --acento-glow:rgba(240,180,41,.18);

  /* — Forma — */
  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;
  --sombra:0 18px 50px -12px rgba(0,0,0,.6);
  --sombra-sm:0 6px 20px -6px rgba(0,0,0,.5);

  /* — Tipografía — */
  --display:'Fraunces',Georgia,serif;
  --cuerpo:'Outfit',system-ui,sans-serif;

  /* — Escala de espaciado — */
  --s-2:0.5rem;  --s-3:0.75rem; --s-4:1rem;    --s-5:1.25rem;
  --s-6:1.5rem;  --s-7:2rem;    --s-8:2.5rem;  --s-9:3rem;  --s-10:4rem;
}

/* =====================================================================
   2. Reset + base
   ===================================================================== */
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
img,svg,video{max-width:100%; display:block}

body{
  font-family:var(--cuerpo);
  background:var(--bg-0);
  color:var(--txt);
  line-height:1.6;
  accent-color:var(--acento);                 /* checks/radios en ámbar */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  /* Atmósfera: dos resplandores difusos fijos, no plano */
  background-image:
    radial-gradient(60vw 50vh at 85% -5%, rgba(240,180,41,.10), transparent 60%),
    radial-gradient(50vw 40vh at -5% 110%, rgba(61,220,151,.07), transparent 60%);
  background-attachment:fixed;
}

/* — Grano sutil sobre todo (textura premium) — */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================================================================
   3. Tipografía
   ===================================================================== */
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.12; letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.4rem)}
h2{font-size:clamp(1.5rem,3vw,2.2rem)}
h3{font-size:1.25rem}
a{color:var(--acento-2); text-decoration:none; transition:color .15s}
a:hover{color:var(--acento)}
.serif{font-family:var(--display)}
.muted{color:var(--txt-2)}
.hint{color:var(--txt-3); font-size:.9rem}

/* =====================================================================
   4. Layout
   ===================================================================== */
.wrap{max-width:1140px; margin:0 auto; padding:0 24px}
.wrap-sm{max-width:460px; margin:0 auto; padding:0 24px}
.seccion{padding:84px 0}
.flex{display:flex}
.gap-3{gap:12px}

/* =====================================================================
   5. Botones
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-family:var(--cuerpo); font-weight:600; font-size:.95rem;
  padding:13px 24px; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, background .18s;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; pointer-events:none;
}

.btn-primario{
  background:linear-gradient(135deg,var(--acento-2),var(--acento));
  color:#1a1407; box-shadow:0 8px 24px -6px var(--acento-glow), 0 0 0 1px rgba(240,180,41,.2) inset;
}
.btn-primario:hover{box-shadow:0 14px 34px -8px var(--acento-glow); color:#1a1407}

.btn-fantasma{background:transparent; color:var(--txt); border-color:var(--linea-fuerte)}
.btn-fantasma:hover{background:var(--bg-3); border-color:var(--acento)}

.btn-peligro{background:transparent; border-color:rgba(255,93,108,.35); color:var(--rojo)}
.btn-peligro:hover{background:rgba(255,93,108,.1)}

.btn-bloque{width:100%}
.btn-sm{padding:11px 16px; font-size:.85rem}      /* ≥44px de alto táctil */
.btn-lg{padding:15px 30px; font-size:1rem}

/* =====================================================================
   6. Tarjetas
   ===================================================================== */
.card{
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--linea); border-radius:var(--r-lg);
  padding:28px; box-shadow:var(--sombra-sm);
}

/* =====================================================================
   7. Formularios
   ===================================================================== */
.campo{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.campo label{font-size:.82rem; font-weight:500; color:var(--txt-2); letter-spacing:.02em}
.campo input, .campo select, .campo textarea{
  font-family:var(--cuerpo); font-size:1rem; color:var(--txt);
  background:var(--bg-3); border:1px solid var(--linea);
  border-radius:var(--r-sm); padding:13px 15px; transition:border-color .15s, box-shadow .15s;
  width:100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--acento);
  box-shadow:0 0 0 3px var(--acento-glow);
}
.campo input:disabled, .campo select:disabled, .campo textarea:disabled{
  opacity:.6; cursor:not-allowed;
}
.campo input::placeholder, .campo textarea::placeholder{color:var(--txt-3)}
.check{display:flex; align-items:center; gap:9px; color:var(--txt-2); font-size:.92rem; cursor:pointer}
.check input{width:auto}
.fila{display:flex; gap:16px; flex-wrap:wrap}
.fila > *{flex:1; min-width:150px}

/* =====================================================================
   8. Skip link (accesibilidad)
   ===================================================================== */
.skip-link{
  position:absolute; top:-60px; left:16px; z-index:99999;
  background:var(--acento); color:#1a1407;
  font-family:var(--cuerpo); font-weight:600; font-size:.9rem;
  padding:10px 18px; border-radius:var(--r-sm);
  transition:top .15s;
  text-decoration:none;
}
.skip-link:focus{top:16px}

/* =====================================================================
   9. Filtros de categoría
   ===================================================================== */
.filtros-bar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--s-6)}
.filtro-btn{
  font-family:var(--cuerpo); font-size:.85rem; font-weight:500;
  padding:11px 18px; border-radius:var(--r-pill); border:1px solid var(--linea-fuerte);
  background:transparent; color:var(--txt-2); cursor:pointer; transition:all .15s;
}
.filtro-btn:hover{border-color:var(--acento); color:var(--acento-2)}
.filtro-btn.activo{background:var(--acento-glow); border-color:rgba(240,180,41,.4); color:var(--acento-2)}

/* =====================================================================
   10. Paginación
   ===================================================================== */
.paginacion{
  display:flex; align-items:center; gap:var(--s-3);
  justify-content:center; flex-wrap:wrap; margin-top:var(--s-5);
}

/* =====================================================================
   11. Stretched link (card clickable)
   ===================================================================== */
.curso-card-link{
  position:absolute; inset:0; z-index:1; border-radius:inherit;
}
.curso-card-link:focus-visible{
  outline:2px solid var(--acento); outline-offset:2px;
}

/* =====================================================================
   12. Alertas
   ===================================================================== */
.alerta{padding:13px 17px; border-radius:var(--r-sm); margin-bottom:18px; font-size:.92rem; border:1px solid transparent}
.alerta-ok{background:rgba(61,220,151,.1); border-color:rgba(61,220,151,.3); color:var(--menta)}
.alerta-error{background:rgba(255,93,108,.1); border-color:rgba(255,93,108,.3); color:var(--rojo)}

/* =====================================================================
   13. Badges
   ===================================================================== */
.badge{display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:var(--r-pill);
  font-size:.74rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  background:var(--bg-3); color:var(--txt-2); border:1px solid var(--linea)}
.badge-ok{background:rgba(61,220,151,.12); color:var(--menta); border-color:rgba(61,220,151,.25)}
.badge-acento{background:var(--acento-glow); color:var(--acento-2); border-color:rgba(240,180,41,.25)}

/* =====================================================================
   14. Tablas
   ===================================================================== */
.tabla{width:100%; border-collapse:collapse; font-size:.93rem}
.tabla th{text-align:left; padding:12px 10px; color:var(--txt-3); font-weight:500;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--linea)}
.tabla td{padding:14px 10px; border-bottom:1px solid var(--linea); color:var(--txt)}
.tabla tr:hover td{background:var(--bg-2)}
/* Envolvé la tabla en <div class="tabla-scroll"> para scroll horizontal en mobile */
.tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* =====================================================================
   15. Animación de entrada
   ===================================================================== */
@keyframes subir{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.aparece{animation:subir .6s cubic-bezier(.22,1,.36,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}
.d4{animation-delay:.24s}.d5{animation-delay:.3s}

/* =====================================================================
   16. Navbar
   ===================================================================== */
.nav{position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(10,14,20,.7); border-bottom:1px solid var(--linea)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px}
.logo{font-family:var(--display); font-weight:700; font-size:1.4rem; color:var(--txt); display:flex; align-items:center; gap:9px}
.logo b{color:var(--acento)}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{color:var(--txt-2); font-weight:500; font-size:.95rem}
.nav-links a:hover{color:var(--txt)}

@media (max-width:680px){
  .nav-links a:not(.btn){display:none}
  .seccion{padding:56px 0}
}

/* =====================================================================
   17. Landing — index.php
   ===================================================================== */

/* --- Hero ---------------------------------------------------------- */
.hero{padding:100px 0 80px; position:relative; overflow:hidden}
.hero-content{max-width:660px}
.lead{font-size:1.15rem; color:var(--txt-2)}

.hero-stats{
  display:flex; flex-wrap:wrap;
  gap:48px; margin-top:48px;
  padding-top:32px; border-top:1px solid var(--linea);
}
.hero-stat{display:flex; flex-direction:column; gap:4px}
.hero-stat-num{
  font-family:var(--display); font-size:2.2rem; font-weight:700;
  color:var(--acento); line-height:1;
}
.hero-stat-lbl{
  font-size:.78rem; color:var(--txt-3);
  text-transform:uppercase; letter-spacing:.06em; margin-top:4px;
}

/* --- Grid de cursos ------------------------------------------------ */
.cursos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  gap:24px;
}

.curso-card{
  display:flex; flex-direction:column;
  padding:0; overflow:hidden; cursor:pointer;
  transition:transform .2s, box-shadow .2s;
}
.curso-card:hover{transform:translateY(-4px); box-shadow:var(--sombra)}

.curso-thumb{
  background:linear-gradient(135deg, var(--bg-3), var(--bg-2));
  padding:28px 24px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--linea);
}
.curso-thumb-icon{font-size:2rem; color:var(--acento); opacity:.7}

.curso-body{display:flex; flex-direction:column; flex:1; padding:20px 24px 24px}
.curso-categoria{
  font-size:.72rem; font-weight:700; color:var(--acento-2);
  text-transform:uppercase; letter-spacing:.07em;
}
.curso-titulo{
  font-size:1.05rem; font-weight:600; margin:8px 0 10px;
  color:var(--txt); font-family:var(--display);
}
.curso-desc{
  font-size:.88rem; color:var(--txt-2); line-height:1.55; margin-bottom:16px;
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;   /* máx. 2 líneas */
}
.curso-footer{display:flex; align-items:center; justify-content:space-between; margin-top:auto}
.curso-precio{font-weight:700; color:var(--acento-2); font-size:1rem}

/* --- Estado vacío -------------------------------------------------- */
.vacio{text-align:center; padding:72px 24px; color:var(--txt-2)}
.vacio-icono{font-size:3rem; color:var(--linea-fuerte); margin-bottom:20px; display:block}
.vacio h3{margin-bottom:10px; color:var(--txt)}
.vacio p{margin-bottom:28px; color:var(--txt-2)}

/* --- Pasos --------------------------------------------------------- */
.pasos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:40px;
}
.paso-num{
  font-family:var(--display); font-size:3.5rem; font-weight:700;
  color:var(--acento); opacity:.18; line-height:1; margin-bottom:12px;
}
.paso-titulo{font-size:1.1rem; font-weight:600; color:var(--txt); margin-bottom:8px}
.paso-desc{font-size:.92rem; color:var(--txt-2)}

/* --- CTA card ------------------------------------------------------ */
.cta-card{
  text-align:center; padding:72px 40px;
  background:linear-gradient(135deg, var(--bg-2), var(--bg-1));
  border-color:var(--linea-fuerte);
  position:relative; overflow:hidden;
}
.cta-card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 80% at 50% 120%, var(--acento-glow), transparent);
}

/* =====================================================================
   18. Módulo alumno
   ===================================================================== */

/* --- Barra de progreso --------------------------------------------- */
.progreso-wrap{height:6px; background:var(--bg-3); border-radius:var(--r-pill); overflow:hidden}
.progreso-barra{
  height:100%; border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--menta), var(--acento));
  transition:width .4s ease;
}
.progreso-label{font-size:.8rem; color:var(--txt-3); margin-top:5px}

/* --- Dashboard alumno: grid de cursos ------------------------------ */
.mis-cursos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:var(--s-4);
}
.curso-card-alumno{display:flex; flex-direction:column; gap:var(--s-3); position:relative}
.curso-card-alumno .curso-card-link{border-radius:var(--r-lg)}

/* --- Player layout: sidebar + área principal ----------------------- */
.player-layout{
  display:grid;
  grid-template-columns:300px 1fr;
  min-height:calc(100vh - 64px);
  align-items:start;
}
@media (max-width:860px){
  .player-layout{grid-template-columns:1fr}
  .player-sidebar{order:2; border-top:1px solid var(--linea); border-right:none}
  .player-main{order:1}
}

/* --- Sidebar del player -------------------------------------------- */
.player-sidebar{
  background:var(--bg-1);
  border-right:1px solid var(--linea);
  height:calc(100vh - 64px);
  overflow-y:auto;
  position:sticky; top:64px;
}
.sidebar-curso-titulo{
  padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--linea);
  font-weight:600; font-size:.95rem;
  position:sticky; top:0; background:var(--bg-1); z-index:1;
}
.sidebar-modulo summary{
  padding:var(--s-3) var(--s-5);
  font-size:.82rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--txt-3); cursor:pointer; list-style:none;
  border-bottom:1px solid var(--linea);
  display:flex; justify-content:space-between; align-items:center;
}
.sidebar-modulo summary:hover{color:var(--txt-2)}
.sidebar-leccion{
  display:flex; align-items:center; gap:var(--s-3);
  padding:11px var(--s-5);
  font-size:.88rem; color:var(--txt-2);
  border-bottom:1px solid var(--linea);
  text-decoration:none; transition:background .12s;
}
.sidebar-leccion:hover{background:var(--bg-3); color:var(--txt)}
.sidebar-leccion.activa{background:var(--bg-3); color:var(--acento-2); border-left:3px solid var(--acento)}
.sidebar-leccion.completada{color:var(--menta)}
.check-icon{
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700;
}
.check-icon.ok{background:rgba(61,220,151,.2); color:var(--menta)}
.check-icon.pend{border:1.5px solid var(--linea-fuerte)}
.check-icon.cur{border:2px solid var(--acento); background:var(--acento-glow)}

/* --- Área principal del player ------------------------------------- */
.player-main{padding:var(--s-6) var(--s-7)}
@media (max-width:860px){ .player-main{padding:var(--s-4)} }
.player-video-wrap{
  position:relative; padding-top:56.25%;
  background:var(--bg-2); border-radius:var(--r);
  overflow:hidden; margin-bottom:var(--s-5);
}
.player-video-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.player-nav{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5);
  padding-top:var(--s-4); border-top:1px solid var(--linea);
}

/* --- Barra de progreso global del curso (top del player) ----------- */
.player-progress-bar{
  position:sticky; top:0; z-index:10;
  background:var(--bg-1); border-bottom:1px solid var(--linea);
  padding:10px var(--s-5);
  display:flex; align-items:center; gap:var(--s-4);
}
.player-progress-bar .progreso-wrap{flex:1; height:5px}

/* --- Certificado --------------------------------------------------- */
.certificado-card{
  max-width:640px; margin:0 auto; text-align:center;
  padding:var(--s-8) var(--s-6);
  border:2px solid rgba(240,180,41,.35);
  background:linear-gradient(135deg,var(--bg-2),var(--bg-1));
}
.cert-sello{font-size:4rem; line-height:1; color:var(--acento); margin-bottom:var(--s-4)}

/* =====================================================================
   19. Footer
   ===================================================================== */
.site-footer{
  border-top:1px solid var(--linea);
  padding:40px 0;
  text-align:center;
  color:var(--txt-3);
  font-size:.88rem;
}

/* =====================================================================
   20. Accesibilidad global
   ===================================================================== */

/* — Respetar preferencia de menos movimiento — */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* — Foco visible consistente en todo lo interactivo — */
.btn:focus-visible,
.filtro-btn:focus-visible,
.nav-links a:focus-visible,
.logo:focus-visible,
.sidebar-leccion:focus-visible{
  outline:2px solid var(--acento);
  outline-offset:2px;
  border-radius:var(--r-sm);
}