/* ============================================================
   hto-licensing — SHELL LIGHT (sidebar + portal-main + progress UI)
   Ensamblado desde chunks portados (branch light-pilot)
============================================================ */

/* ============================================================
   hto-licensing — SHELL LIGHT — light-chunks/shell-sidebar.css
   Port light de css/portal.css (shell sidebar + colapsable) +
   overrides para la UI que inyecta js/auth-bootstrap-v2.js.
   Requiere css/light/base-light.css cargado antes (tokens :root,
   fondos grid/aurora/noise). NO redefine nada de base-light.
   Secciones:
     1. Shell base (html/body, .portal, .portal-sidebar, .sb-*)
     2. .portal-main + #particleCanvas
     3. .sb-toggle
     4. Estado colapsado (desktop, html.sb-collapsed)
     5. Mobile (icon-only + drawer html.sb-mobile-open)
     6. prefers-reduced-motion
     7. Overrides auth-bootstrap-v2.js (loader, view-as bar,
        user chip de portal-auth.css inyectado)
   Layout, media queries y spacing idénticos al origen dark:
   solo cambian colores (regla dura #1).
============================================================ */

/* ── 1. Shell base ── */
html,body{margin:0;padding:0;min-height:100vh;overflow-x:hidden;max-width:100%;}

.portal{display:grid;grid-template-columns:260px 1fr;min-height:100vh;position:relative;transition:grid-template-columns .4s cubic-bezier(.25,1.1,.4,1);max-width:100%;}
.portal-sidebar{position:fixed;top:0;left:0;width:260px;height:100vh;background:#fbfaf7;border-right:1px solid var(--border);display:flex;flex-direction:column;padding:24px 0;z-index:60;transition:width .4s cubic-bezier(.25,1.1,.4,1);}
.portal-sidebar .sb-brand{flex-shrink:0;min-height:39px;gap:8px;padding:0 22px 22px;border-bottom:1px solid var(--border);margin-bottom:16px;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;transition:padding .3s ease,justify-content .3s ease;}
.portal-sidebar .sb-brand img{height:32px;max-width:100%;display:block;transition:height .3s ease;}
.portal-sidebar .sb-brand img.sb-logo-mark{height:15px;}
.portal-sidebar .sb-brand img.sb-logo-text{height:17px;}
.portal-sidebar .sb-section{font-family:var(--font-mono);font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);padding:0 22px 10px;overflow:hidden;}
.portal-sidebar .sb-nav{display:flex;flex-direction:column;gap:2px;padding:0 12px;}
.portal-sidebar .sb-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--text-sec);font-size:.88rem;font-weight:500;letter-spacing:.005em;border:1px solid transparent;transition:background .18s ease,color .18s ease,border-color .18s ease,gap .3s ease,padding .3s ease;white-space:nowrap;overflow:hidden;}
.portal-sidebar .sb-item:hover{background:#f1efe9;color:var(--text);}
.portal-sidebar .sb-item.active{background:var(--accent-tint);color:var(--accent-text);border-color:var(--accent-soft);box-shadow:inset 3px 0 0 0 var(--accent-text);}
.portal-sidebar .sb-item.active .sb-icon svg{stroke:var(--accent-text);}
.portal-sidebar .sb-icon{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;}
.portal-sidebar .sb-icon svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;}
.portal-sidebar .sb-footer{margin-top:auto;padding:16px 22px 22px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;transition:padding .3s ease,flex-direction .3s ease,gap .3s ease;}
.portal-sidebar .sb-home{font-size:.7rem;color:var(--text-muted);text-decoration:none;transition:color .18s ease;white-space:nowrap;}
.portal-sidebar .sb-home:hover{color:var(--accent-text);}
.portal-sidebar .sb-lang{display:inline-flex;gap:2px;background:#ffffff;border:1px solid var(--border);border-radius:6px;padding:2px;}
.portal-sidebar .sb-lang .lang-btn{background:transparent;border:none;color:var(--text-muted);font-size:.68rem;font-weight:600;letter-spacing:.06em;padding:4px 10px;border-radius:4px;cursor:pointer;transition:background .18s ease,color .18s ease;}
.portal-sidebar .sb-lang .lang-btn.active{background:var(--accent-tint);color:var(--accent-text);}

/* ── 2. Main + fondo de grid (cuadraditos, como el portal de recursos) ── */
.portal-main{position:relative;min-width:0;grid-column:2 / 3;overflow-x:hidden;background:transparent;}
/* Rejilla de cuadraditos fija en el área de contenido (a la derecha del sidebar).
   Se desvanece hacia los bordes con un mask radial. */
.portal-main::before{
  content:'';
  position:fixed;
  top:0;left:260px;right:0;bottom:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(109,214,132,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,214,132,.28) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 30%, #000 0%, rgba(0,0,0,.6) 55%, transparent 100%);
          mask-image:radial-gradient(ellipse 90% 75% at 50% 30%, #000 0%, rgba(0,0,0,.6) 55%, transparent 100%);
  transition:left .4s cubic-bezier(.25,1.1,.4,1);
}
#particleCanvas{position:fixed;top:0;left:260px;width:calc(100vw - 260px);height:100vh;z-index:0;pointer-events:none;transition:left .4s cubic-bezier(.25,1.1,.4,1),width .4s cubic-bezier(.25,1.1,.4,1);}
.portal-main .page-body{position:relative;z-index:10;}
.portal-main .footer{position:relative;z-index:10;}

/* ── 3. Sidebar toggle button ── */
.sb-toggle{position:absolute;top:22px;right:-14px;width:28px;height:28px;border-radius:50%;background:#ffffff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:color .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;z-index:70;padding:0;}
.sb-toggle:hover{color:var(--accent-text);border-color:var(--accent-soft);background:#ffffff;box-shadow:0 0 0 3px rgba(21,163,74,.10);}
.sb-toggle:focus-visible{outline:none;color:var(--accent-text);border-color:var(--accent-dark);}
.sb-toggle svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .4s cubic-bezier(.25,1.1,.4,1);}

/* ── 4. Collapsed state — desktop only, triggered via html.sb-collapsed flag ── */
@media(min-width:981px){
  html.sb-collapsed .portal{grid-template-columns:72px 1fr;}
  html.sb-collapsed .portal-sidebar{width:72px;}
  html.sb-collapsed #particleCanvas{left:72px;width:calc(100vw - 72px);}
  html.sb-collapsed .portal-main::before{left:72px;}
  html.sb-collapsed .portal-sidebar .sb-brand{display:none;}
  html.sb-collapsed .portal-sidebar .sb-section{display:none;}
  html.sb-collapsed .portal-sidebar .sb-item{justify-content:center;gap:0;padding:10px 0;}
  html.sb-collapsed .portal-sidebar .sb-item > span:not(.sb-icon){display:none;}
  html.sb-collapsed .portal-sidebar .sb-footer{flex-direction:column;padding:16px 8px 16px;gap:8px;align-items:center;justify-content:center;}
  html.sb-collapsed .portal-sidebar .sb-home{font-size:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;}
  html.sb-collapsed .portal-sidebar .sb-home::before{content:"\2190";font-size:.95rem;color:var(--text-muted);}
  html.sb-collapsed .portal-sidebar .sb-home:hover::before{color:var(--accent-text);}
  html.sb-collapsed .portal-sidebar .sb-lang{display:none;}
  html.sb-collapsed .sb-toggle svg{transform:rotate(180deg);}
}

/* ── 5. Mobile: vertical icon-only sidebar on the left + tap to open drawer ── */
@media(max-width:980px){
  .portal{grid-template-columns:64px 1fr;}
  .portal-sidebar{padding:18px 0;width:64px;}
  /* Hide wordmark on icon-only mode (logo horizontal desborda los 64px) */
  .portal-sidebar .sb-brand{display:none;}
  .portal-sidebar .sb-section{display:none;}
  .portal-sidebar .sb-nav{padding:0 8px;gap:4px;}
  .portal-sidebar .sb-item{justify-content:center;gap:0;padding:10px 0;}
  .portal-sidebar .sb-item > span:not(.sb-icon){display:none;}
  .portal-sidebar .sb-footer{flex-direction:column;padding:14px 8px 14px;gap:8px;align-items:center;justify-content:center;}
  .portal-sidebar .sb-home{font-size:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;}
  .portal-sidebar .sb-home::before{content:"\2190";font-size:.95rem;color:var(--text-muted);}
  .portal-sidebar .sb-home:hover::before{color:var(--accent-text);}
  .portal-sidebar .sb-lang{display:none;}
  .sb-toggle{top:14px;right:-11px;width:22px;height:22px;}
  .sb-toggle svg{transform:rotate(180deg);width:11px;height:11px;}
  #particleCanvas{left:64px;width:calc(100vw - 64px);}
  .portal-main::before{left:64px;}

  /* Mobile drawer: tap toggle to overlay full-text sidebar sin reposicionar main */
  html.sb-mobile-open .portal-sidebar{position:fixed;top:0;left:0;width:240px;height:100vh;z-index:80;border-right:1px solid var(--border);box-shadow:0 0 30px rgba(15,23,42,.14);padding:24px 0;}
  html.sb-mobile-open .portal-sidebar .sb-brand{display:flex;padding:0 22px 22px;justify-content:flex-start;}
  html.sb-mobile-open .portal-sidebar .sb-brand img{height:32px;}
  html.sb-mobile-open .portal-sidebar .sb-brand img.sb-logo-mark{height:15px;}
  html.sb-mobile-open .portal-sidebar .sb-brand img.sb-logo-text{height:17px;}
  html.sb-mobile-open .portal-sidebar .sb-section{display:block;}
  html.sb-mobile-open .portal-sidebar .sb-nav{padding:0 12px;gap:2px;}
  html.sb-mobile-open .portal-sidebar .sb-item{justify-content:flex-start;gap:12px;padding:10px 12px;}
  html.sb-mobile-open .portal-sidebar .sb-item > span:not(.sb-icon){display:inline;}
  html.sb-mobile-open .portal-sidebar .sb-footer{flex-direction:row;padding:16px 22px 22px;gap:10px;align-items:center;justify-content:space-between;}
  html.sb-mobile-open .portal-sidebar .sb-home{font-size:.7rem;width:auto;height:auto;border-radius:0;}
  html.sb-mobile-open .portal-sidebar .sb-home::before{content:none;}
  html.sb-mobile-open .portal-sidebar .sb-lang{display:inline-flex;}
  html.sb-mobile-open .sb-toggle{right:-11px;}
  html.sb-mobile-open .sb-toggle svg{transform:none;}
  html.sb-mobile-open body::after{content:"";position:fixed;inset:0;background:rgba(15,23,42,.32);z-index:75;backdrop-filter:blur(2px);}
  html.sb-mobile-open{overflow:hidden;}
}
@media(max-width:520px){
  .portal{grid-template-columns:56px 1fr;}
  .portal-sidebar{width:56px;}
  #particleCanvas{left:56px;width:calc(100vw - 56px);}
  .portal-main::before{left:56px;}
}

/* ── 6. Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  .portal,#particleCanvas,.sb-toggle svg,.portal-sidebar,.portal-sidebar .sb-brand,.portal-sidebar .sb-brand img,.portal-sidebar .sb-item,.portal-sidebar .sb-footer{transition:none !important;}
  #particleCanvas{display:none;}
}

/* ════════════════════════════════════════════════════════════
   7. OVERRIDES — UI inyectada por js/auth-bootstrap-v2.js
   El JS no se toca (regla dura #5): overrides con !important
   anclados a los ids/clases reales que crea el script.
════════════════════════════════════════════════════════════ */

/* ── 7a. Fullscreen loader (#auth-fullscreen-loader) ──
   El script lo inyecta con style inline dark (fondo negro, spinner
   blanco translúcido con top verde brand). !important vence al inline. */
#auth-fullscreen-loader{background:#ffffff !important;color:var(--text-muted) !important;}
#auth-fullscreen-loader div div{border-color:var(--border) !important;border-top-color:var(--accent-text) !important;}

/* ── 7b. View-as bar (#hto-viewas-bar) ──
   injectViewAsStyles() añade un <style id="hto-viewas-style"> dark
   (pill casi negra + gold dark). Mapeo gold → #b45309, tints gold
   #fdf6ec/#f2ddba, texto sobre chip sólido → blanco. */
#hto-viewas-bar{background:#fdf6ec !important;border:1px solid #f2ddba !important;box-shadow:0 14px 44px rgba(15,23,42,.14) !important;color:#713f12 !important;}
#hto-viewas-bar .hto-viewas-eye{color:var(--gold) !important;}
#hto-viewas-bar strong{color:var(--gold) !important;}
#hto-viewas-bar .hto-viewas-exit{background:var(--gold) !important;color:#ffffff !important;}
#hto-viewas-bar .hto-viewas-exit:hover{background:#92400e !important;}

/* ── 7c. User chip en sidebar (.auth-user-chip) ──
   injectChip() crea el chip y ensureCSS() fuerza /css/portal-auth.css
   (dark) en TODAS las páginas — se carga después de este archivo,
   por eso los overrides van con !important. */
.auth-user-chip{border-top:1px solid var(--border) !important;background:#ffffff !important;}
.auth-user-chip img{background:var(--border) !important;}
.auth-user-chip .auth-user-name{color:var(--text-sec) !important;}
.auth-user-chip .auth-user-role{background:var(--accent-tint) !important;color:var(--accent-text) !important;border:1px solid var(--accent-soft) !important;}
.auth-user-chip .auth-user-role.client{background:var(--bg-soft) !important;color:var(--text-sec) !important;border-color:var(--border) !important;}
.auth-signout{background:none !important;border:1px solid var(--border) !important;color:var(--text-muted) !important;}
.auth-signout:hover{color:var(--text) !important;border-color:var(--border-hover) !important;}

/* ============================================================
   progress.css — PORT LIGHT de css/lesson-progress.v2.css
   Origen: /css/lesson-progress.v2.css (portal hto-licensing, dark)
   Base:   css/light/base-light.css (tokens :root — no se redefine nada)

   Secciones:
     1. LESSON PROGRESS BLOCK   (.lesson-progress — botones fin de clase)
     2. MODULE PROGRESS SUMMARY (.module-progress-summary — cabecera module index)
     3. SOP CARD PROGRESS       (.sop-card-progress — mini barras courses.html)
     4. LESSON ROW PROGRESS     (.lesson-row-progress — pills inline module index)
     5. JS OVERRIDES            (lesson-progress.v3.js inyecta "Siguiente lección"
                                 con estilos dark inline → overrides !important)

   Mapeo de tonos (decisión PROGRESS UI del spec):
     Verde dark "leído/completado" → texto #15a34a · tint #ebf9ee · borde #bfedc9 · mid #48cb64
     Azul dark "implementado"      → texto #0369a1 · tint #e0f2fe · borde #bae6fd · mid #4ba3d8
     Barras: fill degradado #48cb64→#15a34a (azul #56a9dc→#0369a1) sobre track #e6e8eb
============================================================ */

/* ============================================================
   1. LESSON PROGRESS BLOCK — final de cada clase
============================================================ */
.lesson-progress {
  margin: 64px auto 24px;
  max-width: 880px;
  padding: 0 24px;
}
.lesson-progress .lp-inner {
  position: relative;
  padding: 28px 28px 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-top-color: var(--accent-soft);
  border-radius: 16px;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 2px 12px rgba(15, 23, 42, .04);
}

.lesson-progress .lp-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}
.lesson-progress .lp-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.lesson-progress .lp-hint {
  font-size: .85rem;
  color: var(--text-sec);
  letter-spacing: -.003em;
}

.lesson-progress .lp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lesson-progress .lp-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 22px;
  border-radius: 11px;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.003em;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .25s ease-out, color .25s ease-out, box-shadow .25s ease-out, transform .25s ease-out, background .25s ease-out;
}
.lesson-progress .lp-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(15, 23, 42, .04) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .6s ease-out;
  pointer-events: none;
}
.lesson-progress .lp-btn:hover::before { transform: translateX(100%); }
.lesson-progress .lp-btn:active { transform: translateY(1px); }
.lesson-progress .lp-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.lesson-progress .lp-btn > * { position: relative; z-index: 1; }
.lesson-progress .lp-btn svg {
  width: 16px; height: 16px;
  stroke: currentColor; stroke-width: 2.4; fill: none;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.lesson-progress .lp-btn .lp-btn-text-active { display: none; }

/* Completado — verde HTO light #15a34a */
.lesson-progress .lp-btn-completed {
  background: linear-gradient(180deg, #f4fcf6 0%, #ebf9ee 100%);
  border: 1px solid var(--accent-soft);
  color: var(--accent-text);
  box-shadow: 0 2px 10px rgba(21, 163, 74, .08);
}
.lesson-progress .lp-btn-completed:hover {
  border-color: var(--accent-dark);
  color: #0e7a3a;
  box-shadow: 0 4px 16px rgba(21, 163, 74, .15);
}
.lesson-progress .lp-btn-completed.is-active {
  background: linear-gradient(180deg, #ebf9ee 0%, #d9f3e1 100%);
  border-color: var(--accent-text);
  color: #0e7a3a;
  box-shadow: 0 4px 18px rgba(21, 163, 74, .15);
}

/* Implementado — azul light #0369a1 */
.lesson-progress .lp-btn-implemented {
  background: linear-gradient(180deg, #f2f9fe 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  color: #0369a1;
  box-shadow: 0 2px 10px rgba(3, 105, 161, .08);
}
.lesson-progress .lp-btn-implemented:hover {
  border-color: #4ba3d8;
  color: #075985;
  box-shadow: 0 4px 16px rgba(3, 105, 161, .15);
}
.lesson-progress .lp-btn-implemented.is-active {
  background: linear-gradient(180deg, #e0f2fe 0%, #cfeafc 100%);
  border-color: #0369a1;
  color: #075985;
  box-shadow: 0 4px 18px rgba(3, 105, 161, .15);
}

.lesson-progress .lp-btn.is-active svg { opacity: 1; transform: scale(1); }
.lesson-progress .lp-btn.is-active .lp-btn-text { display: none; }
.lesson-progress .lp-btn.is-active .lp-btn-text-active { display: inline; }

.lesson-progress .lp-status {
  margin-top: 12px;
  text-align: center;
  font-size: .78rem;
  color: var(--text-muted);
  min-height: 1em;
}
.lesson-progress .lp-status[data-tone="error"] { color: #dc2626; }

/* Next lesson CTA */
.lesson-progress .lp-next-wrap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.lesson-progress .lp-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  border-radius: 11px;
  background: #ffffff;
  border: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.lesson-progress .lp-next:hover {
  background: var(--bg-soft);
  border-color: var(--border-hover);
  box-shadow: 0 4px 24px rgba(15, 23, 42, .08);
}
.lesson-progress .lp-next-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.lesson-progress .lp-next-kicker {
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lesson-progress .lp-next-title {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.012em;
  line-height: 1.3;
}
.lesson-progress .lp-next-arrow {
  width: 18px;
  height: 18px;
  stroke: var(--text-muted);
  stroke-width: 2;
  flex-shrink: 0;
  transition: transform .25s ease, stroke .25s ease;
}
.lesson-progress .lp-next:hover .lp-next-arrow {
  stroke: var(--text-sec);
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .lesson-progress { margin: 48px auto 16px; padding: 0 16px; }
  .lesson-progress .lp-inner { padding: 22px 20px 18px; }
  .lesson-progress .lp-actions { grid-template-columns: 1fr; }
  .lesson-progress .lp-next-title { font-size: .86rem; white-space: normal; }
}

/* ============================================================
   2. MODULE PROGRESS SUMMARY — cabecera de cada module index
============================================================ */
.module-progress-summary {
  margin: 0 auto 3.5rem;
  max-width: 880px;
  padding: 0;
}
.module-progress-summary .mps-card {
  position: relative;
  overflow: hidden;
  padding: 28px 32px;
  border-radius: 16px;
  background: linear-gradient(165deg, #ecf9f0 0%, #ffffff 50%, #eef6fc 100%);
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(15, 23, 42, .04);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}
.module-progress-summary .mps-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(21, 163, 74, .45) 35%, rgba(3, 105, 161, .45) 65%, transparent);
}
.module-progress-summary .mps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.module-progress-summary .mps-label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.module-progress-summary .mps-stats {
  display: flex;
  gap: 18px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: -.005em;
}
.module-progress-summary .mps-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-sec);
}
.module-progress-summary .mps-stat::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.module-progress-summary .mps-stat[data-tone="green"]::before { background: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-tint); }
.module-progress-summary .mps-stat[data-tone="blue"]::before  { background: #0369a1; box-shadow: 0 0 0 3px #e0f2fe; }
.module-progress-summary .mps-stat strong {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.module-progress-summary .mps-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.module-progress-summary .mps-bar {
  position: relative;
}
.module-progress-summary .mps-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: .78rem;
  color: var(--text-sec);
  letter-spacing: -.003em;
}
.module-progress-summary .mps-bar-row .mps-bar-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.module-progress-summary .mps-bar-row .mps-bar-name::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
}
.module-progress-summary .mps-bar[data-tone="green"] .mps-bar-name::before { background: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-tint); }
.module-progress-summary .mps-bar[data-tone="blue"]  .mps-bar-name::before { background: #0369a1; box-shadow: 0 0 0 3px #e0f2fe; }
.module-progress-summary .mps-bar-row .mps-bar-value {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.module-progress-summary .mps-track {
  position: relative;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.module-progress-summary .mps-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  transition: width .8s cubic-bezier(.22,1,.36,1);
}
.module-progress-summary .mps-bar[data-tone="green"] .mps-fill {
  background: linear-gradient(90deg, var(--accent-dark), var(--accent-text));
  box-shadow: 0 0 8px rgba(21, 163, 74, .15);
}
.module-progress-summary .mps-bar[data-tone="blue"] .mps-fill {
  background: linear-gradient(90deg, #56a9dc, #0369a1);
  box-shadow: 0 0 8px rgba(3, 105, 161, .15);
}

@media (max-width: 640px) {
  .module-progress-summary .mps-card { padding: 22px 22px; }
  .module-progress-summary .mps-stats { gap: 14px; }
}

/* ============================================================
   3. SOP CARD PROGRESS — mini barras en courses.html
============================================================ */
.sop-card-progress {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: .72rem;
  letter-spacing: -.003em;
}
.sop-card-progress .scp-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sop-card-progress .scp-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sop-card-progress .scp-row[data-tone="green"] .scp-dot { background: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-tint); }
.sop-card-progress .scp-row[data-tone="blue"]  .scp-dot { background: #0369a1; box-shadow: 0 0 0 3px #e0f2fe; }
.sop-card-progress .scp-track {
  position: relative;
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.sop-card-progress .scp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  transition: width .8s cubic-bezier(.22,1,.36,1);
}
.sop-card-progress .scp-row[data-tone="green"] .scp-fill {
  background: linear-gradient(90deg, var(--accent-dark), var(--accent-text));
}
.sop-card-progress .scp-row[data-tone="blue"] .scp-fill {
  background: linear-gradient(90deg, #56a9dc, #0369a1);
}
.sop-card-progress .scp-value {
  font-weight: 700;
  color: var(--text-sec);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}
.sop-card-progress .scp-row[data-tone="green"] .scp-value { color: var(--accent-text); }
.sop-card-progress .scp-row[data-tone="blue"]  .scp-value { color: #0369a1; }

/* Skeleton mientras carga (sin progreso aún) */
.sop-card-progress[data-state="loading"] .scp-track { opacity: .5; }
.sop-card-progress[data-state="empty"] .scp-fill { width: 0% !important; }

/* ============================================================
   4. LESSON ROW PROGRESS PILLS — botones inline en module index
============================================================ */
.lesson-row-progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.lesson-row-progress .lrp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: inherit;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .25s ease, transform .15s ease;
  white-space: nowrap;
  line-height: 1;
}
.lesson-row-progress .lrp-btn:hover {
  background: var(--bg-soft);
  color: var(--text-sec);
}
.lesson-row-progress .lrp-btn:active { transform: translateY(1px); }
.lesson-row-progress .lrp-btn svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 2.6;
  fill: none;
  opacity: .55;
  transition: opacity .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}

/* Verde (leído) */
.lesson-row-progress .lrp-btn[data-tone="green"]:hover {
  border-color: var(--accent-soft);
  color: var(--accent-text);
}
.lesson-row-progress .lrp-btn[data-tone="green"]:hover svg { opacity: .9; }
.lesson-row-progress .lrp-btn[data-tone="green"].is-active {
  background: var(--accent-tint);
  border-color: var(--accent-dark);
  color: var(--accent-text);
  box-shadow: 0 1px 6px rgba(21, 163, 74, .15), inset 0 0 0 1px rgba(21, 163, 74, .08);
}
.lesson-row-progress .lrp-btn[data-tone="green"].is-active svg { opacity: 1; transform: scale(1.05); }

/* Azul (implementado) */
.lesson-row-progress .lrp-btn[data-tone="blue"]:hover {
  border-color: #bae6fd;
  color: #0369a1;
}
.lesson-row-progress .lrp-btn[data-tone="blue"]:hover svg { opacity: .9; }
.lesson-row-progress .lrp-btn[data-tone="blue"].is-active {
  background: #e0f2fe;
  border-color: #4ba3d8;
  color: #0369a1;
  box-shadow: 0 1px 6px rgba(3, 105, 161, .15), inset 0 0 0 1px rgba(3, 105, 161, .08);
}
.lesson-row-progress .lrp-btn[data-tone="blue"].is-active svg { opacity: 1; transform: scale(1.05); }

.lesson-row-progress .lrp-btn[data-busy="1"] {
  opacity: .45;
  pointer-events: none;
}

/* Esconde el badge "Disponible" cuando hay buttons (redundante) */
.lesson-row:has(.lesson-row-progress) .lesson-badge.lesson-badge-active {
  display: none;
}

/* Tablet: solo iconos, sin texto */
@media (max-width: 720px) {
  .lesson-row-progress { gap: 5px; }
  .lesson-row-progress .lrp-btn {
    padding: 5px 7px;
    min-width: 26px;
  }
  .lesson-row-progress .lrp-btn .lrp-btn-text { display: none !important; }
  .lesson-row-progress .lrp-btn svg { width: 12px; height: 12px; }
}

/* Mobile: layout en columna — buttons debajo del título para que no fragmenten el título */
@media (max-width: 600px) {
  .lesson-row:has(.lesson-row-progress) {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .lesson-row:has(.lesson-row-progress) .lesson-num {
    order: 1;
  }
  .lesson-row:has(.lesson-row-progress) .lesson-title {
    order: 2;
    flex: 1 1 calc(100% - 40px);
    min-width: 0;
  }
  .lesson-row-progress {
    order: 3;
    flex: 1 1 100%;
    margin-left: 36px;
    justify-content: flex-start;
  }
  .lesson-row-progress .lrp-btn {
    padding: 6px 10px;
    min-width: auto;
  }
  .lesson-row-progress .lrp-btn .lrp-btn-text {
    display: inline !important;
    font-size: .58rem;
  }
}

/* ============================================================
   5. JS OVERRIDES — lesson-progress.v3.js (NO editar el JS)
   buildNextHtml() inyecta el CTA "Siguiente lección" con estilos
   dark INLINE (sin clases .lp-next*, solo id #lp-next-btn).
   Overrides !important anclados a #lp-next-btn y su wrapper.
============================================================ */

/* Wrapper del CTA (div inline con border-top rgba blanco) */
.lesson-progress .lp-inner div:has(> #lp-next-btn) {
  border-top-color: var(--border) !important;
}

/* Card del link (inline dark: bg blanco alpha .03, border alpha .1, texto alpha .88) */
#lp-next-btn {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#lp-next-btn:hover {
  background: var(--bg-soft) !important;
  border-color: var(--border-hover) !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, .08);
}

/* Kicker "Siguiente lección" (inline dark: texto blanco alpha .4 + font-family:monospace) */
#lp-next-btn > span > span:first-child {
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
}

/* Título de la siguiente lección (inline dark: texto blanco alpha .9) */
#lp-next-btn > span > span:last-child {
  color: var(--text) !important;
}

/* Flecha (inline dark: stroke blanco alpha .4) */
#lp-next-btn svg {
  stroke: var(--text-muted) !important;
  transition: transform .25s ease, stroke .25s ease;
}
#lp-next-btn:hover svg {
  stroke: var(--text-sec) !important;
  transform: translateX(4px);
}