/* Bci Pagos · curso SCORM. Paleta tomada del logo: azul #2025ff, negro #1e1e1e y arco verde/amarillo/rojo. */
:root{
  --blue:#2025ff;--blue-d:#1519c9;--tint:#eceeff;--tint2:#f6f7ff;
  --ink:#1e1e1e;--muted:#5a5f73;--line:#e1e3f0;--bg:#f4f5fc;
  --g:#5ca515;--y:#fed307;--r:#f3112f;--ok:#2f7d0f;--okbg:#eaf6e0;--bad:#c20f27;--badbg:#fdebee;
  --font:"Overpass","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--bg);font:16px/1.5 var(--font)}
button,input,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,.slot:focus-visible{outline:3px solid var(--y);outline-offset:3px}
[hidden]{display:none!important}

/* Cabecera */
.header{height:84px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5%;background:#fff}
.header-bci{height:34px;width:auto;display:block;justify-self:end;grid-column:3}
.brand{display:flex;align-items:center}
.brand img{height:60px;width:auto;display:block}
.header-label,.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.6px}
.header-label{color:var(--muted)}
.arc-line{display:flex;height:5px}
.arc-line i{flex:1;display:block}
.arc-line i:nth-child(1){background:var(--g)}
.arc-line i:nth-child(2){background:var(--y)}
.arc-line i:nth-child(3){background:var(--r)}
.arc-line i:nth-child(4){background:var(--blue)}

.layout{max-width:1500px;margin:auto;display:grid;grid-template-columns:300px minmax(0,1fr);min-height:calc(100vh - 140px)}

/* Barra lateral */
.sidebar{padding:34px 26px;background:#fff;border-right:1px solid var(--line)}
.eyebrow{color:var(--blue);margin:0 0 10px}
h1{font-size:30px;letter-spacing:-1px;line-height:1.1;margin:0 0 8px;font-weight:800}
.welcome-link{padding:0;border:0;background:transparent;font-size:12px;color:var(--blue);text-decoration:underline;text-underline-offset:3px;margin:0 0 26px;text-align:left;font-weight:600}
.progress-label{display:flex;justify-content:space-between;font-size:12px;margin:0 0 8px;font-weight:600}
.progress-label strong{color:var(--blue)}
.progress{height:8px;border-radius:6px;background:var(--tint);overflow:hidden}
.progress>div{height:100%;background:linear-gradient(90deg,var(--blue),#5a5eff);width:0;transition:width .25s;border-radius:6px}
.navigation{list-style:none;padding:0;margin:24px 0}
.navigation li+li{margin-top:6px}
.nav-item{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid transparent;background:#fff;border-radius:12px;padding:11px 10px;color:var(--ink)}
.nav-item:hover:not(:disabled){background:var(--tint2)}
.nav-item.active{border-color:#c9cbff;background:var(--tint)}
.nav-item:disabled{color:#8a8fa3;background:#fafafd}
.nav-number{flex-shrink:0;width:30px;height:30px;border:1.5px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:#fff}
.nav-item.active .nav-number{background:var(--blue);border-color:var(--blue);color:#fff}
.nav-item.done .nav-number{background:var(--g);border-color:var(--g);color:#fff}
.nav-item>span:nth-child(2){flex:1;font-size:14px;font-weight:700}
.nav-item small{display:block;color:var(--muted);font-size:11px;font-weight:400}
.sidebar-note{border-top:1px solid var(--line);padding-top:20px;font-size:12px;color:var(--muted)}
.sidebar-note strong{color:var(--ink)}
.sidebar-note p{margin:5px 0 0}
.save-status{font-size:11px;color:var(--muted);margin-top:22px}

main{padding:36px 42px 44px;min-width:0}
main:focus{outline:none}
h2{font-size:clamp(25px,3vw,36px);letter-spacing:-1px;line-height:1.15;margin:0 0 12px;font-weight:800}
h3{font-size:17px;margin:0 0 5px}
.section-top{display:flex;justify-content:space-between;align-items:center}
.duration{font-size:12px;color:var(--muted)}
.section-description{margin:0 0 24px;color:var(--muted);font-size:14px}

/* Botones */
.button{border:1px solid transparent;background:var(--blue);color:#fff;min-height:46px;padding:11px 22px;border-radius:999px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;transition:background .15s,transform .1s}
.button:hover:not(:disabled){background:var(--blue-d)}
.button:active:not(:disabled){transform:translateY(1px)}
.button:disabled{background:#e4e6ee;color:#7c8196}
.button.secondary{border-color:#c4c7e6;color:var(--blue);background:#fff}
.button.secondary:hover:not(:disabled){background:var(--tint)}
.button.secondary:disabled{color:#8c91a6;background:#f3f4f9;border-color:#e4e6ee}
.button.ghost{background:transparent;border-color:#ffffff90;color:#fff}
.button.ghost:hover:not(:disabled){background:#ffffff25}
.button.finish:not(:disabled){background:var(--ok)}
.button.finish:hover:not(:disabled){background:#236409}

/* Bienvenida */
.welcome-screen{max-width:1000px}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:10px;align-items:center;background:linear-gradient(135deg,#f3f4ff 0%,#e6e8ff 100%);border-radius:24px;padding:42px 44px;position:relative;overflow:hidden}
.hero-copy{position:relative}
.hero h2{font-size:clamp(30px,3.6vw,46px);margin:14px 0 16px;line-height:1.08}
.hl{color:var(--blue)}
.welcome-description{font-size:17px;color:#3c4157;margin:0 0 22px;max-width:470px}
.welcome-facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.welcome-facts>span{border:1px solid #c9cbff;border-radius:999px;background:#fff;padding:8px 14px;font-size:13px}
.audio-box{margin:0 0 20px}
.audio-btn{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--blue);background:#fff;color:var(--blue);border-radius:999px;padding:8px 18px 8px 8px;font-weight:700;font-size:13px}
.audio-btn:hover{background:var(--tint)}
.audio-icon{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:11px;padding-left:2px}
.hero-visual{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:330px}
.hero-disc{position:absolute;left:50%;bottom:8px;width:min(86%,280px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#fff;box-shadow:0 14px 34px #2025ff1f}
.hero-mascot{position:relative;height:330px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 14px #1519c940)}
.cards-title{font-size:20px;margin:38px 0 6px;font-weight:800;letter-spacing:-.4px}
.welcome-instructions{font-size:14px;color:var(--muted);max-width:700px;margin:0 0 20px}
.module-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mcard{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:0;color:var(--ink);transition:box-shadow .15s,transform .15s,border-color .15s}
.mcard:hover:not(:disabled){box-shadow:0 8px 24px #2025ff1f;transform:translateY(-2px);border-color:#c4c7ff}
.mcard:disabled{opacity:.6}
.mthumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#eceeff,#dfe2ff);display:grid;place-items:center;color:#fff;overflow:hidden}
.mthumb.icon{background:#fff;color:var(--blue);border-bottom:1px solid var(--line)}
.mt-pres{position:absolute;left:0;top:0;width:70%;height:100%;object-fit:cover;object-position:50% 12%}
.mt-char{position:absolute;right:3%;bottom:0;height:78%;width:auto;max-width:27%;object-fit:contain;filter:drop-shadow(0 6px 8px #1519c933)}
.mthumb:not(.icon) .mnum{left:auto;right:10px}
.mthumb.icon .mt-char{height:90%;max-width:42%;right:5%}
.mthumb .mt-icon{position:absolute;left:10%;top:50%;transform:translateY(-50%)}
.mthumb svg{width:92px;height:92px}
.mnum{position:absolute;left:10px;top:10px;min-width:34px;height:26px;padding:0 9px;border-radius:999px;background:var(--blue);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.mcard.done .mnum{background:var(--g)}
.mbody{padding:13px 15px 15px;display:flex;flex-direction:column;gap:3px;flex:1}
.mtitle{font-size:15px;font-weight:800}
.mtopic{font-size:12.5px;color:var(--muted);line-height:1.35}
.mmeta{margin-top:auto;padding-top:8px;font-size:11.5px;font-weight:700;color:var(--blue)}
.mcard.done .mmeta{color:var(--ok)}
.mcard:disabled .mmeta{color:#7c8196}

.vhead{display:flex;align-items:flex-end;gap:18px}
.vhead-text{flex:1;min-width:0}
.vhead-art{flex:0 0 auto;height:140px;width:auto;max-width:34%;object-fit:contain;margin:-6px 0 14px auto;filter:drop-shadow(0 6px 8px #1519c933)}
.step-row{display:flex;align-items:center;gap:10px}
.step-row .eyebrow{margin:0}
.pres-dot{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 12%;border:2px solid #fff;box-shadow:0 0 0 1.5px #c9cbff}
.pres-dot:not([src]){display:none}
.activity-text{flex:1;min-width:0}
.activity-heading .vhead-art{margin:0 0 0 auto}

/* Video */
.player{background:#0b0c1c;border-radius:16px;overflow:hidden;position:relative}
.player video{display:block;width:100%;aspect-ratio:16/9;background:#0b0c1c;object-fit:contain}
.play-overlay{position:absolute;inset:0 0 58px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:14px;background:linear-gradient(0deg,rgba(4,5,30,.35),rgba(4,5,30,.1));color:#fff;border:0;font-weight:600;font-size:14px;text-shadow:0 1px 4px #000}
.play-overlay>span:first-child{width:68px;height:68px;border:0;background:var(--blue);display:grid;place-items:center;border-radius:50%;padding-left:5px;font-size:24px;box-shadow:0 6px 20px #2025ff80}
.next-up{position:absolute;inset:0 0 58px;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:24px;color:#fff;background:linear-gradient(135deg,#1519c9ee,#2025ffe6)}
.next-up p{margin:0}
.next-up-label{font-size:11px;font-weight:800;letter-spacing:1.8px;opacity:.85}
.next-up-title{font-size:clamp(20px,2.6vw,30px);font-weight:800;letter-spacing:-.5px;line-height:1.15;max-width:560px}
.next-up-count{font-size:15px;margin:6px 0 10px;opacity:.95}
.next-up-count strong{display:inline-grid;place-items:center;min-width:34px;height:34px;border-radius:50%;background:#fff;color:var(--blue);margin-left:4px}
.next-up-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.next-up .button:not(.ghost){background:#fff;color:var(--blue)}
.next-up .button:not(.ghost):hover{background:var(--tint)}
.controls{display:flex;gap:12px;align-items:center;min-height:58px;padding:8px 15px;color:#fff}
.controls button{color:#fff;background:transparent;border:0;min-height:36px;min-width:30px;padding:2px;font-size:13px}
.controls button:disabled{opacity:.4}
.controls #play{font-size:18px}
.controls #fullscreen{font-size:24px}
.controls input{min-width:30px;width:100%;accent-color:#7b7fff;cursor:pointer}
.time{font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.player-status{font-size:12px;min-height:20px;color:var(--muted);margin:12px 0 0}
.video-finished{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:18px;padding:18px 22px;border:1px solid #c9cbff;border-radius:14px;background:var(--tint)}
.video-finished p{margin:0;font-size:15px;font-weight:700;color:var(--blue-d)}
.video-finished .button{flex-shrink:0}
.bottom-nav{display:flex;gap:20px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:26px;padding-top:22px}
.bottom-nav>span{font-size:11px;color:var(--muted);text-align:center;max-width:230px}

/* Preguntas */
.activity-badge{font-size:10px;letter-spacing:1px;padding:5px 11px;border:1px solid #c9cbff;border-radius:20px;color:var(--blue);font-weight:800}
.activity-heading{display:flex;align-items:center;gap:18px;margin:10px 0 18px}
.activity-heading h2{margin-bottom:6px}
.activity-heading .section-description{margin:0}
.activity-icon{display:grid;place-items:center;flex:0 0 64px;width:64px;height:64px;border-radius:18px;background:var(--tint);color:var(--blue)}
.activity-icon svg{width:36px;height:36px}
.activity-tabs{display:flex;gap:8px;margin:20px 0}
.activity-tab{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);padding:10px 12px;font-size:12px;border-radius:12px;color:var(--muted);flex:1;text-align:left;font-weight:700}
.activity-tab svg{width:22px;height:22px;flex-shrink:0}
.activity-tab.active{background:var(--tint);border-color:#aeb1ff;color:var(--blue)}
.activity-tab.done{color:var(--ok)}
.activity-tab.done.active{color:var(--blue)}
.activity-tab:disabled{opacity:.5}
.activity-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px}
.quiz-board{display:flex;flex-direction:column;gap:12px}
.pool-label{font-size:11px;font-weight:800;letter-spacing:1.4px;color:var(--muted);margin:26px 0 10px}
.pool{display:flex;flex-wrap:wrap;gap:10px;padding:14px;border:1.5px dashed #c4c7e6;border-radius:14px;background:var(--tint2);min-height:64px}
.pool.over{background:var(--tint);border-color:var(--blue)}
.pool-empty{font-size:13px;color:var(--muted);margin:0;align-self:center}
.chip{display:inline-block;max-width:100%;text-align:left;background:#fff;border:1.5px solid #b9bcf5;border-radius:12px;padding:9px 14px;font-size:14px;line-height:1.35;color:var(--ink);font-weight:600;cursor:grab;box-shadow:0 1px 0 #2025ff22;user-select:none}
.chip:hover{border-color:var(--blue)}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 14px #2025ff55}
.chip.dragging{opacity:.4}
.slot .chip{width:100%;box-shadow:none;border-color:transparent;background:transparent;padding:6px 10px;cursor:grab}
.slot{display:flex;align-items:center;min-height:52px;border:1.5px dashed #b4b8ee;border-radius:12px;background:var(--tint2);padding:3px;color:var(--muted);font-size:13px;cursor:pointer}
.slot:hover{border-color:var(--blue)}
.slot.active,.slot.over{border-style:solid;border-color:var(--blue);background:var(--tint)}
.slot.filled{border-style:solid;border-color:#9ea2f0;background:#fff;color:var(--ink)}
.slot.ok{border-style:solid;border-color:var(--g);background:var(--okbg);cursor:default}
.slot.ok .chip{cursor:default;color:#1f4f08}
.slot.bad{border-style:solid;border-color:var(--r);background:var(--badbg);color:var(--bad)}
.slot .ph{padding:6px 12px;font-weight:600}
.match-row{display:grid;grid-template-columns:minmax(0,.7fr) 24px minmax(0,1.3fr);gap:12px;align-items:center}
.match-row .term{font-weight:800;font-size:16px;color:var(--ink);background:var(--tint);border-radius:12px;padding:12px 14px}
.match-row .arrow{color:var(--blue);font-weight:800;text-align:center}
.fill-text{font-size:18px;line-height:2.4;margin:0}
.fill-text .slot{display:inline-flex;vertical-align:middle;min-width:150px;min-height:40px;margin:0 4px}
.order-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.order-list li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center}
.order-n{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800}
.quiz-hint{font-size:12px;color:var(--muted);margin:14px 0 0}
.quiz-feedback{min-height:24px;margin:14px 0 0;font-size:14px;font-weight:700}
.quiz-feedback.ok{color:var(--ok)}
.quiz-feedback.bad{color:var(--bad)}
.quiz-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}

/* Material y cierre */
.download-card{display:flex;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;margin:30px 0}
.download-card>div:nth-child(2){flex:1}
.pdf-icon{display:grid;place-items:center;min-width:60px;height:76px;color:var(--blue);background:var(--tint);border-radius:10px;font-size:16px;font-weight:800}
.download-card p{font-size:13px;color:var(--muted);margin:0}
.download-card .provisional-note{font-weight:700;color:#7e5a17;margin-top:12px}
.complete-screen{text-align:center;padding:70px 20px;max-width:700px;margin:auto}
.complete-screen .button{margin-top:22px}
.complete-screen>p:not(.eyebrow){color:var(--muted)}
.success-mark{display:grid;place-items:center;margin:0 auto 24px;width:84px;height:84px;border-radius:50%;background:var(--okbg);color:var(--ok);font-size:40px}

.footer{max-width:1500px;margin:auto;display:flex;justify-content:space-between;padding:18px 5%;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.test-banner{background:#fff6cc;text-align:center;color:#6b5100;font-size:11px;font-weight:700;padding:7px 20px}
.connection{background:var(--badbg);color:#8e1425;padding:14px 5%;font-size:13px}
.connection.preview{background:#e0e4ff;color:#1a1f8f}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.player:fullscreen{border-radius:0;display:flex;flex-direction:column;justify-content:center}
.player:fullscreen video{height:calc(100vh - 58px);aspect-ratio:auto}
.player:fullscreen .controls{flex-shrink:0}
.player:fullscreen .play-overlay,.player:fullscreen .next-up{bottom:58px}

@media(max-width:1000px){
  .layout{grid-template-columns:245px minmax(0,1fr)}
  .sidebar{padding:28px 18px}
  main{padding:28px 22px}
  .hero{padding:32px 28px}
  .module-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .download-card{flex-wrap:wrap}
  .download-card .button{width:100%}
  .bottom-nav{gap:10px}
  .bottom-nav>span{display:none}
  .controls{gap:8px;padding:8px 10px}
}
@media(max-width:700px){
  .header{height:68px;padding:0 20px}
  .brand img{height:42px}
  .header-bci{height:26px}
  .layout{display:block}
  .sidebar{padding:20px;border-right:0;border-bottom:1px solid var(--line)}
  .sidebar h1,.sidebar-note,.sidebar .eyebrow{display:none}
  .navigation{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:16px 0 0}
  .navigation li+li{margin:0}
  .nav-item{padding:8px 3px;flex-direction:column;gap:5px;height:100%;text-align:center;border-radius:8px}
  .nav-item>span:nth-child(2){font-size:9px;font-weight:600}
  .nav-item small{display:none}
  .nav-number{width:26px;height:26px;font-size:10px}
  .save-status{margin:12px 0 0;font-size:10px}
  main{padding:22px 16px}
  .section-description{font-size:12px;margin-bottom:18px}
  h2{font-size:27px}
  .hero{grid-template-columns:1fr;padding:26px 20px}
  .hero-visual{min-height:230px;order:-1}
  .hero-mascot{height:220px}
  .hero-disc{width:190px}
  .vhead-art{height:88px;margin-bottom:10px}
  .welcome-description{font-size:15px}
  .module-cards{grid-template-columns:1fr}
  .controls #mute,.controls #back-ten{font-size:10px}
  .controls{gap:6px}
  .time{font-size:9px}
  .next-up-title{font-size:20px}
  .activity-heading{gap:12px;align-items:flex-start}
  .activity-icon{flex-basis:48px;width:48px;height:48px;border-radius:14px}
  .activity-icon svg{width:28px;height:28px}
  .activity-heading h2{font-size:23px}
  .activity-tab{flex-direction:column;align-items:flex-start;gap:5px;padding:9px 8px;font-size:10px}
  .activity-tab svg{width:18px;height:18px}
  .activity-card{padding:18px}
  .match-row{grid-template-columns:1fr;gap:6px}
  .match-row .arrow{display:none}
  .fill-text{font-size:16px}
  .video-finished{flex-direction:column;align-items:stretch;padding:16px;gap:14px}
  .download-card{padding:20px;gap:16px}
  .button{padding:10px 16px}
  .complete-screen{padding:45px 5px}
  .footer{padding:16px 20px}
}

.choice-list{display:grid;gap:10px}
.choice-opt{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;text-align:left;background:#fff;border:1.5px solid #b9bcf5;border-radius:14px;padding:12px 14px;font:inherit;font-size:15px;line-height:1.4;color:var(--ink);font-weight:600;cursor:pointer}
.choice-opt:hover:not(:disabled){border-color:var(--blue)}
.choice-letter{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tint);color:var(--blue);font-weight:800}
.choice-opt.selected{border-color:var(--blue);background:#f1f2ff;box-shadow:0 0 0 3px #2025ff22}
.choice-opt.selected .choice-letter{background:var(--blue);color:#fff}
.choice-opt.bad{opacity:.55;border-color:#f3112f66;background:#fff5f6;text-decoration:line-through}
.choice-opt.ok{border-color:#5ca515;background:#eaf6e0;color:#1f4f08}
.choice-opt.ok .choice-letter{background:#5ca515;color:#fff}
.choice-opt:disabled{cursor:default}