/* CortexGovernor Academy — visor.
   El rail y el panel copian el menú de Cortex Academic (static/css/app.css:326-395 de ese
   repo): mismas medidas, colores y comportamiento. El área de trabajo es clara. */
:root{
  --rail:#ffffff;--rail-borde:#ececec;--rail-hover:#f1f4ff;--rail-on:#eef2ff;--acento:#2547f4;
  --sb:#ffffff;--sb-borde:#d9dde3;--sb-texto:#3a3a3a;--sb-tenue:#6b7280;
  --fondo:#f6f8fb;--superficie:#ffffff;--borde:#e3e8ef;--borde-fuerte:#cfd8e3;
  --texto:#0f172a;--texto-2:#475569;--texto-3:#64748b;
  --primario:#2563eb;--primario-2:#1d4ed8;--primario-suave:#eef4ff;
  --ok:#059669;--ok-suave:#ecfdf5;--error:#dc2626;--error-suave:#fef2f2;
  --radio:10px;--sombra:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06);
  --sombra-alta:0 10px 30px -12px rgba(15,23,42,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;color:var(--texto);
     background:var(--fondo);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit}
[hidden]{display:none!important}
.ico{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.75;
     stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:14px;height:14px}
.ico.xs{width:12px;height:12px}

/* ── Login ───────────────────────────────────────────────────────────────── */
#login{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh}
.login-marca{background:#0a1a33;color:#e2e8f0;padding:56px 64px;display:flex;flex-direction:column;
             position:relative;overflow:hidden}
.login-marca::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(96,165,250,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(96,165,250,.07) 1px,transparent 1px);
  background-size:40px 40px;mask-image:radial-gradient(ellipse at 30% 40%,#000 20%,transparent 75%)}
.login-marca>*{position:relative}
.marca{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;letter-spacing:-.01em;color:#fff}
.marca-sello{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff;
             background:linear-gradient(135deg,#3b82f6,#8b5cf6);font-size:13px;font-weight:700;letter-spacing:-.02em}
.login-titular{margin-top:auto;max-width:440px}
.login-titular h1{font-size:34px;line-height:1.15;font-weight:600;letter-spacing:-.025em;color:#fff}
.login-titular p{margin-top:16px;color:#94a3b8;font-size:15px;line-height:1.6}
.login-puntos{margin-top:32px;display:grid;gap:14px}
.login-puntos div{display:flex;gap:12px;align-items:flex-start;color:#cbd5e1;font-size:13.5px;line-height:1.5}
.login-puntos .ico{color:var(--acento);margin-top:1px}
.login-pie{margin-top:48px;color:#64748b;font-size:12px}
.login-form{display:flex;align-items:center;justify-content:center;padding:48px 24px;background:var(--superficie)}
.login-caja{width:100%;max-width:360px}
.login-caja h2{font-size:22px;font-weight:600;letter-spacing:-.02em}
.login-caja .sub{margin-top:6px;color:var(--texto-3)}
.campo{display:grid;gap:6px;margin-top:18px}
.campo label{font-size:12.5px;font-weight:500;color:var(--texto-2)}
.campo input,.campo select{height:40px;padding:0 12px;border:1px solid var(--borde-fuerte);border-radius:8px;
  background:#fff;color:var(--texto);outline:none;transition:border-color .12s,box-shadow .12s}
.campo input:focus,.campo select:focus{border-color:var(--primario);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;
     border-radius:8px;font-weight:500;transition:background .12s,border-color .12s,opacity .12s;white-space:nowrap;
     text-decoration:none;font-size:13px}
.btn:disabled{opacity:.55;cursor:default}
.btn-primario{background:var(--primario);color:#fff}
.btn-primario:hover:not(:disabled){background:var(--primario-2)}
.btn-borde{border:1px solid var(--borde-fuerte);background:#fff;color:var(--texto)}
.btn-borde:hover:not(:disabled){border-color:#94a3b8}
.btn-bloque{width:100%;height:42px;margin-top:24px}
.aviso{margin-top:14px;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.45}
.aviso.error{background:var(--error-suave);color:#991b1b;border:1px solid #fecaca}
.aviso.ok{background:var(--ok-suave);color:#065f46;border:1px solid #a7f3d0}

/* ── Estructura de la app ────────────────────────────────────────────────── */
#app{display:flex;height:100vh;overflow:hidden}
#rail{width:72px;flex:0 0 72px;background:var(--rail);display:flex;flex-direction:column;align-items:center;
      padding:.6rem 0;gap:.15rem;border-right:1px solid var(--rail-borde);z-index:200}
#rail .marca-sello{margin-bottom:.6rem}
.rail-btn{width:62px;padding:.45rem 0;border-radius:8px;display:flex;flex-direction:column;align-items:center;
          gap:.2rem;color:#4a5568;position:relative;transition:background .12s,color .12s}
.rail-btn span{font-size:.68rem;font-weight:600;text-align:center;line-height:1.15;letter-spacing:.01em}
.rail-btn:hover{background:var(--rail-hover);color:#141414}
.rail-btn.on{background:var(--rail-on);color:#1a33b8}
.rail-btn.on::before{content:"";position:absolute;left:-5px;top:22%;height:56%;width:3px;border-radius:0 3px 3px 0;
                     background:var(--acento)}
.rail-sep{width:32px;height:1px;background:#ececec;margin:.35rem 0}
.rail-fin{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:.3rem}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#eef2ff;color:#1a33b8;
        font-size:11.5px;font-weight:600;letter-spacing:.02em}

#sb{width:288px;flex:0 0 288px;background:var(--sb);border-right:1px solid #ececec;color:var(--sb-texto);display:flex;flex-direction:column;
    padding:.75rem .65rem;overflow:hidden}
#sb.sb-flota{position:fixed;left:72px;top:0;bottom:0;z-index:150;box-shadow:12px 0 32px rgba(15,23,42,.12)}
#sb.sb-oculto{display:none}
.nav-buscar{position:relative;margin:.1rem 0 .45rem}
.nav-buscar .ico{position:absolute;left:.55rem;top:50%;transform:translateY(-50%);color:var(--sb-tenue)}
.nav-buscar input{width:100%;height:30px;padding:0 2.4rem 0 1.9rem;border-radius:6px;border:1px solid var(--sb-borde);
                  background:#fff;color:#141414;font-size:.76rem;outline:none}
.nav-buscar input:focus{border-color:var(--acento)}
.nav-buscar kbd{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);font-size:.58rem;color:var(--sb-tenue);
                border:1px solid var(--sb-borde);border-radius:4px;padding:.05rem .25rem;font-family:inherit}
.nav-tit{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.2rem .2rem .4rem}
.nav-tit h2{font-size:.9rem;font-weight:700;color:#141414;line-height:1.3;min-width:0}
.nav-tit button{color:var(--sb-tenue);padding:.2rem;border-radius:5px;display:grid;place-items:center}
.nav-tit button:hover{background:#f3f4f6;color:#141414}
.nav-volver{display:flex;align-items:center;gap:.35rem;color:var(--sb-tenue);font-size:.72rem;padding:.2rem .2rem .45rem}
.nav-volver:hover{color:#141414}
.nav-progreso{padding:.1rem .2rem .7rem}
.nav-progreso .fila{display:flex;justify-content:space-between;font-size:.68rem;color:var(--sb-tenue);margin-bottom:.35rem}
.barra{height:4px;border-radius:4px;background:#e5e7eb;overflow:hidden}
.barra>i{display:block;height:100%;background:var(--acento);border-radius:4px;transition:width .3s}
.nav-lista{display:flex;flex-direction:column;overflow-y:auto;flex:1;margin:0 -.3rem;padding:0 .3rem}
.nav-lista::-webkit-scrollbar{width:6px}
.nav-lista::-webkit-scrollbar-thumb{background:#d9dde3;border-radius:3px}
.nav-capitulo{display:flex;flex-direction:column;gap:3px;width:100%;margin-top:6px;padding:14px 8px 8px;text-align:left;border-top:1px solid #ececec}
.nav-capitulo:first-child{border-top:0;margin-top:0}
.cap-fila{display:flex;align-items:center;gap:8px}
.cap-num{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2547f4}
.cap-cuenta{margin-left:auto;font-size:11.5px;color:#6b7280}
.nav-capitulo .chev{color:#6b7280;display:grid;transition:transform .15s}
.nav-capitulo.cerrado .chev{transform:rotate(-90deg)}
.cap-titulo{font-size:14.5px;font-weight:700;line-height:1.3;color:#141414}
.nav-capitulo:hover .cap-titulo{color:#1a33b8}
.nav-grupo-h{display:flex;align-items:center;gap:.35rem;width:100%;padding:.55rem .35rem .3rem;color:var(--sb-tenue);
             font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;text-align:left}
.nav-grupo-h .chev{transition:transform .15s}
.nav-grupo-h.cerrado .chev{transform:rotate(-90deg)}
.nav-grupo-h:hover{color:#141414}
.nav-grupo-h .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-grupo-h .cuenta{font-weight:600;letter-spacing:0}
.nav-item{display:flex;align-items:center;gap:.55rem;width:100%;padding:.4rem .45rem;border-radius:6px;
          color:var(--sb-texto);font-size:.775rem;text-align:left;position:relative}
.nav-item .lbl{flex:1;min-width:0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nav-item .meta{font-size:.62rem;color:var(--sb-tenue);flex:0 0 auto}
.nav-item:hover{background:#f3f4f6;color:#141414}
.nav-item.on{background:var(--rail-on);color:#1a33b8;font-weight:700}
.nav-item.on::before{content:"";position:absolute;left:0;top:20%;height:60%;width:3px;border-radius:0 3px 3px 0;background:var(--acento)}
.punto{width:16px;height:16px;border-radius:50%;border:1.5px solid #c5cad3;flex:0 0 16px;display:grid;place-items:center;
       font-size:.55rem;font-weight:700;color:var(--sb-tenue)}
.punto.hecho{border-color:#0e9f6e;background:#0e9f6e;color:#fff}
.nav-item.on .punto:not(.hecho){border-color:var(--acento);color:var(--acento)}
.nav-vacio{padding:1.4rem .6rem;text-align:center;color:var(--sb-tenue);font-size:.74rem;line-height:1.55}

/* ── Área principal ──────────────────────────────────────────────────────── */
#principal{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.cabecera{height:56px;flex:0 0 56px;display:flex;align-items:center;gap:12px;padding:0 28px;background:var(--superficie);
          border-bottom:1px solid var(--borde)}
.migas{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--texto-3);min-width:0}
.migas b{color:var(--texto);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cabecera .acciones{margin-left:auto;display:flex;gap:8px}
.vista{flex:1;overflow-y:auto}
.vista-marco{flex:1;display:flex;background:var(--superficie)}
.vista-marco iframe{flex:1;border:0;width:100%;height:100%}
.contenedor{max-width:1120px;margin:0 auto;padding:36px 32px 64px}
.titular h1{font-size:24px;font-weight:600;letter-spacing:-.02em}
.titular p{margin-top:6px;color:var(--texto-3)}
.seccion-t{margin:32px 0 12px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.tarjeta{background:var(--superficie);border:1px solid var(--borde);border-radius:12px;padding:20px;box-shadow:var(--sombra);
         display:flex;flex-direction:column;gap:12px;text-align:left;transition:border-color .15s,box-shadow .15s,transform .15s}
button.tarjeta:hover{border-color:#bfd2f3;box-shadow:var(--sombra-alta);transform:translateY(-1px)}
.tarjeta .tipo{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--primario);
               background:var(--primario-suave);border-radius:999px;padding:3px 9px;align-self:flex-start}
.tarjeta h3{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.tarjeta p{color:var(--texto-2);font-size:13px;line-height:1.55}
.tarjeta .pie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;color:var(--texto-3);font-size:12.5px;
              padding-top:12px;border-top:1px solid var(--borde)}
.tarjeta .pie b{color:var(--primario);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.vacio{border:1px dashed var(--borde-fuerte);border-radius:12px;padding:40px 24px;text-align:center;color:var(--texto-3);line-height:1.6}
.vacio b{display:block;color:var(--texto);font-size:15px;margin-bottom:4px}

/* ── Administración ──────────────────────────────────────────────────────── */
.pestanas{display:flex;gap:4px;border-bottom:1px solid var(--borde);margin-top:24px}
.pestana{padding:10px 14px;color:var(--texto-3);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.pestana.on{color:var(--texto);border-bottom-color:var(--primario)}
.panel-blanco{background:var(--superficie);border:1px solid var(--borde);border-radius:12px;box-shadow:var(--sombra);margin-top:20px}
.panel-blanco .enc{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--borde)}
.panel-blanco .enc h3{font-size:14.5px;font-weight:600}
.panel-blanco .enc .acciones{margin-left:auto}
.form-linea{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end;padding:16px 20px;
            border-bottom:1px solid var(--borde);background:#fbfcfe}
.form-linea .campo{margin-top:0}
.form-linea .btn{height:40px}
table{width:100%;border-collapse:collapse}
th{font-size:11.5px;font-weight:600;color:var(--texto-3);text-align:left;padding:10px 20px;border-bottom:1px solid var(--borde);
   letter-spacing:.03em;text-transform:uppercase;background:#fbfcfe}
td{padding:12px 20px;border-bottom:1px solid #eef1f5;vertical-align:middle}
tr:last-child td{border-bottom:0}
.celda-usuario{display:flex;align-items:center;gap:10px}
.celda-usuario .avatar{background:var(--primario-suave);color:var(--primario)}
.celda-usuario small{display:block;color:var(--texto-3);font-size:12px}
.estado{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500}
.estado::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.estado.inactivo{color:var(--texto-3)}
.estado.inactivo::before{background:#cbd5e1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;
      border:1px solid var(--borde-fuerte);color:var(--texto-2);background:#fff;transition:all .12s}
.chip:hover{border-color:#94a3b8}
.chip.on{background:var(--primario-suave);border-color:#bfd2f3;color:var(--primario-2)}
.enlace{color:var(--primario);font-weight:500;font-size:12.5px}
.enlace:hover{text-decoration:underline}
.enlace.peligro{color:var(--error)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;color:var(--texto-2)}

#aviso-flotante{position:fixed;right:20px;bottom:20px;z-index:500;max-width:380px;box-shadow:var(--sombra-alta)}

@media (max-width:900px){
  #login{grid-template-columns:1fr}
  .login-marca{display:none}
  #sb{position:fixed;left:72px;top:0;bottom:0;z-index:150;width:min(288px,calc(100vw - 72px))}
  .form-linea{grid-template-columns:1fr}
  .contenedor{padding:24px 16px 48px}
  .cabecera{padding:0 16px}
}

/* ══ Diseño DiscoveryFast (mockup del investigador, 2026-10-16) ══════════════════
   Barra superior + temario a la izquierda + contenido. Sin rail. */
#app{flex-direction:column}
#barra-sup{height:60px;flex:0 0 60px;display:flex;align-items:center;gap:24px;padding:0 24px;background:#fff;border-bottom:1px solid #e9edf2}
.logo{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:500;color:#0f172a;text-decoration:none;letter-spacing:-.01em;width:312px;flex:0 0 auto}
.logo .logo-b{font-weight:500}
.logo-df{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#2563eb;color:#fff;font-size:14px;font-weight:800;letter-spacing:-.02em}
.buscador{position:relative;display:block;width:360px;max-width:40vw}
.buscador .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#64748b}
.buscador input{width:100%;height:38px;padding:0 64px 0 36px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;color:#0f172a;outline:none;font-size:14px}
.buscador input:focus{border-color:#2563eb;background:#fff}
.buscador kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:600 11px Inter,sans-serif;color:#475569;border:1px solid #cbd5e1;border-radius:5px;padding:1px 6px;background:#fff}
.sup-acciones{margin-left:auto;display:flex;align-items:center;gap:18px}
.sup-link{display:flex;align-items:center;gap:8px;color:#0f172a;text-decoration:none;font-weight:500;font-size:14.5px}
.sup-link:hover{color:#2563eb}
.sup-icono{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#334155}
.sup-icono:hover{background:#f1f5f9}
.sup-avatar-btn{display:flex;align-items:center;gap:6px;color:#334155}
.sup-avatar-btn .avatar{width:38px;height:38px;background:#2563eb;color:#fff;font-size:13px;font-weight:700}
.menu-ancla{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 8px);z-index:300;min-width:240px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;
  box-shadow:0 12px 32px rgba(15,23,42,.14);padding:6px}
.menu-quien{padding:10px 12px;border-bottom:1px solid #eef1f5;margin-bottom:4px}
.menu-quien b{display:block;font-size:14px}
.menu-quien span{font-size:12.5px;color:#64748b}
.menu-op{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:7px;color:#0f172a;text-decoration:none;font-size:14px;text-align:left}
.menu-op:hover{background:#f1f5f9}
.menu-vacio{padding:14px 12px;color:#64748b;font-size:14px}

#cuerpo{flex:1;display:flex;min-height:0}
#sb{width:360px;flex:0 0 360px;padding:18px 16px 18px 20px;background:#fff;border-right:1px solid #e9edf2}
.sb-titulo{font-size:16px;font-weight:700;color:#0f172a;padding:4px 4px 12px}
.sb-curso{padding-bottom:14px}
.sb-curso-fila{display:flex;gap:14px;align-items:flex-start}
.sb-mini{width:84px;height:84px;flex:0 0 84px;border-radius:10px;object-fit:cover;background:#0b1220}
.sb-mini.vacia{display:grid;place-items:center;color:#94a3b8;background:#f1f5f9}
.sb-curso-t{font-size:17px;font-weight:700;line-height:1.3;color:#0f172a;margin-top:6px}
.sb-volver{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:#334155;font-size:14px}
.sb-volver:hover{color:#2563eb}
.sb-avance{margin:14px 0 0 98px}
.sb-avance .fila{display:flex;justify-content:space-between;font-size:12.5px;color:#475569;margin-bottom:6px}
.sb-avance .barra{height:5px;background:#e2e8f0}
.sb-avance .barra>i{background:#2563eb}

.cap{display:flex;align-items:center;gap:10px;width:100%;padding:12px 4px 8px;text-align:left}
.cap-chev{color:#475569;display:grid;transition:transform .15s}
.cap.cerrado .cap-chev{transform:rotate(-90deg)}
.cap-n{width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:#2563eb;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.cap-t{flex:1;min-width:0;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#334155;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap-c{font-size:13px;color:#475569;font-weight:600}
.cap:hover .cap-t{color:#0f172a}
.cap-lecciones{margin-left:15px;padding-left:12px;border-left:1px solid #e2e8f0;display:flex;flex-direction:column;gap:2px;padding-bottom:6px}
.lecc{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border-radius:8px;text-align:left;color:#1e293b;font-size:14px;line-height:1.3}
.lecc:hover{background:#f8fafc}
.lecc-punto{width:26px;height:26px;flex:0 0 26px;border-radius:50%;border:1.5px solid #cbd5e1;display:grid;place-items:center;font-size:11.5px;font-weight:600;color:#475569;background:#fff}
.lecc-t{flex:1;min-width:0}
.lecc-d{font-size:12.5px;color:#64748b;flex:0 0 auto}
.lecc.on{background:#eef4ff;color:#1d4ed8;font-weight:600}
.lecc.on::before{content:"";position:absolute;left:-14px;top:6px;bottom:6px;width:3px;border-radius:3px;background:#2563eb}
.lecc.on .lecc-punto{border-color:#2563eb;color:#2563eb}
.lecc.on .lecc-punto .ico{fill:currentColor;stroke:none;margin-left:2px}
.lecc.hecha .lecc-punto{border-color:#16a34a;background:#16a34a;color:#fff}

#principal .cabecera{height:58px;background:#f8fafc;border-bottom:1px solid #e9edf2;padding:0 40px}
.migas{font-size:14.5px}
.migas b{color:#0f172a}
@media (max-width:900px){
  .logo{width:auto}.buscador{display:none}.sup-link{display:none}
  #sb{position:static;width:100%;flex:none;max-height:40vh}
  #cuerpo{flex-direction:column}
}

/* ══ Portada de inicio (mockup del autor, 2026-10-16) ══════════════════════════ */
.logo{width:auto;gap:0;font-size:26px;font-weight:800;letter-spacing:-.02em}
.logo-a{color:#0f2a4a}
.logo-b{color:#0ea5b7}
.logo-chev{display:inline-grid;color:#0ea5b7;margin-left:2px}
.logo-chev .ico{width:22px;height:22px;stroke-width:3}
.sup-nav{display:flex;gap:30px;margin-left:40px;align-self:stretch}
.sup-nav a{display:flex;align-items:center;color:#0f172a;text-decoration:none;font-size:15px;font-weight:500;border-bottom:3px solid transparent;padding-top:3px}
.sup-nav a:hover{color:#0e7490}
.sup-nav a.on{font-weight:700;border-bottom-color:#0ea5b7}
#barra-sup .buscador{margin-left:auto;width:400px}
#barra-sup .sup-acciones{margin-left:18px}
#app.sin-panel #sb,#app.sin-panel .cabecera{display:none}

.portada{max-width:1560px;margin:0 auto;padding:32px 48px 56px}
.portada-t{margin:0;font-size:46px;line-height:1.1;font-weight:800;letter-spacing:-.03em;color:#0f2a4a}
.portada-t span{color:#0ea5b7}
.portada-enc p{margin:10px 0 0;font-size:18px;color:#475569}
.portada-fila{display:flex;flex-wrap:wrap;gap:20px;margin-top:28px;align-items:stretch}
.portada-video{flex:999 1 560px;min-width:0;border-radius:14px;overflow:hidden;background:#0b1220}
.portada-video .lec-video-bloque{margin:0;height:100%}
.portada-video .lec-video{border-radius:0;height:100%}
.portada-cubierta{display:block;width:100%;height:100%;padding:0;border:0}
.portada-cubierta img{width:100%;height:100%;object-fit:cover;display:block}
.portada-actual{flex:1 1 380px;max-width:480px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;padding:28px;display:flex;flex-direction:column}
.portada-eti{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#475569}
.portada-actual h2{margin:10px 0 0;font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:#0f172a}
.portada-actual p{margin:14px 0 0;font-size:16.5px;line-height:1.55;color:#475569}
.portada-meta{margin-top:20px;padding:14px 0;display:flex;flex-wrap:wrap;gap:18px;border-top:1px solid #eef1f5;border-bottom:1px solid #eef1f5}
.portada-meta span{display:flex;align-items:center;gap:8px;font-size:14px;color:#334155}
.portada-avance{margin-top:18px;display:flex;align-items:center;gap:14px;font-size:14px;color:#334155}
.portada-avance .barra,.otro-avance .barra{flex:1;height:7px;border-radius:7px;background:#e2e8f0}
.portada-avance .barra>i,.otro-avance .barra>i{background:linear-gradient(90deg,#0ea5b7,#2bb3c9);border-radius:7px}
.portada-btn{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:12px;height:52px;border-radius:8px;
  font-size:16px;font-weight:600;color:#0f172a;background:#f1f5f9;border:1px solid #e2e8f0}
.portada-btn:hover{background:#e9eef4}
.portada-btn.principal{margin-top:auto;background:#0f2a4a;color:#fff;border:0}
.portada-btn.principal:hover{background:#163a63}
.portada-btn.principal .ico:first-child{fill:currentColor;stroke:none}
.portada-btn.principal .ico:last-child{margin-left:auto}
.portada-btn.principal{padding:0 18px}
.portada-sub{display:flex;align-items:baseline;margin-top:36px}
.portada-sub h2{margin:0;font-size:24px;font-weight:800;color:#0f172a}
.portada-ver{margin-left:auto;display:flex;align-items:center;gap:6px;color:#0e7490;font-weight:600;text-decoration:none}
.portada-otros{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.otro{display:flex;flex-direction:column;gap:14px;padding:18px 20px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;text-align:left}
.otro:hover{border-color:#bae6ee;box-shadow:0 8px 24px -14px rgba(15,23,42,.3)}
.otro-fila{display:flex;align-items:center;gap:14px}
.otro-ins{width:64px;height:64px;flex:0 0 64px;border-radius:14px;object-fit:cover;background:#0f2a4a}
.otro-ins.vacia{display:grid;place-items:center;color:#fff}
.otro-t{flex:1;font-size:16px;font-weight:700;color:#0f172a;line-height:1.3}
.otro-avance{display:flex;align-items:center;gap:12px;font-size:14px;color:#334155}
.otro-pie{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#475569}
.otro-pie span{display:flex;align-items:center;gap:6px}
@media (max-width:900px){.sup-nav{display:none}.portada{padding:20px 16px 40px}.portada-t{font-size:32px}}
.portada-video .portada-marco{border-radius:0;aspect-ratio:16/9;min-height:420px}
.portada-avance{margin-bottom:22px}

/* ══ Mis cursos (mockup del autor, 2026-10-16) ═════════════════════════════════ */
.mc-sub{margin:8px 0 0;font-size:18px;color:#475569}
.mc-stats{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.mc-stat{display:flex;align-items:center;gap:22px;padding:22px 26px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
.mc-stat-i{width:72px;height:72px;flex:0 0 72px;border-radius:50%;display:grid;place-items:center;background:#e0f7f9;color:#0e9fb3}
.mc-stat-i .ico{width:32px;height:32px}
.mc-stat b{display:block;font-size:36px;font-weight:800;color:#0f172a;line-height:1.05}
.mc-stat span{font-size:16px;color:#334155}
.mc-filtros{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.mc-buscar{flex:1 1 420px;max-width:780px;display:flex;align-items:center;gap:12px;height:50px;padding:0 18px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#475569}
.mc-buscar-in{flex:1;border:0;outline:none;font-size:16px;background:none;color:#0f172a}
.mc-chips{margin-left:auto;display:flex;flex-wrap:wrap;gap:10px}
.mc-chip{height:44px;padding:0 22px;border-radius:999px;border:1px solid #cbd5e1;background:#fff;font-size:15px;color:#0f172a}
.mc-chip:hover{border-color:#0ea5b7}
.mc-chip.on{background:#0e9fb3;border-color:#0e9fb3;color:#fff;font-weight:600}
.mc-lista{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(520px,1fr));gap:24px}
.mc-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 10px -6px rgba(15,23,42,.25)}
.mc-banda{position:relative;display:flex;align-items:center;gap:16px;min-height:140px;padding:18px 28px;color:#fff;overflow:hidden}
.mc-banda-txt{flex:1;min-width:0;position:relative;z-index:1}
.mc-cat{display:inline-block;padding:3px 12px;border-radius:999px;background:rgba(15,23,42,.35);border:1px solid rgba(255,255,255,.35);font-size:12px;font-weight:700;letter-spacing:.06em}
.mc-banda h2{margin:10px 0 0;font-size:26px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.mc-banda p{margin:8px 0 0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.92);max-width:470px}
.mc-banda-img{width:150px;height:96px;flex:0 0 150px;object-fit:cover;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.6)}
.mc-cuerpo{padding:16px 24px 20px}
.mc-prog{display:flex;justify-content:space-between;font-size:15px;color:#334155}
.mc-prog b{color:#0e9fb3;font-size:19px}
.mc-barra{margin-top:8px;height:10px;border-radius:10px;background:#e2e8f0}
.mc-barra>i{background:#14b8c8;border-radius:10px}
.mc-pie{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.mc-meta{display:flex;flex-wrap:wrap;gap:22px;font-size:14px;color:#334155}
.mc-meta span{display:flex;align-items:center;gap:7px}
.mc-ver{margin-left:auto;display:flex;align-items:center;gap:10px;height:44px;padding:0 22px;border-radius:8px;background:#0e9fb3;color:#fff;font-size:16px;font-weight:700}
.mc-ver:hover{background:#0b8798}
@media (max-width:900px){.mc-lista{grid-template-columns:1fr}.mc-chips{margin-left:0}.mc-banda-img{display:none}}

/* ══ Página de entrada al curso ═══════════════════════════════════════════════ */
.entrada{max-width:1320px;margin:0 auto;padding:28px 40px 64px}
.entrada-banner{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:16px}
.entrada-cab{margin-top:26px;display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end}
.entrada-txt{flex:999 1 520px;min-width:0}
.entrada-cat{display:inline-block;padding:4px 12px;border-radius:999px;background:#e0f7f9;color:#0e7490;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.entrada-txt h1{margin:10px 0 0;font-size:44px;line-height:1.08;font-weight:800;letter-spacing:-.03em;color:#0f2a4a}
.entrada-txt p{margin:12px 0 0;font-size:18px;line-height:1.55;color:#475569;max-width:860px}
.entrada-meta{margin-top:16px;display:flex;flex-wrap:wrap;gap:22px;font-size:15px;color:#334155}
.entrada-meta span{display:flex;align-items:center;gap:8px}
.entrada-accion{flex:1 1 320px;max-width:400px;display:flex;flex-direction:column;gap:14px}
.entrada-avance{display:flex;align-items:center;gap:12px;font-size:14px;color:#334155}
.entrada-avance .barra{flex:1;height:8px;border-radius:8px;background:#e2e8f0}
.entrada-avance .barra>i{background:#14b8c8;border-radius:8px}
.entrada-accion .portada-btn.principal{margin-top:0}
.entrada-intro,.entrada-temario{margin-top:40px}
.entrada-intro h2,.entrada-temario h2{margin:0 0 16px;font-size:26px;font-weight:800;color:#0f172a}
.entrada-intro img{display:block;width:100%;border-radius:12px;border:1px solid #e2e8f0;cursor:zoom-in;background:#fff}
.entrada-cap{border:1px solid #e2e8f0;border-radius:12px;background:#fff;margin-bottom:14px;overflow:hidden}
.entrada-cap-h{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#f8fafc;border-bottom:1px solid #eef1f5}
.entrada-cap-h b{flex:1;font-size:16px;color:#0f172a}
.entrada-cap-h span:last-child{font-size:13px;color:#64748b}
.entrada-lecs{display:flex;flex-direction:column;padding:6px}
.entrada-lec{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;text-align:left;font-size:15px;color:#1e293b}
.entrada-lec:hover{background:#f1f5f9}
.entrada-lec.hecha .lecc-punto{border-color:#16a34a;background:#16a34a;color:#fff}
@media (max-width:900px){.entrada{padding:16px}.entrada-txt h1{font-size:30px}}
/* Las portadas de los cursos son apaisadas (16:9): la miniatura respeta esa forma y no corta el texto. */
.sb-mini{width:128px;height:72px;flex:0 0 128px;object-fit:cover}
.otro-ins{width:96px;height:54px;flex:0 0 96px;border-radius:8px}
.sb-avance{margin-left:0}
.entrada-banner{aspect-ratio:auto;height:auto;max-height:none;object-fit:contain}
.sb-mini-btn{padding:0;border:0;background:none;border-radius:10px;flex:0 0 auto}.sb-mini-btn:hover .sb-mini{outline:3px solid #bae6ee}.sb-curso-t{display:block;padding:0;text-align:left;font:inherit;font-size:17px;font-weight:700;color:#0f172a}.sb-curso-t:hover{color:#0e7490}