/* ==========================================================================
   CCDV-F · Ruta de Certificación — estilos propios
   Base: Bootstrap 5.3.3 (local). Mobile first: estilos base = móvil,
   se amplía con min-width (768 / 992 / 1200). Prefijo `pm-` para no chocar
   con Bootstrap; las clases del contenido (callout, compare, code-label,
   table-wrap) conservan su nombre porque están dentro del HTML del curso.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bg:#f6f4ef; --surface:#ffffff; --surface-2:#efece3; --surface-3:#e6e3dc;
  --ink:#1c1c1a; --ink-soft:#575563; --ink-faint:#6d6a78;
  --border:#e2ded1; --border-strong:#cdc7b9;

  --primary:#b8551f; --primary-ink:#ffffff; --primary-soft:#f6e4d6; --primary-strong:#8f3f14;
  --secondary:#1d6f82; --secondary-soft:#ddeff2;
  --success:#2a7449; --success-soft:#e1f0e6;
  --danger:#b0352c; --danger-soft:#fae5e2;
  --warning:#8a5a08; --warning-soft:#f6ebd2;

  --code-bg:#232220; --code-ink:#ebe7f6;
  --shadow:0 1px 2px rgba(29,28,34,.06), 0 4px 14px rgba(29,28,34,.05);
  --radius:12px; --radius-sm:8px;
  --topbar-h:56px;

  --serif:Iowan Old Style,Palatino Linotype,Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141319; --surface:#1c1b24; --surface-2:#252330; --surface-3:#2f2d3b;
    --ink:#ece9f5; --ink-soft:#aaa7b6; --ink-faint:#8b8898;
    --border:#2d2b38; --border-strong:#3e3b4b;
    --primary:#ee9a68; --primary-ink:#2a1206; --primary-soft:#3b2518; --primary-strong:#f5b88f;
    --secondary:#62bfd1; --secondary-soft:#183840;
    --success:#62c28b; --success-soft:#1b3326;
    --danger:#ec7d74; --danger-soft:#3b2220;
    --warning:#e3bd62; --warning-soft:#342b15;
    --code-bg:#0f0e15; --code-ink:#e4e1f1;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --bg:#141319; --surface:#1c1b24; --surface-2:#252330; --surface-3:#2f2d3b;
  --ink:#ece9f5; --ink-soft:#aaa7b6; --ink-faint:#8b8898;
  --border:#2d2b38; --border-strong:#3e3b4b;
  --primary:#ee9a68; --primary-ink:#2a1206; --primary-soft:#3b2518; --primary-strong:#f5b88f;
  --secondary:#62bfd1; --secondary-soft:#183840;
  --success:#62c28b; --success-soft:#1b3326;
  --danger:#ec7d74; --danger-soft:#3b2220;
  --warning:#e3bd62; --warning-soft:#342b15;
  --code-bg:#0f0e15; --code-ink:#e4e1f1;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
}

/* ---------- Base ---------- */
*{box-sizing:border-box;}
html{scroll-padding-top:calc(var(--topbar-h) + 16px);}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased;
  --bs-body-bg:var(--bg); --bs-body-color:var(--ink);
}
a{color:var(--primary);}
::selection{background:var(--primary-soft);}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:4px;}
.pm-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.pm-ico{width:1.15em; height:1.15em; flex:none; vertical-align:-.2em;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Estructura ---------- */
.pm-top{
  position:sticky; top:0; z-index:1030; height:var(--topbar-h);
  display:flex; align-items:center; gap:10px; padding:0 12px;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.pm-top-title{flex:1; min-width:0; font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pm-top-prog{display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.pm-top-prog b{color:var(--ink);}
.pm-top-bar{display:none; width:90px;}
.pm-iconbtn{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--ink); border:1px solid transparent; border-radius:var(--radius-sm); cursor:pointer;
}
.pm-iconbtn:hover{background:var(--surface-2);}
.pm-lessonbar{position:fixed; top:var(--topbar-h); left:0; right:0; height:3px; z-index:1029; background:transparent; display:none;}
.pm-lessonbar > i{display:block; height:100%; background:var(--primary); width:0; transition:width .4s ease;}
body.pm-in-lesson .pm-lessonbar{display:block;}

.pm-shell{display:block;}
.pm-side{
  --bs-offcanvas-width:300px; --bs-offcanvas-bg:var(--surface); --bs-offcanvas-color:var(--ink);
  --bs-offcanvas-border-color:var(--border);
}
.pm-side .offcanvas-header{padding:10px 12px 0; justify-content:flex-end; min-height:0;}
.pm-side-in{padding:6px 14px 28px;}
.pm-main{padding:20px 16px 90px; min-width:0; max-width:980px; margin:0 auto;}

@media (min-width:992px){
  .pm-shell{display:flex;}
  .pm-side{
    flex:0 0 300px; position:sticky !important; top:var(--topbar-h); width:300px !important;
    height:calc(100vh - var(--topbar-h)) !important; overflow-y:auto;
    border-right:1px solid var(--border) !important; background:var(--surface) !important;
  }
  .pm-menu-btn{display:none;}
  .pm-top-bar{display:block;}
  .pm-main{flex:1; padding:32px 40px 100px; margin:0;}
}
@media (min-width:1400px){ .pm-main{padding-left:56px;} }

/* Modo reto: sin menú ni distracciones */
body.pm-focus .pm-side, body.pm-focus .pm-menu-btn, body.pm-focus .pm-top-prog{display:none !important;}
body.pm-focus .pm-main{margin:0 auto; max-width:760px;}
body.pm-focus .pm-shell{display:block;}

/* ---------- Sidebar ---------- */
.pm-brand{padding:4px 4px 14px; border-bottom:1px solid var(--border); margin-bottom:12px;}
.pm-eyebrow{font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--primary); font-weight:700;}
.pm-brand-title{font-family:var(--serif); font-size:1.3rem; font-weight:600; line-height:1.2; margin-top:2px;}
.pm-side-prog{padding:4px 4px 14px; border-bottom:1px solid var(--border); margin-bottom:6px;}
.pm-side-prog .pm-row{display:flex; justify-content:space-between; font-size:.8rem; color:var(--ink-soft); margin-bottom:6px;}
.pm-side-prog b{color:var(--ink); font-variant-numeric:tabular-nums;}
.pm-nav{display:flex; flex-direction:column; gap:2px;}
.pm-nav-h{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); padding:14px 6px 4px; font-weight:600;}
.pm-nav-a{
  display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 8px; border-radius:var(--radius-sm);
  color:var(--ink-soft); text-decoration:none; font-size:.9rem; border:1px solid transparent;
}
.pm-nav-a:hover{background:var(--surface-2); color:var(--ink);}
.pm-nav-a[aria-current="page"]{background:var(--primary-soft); color:var(--ink); border-color:var(--border-strong); font-weight:600;}
.pm-nav-a .t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pm-nav-n{
  width:26px; height:26px; flex:none; border-radius:7px; background:var(--surface-2); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.pm-nav-a[aria-current="page"] .pm-nav-n{background:var(--primary); color:var(--primary-ink);}
.pm-nav-a.s-progreso .pm-nav-n{background:var(--secondary-soft); color:var(--secondary);}
.pm-nav-a.s-completado .pm-nav-n, .pm-nav-a.s-dominado .pm-nav-n{background:var(--success); color:#fff;}
.pm-nav-a.s-repaso .pm-nav-n{background:var(--warning-soft); color:var(--warning); box-shadow:inset 0 0 0 1.5px var(--warning);}
.pm-nav-a[aria-current="page"].s-completado .pm-nav-n, .pm-nav-a[aria-current="page"].s-dominado .pm-nav-n{background:var(--success);}
.pm-nav-badge{font-size:.68rem; font-weight:700; padding:1px 7px; border-radius:99px; background:var(--warning-soft); color:var(--warning);}

/* ---------- Tipografía de página ---------- */
.pm-page-eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--primary); font-weight:700;}
.pm-h1{font-family:var(--serif); font-size:1.7rem; font-weight:600; line-height:1.2; margin:8px 0 8px; text-wrap:balance;}
.pm-lead{color:var(--ink-soft); font-size:1.02rem; max-width:66ch; margin:0 0 20px;}
.pm-h2{font-family:var(--serif); font-size:1.25rem; font-weight:600; margin:0 0 12px; line-height:1.3;}
.pm-h3{font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); font-weight:700; margin:0 0 10px;}
.pm-block{margin-bottom:28px;}
@media (min-width:768px){ .pm-h1{font-size:2.1rem;} }

/* ---------- Componentes base ---------- */
.pm-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);}
.pm-card.flat{box-shadow:none;}
.pm-grid{display:grid; gap:12px;}
.pm-grid.c2, .pm-grid.c3, .pm-grid.c4{grid-template-columns:1fr;}
@media (min-width:640px){ .pm-grid.c2{grid-template-columns:1fr 1fr;} .pm-grid.c4{grid-template-columns:1fr 1fr;} }
@media (min-width:768px){ .pm-grid.c3{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1100px){ .pm-grid.c4{grid-template-columns:repeat(4,1fr);} }

.pm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 18px;
  background:var(--primary); color:var(--primary-ink); border:1px solid var(--primary); border-radius:var(--radius-sm);
  font-size:.95rem; font-weight:600; line-height:1.2; text-decoration:none; cursor:pointer; transition:filter .15s, background .15s;
}
.pm-btn:hover{filter:brightness(1.07); color:var(--primary-ink);}
.pm-btn.ghost{background:transparent; color:var(--ink); border-color:var(--border-strong);}
.pm-btn.ghost:hover{background:var(--surface-2); filter:none; color:var(--ink);}
.pm-btn.sm{min-height:44px; padding:6px 14px; font-size:.88rem;}
.pm-btn.block{width:100%;}
.pm-btn.success{background:var(--success); border-color:var(--success); color:#fff;}
.pm-btn:disabled{opacity:.45; cursor:not-allowed; filter:none;}

.pm-chip{
  display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:99px; font-size:.75rem; font-weight:600;
  background:var(--surface-2); color:var(--ink-soft); letter-spacing:0; text-transform:none; white-space:nowrap;
}
.pm-chip.s-progreso{background:var(--secondary-soft); color:var(--secondary);}
.pm-chip.s-completado{background:var(--success-soft); color:var(--success);}
.pm-chip.s-dominado{background:var(--success); color:#fff;}
.pm-chip.s-repaso{background:var(--warning-soft); color:var(--warning);}
.pm-chip.primary{background:var(--primary-soft); color:var(--primary);}

.pm-bar{height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden;}
.pm-bar > i{display:block; height:100%; width:0; border-radius:99px; background:var(--primary); transition:width .5s ease;}
.pm-bar.ok > i{background:var(--success);}
.pm-bar.warn > i{background:var(--warning);}
.pm-bar.sec > i{background:var(--secondary);}
.pm-bar.thin{height:5px;}

.pm-empty{color:var(--ink-soft); font-size:.9rem; margin:0;}
.pm-muted{color:var(--ink-soft);}
.pm-num{font-variant-numeric:tabular-nums;}

/* Anillo de progreso */
.pm-ring{position:relative; width:var(--sz,84px); height:var(--sz,84px); flex:none;}
.pm-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
.pm-ring circle{fill:none; stroke-width:8;}
.pm-ring .bg{stroke:var(--surface-2);}
.pm-ring .fg{stroke:var(--primary); stroke-linecap:round; transition:stroke-dashoffset .8s ease;}
.pm-ring.ok .fg{stroke:var(--success);}
.pm-ring.warn .fg{stroke:var(--warning);}
.pm-ring .v{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:600; font-size:calc(var(--sz,84px) * .27); font-variant-numeric:tabular-nums;}

/* Métricas */
.pm-stat{display:flex; flex-direction:column; gap:2px; padding:14px 16px;}
.pm-stat .v{font-family:var(--serif); font-size:1.7rem; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums;}
.pm-stat .v small{font-size:.9rem; color:var(--ink-faint); font-weight:400;}
.pm-stat .l{font-size:.8rem; color:var(--ink-soft);}
.pm-stat .ico{color:var(--primary); margin-bottom:4px;}

/* ---------- Dashboard ---------- */
.pm-hero{
  background:var(--surface); border:1px solid var(--border-strong); border-left:4px solid var(--primary);
  border-radius:var(--radius); padding:18px 16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:14px;
}
.pm-hero-top{display:flex; gap:16px; align-items:center;}
.pm-hero h2{font-family:var(--serif); font-size:1.3rem; font-weight:600; margin:2px 0 4px; line-height:1.25;}
.pm-hero p{margin:0; color:var(--ink-soft); font-size:.92rem;}
.pm-hero-actions{display:flex; flex-direction:column; gap:8px;}
@media (min-width:640px){ .pm-hero{padding:22px 24px;} .pm-hero-actions{flex-direction:row; flex-wrap:wrap;} .pm-hero h2{font-size:1.5rem;} }

.pm-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.pm-li{display:flex; align-items:center; gap:12px; min-height:48px; padding:8px 0; border-top:1px solid var(--border); text-decoration:none; color:inherit;}
.pm-li:first-child{border-top:none;}
a.pm-li:hover .t{color:var(--primary);}
.pm-li .t{font-weight:600; font-size:.92rem; line-height:1.3;}
.pm-li .m{font-size:.8rem; color:var(--ink-soft);}
.pm-li .grow{flex:1; min-width:0;}
.pm-pct{font-weight:700; font-size:.85rem; font-variant-numeric:tabular-nums;}
.pm-pct.ok{color:var(--success);}
.pm-pct.bad{color:var(--warning);}

/* Barras de rendimiento reciente */
.pm-bars{display:flex; align-items:flex-end; gap:8px; height:110px; padding-top:6px;}
.pm-bars .b{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; height:100%;}
.pm-bars .b i{display:block; width:100%; max-width:34px; border-radius:6px 6px 2px 2px; background:var(--primary); min-height:4px; transition:height .6s ease;}
.pm-bars .b.ok i{background:var(--success);}
.pm-bars .b.warn i{background:var(--warning);}
.pm-bars .b span{font-size:.68rem; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.pm-bars .b.last i{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px currentColor;}

/* ---------- Ruta (camino) ---------- */
.pm-path{list-style:none; margin:0; padding:0; position:relative;}
.pm-node{position:relative; padding:0 0 18px 46px;}
.pm-node::before{content:""; position:absolute; left:15px; top:32px; bottom:-2px; width:2px; background:var(--border);}
.pm-node:last-child::before{display:none;}
.pm-mark{
  position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:2px solid var(--border-strong); color:var(--ink-faint); font-size:.78rem; font-weight:700;
}
.pm-node.s-progreso .pm-mark{border-color:var(--secondary); color:var(--secondary); background:var(--secondary-soft);}
.pm-node.s-completado .pm-mark{border-color:var(--success); color:var(--success); background:var(--success-soft);}
.pm-node.s-dominado .pm-mark{border-color:var(--success); background:var(--success); color:#fff;}
.pm-node.s-repaso .pm-mark{border-color:var(--warning); color:var(--warning); background:var(--warning-soft);}
.pm-node-head{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-height:32px;}
.pm-node-head a{font-weight:700; color:var(--ink); text-decoration:none;}
.pm-node-head a:hover{color:var(--primary);}
.pm-node-meta{font-size:.8rem; color:var(--ink-soft);}
.pm-node .pm-bar{margin:8px 0 10px; max-width:420px;}
.pm-mods{display:flex; flex-direction:column; gap:6px;}
.pm-mod{
  display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 12px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm); text-decoration:none; color:inherit;
}
.pm-mod:hover{border-color:var(--primary);}
.pm-mod .n{width:28px; height:28px; border-radius:7px; background:var(--surface-2); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; flex:none;}
.pm-mod.s-completado .n, .pm-mod.s-dominado .n{background:var(--success); color:#fff;}
.pm-mod.s-progreso .n{background:var(--secondary-soft); color:var(--secondary);}
.pm-mod.s-repaso .n{background:var(--warning-soft); color:var(--warning);}
.pm-mod .t{font-weight:600; font-size:.9rem; line-height:1.3;}
.pm-mod .grow{flex:1; min-width:0;}
.pm-mod .st{font-size:.72rem; color:var(--ink-soft);}

/* ---------- Lección ---------- */
.pm-meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.82rem; color:var(--ink-soft); margin:0 0 16px;}
.pm-meta span{display:inline-flex; align-items:center; gap:6px;}
.pm-toc{margin-bottom:24px;}
.pm-toc ol{list-style:none; margin:0; padding:0; display:grid; gap:2px; grid-template-columns:1fr;}
.pm-toc button{
  display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:6px 8px; background:transparent; border:none; border-radius:var(--radius-sm);
  text-align:left; color:var(--ink); font-size:.9rem; cursor:pointer;
}
.pm-toc button:hover{background:var(--surface-2);}
.pm-toc .d{width:22px; height:22px; flex:none; border-radius:50%; border:2px solid var(--border-strong); display:flex; align-items:center; justify-content:center; color:#fff;}
.pm-toc .seen .d{background:var(--success); border-color:var(--success);}
.pm-toc .d svg{width:12px; height:12px; opacity:0;}
.pm-toc .seen .d svg{opacity:1;}
@media (min-width:768px){ .pm-toc ol{grid-template-columns:1fr 1fr;} }

.pm-sec{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 16px; margin-bottom:14px;}
.pm-sec-h{display:flex; align-items:flex-start; gap:12px; margin-bottom:12px;}
.pm-sec-h .n{
  width:28px; height:28px; flex:none; border-radius:8px; background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; margin-top:1px;
}
.pm-sec-h h2{font-family:var(--serif); font-size:1.15rem; font-weight:600; margin:0; line-height:1.35;}
@media (min-width:768px){ .pm-sec{padding:22px 26px;} .pm-sec-h h2{font-size:1.25rem;} }

/* Contenido del curso (HTML propio de cada módulo) */
.pm-prose{font-size:1rem;}
.pm-prose p{margin:0 0 12px; max-width:70ch;}
.pm-prose ul, .pm-prose ol{max-width:68ch; padding-left:1.3rem; margin:0 0 12px;}
.pm-prose li{margin-bottom:6px;}
.pm-prose > :last-child{margin-bottom:0;}
.pm-prose strong{color:var(--ink);}
.pm-prose code{font-family:var(--mono); font-size:.88em;}
.pm-prose :not(pre) > code{background:var(--surface-2); padding:1px 6px; border-radius:5px; word-break:break-word;}

.callout{border-left:4px solid var(--primary); background:var(--primary-soft); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:12px 14px; margin:16px 0; max-width:70ch;}
.callout .callout-label{font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--primary); margin-bottom:4px;}
.callout p{margin:0 0 8px;}
.callout p:last-child{margin:0;}
.callout.warn{border-left-color:var(--warning); background:var(--warning-soft);}
.callout.warn .callout-label{color:var(--warning);}

.pm-code{position:relative; margin:0 0 16px;}
.pm-prose pre, .pm-card pre{
  background:var(--code-bg); color:var(--code-ink); border-radius:var(--radius-sm); padding:14px 48px 14px 14px; overflow-x:auto;
  font-family:var(--mono); font-size:.8rem; line-height:1.6; margin:0; white-space:pre-wrap; word-break:break-word;
}
.pm-copy{
  position:absolute; top:4px; right:4px; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--code-ink); opacity:.7; border:none; border-radius:var(--radius-sm); cursor:pointer;
}
.pm-copy:hover, .pm-copy:focus-visible{opacity:1; background:rgba(255,255,255,.1);}
.code-label{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:700; margin:0 0 6px;}

.table-wrap{overflow-x:auto; margin:0 0 16px; border:1px solid var(--border); border-radius:var(--radius-sm); -webkit-overflow-scrolling:touch;}
.pm-prose table{border-collapse:collapse; width:100%; min-width:520px; margin:0; font-size:.88rem; background:var(--surface);}
.pm-prose th, .pm-prose td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top;}
.pm-prose th{background:var(--surface-2); color:var(--ink-soft); font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;}
.pm-prose tr:last-child td{border-bottom:none;}

.compare{display:grid; grid-template-columns:1fr; gap:12px; margin:16px 0 18px;}
@media (min-width:768px){ .compare{grid-template-columns:1fr 1fr;} }
.compare-col{border-radius:var(--radius-sm); border:1px solid var(--border); overflow:hidden; min-width:0; background:var(--surface);}
.compare-col.bad{border-color:var(--danger);}
.compare-col.good{border-color:var(--success);}
.compare-head{padding:8px 12px; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;}
.compare-col.bad .compare-head{background:var(--danger-soft); color:var(--danger);}
.compare-col.good .compare-head{background:var(--success-soft); color:var(--success);}
.pm-prose .compare-col pre{border-radius:0; background:var(--surface-2); color:var(--ink);}
.compare-col .pm-copy{color:var(--ink);}
.compare-col .pm-code{margin:0;}
.compare-note{padding:10px 12px; font-size:.84rem; color:var(--ink-soft); margin:0 !important; max-width:none !important;}

/* Ideas clave */
.pm-keys{list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:1fr;}
.pm-keys li{display:flex; gap:12px; padding:12px 14px; background:var(--surface-2); border-radius:var(--radius-sm); font-size:.93rem; line-height:1.5;}
.pm-keys svg{color:var(--success); margin-top:3px;}
@media (min-width:768px){ .pm-keys{grid-template-columns:1fr 1fr;} }

/* Ejercicio práctico */
.pm-practice{border-color:var(--secondary); background:var(--surface);}
.pm-practice .pm-h3{color:var(--secondary); display:flex; align-items:center; gap:8px;}
.pm-practice textarea{
  width:100%; min-height:110px; resize:vertical; background:var(--bg); color:var(--ink); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); padding:12px; font-family:var(--sans); font-size:.95rem; line-height:1.5;
}
.pm-practice textarea:focus{outline:2px solid var(--secondary); outline-offset:1px;}
.pm-practice-actions{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
@media (min-width:640px){ .pm-practice-actions{flex-direction:row; justify-content:flex-end;} }
.pm-solution{display:none; margin-top:14px; padding-top:14px; border-top:1px dashed var(--border-strong); font-size:.92rem;}
.pm-solution.show{display:block; animation:pmFade .3s ease;}
.pm-solution p{margin:0 0 10px;}
.pm-solution-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--secondary); margin-bottom:8px;}

/* ---------- Preguntas (verificación + entrenamiento + reto) ---------- */
.pm-q{padding:16px 0; border-top:1px solid var(--border);}
.pm-q:first-child{border-top:none; padding-top:4px;}
.pm-q-text{font-weight:600; margin:0 0 12px; max-width:68ch; line-height:1.5;}
.pm-opts{display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none;}
.pm-opt{
  display:flex; align-items:flex-start; gap:12px; width:100%; min-height:48px; padding:10px 12px; text-align:left;
  background:var(--surface); color:var(--ink); border:1.5px solid var(--border-strong); border-radius:var(--radius-sm);
  font-size:.95rem; line-height:1.45; cursor:pointer; transition:border-color .15s, background .15s;
}
.pm-opt:hover:not(:disabled){border-color:var(--primary); background:var(--primary-soft);}
.pm-opt .k{
  width:26px; height:26px; flex:none; border-radius:50%; border:1.5px solid var(--border-strong); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:.76rem; font-weight:700; color:var(--ink-soft); margin-top:-1px;
}
.pm-opt .tx{flex:1; min-width:0;}
.pm-opt .res{display:none; flex:none; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:3px;}
.pm-opt.picked{border-color:var(--primary); background:var(--primary-soft);}
.pm-opt.picked .k{background:var(--primary); border-color:var(--primary); color:var(--primary-ink);}
.pm-opt:disabled{cursor:default; opacity:1;}
.pm-opt.correct{border-color:var(--success); background:var(--success-soft);}
.pm-opt.correct .k{background:var(--success); border-color:var(--success); color:#fff;}
.pm-opt.correct .res{display:block; color:var(--success);}
.pm-opt.wrong{border-color:var(--danger); background:var(--danger-soft);}
.pm-opt.wrong .k{background:var(--danger); border-color:var(--danger); color:#fff;}
.pm-opt.wrong .res{display:block; color:var(--danger);}
.pm-opt.dim{opacity:.6;}

.pm-fb{margin-top:12px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); animation:pmFade .3s ease;}
.pm-fb-h{display:flex; align-items:center; gap:8px; padding:9px 14px; font-weight:700; font-size:.9rem;}
.pm-fb.ok .pm-fb-h{background:var(--success-soft); color:var(--success);}
.pm-fb.no .pm-fb-h{background:var(--danger-soft); color:var(--danger);}
.pm-fb-b{padding:12px 14px; font-size:.92rem; color:var(--ink-soft); background:var(--surface);}
.pm-fb-b p{margin:0 0 8px;}
.pm-fb-b p:last-child{margin:0;}
.pm-fb-b b{color:var(--ink);}
.pm-fb-review{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px dashed var(--border-strong); font-size:.85rem;}
.pm-fb-review .lbl{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--warning);}

.pm-quiz-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
.pm-score{font-size:.85rem; font-weight:600; color:var(--ink-soft); font-variant-numeric:tabular-nums;}

/* Acciones al pie de lección */
.pm-foot{display:grid; gap:10px; margin-top:28px; padding-top:20px; border-top:1px solid var(--border); grid-template-columns:1fr;}
@media (min-width:768px){ .pm-foot{grid-template-columns:1fr auto 1fr; align-items:center;} .pm-foot > :last-child{justify-self:end;} }
.pm-done-card{display:flex; flex-direction:column; gap:10px; margin-top:16px; padding:14px 16px; border-radius:var(--radius); background:var(--success-soft); color:var(--ink); border:1px solid var(--success);}
.pm-done-card b{color:var(--success);}
@media (min-width:640px){ .pm-done-card{flex-direction:row; align-items:center; justify-content:space-between;} }

/* ---------- Entrenamiento (banco) ---------- */
.pm-filters{display:grid; gap:10px; grid-template-columns:1fr;}
@media (min-width:640px){ .pm-filters{grid-template-columns:1fr 1fr;} }
.pm-field label{display:block; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:4px;}
.pm-select{
  width:100%; min-height:44px; padding:8px 12px; background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-size:.92rem;
}
.pm-seg{display:flex; flex-wrap:wrap; gap:6px;}
.pm-seg button{
  min-height:44px; padding:6px 14px; background:var(--surface); color:var(--ink-soft); border:1px solid var(--border-strong);
  border-radius:99px; font-size:.86rem; font-weight:600; cursor:pointer;
}
.pm-seg button[aria-pressed="true"]{background:var(--primary); color:var(--primary-ink); border-color:var(--primary);}
.pm-seg .c{opacity:.75; font-variant-numeric:tabular-nums; margin-left:4px; font-weight:500;}

.pm-topic{display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; padding:10px 0; border-top:1px solid var(--border); width:100%; background:none; border-left:none; border-right:none; border-bottom:none; text-align:left; color:inherit; cursor:pointer; min-height:56px;}
.pm-topic:first-child{border-top:none;}
.pm-topic:hover .t{color:var(--primary);}
.pm-topic .t{font-weight:600; font-size:.9rem; line-height:1.3;}
.pm-topic .m{font-size:.76rem; color:var(--ink-soft);}
.pm-topic .pm-bar{grid-column:1 / -1;}

.pm-qlist{display:flex; flex-direction:column;}
.pm-qrow{display:flex; gap:10px; align-items:flex-start; min-height:52px; padding:10px 0; border-top:1px solid var(--border); width:100%; background:none; border-left:none; border-right:none; border-bottom:none; text-align:left; color:inherit; cursor:pointer;}
.pm-qrow:first-child{border-top:none;}
.pm-qrow:hover .t{color:var(--primary);}
.pm-qrow .dot{width:12px; height:12px; border-radius:50%; flex:none; margin-top:6px; border:2px solid var(--border-strong);}
.pm-qrow .dot.ok{background:var(--success); border-color:var(--success);}
.pm-qrow .dot.no{background:var(--danger); border-color:var(--danger);}
.pm-qrow .t{font-size:.9rem; line-height:1.4;}
.pm-qrow .m{font-size:.74rem; color:var(--ink-soft);}

.pm-run-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.pm-run-head .grow{flex:1; min-width:0;}
.pm-run-count{font-size:.82rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; margin-bottom:6px; display:flex; justify-content:space-between;}
.pm-run-meta{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
.pm-run-actions{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
.pm-run-actions .pm-btn{flex:1 1 140px;}

/* ---------- Reto de aplicación ---------- */
.pm-steps{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:10px;}
.pm-steps li{display:flex; gap:12px; align-items:flex-start; font-size:.93rem;}
.pm-steps .n{width:26px; height:26px; border-radius:50%; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:.76rem; font-weight:700; flex:none;}
.pm-timer{display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.pm-qmap{display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:6px; margin:10px 0 0;}
.pm-qmap button{
  position:relative; min-height:44px; background:var(--surface); color:var(--ink-soft); border:1.5px solid var(--border-strong); border-radius:var(--radius-sm);
  font-size:.85rem; font-weight:600; cursor:pointer; font-variant-numeric:tabular-nums;
}
.pm-qmap button.answered{background:var(--surface-2); color:var(--ink); border-color:var(--ink-faint);}
.pm-qmap button.current{border-color:var(--primary); color:var(--primary); background:var(--primary-soft);}
.pm-qmap button.flag::after{content:""; position:absolute; top:3px; right:3px; width:9px; height:9px; border-radius:50%; background:var(--warning);}
.pm-legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.76rem; color:var(--ink-soft); margin-top:10px;}
.pm-legend span{display:inline-flex; align-items:center; gap:6px;}
.pm-legend i{width:12px; height:12px; border-radius:4px; border:1.5px solid var(--border-strong); display:inline-block;}
.pm-legend i.a{background:var(--surface-2); border-color:var(--ink-faint);}
.pm-legend i.f{background:var(--warning); border-color:var(--warning); border-radius:50%;}
.pm-details{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); padding:0 14px;}
.pm-details summary{min-height:48px; display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:600; font-size:.9rem; list-style:none;}
.pm-details summary::-webkit-details-marker{display:none;}
.pm-details summary::after{content:""; margin-left:auto; width:8px; height:8px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:rotate(45deg); transition:transform .2s;}
.pm-details[open] summary::after{transform:rotate(-135deg);}
.pm-details > :not(summary){padding-bottom:14px;}
.pm-flagbtn[aria-pressed="true"]{background:var(--warning-soft); color:var(--warning); border-color:var(--warning);}
.pm-pause{text-align:center; padding:48px 16px;}
.pm-pause h2{font-family:var(--serif); font-size:1.4rem; margin:12px 0 6px;}

/* Resultados */
.pm-result{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:24px 16px;}
.pm-result h1{font-family:var(--serif); font-size:1.5rem; margin:0;}
.pm-result .pm-ring{--sz:132px;}
.pm-result .pm-ring.pop{animation:pmPop .6s ease;}
.pm-delta{font-size:.92rem; font-weight:600;}
.pm-delta.up{color:var(--success);} .pm-delta.down{color:var(--warning);}
.pm-reco{display:flex; flex-direction:column; gap:10px;}
.pm-reco .it{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:var(--radius-sm); background:var(--surface-2); font-size:.92rem;}
.pm-reco .it.good{background:var(--success-soft);} .pm-reco .it.good svg{color:var(--success);}
.pm-reco .it.warn{background:var(--warning-soft);} .pm-reco .it.warn svg{color:var(--warning);}
.pm-reco .it.info svg{color:var(--primary);}
.pm-reco svg{margin-top:3px;}
.pm-wrong{padding:14px 0; border-top:1px solid var(--border);}
.pm-wrong:first-child{border-top:none; padding-top:0;}
.pm-wrong .q{font-weight:600; margin:0 0 6px;}
.pm-wrong .a{font-size:.88rem; margin:0 0 4px;}
.pm-wrong .a.bad{color:var(--danger);} .pm-wrong .a.good{color:var(--success);}
.pm-wrong .e{font-size:.88rem; color:var(--ink-soft); margin:6px 0 0;}
.pm-table-wrap{overflow-x:auto;}
.pm-table{width:100%; border-collapse:collapse; font-size:.88rem; min-width:420px;}
.pm-table th{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); text-align:left; padding:6px 8px; border-bottom:1px solid var(--border-strong);}
.pm-table td{padding:10px 8px; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums;}
.pm-days{display:grid; grid-template-columns:repeat(14,1fr); gap:4px;}
.pm-days i{aspect-ratio:1; border-radius:4px; background:var(--surface-2); display:block;}
.pm-days i.on{background:var(--primary);}
.pm-days i.today{outline:2px solid var(--primary); outline-offset:1px;}

/* ---------- Toast ---------- */
.pm-toast{
  position:fixed; left:50%; bottom:20px; transform:translate(-50%,20px); opacity:0; pointer-events:none; z-index:1090;
  display:flex; align-items:center; gap:10px; max-width:min(92vw,420px); padding:12px 16px; border-radius:var(--radius-sm);
  background:var(--ink); color:var(--bg); font-size:.9rem; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:opacity .25s, transform .25s;
}
.pm-toast.show{opacity:1; transform:translate(-50%,0);}
.pm-toast svg{color:var(--success); flex:none;}

/* Diálogo (Bootstrap modal con nuestros tokens) */
#pmDialog{--bs-modal-bg:var(--surface); --bs-modal-color:var(--ink); --bs-modal-border-color:var(--border-strong); --bs-modal-border-radius:var(--radius);}
#pmDialog .modal-header{border-bottom:1px solid var(--border);}
#pmDialog .modal-footer{border-top:1px solid var(--border); gap:8px; flex-direction:column-reverse; align-items:stretch;}
#pmDialog .modal-footer > *{margin:0;}
#pmDialog .modal-title{font-family:var(--serif); font-size:1.2rem;}
#pmDialog .btn-close{width:44px; height:44px; margin:-8px -8px -8px auto; background-size:12px; filter:none;}
:root[data-theme="dark"] #pmDialog .btn-close{filter:invert(1);}
@media (min-width:576px){ #pmDialog .modal-footer{flex-direction:row; justify-content:flex-end;} }
.pm-dlg-stats{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}

@keyframes pmFade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
@keyframes pmPop{0%{transform:scale(.92);} 60%{transform:scale(1.04);} 100%{transform:scale(1);}}
.pm-view{animation:pmFade .25s ease;}
.pm-celebrate{animation:pmPop .5s ease;}

.pm-main:focus, .pm-sec:focus{outline:none;}
.pm-stat .ico{display:block;}

/* ---------- Específico CCDV-F: simulacros y exámenes ---------- */
.pm-countdown{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:1rem; font-variant-numeric:tabular-nums; padding:6px 12px; border-radius:99px; background:var(--surface-2); color:var(--ink);}
.pm-countdown.low{background:var(--warning-soft); color:var(--warning);}
.pm-countdown.crit{background:var(--danger-soft); color:var(--danger);}
.pm-set{display:flex; flex-direction:column; gap:6px; min-height:44px; padding:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; color:inherit; box-shadow:var(--shadow);}
.pm-set:hover{border-color:var(--primary);}
.pm-set .t{font-weight:700; font-size:.98rem;}
.pm-set .m{font-size:.8rem; color:var(--ink-soft);}
.pm-set .go{margin-top:auto; font-size:.85rem; font-weight:600; color:var(--primary); display:flex; align-items:center; gap:6px;}
.pm-set.exam{border-left:4px solid var(--primary);}
.pm-facts{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 16px;}
@media (min-width:768px){ .pm-facts{grid-template-columns:repeat(4,1fr);} }
.pm-fact{background:var(--surface-2); border-radius:var(--radius-sm); padding:12px;}
.pm-fact .v{font-family:var(--serif); font-size:1.4rem; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums;}
.pm-fact .l{font-size:.76rem; color:var(--ink-soft); margin-top:2px;}
.pm-score-big{font-family:var(--serif); font-size:2.6rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;}
.pm-score-big small{font-size:1.1rem; color:var(--ink-faint); font-weight:400;}
.pm-verdict{font-weight:700; font-size:1.05rem;}
.pm-verdict.pass{color:var(--success);} .pm-verdict.fail{color:var(--danger);}
.pm-dom{display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; padding:10px 0; border-top:1px solid var(--border); text-decoration:none; color:inherit; min-height:52px;}
.pm-dom:first-child{border-top:none;}
.pm-dom .t{font-weight:600; font-size:.9rem; line-height:1.3;}
.pm-dom .m{font-size:.76rem; color:var(--ink-soft);}
.pm-dom .pm-bar{grid-column:1 / -1;}
.pm-weightbar{position:relative;}
.pm-nav-w{font-size:.68rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; flex:none;}
.pm-weight{background:var(--primary-soft); color:var(--primary);}