/* =====================================================================
   CertInvest F3 PRO — ESTILOS ADITIVOS (no modifica dashboard.css)
   Cambios: efecto gradiente, términos, contador chat, notas por módulo,
   calculadora, grupos. Todas las clases usan prefijos propios.
   ===================================================================== */

/* ---------- EFECTO BackgroundGradientAnimation (CSS puro) ---------- */
.bg-gradient-anim{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.bg-gradient-anim .bg-blob{position:absolute;border-radius:50%;filter:blur(64px);opacity:.55;mix-blend-mode:screen;will-change:transform}
.bg-gradient-anim .bg-blob.b1{width:52%;height:52%;top:8%;left:2%;background:radial-gradient(circle at center,rgba(37,99,235,.9),transparent 60%);animation:bgBlob1 18s ease-in-out infinite}
.bg-gradient-anim .bg-blob.b2{width:46%;height:46%;top:38%;left:48%;background:radial-gradient(circle at center,rgba(10,132,255,.85),transparent 60%);animation:bgBlob2 22s ease-in-out infinite}
.bg-gradient-anim .bg-blob.b3{width:42%;height:42%;top:52%;left:8%;background:radial-gradient(circle at center,rgba(99,102,241,.8),transparent 60%);animation:bgBlob3 26s ease-in-out infinite}
.bg-gradient-anim .bg-blob.b4{width:38%;height:38%;top:4%;left:54%;background:radial-gradient(circle at center,rgba(14,165,233,.75),transparent 60%);animation:bgBlob4 20s ease-in-out infinite}
.bg-gradient-anim .bg-blob.b5{width:34%;height:34%;top:30%;left:25%;background:radial-gradient(circle at center,rgba(56,189,248,.7),transparent 60%);animation:bgBlob5 24s ease-in-out infinite}
@keyframes bgBlob1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(22%,16%) scale(1.18)}}
@keyframes bgBlob2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-18%,-12%) scale(.9)}}
@keyframes bgBlob3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(16%,-18%) scale(1.22)}}
@keyframes bgBlob4{0%,100%{transform:translate(0,0) scale(.95)}50%{transform:translate(-20%,18%) scale(1.1)}}
@keyframes bgBlob5{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-14%,-20%) scale(1.15)}}
@media (prefers-reduced-motion: reduce){.bg-gradient-anim .bg-blob{animation:none}}

/* ---------- TÉRMINOS Y CONDICIONES (modal de primer ingreso) ---------- */
.tc-overlay{position:fixed;inset:0;z-index:12000;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(7,21,45,.75);backdrop-filter:blur(6px)}
.tc-overlay.on{display:flex}
.tc-modal{position:relative;width:100%;max-width:640px;max-height:90vh;display:flex;flex-direction:column;
  background:#fff;border-radius:22px;box-shadow:0 32px 80px rgba(15,23,42,.35);overflow:hidden}
.tc-head{padding:26px 30px 18px;border-bottom:1px solid #E8EDF5;background:linear-gradient(135deg,#07152D,#0B2A55);color:#fff}
.tc-head h2{font-size:22px;font-weight:900;margin:0 0 4px;letter-spacing:-.3px}
.tc-head p{font-size:13px;color:#C7DAF5;margin:0}
.tc-body{padding:22px 30px;overflow-y:auto;flex:1}
.tc-body h3{font-size:15px;font-weight:800;color:#0F172A;margin:18px 0 8px}
.tc-body h3:first-child{margin-top:0}
.tc-body p,.tc-body li{font-size:13.5px;line-height:1.65;color:#475569}
.tc-body ul{padding-left:20px;margin:6px 0}
.tc-foot{padding:18px 30px 24px;border-top:1px solid #E8EDF5;background:#F8FAFC}
.tc-check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:#0F172A;font-weight:700;cursor:pointer;margin-bottom:14px;line-height:1.5}
.tc-check input{width:20px;height:20px;accent-color:#2563EB;flex-shrink:0;margin-top:1px}
.tc-accept-btn{width:100%;height:52px;border:0;border-radius:12px;font:800 15px var(--font,'Plus Jakarta Sans',sans-serif);color:#fff;
  background:linear-gradient(135deg,#061226,#0B2A55);cursor:pointer;transition:.18s}
.tc-accept-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 32px rgba(7,21,45,.25)}
.tc-accept-btn:disabled{opacity:.5;cursor:not-allowed}


/* ---------- NOTAS POR MÓDULO ---------- */
.mnote-group{margin-bottom:24px}
.mnote-group-title{font-size:15px;font-weight:900;color:#0F172A;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.mnote-group-title .mnote-pill{font-size:11px;font-weight:800;color:#2563EB;background:#EFF6FF;border:1px solid #BFDBFE;border-radius:999px;padding:3px 10px}
.mnote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.mnote-card{background:#fff;border:1px solid #E8EDF5;border-radius:14px;padding:16px;box-shadow:0 4px 12px rgba(15,23,42,.04)}
.mnote-card .mnote-lesson{font-size:12px;font-weight:800;color:#2563EB;margin-bottom:6px}
.mnote-card .mnote-content{font-size:13.5px;color:#334155;line-height:1.55;white-space:pre-wrap}
.mnote-card .mnote-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:11px;color:#94A3B8;font-weight:600}
.mnote-card .mnote-del{background:#FEF2F2;color:#B91C1C;border:0;border-radius:8px;padding:6px 9px;font-size:11px;font-weight:800;cursor:pointer}
.mnote-empty{border:1.5px dashed #DDE5F0;border-radius:14px;padding:28px;text-align:center;color:#94A3B8;font-size:13px}

/* Nota enriquecida: muestra la diapositiva de origen + la nota del usuario */
.mnote-card-rich{display:flex;flex-direction:column;padding:0;overflow:hidden}
.mnote-origin{display:flex;gap:12px;padding:14px;cursor:pointer;border-bottom:1px solid #EEF2F7;transition:background .15s}
.mnote-origin:hover{background:#F8FAFC}
.mnote-thumb{position:relative;width:88px;height:62px;flex-shrink:0;border-radius:10px;overflow:hidden;background:#E2E8F0;box-shadow:0 2px 6px rgba(15,23,42,.08)}
.mnote-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mnote-thumb-open{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.55);color:#fff;font-size:11px;font-weight:800;opacity:0;transition:opacity .15s}
.mnote-origin:hover .mnote-thumb-open{opacity:1}
.mnote-origin-text{min-width:0;flex:1}
.mnote-origin-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#94A3B8;margin-bottom:3px}
.mnote-slide-title{font-size:13.5px;font-weight:800;color:#0F172A;margin-bottom:4px;line-height:1.3}
.mnote-slide-preview{font-size:12px;color:#64748B;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mnote-mine{padding:12px 14px 4px}
.mnote-mine-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#2563EB;margin-bottom:4px}
.mnote-card-rich .mnote-content{font-size:13.5px;color:#334155;line-height:1.55;white-space:pre-wrap}
.mnote-card-rich .mnote-meta{padding:8px 14px 12px;margin-top:0}

/* Botón "Agregar Nota" — vive en la barra de acciones, igual en TODAS las diapositivas */
.slide-addnote-btn{display:inline-flex;align-items:center;gap:7px;background:#EFF6FF;color:#2563EB;border:1px solid #BFDBFE;
  border-radius:10px;padding:11px 16px;font:800 12.5px var(--font,'Plus Jakarta Sans',sans-serif);cursor:pointer;transition:.18s}
.slide-addnote-btn:hover{background:#2563EB;color:#fff}

/* Diapositivas uniformes: el contenido crece y la barra de acciones queda fija abajo.
   El botón de notas nunca altera la altura ni la distribución del contenido. */
.learning-content-panel .slide-actions{justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.slide-actions .slide-actions-nav{display:flex;gap:12px;margin-left:auto}
.slide-actions .slide-addnote-btn{margin-top:0}

/* La diapositiva cabe en pantalla: contenido centrado, sin scroll de página.
   Solo el área de contenido hace scroll interno si una diapositiva es muy larga. */
#learningView .learning-shell{height:calc(100vh - 140px);max-height:calc(100vh - 140px);min-height:460px;display:flex;flex-direction:column}
#learningView .learning-workspace-split{flex:1 1 auto;min-height:0;overflow:hidden}
#learningView .learning-sidebar{max-height:none;height:100%;overflow-y:auto}
#learningView .learning-content-panel{min-height:0;height:100%}
#learningView .slide-main{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:28px 56px}
#learningView .slide-inner{margin:auto;width:100%;max-width:980px}
#learningView .slide-main.pdf-slide-mode{padding:16px 28px}
#learningView .slide-main.pdf-slide-mode .slide-inner{max-width:100%;display:flex;flex-direction:column;flex:1;justify-content:center}
#learningView .slide-actions{flex-shrink:0}

@media(max-width:900px){
  #learningView .learning-shell{height:auto;max-height:none}
  #learningView .learning-workspace-split{overflow:visible}
  #learningView .slide-main{overflow:visible;padding:24px 22px}
  /* Barra superior de la lección: se acomoda en varias líneas en celular. */
  #learningView .learning-top{flex-wrap:wrap;gap:10px 12px;padding:14px 16px}
  #learningView .learning-title h2{font-size:18px}
  #learningView .back-btn{padding:9px 14px;font-size:13px}
}
@media(max-width:600px){
  /* Tipografía de diapositiva ajustada al ancho del teléfono (vence a los estilos en línea). */
  #learningView .slide-main{padding:20px 16px}
  #learningView .slide-title{font-size:22px !important;margin-bottom:16px !important;letter-spacing:-.3px !important}
  #learningView .slide-text,
  #learningView .slide-text-side,
  #learningView .slide-layout-columns .col{font-size:16px !important;line-height:1.7 !important}
  #learningView .slide-layout-hero h1{font-size:28px}
  #learningView .slide-layout-hero p{font-size:16px}
  #learningView .slide-layout-hero{min-height:240px;padding:24px}
  /* Quiz como diapositiva propia: recuadro cómodo en celular. */
  #learningView .quiz-box{padding:20px !important}
  #learningView .quiz-slide strong{font-size:17px !important}
  #learningView .quiz-option{padding:14px 14px;font-size:15px}
  /* La imagen de una diapositiva no se desborda. */
  #learningView .slide-media-side img{max-height:220px}
}
@media(max-width:560px){
  .learning-content-panel .slide-actions{flex-direction:column;align-items:stretch;padding:14px 16px}
  .slide-actions .slide-actions-nav{margin-left:0;justify-content:stretch;gap:10px}
  .slide-actions .slide-actions-nav .slide-btn{flex:1}
  .slide-actions .slide-addnote-btn{justify-content:center;order:2}
  #learningView .learning-title span{font-size:11px}
}

/* Modal para escribir una nota desde el slide */
.mnote-overlay{position:fixed;inset:0;z-index:13000;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(15,23,42,.6);backdrop-filter:blur(4px)}
.mnote-overlay.on{display:flex}
.mnote-overlay .mnote-modal *{pointer-events:auto}
.mnote-modal{width:100%;max-width:480px;max-height:90vh;display:flex;flex-direction:column;background:#fff;border-radius:18px;box-shadow:0 28px 64px rgba(15,23,42,.25);overflow:hidden}
.mnote-modal-h{padding:20px 24px;border-bottom:1px solid #E8EDF5;flex-shrink:0}
.mnote-modal-h strong{font-size:17px;font-weight:900;color:#0F172A}
.mnote-modal-h span{display:block;font-size:12px;color:#64748B;margin-top:3px}
.mnote-modal-b{padding:20px 24px;overflow-y:auto;flex:1}
.mnote-modal-b textarea{width:100%;min-height:140px;border:1px solid #DDE5F0;border-radius:12px;padding:14px;
  font:14px var(--font,'Plus Jakarta Sans',sans-serif);resize:vertical;color:#334155;background:#F8FAFC}
.mnote-modal-f{display:flex;gap:10px;justify-content:flex-end;padding:16px 24px 22px;flex-shrink:0;border-top:1px solid #F1F5F9}

/* ---------- CALCULADORA FINANCIERA (reusa estilo de módulos) ---------- */
.calc-resources{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:8px}
.calc-res-card{background:#fff;border:1px solid #E8EDF5;border-radius:16px;padding:22px;box-shadow:0 8px 24px rgba(15,23,42,.045)}
.calc-res-card .calc-res-ico{width:46px;height:46px;border-radius:13px;background:#EFF6FF;color:#2563EB;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.calc-res-card .calc-res-img{width:100%;height:140px;object-fit:cover;border-radius:12px;display:block;margin-bottom:14px;background:#E2E8F0}
.calc-res-card[data-url]:hover{border-color:#C7D7F0;box-shadow:0 14px 32px rgba(15,23,42,.10);transform:translateY(-3px);transition:all .2s}
.calc-res-card h3{font-size:15px;font-weight:800;margin:0 0 6px;color:#0F172A}
.calc-res-card p{font-size:13px;color:#64748B;line-height:1.5;margin:0}
.calc-res-card .calc-tag{display:inline-block;margin-top:12px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;color:#94A3B8;background:#F1F5F9;border-radius:999px;padding:5px 10px}

/* ---------- AVATAR CON ESTADO (componente reusable) ---------- */
.av{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;
  background:linear-gradient(135deg,#2563EB,#0B2A55);color:#fff;font-weight:800;flex-shrink:0;line-height:1;overflow:visible}
.av img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.av-sm{width:34px;height:34px;font-size:12px;border-radius:10px}
.av-md{width:42px;height:42px;font-size:15px;border-radius:12px}
.av-lg{width:56px;height:56px;font-size:20px;border-radius:14px}
.av-dot{position:absolute;bottom:-2px;right:-2px;width:11px;height:11px;border-radius:50%;border:2px solid #fff;box-sizing:content-box}
.av-dot.active{background:#10B981}
.av-dot.inactive{background:#F87171}   /* rojo suave */
.av-dot.pending{background:#F59E0B}
.av-wrap{display:inline-flex;align-items:center;gap:10px}
.av-status-txt{font-size:12px;font-weight:800;white-space:nowrap}
.av-status-txt.active{color:#047857}
.av-status-txt.inactive{color:#B91C1C}
.av-status-txt.pending{color:#B45309}
/* punto sobre avatares ya existentes (header / perfil / expediente) */
.hdr-avatar,#settingsAvatar,#detailAvatar{position:relative;overflow:visible}
.av-dot-attach{position:absolute;bottom:-2px;right:-2px;width:11px;height:11px;border-radius:50%;border:2px solid #fff;box-sizing:content-box;background:#10B981}
.av-dot-attach.inactive{background:#F87171}
.av-dot-attach.pending{background:#F59E0B}
/* en móvil, resumir el estado al punto (sin texto, evita scroll horizontal) */
@media(max-width:560px){.av-status-txt{display:none}}

/* ---------- HERO GEOMÉTRICO (inicio admin) ---------- */
.hero-geo{position:relative;overflow:hidden;border-radius:24px;background:#030303;padding:56px 44px;margin-bottom:32px;min-height:230px;display:flex;align-items:center}
.hero-geo::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom right,rgba(99,102,241,.06),transparent 50%,rgba(244,63,94,.06));filter:blur(40px)}
.hero-geo::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,#030303,transparent 45%,rgba(3,3,3,.85));pointer-events:none}
.geo-shape{position:absolute;border-radius:999px;border:2px solid rgba(255,255,255,.15);backdrop-filter:blur(2px);box-shadow:0 8px 32px rgba(255,255,255,.10);animation:geoFloat 12s ease-in-out infinite}
.geo-shape::after{content:'';position:absolute;inset:0;border-radius:999px;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.2),transparent 70%)}
.geo-shape.s1{--r:12deg;width:600px;height:130px;left:-8%;top:14%;background:linear-gradient(to right,rgba(99,102,241,.18),transparent);animation-delay:.3s}
.geo-shape.s2{--r:-15deg;width:440px;height:110px;right:-4%;top:62%;background:linear-gradient(to right,rgba(244,63,94,.18),transparent);animation-delay:.5s}
.geo-shape.s3{--r:-8deg;width:260px;height:74px;left:6%;bottom:2%;background:linear-gradient(to right,rgba(139,92,246,.18),transparent);animation-delay:.4s}
.geo-shape.s4{--r:20deg;width:180px;height:54px;right:18%;top:8%;background:linear-gradient(to right,rgba(245,158,11,.18),transparent);animation-delay:.6s}
.geo-shape.s5{--r:-25deg;width:130px;height:38px;left:24%;top:6%;background:linear-gradient(to right,rgba(6,182,212,.18),transparent);animation-delay:.7s}
@keyframes geoFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(15px) rotate(var(--r,0deg))}}
.hero-geo-inner{position:relative;z-index:2;max-width:640px;animation:geoFadeUp .9s ease both}
@keyframes geoFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hero-geo-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.6);font-size:13px;font-weight:700;margin-bottom:18px}
.geo-dot{width:8px;height:8px;border-radius:50%;background:rgba(244,63,94,.8)}
.hero-geo-title{font-size:40px;line-height:1.08;font-weight:900;letter-spacing:-1px;margin:0 0 14px}
.hero-geo-title .t1{background:linear-gradient(to bottom,#fff,rgba(255,255,255,.8));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-geo-title .t2{background:linear-gradient(to right,#a5b4fc,rgba(255,255,255,.9),#fda4af);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-geo-sub{color:rgba(255,255,255,.42);font-size:15px;line-height:1.6;margin:0;font-weight:300;max-width:520px}
@media(max-width:768px){.hero-geo{padding:38px 24px;min-height:0}.hero-geo-title{font-size:28px}}
@media (prefers-reduced-motion: reduce){.geo-shape{animation:none}.hero-geo-inner{animation:none}}

/* ---------- TESTIMONIOS (stack arrastrable) ---------- */
.tstack{position:relative;max-width:640px;margin:48px auto 0}
.tstack-cards{position:relative;height:300px}
.tstack-card{position:absolute;inset:0;background:rgba(255,255,255,.92);border:1.5px solid #E8EDF5;border-radius:24px;padding:32px;box-shadow:0 18px 50px rgba(15,23,42,.12);backdrop-filter:blur(12px);text-align:left;cursor:grab;user-select:none;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .45s;will-change:transform}
.tstack-card.is-dragging{transition:none;cursor:grabbing}
.tstack-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.tstack-avatar{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;flex-shrink:0}
.tstack-name{font-size:17px;font-weight:800;color:#0F172A;margin:0}
.tstack-role{font-size:13px;color:#64748B;margin:2px 0 0}
.tstack-quote{font-size:16.5px;line-height:1.6;color:#334155;margin:0 0 18px;font-style:italic}
.tstack-foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;border-top:1px solid #E8EDF5;padding-top:16px}
.tstack-tags{display:flex;gap:8px;flex-wrap:wrap}
.tstack-tag{font-size:11px;font-weight:800;padding:4px 10px;border-radius:7px;background:#F1F5F9;color:#475569}
.tstack-tag.featured{background:rgba(37,99,235,.12);color:#2563EB;border:1px solid rgba(37,99,235,.25)}
.tstack-stats{display:flex;gap:14px;font-size:12px;color:#64748B;font-weight:700}
.tstack-dots{display:flex;gap:8px;justify-content:center;margin-top:26px}
.tstack-dot{width:8px;height:8px;border-radius:50%;background:#CBD5E1;border:0;cursor:pointer;transition:.2s;padding:0}
.tstack-dot.active{background:#2563EB;width:24px;border-radius:4px}
.tstack-hint{text-align:center;font-size:12px;color:#94A3B8;margin-top:12px}
@media(max-width:560px){.tstack-cards{height:340px}.tstack-card{padding:24px}}

/* ---------- DOCK (botones de acceso rápido) ---------- */
.dock-wrap{display:flex;justify-content:center;width:100%;margin-bottom:24px}
.dock{display:flex;align-items:flex-end;gap:16px;padding:12px 16px;border-radius:24px;border:1px solid #E8EDF5;background:rgba(255,255,255,.7);backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(15,23,42,.10);transform:perspective(600px) rotateX(10deg);animation:dockFloat 8s ease-in-out infinite}
@keyframes dockFloat{0%,100%{transform:perspective(600px) rotateX(10deg) translateY(0)}50%{transform:perspective(600px) rotateX(10deg) translateY(-3px)}}
.dock-item{position:relative;width:52px;height:52px;border:0;border-radius:16px;background:#F8FAFC;color:#475569;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .18s,color .18s,box-shadow .18s}
.dock-item svg{width:24px;height:24px;stroke:currentColor}
.dock-item:hover{transform:translateY(-8px) scale(1.18) rotate(-5deg);background:#EFF6FF;color:#2563EB;box-shadow:0 12px 24px rgba(37,99,235,.18)}
.dock-item::after{content:attr(data-label);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);background:#0F172A;color:#fff;font-size:11px;font-weight:700;white-space:nowrap;padding:5px 9px;border-radius:7px;opacity:0;pointer-events:none;transition:.15s;z-index:5}
.dock-item:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.dock-item.on{color:#2563EB;background:#EFF6FF}
.dock-dot{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#2563EB;opacity:0;transition:.15s}
.dock-item.on .dock-dot{opacity:1}
@media(max-width:560px){.dock{gap:8px;padding:10px 12px}.dock-item{width:46px;height:46px}}
@media (prefers-reduced-motion: reduce){.dock{animation:none}}

/* ---------- PESTAÑAS (componente reusable) ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid #E8EDF5;margin-bottom:20px;flex-wrap:wrap}
.tab-btn{background:transparent;border:0;border-bottom:2px solid transparent;padding:12px 18px;font:800 14px var(--font,'Plus Jakarta Sans',sans-serif);color:#64748B;cursor:pointer;transition:.15s;margin-bottom:-1px}
.tab-btn:hover{color:#2563EB}
.tab-btn.on{color:#2563EB;border-bottom-color:#2563EB}
.tab-panel{display:none}
.tab-panel.on{display:block}

/* ---------- PERSONALIZACIÓN DE COLOR DE AVATAR (Configuración) ---------- */
.av-swatches{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.av-swatch{width:42px;height:42px;border-radius:12px;border:2px solid transparent;cursor:pointer;transition:.15s;position:relative;padding:0}
.av-swatch:hover{transform:translateY(-2px)}
.av-swatch.on{border-color:#0F172A;box-shadow:0 0 0 3px rgba(15,23,42,.12)}
.av-swatch.on::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.av-reset{background:#F1F5F9;border:1px solid #E2E8F0;color:#475569;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:800;cursor:pointer}
.av-reset:hover{background:#E2E8F0}

/* =========================================================
   TARJETAS PREMIUM (estilo Coursera / Udemy / LinkedIn Learning)
   Mismo diseño para MÓDULOS (#moduleCards) y EXÁMENES (#examCards).
   ========================================================= */
#moduleCards, #examCards{align-items:stretch}
#moduleCards .mod-card, #examCards .mod-card{display:flex;flex-direction:column;height:100%;padding:0;overflow:hidden;text-align:left;
  background:#fff;border:1px solid #E8EDF5;border-radius:18px;box-shadow:0 6px 18px rgba(15,23,42,.05);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;cursor:pointer;min-height:0}
#moduleCards .mod-card:hover, #examCards .mod-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,23,42,.13);border-color:#C7D7F0}
#moduleCards .mod-card:focus-visible, #examCards .mod-card:focus-visible{outline:none;border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.18)}
#moduleCards .mod-card.done, #examCards .mod-card.done{border-color:#BBF7D0}
#moduleCards .mod-card.fail, #examCards .mod-card.fail{border-color:#FECACA}

/* Portada con altura fija e idéntica en todas las tarjetas */
.mc-cover-wrap{position:relative;width:100%;height:152px;flex-shrink:0;background:#E2E8F0;overflow:hidden}
.mc-cover{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
#moduleCards .mod-card:hover .mc-cover, #examCards .mod-card:hover .mc-cover{transform:scale(1.05)}
.mc-cover-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.30),transparent 55%);pointer-events:none}
.mc-badge{position:absolute;left:12px;bottom:12px;z-index:1;font-size:11px;font-weight:800;padding:5px 11px;border-radius:999px;
  letter-spacing:.2px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(15,23,42,.18)}
.mc-badge-pending{background:rgba(255,255,255,.94);color:#475569}
.mc-badge-progress{background:rgba(37,99,235,.96);color:#fff}
.mc-badge-done{background:rgba(16,185,129,.97);color:#fff}
.mc-badge-fail{background:rgba(220,38,38,.96);color:#fff}

/* Cuerpo: flex en columna; el pie se ancla abajo => todas las tarjetas igualan altura */
.mc-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.mc-kicker{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#2563EB;margin-bottom:7px}
.mc-title{font-size:16px;font-weight:800;color:#0F172A;line-height:1.3;margin:0 0 12px;min-height:42px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-stats{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px}
.mc-stat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#64748B}
.mc-stat svg{width:14px;height:14px;stroke:#94A3B8;flex-shrink:0}
.mc-progress{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.mc-bar{flex:1;height:6px;background:#EDF1F7;border-radius:999px;overflow:hidden}
.mc-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#2563EB,#10B981);transition:width .6s ease}
.mod-card.pending .mc-fill{background:#CBD5E1}
.mod-card.done .mc-fill{background:linear-gradient(90deg,#10B981,#059669)}
.mod-card.fail .mc-fill{background:linear-gradient(90deg,#EF4444,#DC2626)}
.mc-pct{font-size:12px;font-weight:800;color:#0F172A;min-width:34px;text-align:right}

/* Pie con botón a ancho completo y altura fija: nunca cambia el tamaño de la tarjeta */
.mc-foot{margin-top:auto;display:flex}
#moduleCards .btn-cert-get{width:100%;height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 14px;border-radius:11px;font-size:12.5px;font-weight:800;cursor:pointer;border:1px solid #FDE68A;
  background:#FEF9EC;color:#B45309;transition:transform .16s ease, box-shadow .16s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#moduleCards .btn-cert-get.earned{background:linear-gradient(135deg,#F59E0B,#D97706);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(245,158,11,.28)}
#moduleCards .btn-cert-get.earned:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(245,158,11,.34)}
#moduleCards .btn-cert-get.disabled{background:#F1F5F9;color:#94A3B8;border:1px dashed #CBD5E1;cursor:not-allowed}

/* Botón de acción primario (Comenzar / Repetir examen) en tarjetas de examen */
.mc-action{width:100%;height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 14px;border-radius:11px;font-size:12.5px;font-weight:800;cursor:pointer;border:0;
  background:var(--blue,#2563EB);color:#fff;transition:transform .16s ease, box-shadow .16s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-action:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(37,99,235,.28)}
.mc-action.retry{background:#fff;color:#2563EB;border:1px solid #BFDBFE}
.mc-action.retry:hover{background:#EFF6FF;box-shadow:none}

@media(max-width:560px){
  .mc-cover-wrap{height:140px}
  .mc-title{font-size:15px;min-height:0}
}

/* =========================================================
   VISTA DURANTE EL EXAMEN (premium, misma estética que módulos/slides)
   ========================================================= */
#examTaker{padding:0;overflow:hidden;border-radius:20px;box-shadow:0 10px 30px rgba(15,23,42,.045)}
.exam-runner{display:flex;flex-direction:column}
.exam-runner-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px;border-bottom:1.5px solid #F1F5F9}
.exam-runner-title h2{font-size:20px;font-weight:900;color:#0F172A;margin:0;letter-spacing:-.3px}
.exam-runner-title span{font-size:12.5px;color:#64748B;font-weight:700}
.exam-timer{display:inline-flex;align-items:center;gap:8px;background:#0F172A;color:#fff;border-radius:12px;padding:10px 16px;font-weight:900;font-size:15px;font-variant-numeric:tabular-nums;transition:background .2s}
.exam-timer svg{width:16px;height:16px;stroke:currentColor}
.exam-timer.warn{background:#B45309}
.exam-timer.urgent{background:#DC2626;animation:examPulse 1s ease-in-out infinite}
@keyframes examPulse{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion: reduce){.exam-timer.urgent{animation:none}}
.exam-progress{height:6px;background:#EDF1F7}
.exam-progress-fill{height:100%;background:linear-gradient(90deg,#2563EB,#10B981);transition:width .4s ease}
.exam-runner-body{padding:28px;background:#FBFCFE}
.exam-q-card{background:#fff;border:1px solid #E8EDF5;border-radius:16px;padding:26px 28px;box-shadow:0 4px 14px rgba(15,23,42,.04);max-width:820px;margin:0 auto}
.exam-q-cat{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#2563EB;background:#EFF6FF;border:1px solid #BFDBFE;border-radius:999px;padding:4px 11px;margin-bottom:14px}
.exam-q-text{font-size:21px;font-weight:800;color:#0F172A;line-height:1.4;margin:0 0 22px}
.exam-options{display:flex;flex-direction:column;gap:12px}
.exam-runner .answer-btn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1.5px solid #E5EAF2;background:#fff;border-radius:14px;padding:15px 18px;margin:0;font-size:15.5px;font-weight:700;color:#334155;cursor:pointer;transition:all .16s ease}
.exam-runner .answer-btn:hover{border-color:#2563EB;background:#F5F9FF;transform:translateY(-1px)}
.answer-letter{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:#F1F5F9;color:#64748B;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;transition:all .16s ease}
.exam-runner .answer-btn:hover .answer-letter{background:#DBEAFE;color:#2563EB}
.exam-runner .answer-btn.selected{border-color:#2563EB;background:#EFF6FF;box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.exam-runner .answer-btn.selected .answer-letter{background:#2563EB;color:#fff}
.exam-check{display:flex;align-items:center;gap:12px;border:1.5px solid #E5EAF2;border-radius:14px;padding:14px 18px;font-size:15.5px;font-weight:700;color:#334155;cursor:pointer;transition:.15s}
.exam-check:hover{border-color:#2563EB;background:#F5F9FF}
.exam-check input{width:18px;height:18px;accent-color:#2563EB}
.exam-text-input{width:100%;padding:14px 16px;border:1.5px solid #E5EAF2;border-radius:14px;font:600 15.5px var(--font,'Plus Jakarta Sans',sans-serif);color:#0F172A}
.exam-text-input:focus{outline:none;border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.exam-runner .exam-warning{display:none;margin-top:16px;font-size:13px;font-weight:800;color:#B91C1C;background:#FEF2F2;border:1px solid #FECACA;border-radius:10px;padding:10px 14px}
.exam-runner-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 28px;border-top:1.5px solid #E5EAF2;background:#fff}
.exam-step-count{font-size:13px;font-weight:800;color:#94A3B8;font-variant-numeric:tabular-nums}
.exam-runner-actions .slide-btn{padding:12px 26px}

/* Pantalla de resultado */
.exam-result-inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding:42px 28px}
.exam-score-ring{position:relative;width:150px;height:150px;margin-bottom:6px}
.exam-score-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.exam-score-num b{font-size:38px;font-weight:900;color:#0F172A;line-height:1}
.exam-score-num span{font-size:12px;font-weight:700;color:#94A3B8;margin-top:3px}
.exam-runner .exam-result-badge{font-size:12.5px;font-weight:900;letter-spacing:.6px;border-radius:999px;padding:6px 16px;margin:14px 0 4px}
.exam-result-inner h2{font-size:24px;font-weight:900;margin:8px 0 4px;color:#0F172A}
.exam-result-inner p{font-size:14px;color:#64748B;margin:0 0 22px;max-width:420px}
.exam-result-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.exam-result-actions .mc-action{width:auto;padding:0 22px}
@media(max-width:560px){
  .exam-runner-top{flex-wrap:wrap}
  .exam-q-text{font-size:18px}
  .exam-runner-body{padding:18px}
}

/* ---------- Revisión de respuestas del examen (banco de preguntas) ---------- */
.exam-review{margin:28px auto 8px;max-width:760px;text-align:left;border-top:1px solid #E8EDF5;padding-top:24px}
.exam-review-title{font-size:16px;font-weight:800;color:#0F172A;margin-bottom:16px}
.rev-q{background:#fff;border:1px solid #E8EDF5;border-radius:14px;padding:18px 20px;margin-bottom:14px;box-shadow:0 4px 14px rgba(15,23,42,.03)}
.rev-q-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.rev-q-text{font-size:15px;font-weight:700;color:#1E293B;line-height:1.4}
.rev-badge{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff}
.rev-badge.ok{background:#10B981}
.rev-badge.no{background:#EF4444}
.rev-opts{display:flex;flex-direction:column;gap:7px}
.rev-opt{font-size:13.5px;color:#475569;padding:9px 12px;border:1px solid #EEF2F7;border-radius:9px;background:#F8FAFC;display:flex;align-items:center;gap:8px}
.rev-opt.rev-correct{border-color:#86EFAC;background:#ECFDF5;color:#047857;font-weight:700}
.rev-opt.rev-wrong{border-color:#FECACA;background:#FEF2F2;color:#B91C1C;font-weight:700}
.rev-letter{font-weight:800;width:18px;flex-shrink:0}
.rev-expl{margin-top:11px;font-size:13px;color:#475569;background:#EFF6FF;border:1px solid #BFDBFE;border-radius:9px;padding:10px 12px;line-height:1.5}

/* ============================================================
   ENCABEZADO MÓVIL: que quepan todos los botones (campana,
   cerrar sesión) y el popover de notificaciones dentro de la pantalla.
   ============================================================ */
@media(max-width:600px){
  .hdr{padding:0 10px !important; gap:8px}
  .hdr-left{min-width:0; gap:8px; flex:0 0 auto}
  .hdr-logo-img{width:38px !important; height:38px !important}
  /* En celular el encabezado muestra SOLO el ícono del logo; así "Cerrar sesión"
     queda completo y bien visible. El nombre completo se ve en el login y el inicio. */
  .hdr-logo-text{display:none !important}
  .hdr-right{gap:8px !important; flex:0 0 auto; margin-left:auto}
  .hdr-user{display:none !important}                /* avatar + nombre fuera (perfil en el menú) */
  .hdr-notif{width:42px !important; height:42px !important; display:flex !important}
  .hdr-logout{padding:9px 14px !important; font-size:12.5px !important; font-weight:800 !important; white-space:nowrap}
  /* Popover de notificaciones anclado al viewport, nunca se sale */
  .notif-popover{position:fixed !important; top:64px !important; left:10px !important; right:10px !important; width:auto !important; max-width:none !important}
}