/* ==========================================================================
   Academia Fortaleza LMS — Frontend
   Paleta y tipografía heredadas del curso original; efectos "next-gen"
   agregados: glassmorphism, glow, borde con gradiente animado, grilla
   técnica, indicadores pulsantes, shine en botones.
   Todo scopeado bajo .af-scope para no chocar con el theme / Elementor.
   ========================================================================== */

.af-scope {
  --af-negro:#0a0c10; --af-acero:#111520; --af-grafito:#1c2030; --af-plomo:#2a3045;
  --af-dorado:#c9a84c; --af-dorado-cl:#e8c97a; --af-rojo:#c0392b; --af-rojo-cl:#e74c3c;
  --af-blanco:#f0f2f5; --af-gris-cl:#b8bcc8; --af-gris-md:#6b7280;
  --af-verde:#27ae60; --af-azul:#2980b9; --af-radio:6px; --af-sombra:0 8px 32px rgba(0,0,0,.6);
  font-family:'Source Serif 4', Georgia, serif;
  color: var(--af-blanco);
  background: var(--af-negro);
  line-height: 1.7;
  border-radius: 10px;
  position: relative;
  box-shadow: var(--af-sombra);
}
/* El login sí puede quedar contenido en una tarjeta redondeada,
   pero el visor del curso necesita overflow visible para que el
   nav de módulos quede sticky al hacer scroll de toda la página. */
.af-scope:has(.af-login-wrap) { overflow: hidden; }
.af-scope *, .af-scope *::before, .af-scope *::after { box-sizing: border-box; }
.af-scope h1, .af-scope h2, .af-scope h3, .af-scope h4 { font-family:'Oswald', sans-serif; margin: 0; }
.af-scope p { margin: 0; }
.af-scope ul { margin: 0; }

@keyframes af-fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes af-fadeSlideDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes af-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(39,174,96,.55)} 50%{box-shadow:0 0 0 6px rgba(39,174,96,0)} }
@keyframes af-shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes af-gradientMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes af-gridDrift { from{background-position:0 0} to{background-position:60px 60px} }

/* ── LOGIN ─────────────────────────────────────────────────────────── */
.af-login-wrap{
  position:relative; min-height:520px; display:flex; align-items:center; justify-content:center;
  padding:48px 20px; background:var(--af-negro); overflow:hidden;
}
.af-login-wrap::before{
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 44px,rgba(201,168,76,.05) 44px,rgba(201,168,76,.05) 45px),
    repeating-linear-gradient(90deg,transparent,transparent 44px,rgba(201,168,76,.05) 44px,rgba(201,168,76,.05) 45px);
  animation: af-gridDrift 14s linear infinite;
  pointer-events:none;
}
.af-login-glow{
  position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,168,76,.16) 0%, transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; filter:blur(4px);
}
.af-login-box{
  position:relative; z-index:1; width:100%; max-width:420px;
  background:rgba(28,32,48,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:2px; border-radius:12px;
  background-image:linear-gradient(rgba(28,32,48,.82),rgba(28,32,48,.82)),
                   linear-gradient(120deg, var(--af-dorado), rgba(201,168,76,.15) 30%, rgba(201,168,76,.15) 70%, var(--af-dorado));
  background-origin:border-box; background-clip:padding-box, border-box;
  border:1px solid transparent; background-size:100% 100%, 220% 220%;
  animation: af-fadeSlideDown .5s ease both, af-gradientMove 8s ease infinite;
}
.af-login-box{ padding:40px 34px; }
.af-badge{
  display:inline-block; font-family:'Roboto Mono',monospace; font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--af-dorado); border:1px solid var(--af-dorado); padding:5px 14px;
  border-radius:20px; margin-bottom:16px;
}
.af-login-box h2{ font-size:1.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--af-blanco); line-height:1.15; margin-bottom:10px; }
.af-login-sub{ color:var(--af-gris-cl); font-style:italic; font-size:.92rem; margin-bottom:26px; }
.af-login-error{
  background:rgba(192,57,43,.12); border:1px solid var(--af-rojo); color:#f1948a;
  font-family:'Roboto Mono',monospace; font-size:.78rem; padding:10px 14px; border-radius:var(--af-radio); margin-bottom:18px;
}
.af-form-group{ margin-bottom:16px; text-align:left; }
.af-form-group label{
  display:block; font-family:'Roboto Mono',monospace; font-size:.64rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--af-gris-md); margin-bottom:7px;
}
.af-form-group input{
  width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:var(--af-blanco);
  font-family:'Source Serif 4',serif; font-size:1rem; padding:12px 14px; border-radius:var(--af-radio);
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.af-form-group input:focus{ border-color:var(--af-dorado); box-shadow:0 0 0 3px rgba(201,168,76,.18); }
.af-btn-primary{
  width:100%; border:none; cursor:pointer; margin-top:6px; padding:14px; border-radius:var(--af-radio);
  font-family:'Oswald',sans-serif; font-weight:700; font-size:.95rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--af-negro); background:linear-gradient(120deg, var(--af-dorado-cl), var(--af-dorado), var(--af-dorado-cl));
  background-size:200% auto; transition:background-position .4s, transform .2s, box-shadow .2s;
}
.af-btn-primary:hover{ background-position:right center; transform:translateY(-1px); box-shadow:0 10px 24px rgba(201,168,76,.3); }

/* ── TOPBAR ────────────────────────────────────────────────────────── */
.af-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 20px;
  background:rgba(10,12,16,.9); backdrop-filter:blur(10px); border-bottom:1px solid rgba(201,168,76,.18);
  position:relative; z-index:9999; /* por encima de overlays sticky del theme en mobile */
}
.af-topbar-user{ display:flex; align-items:center; gap:9px; font-family:'Roboto Mono',monospace; font-size:.78rem; letter-spacing:.05em; color:var(--af-gris-cl); }
.af-dot-pulse{ width:8px; height:8px; border-radius:50%; background:var(--af-verde); animation: af-pulse 1.8s infinite; }
.af-logout-link{
  position:relative; z-index:9999; font-family:'Roboto Mono',monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--af-gris-md); text-decoration:none; border:1px solid rgba(255,255,255,.12); padding:8px 16px; border-radius:20px;
  transition:all .2s; touch-action:manipulation; -webkit-tap-highlight-color: rgba(201,168,76,.3); cursor:pointer;
}
.af-logout-link:hover{ color:var(--af-dorado); border-color:var(--af-dorado); }

/* ── PROGRESO ──────────────────────────────────────────────────────── */
.af-progress-wrap{ padding:16px 20px 4px; }
.af-progress-label{ font-family:'Roboto Mono',monospace; font-size:.64rem; letter-spacing:.1em; color:var(--af-gris-md); margin-bottom:8px; }
.af-progress-bar{ height:5px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden; }
.af-progress-fill{
  height:100%; border-radius:3px; width:0%; transition:width .6s ease;
  background:linear-gradient(90deg, var(--af-dorado), var(--af-dorado-cl), var(--af-dorado));
  background-size:200% 100%; animation: af-shimmer 3s linear infinite;
}

/* ── NAV TABS ──────────────────────────────────────────────────────── */
.af-course-nav{ position:sticky; top:0; z-index:20; background:rgba(10,12,16,.97); border-bottom:1px solid rgba(201,168,76,.15); }
.af-nav-tabs{ display:flex; overflow-x:auto; list-style:none; padding:0; margin:0; scrollbar-width:none; }
.af-nav-tabs::-webkit-scrollbar{ display:none; }
.af-nav-tab{
  flex-shrink:0; font-family:'Roboto Mono',monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--af-gris-md); cursor:pointer; padding:14px 16px; border-bottom:2px solid transparent; transition:all .2s; white-space:nowrap; user-select:none;
}
.af-nav-tab:hover:not(.locked){ color:var(--af-dorado-cl); }
.af-nav-tab.active{ color:var(--af-dorado); border-bottom-color:var(--af-dorado); }
.af-nav-tab.locked{ color:rgba(107,114,128,.4); cursor:not-allowed; }
.af-nav-tab.locked::after{ content:' 🔒'; font-size:.55rem; }
.af-nav-tab.completed{ color:var(--af-verde); }
.af-nav-tab.completed::after{ content:' ✓'; font-size:.6rem; color:var(--af-verde); }

/* ── MODULE PANELS ─────────────────────────────────────────────────── */
#af-course-body{ padding:28px 24px 40px; }
.af-module-panel{ display:none; animation: af-fadeIn .35s ease; }
.af-module-panel.active{ display:block; }

.af-module-banner{
  position:relative; background:var(--af-grafito); border:1px solid rgba(201,168,76,.2); padding:32px 28px;
  margin-bottom:28px; overflow:hidden; border-radius:8px;
}
.af-module-banner::before{
  content: attr(data-num); position:absolute; right:-6px; top:-14px; font-family:'Oswald',sans-serif; font-size:6.5rem;
  font-weight:700; color:rgba(201,168,76,.07); line-height:1; pointer-events:none; user-select:none;
}
.af-module-num{ font-family:'Roboto Mono',monospace; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--af-dorado); margin-bottom:8px; }
.af-module-title{ font-size:1.5rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; line-height:1.15; margin-bottom:10px; }
.af-module-tagline{ font-style:italic; color:var(--af-gris-cl); font-size:.98rem; max-width:600px; }
.af-module-philosophy{
  background:linear-gradient(135deg, rgba(201,168,76,.09), rgba(201,168,76,.03)); border-left:3px solid var(--af-dorado);
  padding:16px 20px; margin-bottom:26px; font-style:italic; color:var(--af-dorado-cl); font-size:.95rem; border-radius:0 6px 6px 0;
}

/* Contenido teórico — clases originales del curso, ahora scopeadas */
.af-module-theory .content-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:28px; }
@media(max-width:680px){ .af-module-theory .content-grid{ grid-template-columns:1fr; } }
.af-module-theory .card{ background:var(--af-grafito); border:1px solid rgba(255,255,255,.06); padding:22px; border-radius:8px; transition:border-color .2s, transform .2s; }
.af-module-theory .card:hover{ border-color:rgba(201,168,76,.28); transform:translateY(-1px); }
.af-module-theory .card h4{ font-family:'Oswald',sans-serif; font-weight:600; font-size:1rem; text-transform:uppercase; letter-spacing:.06em; color:var(--af-dorado); margin-bottom:10px; display:flex; align-items:center; gap:9px; }
.af-module-theory .card h4 .icon{ width:26px; height:26px; background:rgba(201,168,76,.12); display:flex; align-items:center; justify-content:center; font-size:.8rem; border-radius:5px; flex-shrink:0; }
.af-module-theory .card p, .af-module-theory .card li{ color:var(--af-gris-cl); font-size:.92rem; }
.af-module-theory .card ul{ padding-left:15px; }
.af-module-theory .card ul li{ margin-bottom:5px; }

.af-module-theory .topics-section{ margin-bottom:28px; }
.af-module-theory .topics-section h3{ font-size:1.02rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--af-blanco); margin-bottom:14px; padding-bottom:7px; border-bottom:1px solid rgba(201,168,76,.2); }
.af-module-theory .topic-item{ display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.af-module-theory .topic-item:last-child{ border-bottom:none; }
.af-module-theory .topic-dot{ width:6px; height:6px; border-radius:50%; background:var(--af-dorado); margin-top:8px; flex-shrink:0; box-shadow:0 0 6px rgba(201,168,76,.6); }
.af-module-theory .topic-text{ color:var(--af-gris-cl); font-size:.92rem; }
.af-module-theory .topic-text strong{ color:var(--af-blanco); font-weight:600; font-style:normal; }

.af-module-theory .checklist{ background:var(--af-grafito); border:1px solid rgba(255,255,255,.06); padding:22px; margin-bottom:24px; border-radius:8px; }
.af-module-theory .checklist h4{ font-size:.95rem; text-transform:uppercase; letter-spacing:.1em; color:var(--af-dorado); margin-bottom:16px; }
.af-module-theory .checklist-item{ display:flex; align-items:flex-start; gap:11px; margin-bottom:11px; cursor:pointer; }
.af-module-theory .chk-box{ width:17px; height:17px; border:1.5px solid var(--af-gris-md); flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; transition:all .2s; font-size:.68rem; border-radius:3px; }
.af-module-theory .checklist-item.done .chk-box{ border-color:var(--af-verde); background:var(--af-verde); color:#fff; }
.af-module-theory .checklist-item.done .chk-label{ text-decoration:line-through; color:var(--af-gris-md); }
.af-module-theory .chk-label{ color:var(--af-gris-cl); font-size:.9rem; }

.af-module-theory .case-study{ background:linear-gradient(135deg, rgba(192,57,43,.08), rgba(192,57,43,.03)); border:1px solid rgba(192,57,43,.3); padding:22px 24px; margin-bottom:24px; position:relative; border-radius:8px; }
.af-module-theory .case-study::before{ content:'CASO REAL'; position:absolute; top:-1px; right:16px; background:var(--af-rojo); color:#fff; font-family:'Roboto Mono',monospace; font-size:.58rem; letter-spacing:.18em; padding:3px 9px; border-radius:0 0 4px 4px; }
.af-module-theory .case-study h4{ font-size:1.02rem; color:var(--af-rojo-cl); margin-bottom:10px; text-transform:uppercase; letter-spacing:.05em; }
.af-module-theory .case-study p{ color:var(--af-gris-cl); font-size:.92rem; margin-bottom:8px; }

.af-module-theory .alert{ padding:15px 18px; margin-bottom:20px; display:flex; gap:12px; align-items:flex-start; font-size:.9rem; border-radius:6px; }
.af-module-theory .alert-icon{ font-size:1.1rem; flex-shrink:0; }
.af-module-theory .alert-text{ color:var(--af-gris-cl); }
.af-module-theory .alert-text strong{ color:var(--af-blanco); }
.af-module-theory .alert-warning{ background:rgba(201,168,76,.08); border-left:3px solid var(--af-dorado); }
.af-module-theory .alert-danger{ background:rgba(192,57,43,.08); border-left:3px solid var(--af-rojo); }
.af-module-theory .alert-info{ background:rgba(41,128,185,.08); border-left:3px solid var(--af-azul); }
.af-module-theory .alert-success{ background:rgba(39,174,96,.08); border-left:3px solid var(--af-verde); }

.af-module-theory .data-table{ width:100%; border-collapse:collapse; margin-bottom:24px; font-size:.85rem; }
.af-module-theory .data-table th{ background:var(--af-plomo); color:var(--af-dorado); font-family:'Roboto Mono',monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:10px 12px; text-align:left; border-bottom:2px solid rgba(201,168,76,.3); }
.af-module-theory .data-table td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.05); color:var(--af-gris-cl); vertical-align:top; }
.af-module-theory .data-table tr:hover td{ background:rgba(255,255,255,.02); }

/* ── QUIZ ──────────────────────────────────────────────────────────── */
.af-quiz-section{ background:var(--af-acero); border:1px solid rgba(201,168,76,.2); padding:26px; margin-top:30px; border-radius:8px; }
.af-quiz-section h3{ font-size:1.15rem; text-transform:uppercase; letter-spacing:.08em; color:var(--af-dorado); margin-bottom:20px; }
.af-quiz-q{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.06); }
.af-quiz-q:last-of-type{ border-bottom:none; }
.af-quiz-q p{ font-weight:600; color:var(--af-blanco); font-size:.94rem; margin-bottom:12px; }
.af-quiz-options{ display:flex; flex-direction:column; gap:7px; }
.af-quiz-opt{ display:flex; align-items:center; gap:9px; padding:10px 13px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); cursor:pointer; transition:all .2s; color:var(--af-gris-cl); font-size:.9rem; border-radius:var(--af-radio); }
.af-quiz-opt:hover{ background:rgba(201,168,76,.08); border-color:rgba(201,168,76,.2); }
.af-quiz-opt.selected{ border-color:var(--af-dorado); background:rgba(201,168,76,.1); }
.af-quiz-opt.correct{ background:rgba(39,174,96,.14); border-color:var(--af-verde); color:var(--af-blanco); }
.af-quiz-opt.wrong{ background:rgba(192,57,43,.14); border-color:var(--af-rojo); color:var(--af-blanco); }
.af-quiz-opt-label{ font-family:'Roboto Mono',monospace; font-size:.68rem; color:var(--af-dorado); min-width:18px; }
.af-quiz-btn{
  border:none; cursor:pointer; margin-top:14px; padding:11px 30px; border-radius:var(--af-radio);
  font-family:'Oswald',sans-serif; font-weight:600; font-size:.86rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--af-negro); background:linear-gradient(120deg, var(--af-dorado), var(--af-dorado-cl));
  transition:transform .2s, box-shadow .2s;
}
.af-quiz-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(201,168,76,.28); }
.af-quiz-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.af-quiz-result{ margin-top:14px; padding:13px 16px; font-family:'Roboto Mono',monospace; font-size:.82rem; display:none; border-radius:6px; }
.af-quiz-result.show{ display:block; animation: af-fadeIn .3s ease; }
.af-quiz-result.pass{ background:rgba(39,174,96,.1); border:1px solid var(--af-verde); color:var(--af-verde); }
.af-quiz-result.fail{ background:rgba(192,57,43,.1); border:1px solid var(--af-rojo); color:var(--af-rojo-cl); }

/* ── CERTIFICADO ───────────────────────────────────────────────────── */
.af-cert-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.95); z-index:9998; display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(10px); }
.af-cert-overlay.show{ display:flex; }
.af-cert-box{ background:var(--af-grafito); border:2px solid var(--af-dorado); padding:44px 36px; max-width:520px; width:100%; text-align:center; position:relative; border-radius:10px; animation: af-fadeSlideDown .5s ease both; }
.af-cert-icon{ font-size:2.8rem; margin-bottom:14px; }
.af-cert-box h2{ font-size:1.5rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--af-dorado); margin-bottom:8px; }
.af-cert-name{ font-family:'Source Serif 4',serif; font-style:italic; font-size:1.3rem; color:var(--af-blanco); margin:10px 0 4px; }
.af-cert-box p{ color:var(--af-gris-cl); font-size:.88rem; margin-bottom:8px; }
.af-cert-status{ font-family:'Roboto Mono',monospace; font-size:.68rem; letter-spacing:.1em; margin-top:18px; padding:10px; border:1px solid rgba(39,174,96,.3); background:rgba(39,174,96,.08); color:var(--af-verde); border-radius:6px; }
.af-btn-cert-close{ display:inline-block; margin-top:18px; background:transparent; border:1px solid var(--af-dorado); color:var(--af-dorado); font-family:'Roboto Mono',monospace; font-size:.68rem; letter-spacing:.12em; padding:10px 26px; cursor:pointer; text-transform:uppercase; border-radius:20px; transition:all .2s; }
.af-btn-cert-close:hover{ background:var(--af-dorado); color:var(--af-negro); }

/* ── TOAST ─────────────────────────────────────────────────────────── */
.af-toast{ position:fixed; bottom:26px; right:22px; background:var(--af-grafito); border:1px solid var(--af-verde); color:var(--af-verde); font-family:'Roboto Mono',monospace; font-size:.76rem; letter-spacing:.05em; padding:13px 18px; z-index:9000; display:none; max-width:300px; box-shadow:var(--af-sombra); border-radius:8px; }
.af-toast.show{ display:block; animation: af-fadeSlideDown .3s ease; }
.af-toast.warn{ border-color:var(--af-dorado); color:var(--af-dorado); }

@media(max-width:600px){
  #af-course-body{ padding:20px 14px 32px; }
  .af-module-banner{ padding:22px 18px; }
  .af-quiz-section, .af-module-theory .card, .af-module-theory .checklist, .af-module-theory .case-study{ padding:18px 15px; }
  .af-login-box{ padding:28px 22px; }
}