/* ============================================================
   Campus Virtual · Organic Nails — capa de estilos
   Se carga DESPUÉS de admin.css y reutiliza sus variables/tokens
   (sidebar negro, Roboto, monocromático + rojo --domicilio).
   Aquí solo van los componentes propios del campus:
   gamificación, tarjetas de curso, insignias, certificados.
   ============================================================ */

:root {
  --brand-red:#e2001a;          /* rojo Organic Nails (marca) */
  --gold:#caa64a;
}

/* Marca roja en el sidebar (Organic Nails) sin romper el negro CEAON */
.sidebar__brand-sub { color:rgba(255,255,255,.5); }

/* ---- Fondo de grid de puntos en el área de contenido (no en el sidebar) ---- */
.main {
  background-color:#f6f6f5;
  background-image:radial-gradient(rgba(13,13,13,.07) 1.1px, transparent 1.1px);
  background-size:22px 22px;
  background-position:-11px -11px;
  min-height:100vh; min-height:100svh;   /* el grid cubre TODA la página aunque el contenido sea corto */
}

/* ---- Foto del usuario en el sidebar (grande, redonda, bajo el logo) ---- */
/* Perfil compacto alineado a la izquierda (misma línea que los items del menú) */
.side-profile { display:flex; flex-wrap:wrap; align-items:center; gap:12px; text-align:left; padding:16px 10px 12px; margin-top:12px; border-top:1px solid rgba(255,255,255,.08); }
.side-profile__av { width:46px; height:46px; flex:none; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.14); }
.side-profile__av--ph { display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); color:#fff; font-weight:700; font-size:17px; }
.side-profile__txt { min-width:0; }
.side-profile__name { font-weight:600; font-size:14.5px; color:#fff; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-profile__role { font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.4); margin-top:2px; }
.side-profile__sede { flex:1 0 100%; font-size:11.5px; color:rgba(255,255,255,.55); line-height:1.35; text-align:center; background:rgba(255,255,255,.06); border-radius:10px; padding:8px 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.side-profile__sede strong { font-weight:600; color:rgba(255,255,255,.85); }
/* Reducir el hueco entre la foto y "APRENDER" (override del .nav de admin.css) */
.sidebar .nav { margin-top:8px; }

/* ---- Píldoras de puntos / monedas en el header del estudiante ---- */
.wallet { display:flex; gap:10px; flex-wrap:wrap; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--white); font-size:13.5px; font-weight:600; color:var(--black); }
.pill svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.pill--points { background:var(--black); color:#fff; border-color:var(--black); }
.pill--coins  { color:var(--gold); border-color:rgba(202,166,74,.4); background:rgba(202,166,74,.08); }
.pill small { font-weight:400; color:inherit; opacity:.7; text-transform:uppercase; letter-spacing:.08em; font-size:10px; }

/* ---- Buscador hero con previsualización en vivo ---- */
.search-hero { position:relative; max-width:680px; margin:0 0 26px; }
.search-hero__box { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:0 2px 10px rgba(13,13,13,.03); transition:border-color .15s, box-shadow .15s; }
.search-hero__box:focus-within { border-color:var(--black); box-shadow:0 8px 26px rgba(13,13,13,.09); }
.search-hero__box > svg { width:20px; height:20px; fill:none; stroke:var(--gray-500); stroke-width:1.9; stroke-linecap:round; flex-shrink:0; }
.search-hero__input { flex:1; border:0; outline:0; background:transparent; font-family:inherit; font-size:16px; color:var(--ink); }
.search-hero__input::placeholder { color:var(--gray-500); }
.search-hero__kbd { font-size:10.5px; color:var(--gray-500); border:1px solid var(--line); border-radius:6px; padding:2px 7px; font-family:inherit; }
.search-hero__results { position:absolute; z-index:200; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 46px rgba(13,13,13,.15); padding:6px; display:none; }
.search-hero__results.is-open { display:block; animation:modalIn .14s ease; }
.search-result { display:flex; align-items:center; gap:13px; padding:9px 10px; border-radius:10px; cursor:pointer; color:inherit; }
.search-result:hover, .search-result.is-active { background:var(--gray-100); }
.search-result__cover { width:58px; height:36px; border-radius:8px; object-fit:cover; background:var(--gray-100); flex-shrink:0; }
.search-result__txt { min-width:0; }
.search-result__t { font-weight:600; font-size:14px; color:var(--black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-result__m { font-size:12px; color:var(--gray-500); margin-top:1px; }
.search-result__empty { padding:18px 14px; text-align:center; color:var(--gray-500); font-size:13.5px; }
@media (max-width:860px) { .search-hero { max-width:none; } .search-hero__kbd { display:none; } }

/* ---- Bienvenida ---- */
.hello { display:flex; align-items:center; gap:18px; margin-bottom:26px; flex-wrap:wrap; }
.hello__av { width:60px; height:60px; border-radius:50%; background:var(--black); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px; flex-shrink:0; object-fit:cover; }
.hello__h { font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--black); }
.hello__s { color:var(--gray-500); font-size:14px; margin-top:2px; }
.hello__wallet { margin-left:auto; }

/* ---- Sección con título ---- */
.section { margin:34px 0 14px; display:flex; align-items:center; justify-content:flex-start; gap:18px; }
.section__title { font-size:13px; text-transform:uppercase; letter-spacing:.13em; color:var(--gray-500); font-weight:600; }
.section__link { font-size:13px; color:var(--gray-700); }
.section__link:hover { color:var(--black); }

/* ---- Tarjetas "Continuar aprendiendo" (compactas, estilo Platzi) ---- */
.cont-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.cont { display:block; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; color:inherit; transition:box-shadow .2s, border-color .2s, transform .15s; }
.cont:hover { box-shadow:0 12px 28px rgba(13,13,13,.08); border-color:var(--gray-300); transform:translateY(-2px); }
.cont__cover { position:relative; aspect-ratio:16/9; background:var(--gray-100) center/cover no-repeat; }
.cont__cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,13,13,0) 55%,rgba(13,13,13,.4)); }
.cont__play { position:absolute; inset:0; margin:auto; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; z-index:2; transition:transform .15s; }
.cont:hover .cont__play { transform:scale(1.1); }
.cont__play svg { width:17px; height:17px; fill:var(--black); margin-left:2px; }
.cont__dur { position:absolute; bottom:9px; right:9px; z-index:2; font-size:11px; font-weight:600; color:#fff; background:rgba(13,13,13,.72); padding:2px 8px; border-radius:6px; }
.cont__seen { position:absolute; top:9px; left:9px; z-index:3; font-size:10.5px; font-weight:600; color:#fff; background:rgba(13,13,13,.8); padding:4px 9px; border-radius:7px; opacity:0; transform:translateY(-5px); transition:opacity .2s, transform .2s; pointer-events:none; }
.cont:hover .cont__seen { opacity:1; transform:none; }
.cont__pbar { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.3); z-index:2; }
.cont__pbar i { display:block; height:100%; background:var(--brand-red); }
.cont__body { padding:12px 14px 14px; }
.cont__path { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-500); font-weight:600; }
.cont__title { font-size:14.5px; font-weight:700; color:var(--black); margin-top:3px; line-height:1.3; letter-spacing:-.01em; }
.cont__pct { font-size:11.5px; color:var(--gray-500); margin-top:7px; }

/* ---- Tarjetas de curso ---- */
/* Filtros tipo pill (pequeñas, fila) */
.filters { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px; }
.filter { display:inline-flex; align-items:center; justify-content:center; padding:8px 18px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:13.5px; font-weight:500; color:var(--gray-700); transition:background .15s, color .15s, border-color .15s; }
.filter:hover { border-color:var(--gray-300); color:var(--black); }
.filter.is-on { background:var(--black); color:#fff; border-color:var(--black); }

/* Flechita "volver" en páginas internas */
.page-back { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:var(--gray-500); margin-bottom:16px; transition:color .15s; }
.page-back:hover { color:var(--black); }
.page-back svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s; }
.page-back:hover svg { transform:translateX(-2px); }

.course-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.course { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow .2s, border-color .2s, transform .15s; }
.course:hover { box-shadow:0 14px 32px rgba(13,13,13,.09); border-color:var(--gray-300); transform:translateY(-3px); }
.course.is-locked { opacity:.92; }
/* Distinción "Aprobado": tab dorado pegado a la esquina superior derecha (no flotante) */
.course__approved { position:absolute; top:0; right:0; z-index:3; display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:#3a2c07; background:linear-gradient(135deg,#e8cd72,#c69f3c); padding:6px 12px 7px 11px; border-bottom-left-radius:13px; box-shadow:-3px 3px 9px rgba(13,13,13,.2); }
.course__approved svg { width:12px; height:12px; fill:none; stroke:#3a2c07; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.course__cover { position:relative; aspect-ratio:16/9; background:var(--gray-100) center/cover no-repeat; display:flex; align-items:flex-end; }
.course__cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,13,13,0) 40%,rgba(13,13,13,.55)); }
.course__tags { position:relative; z-index:1; display:flex; gap:6px; padding:12px; }
.course__lock { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; background:rgba(13,13,13,.5); color:#fff; backdrop-filter:blur(2px); }
.course__lock svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; }
.tag { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.92); color:var(--black); }
.tag--red { background:var(--brand-red); color:#fff; }
.course__main { display:flex; flex-direction:column; flex:1; color:inherit; }
.course__body { padding:16px 18px 14px; display:flex; flex-direction:column; flex:1; }
.course__path { font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--gray-500); font-weight:600; }
.course__title { font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--black); margin-top:4px; line-height:1.25; }
.course__desc { font-size:13px; color:var(--gray-500); margin-top:6px; line-height:1.5; flex:1; }
.course__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--gray-100); }
.course__meta { font-size:12.5px; color:var(--gray-500); display:flex; align-items:center; gap:6px; }
.course__meta svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; }
.course__state { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); }
.course__state--done { color:var(--black); }
.course__action { padding:0 18px 18px; }
.course__action .btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }

/* Barra de progreso */
.bar { height:6px; border-radius:999px; background:var(--gray-200); overflow:hidden; }
.bar__fill { height:100%; background:var(--black); border-radius:999px; transition:width .4s ease; }
.course__progress { margin-top:14px; }
.course__progress .bar { margin-top:6px; }
.progress-label { display:flex; justify-content:space-between; font-size:12px; color:var(--gray-500); }
.progress-label b { color:var(--black); }

/* ---- Anillo de progreso (rutas educativas) ---- */
.path-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.path { display:flex; gap:18px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px 22px; color:inherit; transition:box-shadow .2s, border-color .2s, transform .15s; }
.path:hover { box-shadow:0 12px 28px rgba(13,13,13,.08); border-color:var(--gray-300); transform:translateY(-2px); }
.path__thumb { width:84px; height:84px; border-radius:14px; flex-shrink:0; background:var(--gray-100) center/cover no-repeat; }
.path__info { min-width:0; flex:1; }
.path__name { font-weight:700; font-size:16px; color:var(--black); letter-spacing:-.01em; margin-top:7px; }
.path__meta { font-size:12.5px; color:var(--gray-500); margin-top:3px; }
.path__badge { display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--gray-700); background:var(--gray-100); padding:4px 9px; border-radius:999px; }
.path__badge .dot { width:8px; height:8px; border-radius:3px; }
.path__row { display:flex; align-items:center; gap:10px; margin-top:12px; }
.path__bar { flex:1; height:5px; border-radius:999px; background:var(--gray-200); overflow:hidden; }
.path__bar i { display:block; height:100%; border-radius:999px; transition:width .4s ease; }
.path__pct { font-size:12px; font-weight:700; color:var(--gray-700); }

/* ---- Tu progreso: una parada por curso de la ruta y el certificado al final ---- */
.prog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr)); gap:16px; }
.prog { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px 22px 18px; }
.prog__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.prog__name { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15.5px; color:var(--black); letter-spacing:-.01em; min-width:0; }
.prog__name .dot { width:9px; height:9px; border-radius:3px; flex:none; background:var(--ruta); }
.prog__count { font-size:12.5px; color:var(--gray-500); white-space:nowrap; }
.prog__count b { color:var(--black); font-size:15px; }

.prog__track { list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(calc(var(--n) + 1),1fr); }
.prog__stop { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; }
/* tramo que llega a esta parada: se pinta cuando la anterior ya está hecha */
.prog__stop + .prog__stop::before { content:""; position:absolute; top:14px; right:50%; width:100%; height:3px; background:var(--gray-200); z-index:0; }
.prog__stop.is-hecho + .prog__stop::before { background:var(--ruta); }
.prog__node { position:relative; z-index:1; width:31px; height:31px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--white); border:2px solid var(--gray-300); color:var(--gray-500); font-size:12.5px; font-weight:700; }
.prog__node svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.prog__stop.is-hecho .prog__node { background:var(--ruta); border-color:var(--ruta); color:var(--tinta); }
.prog__stop.is-actual .prog__node { border-color:var(--ruta); color:var(--black); box-shadow:0 0 0 5px color-mix(in srgb, var(--ruta) 20%, transparent); }
.prog__stop--meta .prog__node svg { stroke-width:1.9; width:17px; height:17px; }
.prog__label { margin-top:8px; padding:0 3px; max-width:100%; font-size:11px; line-height:1.3; color:var(--gray-500); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:anywhere; }
.prog__stop.is-hecho .prog__label { color:var(--gray-700); }
.prog__stop.is-actual .prog__label { color:var(--black); font-weight:600; }

.prog__foot { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.prog__next { margin:0; font-size:13px; color:var(--gray-700); line-height:1.4; min-width:0; }
.prog__next b { color:var(--black); }
.prog__when { display:block; font-size:12px; color:var(--gray-500); margin-top:2px; }
.prog__cta { flex:none; font-size:13px; font-weight:600; color:var(--black); padding:8px 13px; border-radius:999px; border:1px solid var(--gray-300); white-space:nowrap; transition:background .15s, border-color .15s; }
.prog__cta:hover { background:var(--gray-100); border-color:var(--gray-500); }
button.prog__cta { font-family:inherit; background:var(--ruta); border-color:var(--ruta); color:var(--tinta); cursor:pointer; }
button.prog__cta:hover { background:var(--ruta); border-color:var(--ruta); filter:brightness(.93); }
.prog__ok { flex:none; font-size:13px; font-weight:600; color:var(--gray-700); padding:8px 4px; white-space:nowrap; }
@media (max-width:560px) { .prog__foot form, .prog__foot form .prog__cta { width:100%; } .prog__ok { text-align:center; } }
.prog.is-done .prog__cta { background:var(--ruta); border-color:var(--ruta); color:var(--tinta); }

@media (max-width:560px) {
  .prog-grid { grid-template-columns:1fr; }
  .prog { padding:18px 14px 16px; }
  .prog__node { width:27px; height:27px; font-size:11.5px; }
  .prog__stop + .prog__stop::before { top:12px; }
  .prog__label { font-size:10px; padding:0 1px; -webkit-line-clamp:3; }
  .prog__foot { flex-direction:column; align-items:stretch; }
  .prog__cta { text-align:center; }
}

/* ============================================================
   Interior del curso (detalle + temario)
   ============================================================ */
.cdetail-hero { display:grid; grid-template-columns:minmax(0,380px) 1fr; background:var(--white); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-bottom:34px; }
.cdetail-hero__cover { background:var(--gray-100) center/cover no-repeat; min-height:240px; }
.cdetail-hero__body { padding:30px 34px; }
.cdetail-hero__title { font-size:30px; font-weight:700; letter-spacing:-.025em; color:var(--black); line-height:1.12; margin-top:6px; }
.cdetail-hero__chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.ichip { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:var(--gray-700); background:var(--gray-100); padding:7px 12px; border-radius:10px; }
.ichip svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cdetail-hero__desc { font-size:14.5px; line-height:1.6; color:var(--gray-700); margin-top:18px; max-width:640px; }
.cdetail-hero__actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px; }
.cdetail-hero__actions .course__approved { color:#3a2c07; }
.cdetail-hero__prog { font-size:13px; color:var(--gray-500); font-weight:500; }
@media (max-width:760px) { .cdetail-hero { grid-template-columns:1fr; } .cdetail-hero__cover { min-height:180px; } .cdetail-hero__title { font-size:24px; } }

/* Temario en línea de tiempo */
.temario { position:relative; }
.temario::before { content:""; position:absolute; left:21px; top:10px; bottom:10px; width:2px; background:var(--gray-200); }
.tl-sec { position:relative; padding:14px 0 8px 60px; }
.tl-sec:first-child { padding-top:2px; }
.tl-dot { position:absolute; left:15px; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; background:var(--gray-300); border:3px solid var(--gray-50); }
.tl-sectitle { font-size:16.5px; font-weight:700; letter-spacing:-.01em; color:var(--black); }
.tl-row { position:relative; padding:0 0 14px 60px; }
.tl-node { position:absolute; left:8px; top:6px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:700; background:var(--white); border:2px solid var(--gray-300); color:var(--gray-700); z-index:1; }
.tl-node svg { width:15px; height:15px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.tl-row.is-done .tl-node { background:var(--black); border-color:var(--black); }
.tl-card { display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--line); border-radius:13px; padding:10px 14px 10px 10px; transition:box-shadow .18s, border-color .18s; }
.tl-row:not(.is-locked) .tl-card { cursor:pointer; }
.tl-row:not(.is-locked) .tl-card:hover { box-shadow:0 8px 22px rgba(13,13,13,.07); border-color:var(--gray-300); }
.tl-thumb { position:relative; width:96px; height:60px; border-radius:9px; flex-shrink:0; background:var(--gray-100) center/cover no-repeat; overflow:hidden; }
.tl-thumb::after { content:""; position:absolute; inset:0; background:rgba(13,13,13,.28); }
.tl-badge { position:absolute; inset:0; z-index:1; margin:auto; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; }
.tl-badge svg { width:15px; height:15px; fill:none; stroke:var(--black); stroke-width:1.8; }
.tl-badge--play svg { fill:var(--black); stroke:none; margin-left:2px; }
.tl-row.is-locked .tl-thumb { filter:grayscale(1); }
.tl-info { min-width:0; }
.tl-title { font-size:14.5px; font-weight:600; color:var(--black); line-height:1.3; }
.tl-row.is-locked .tl-title { color:var(--gray-500); }
.tl-status { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--gray-500); margin-top:5px; }
.tl-row.is-done .tl-status { color:var(--black); font-weight:500; }
.tl-ic { width:15px; height:15px; flex-shrink:0; }
.tl-ic--done { fill:#1f9d57; stroke:none; }

/* ============================================================
   Reproductor de clase (video + resumen + comentarios)
   ============================================================ */
.lesson-top { display:flex; align-items:center; gap:16px; padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.lesson-top__back { width:38px; height:38px; flex-shrink:0; border:1px solid var(--line); border-radius:10px; display:grid; place-items:center; background:#fff; transition:background .15s; }
.lesson-top__back:hover { background:var(--gray-100); }
.lesson-top__back svg { width:18px; height:18px; fill:none; stroke:var(--black); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lesson-top__titles { min-width:0; flex:1; }
.lesson-top__title { font-size:18px; font-weight:700; color:var(--black); letter-spacing:-.01em; line-height:1.25; }
.lesson-top__course { font-size:12.5px; color:var(--gray-500); margin-top:2px; }
.lesson-top__nav { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.lesson-top__count { font-size:12.5px; color:var(--gray-500); font-weight:500; white-space:nowrap; }
.lesson-top__nav .btn { white-space:nowrap; }

.lesson-grid { display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:start; }
@media (max-width:980px) { .lesson-grid { grid-template-columns:1fr; } }

.lesson-video { position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#0d0d0d; }
.lesson-video__el { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }

.lesson-actions { display:flex; align-items:center; gap:14px; margin:18px 0 4px; flex-wrap:wrap; }
/* El botón pasa lentamente de gris (bloqueado) a negro (desbloqueado) */
.lesson-complete .btn { transition:background-color 1.6s ease, border-color 1.6s ease, color 1.6s ease; }
.lesson-complete.is-locked .btn { background:var(--gray-300); border-color:var(--gray-300); color:var(--gray-600); cursor:not-allowed; opacity:1; }
.lesson-complete.is-unlocked .btn { background:var(--black); border-color:var(--black); color:#fff; cursor:pointer; }
.cmp-ic { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cmp-ic--check { display:none; }
.lesson-complete.is-unlocked .cmp-ic--lock { display:none; }
/* Se arma el círculo y luego el check dentro */
.lesson-complete.is-unlocked .cmp-ic--check { display:inline-block; }
.lesson-complete.is-unlocked .cmp-ic--check circle { stroke-dasharray:64; stroke-dashoffset:64; animation:drawCircle .55s .15s ease forwards; }
.lesson-complete.is-unlocked .cmp-ic--check path { stroke-dasharray:20; stroke-dashoffset:20; animation:drawCheck .3s .65s ease forwards; }
@keyframes drawCircle { to { stroke-dashoffset:0; } }
@keyframes drawCheck { to { stroke-dashoffset:0; } }
.lesson-complete__hint { font-size:12.5px; color:var(--gray-500); }
.lesson-complete.is-unlocked .lesson-complete__hint { display:none; }
.lesson-autochip{ display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--gray-500); background:#f1f1f0; border-radius:999px; padding:11px 18px; }
.lesson-autochip svg{ width:16px; height:16px; flex:none; }
.lesson-doneflag { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--black); }
.lesson-doneflag svg { width:20px; height:20px; fill:#1f9d57; stroke:none; }
.lesson-doneflag svg path { stroke:#fff; stroke-width:2.4; fill:none; }

.lesson-block { margin-top:26px; }
.lesson-block__k { font-size:11px; text-transform:uppercase; letter-spacing:.13em; color:var(--gray-500); font-weight:700; margin-bottom:10px; }
.lesson-summary { font-size:14.5px; line-height:1.7; color:var(--gray-700); }
.lesson-res { display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color:var(--black); background:var(--gray-100); padding:12px 16px; border-radius:10px; }
.lesson-res:hover { background:var(--gray-200); }
.lesson-res svg { width:17px; height:17px; fill:none; stroke:var(--gray-700); stroke-width:1.7; }

/* Comentarios */
.lesson-side { background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; position:sticky; top:20px; }
.comments__head { margin-bottom:14px; }
.comments__title { font-size:15px; font-weight:700; color:var(--black); }
.comments__title b { color:var(--gray-500); font-weight:600; }
.comments__form { margin-bottom:18px; }
.comments__form textarea { width:100%; font-family:inherit; font-size:14px; color:var(--ink); background:var(--gray-50); border:1px solid var(--line); border-radius:11px; padding:11px 13px; resize:vertical; min-height:54px; transition:border-color .15s; }
.comments__form textarea:focus { outline:none; border-color:var(--black); background:#fff; }
.comments__form .btn { margin-top:9px; width:100%; }
.comments__empty { font-size:13.5px; color:var(--gray-500); text-align:center; padding:20px 0; }
.comments__list { display:flex; flex-direction:column; gap:18px; max-height:600px; overflow-y:auto; }
.comment { display:flex; gap:11px; }
.comment__av { width:34px; height:34px; border-radius:50%; flex-shrink:0; background:var(--black); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; }
.comment__body { min-width:0; flex:1; }
.comment__top { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.comment__name { font-size:13.5px; font-weight:600; color:var(--black); }
.comment__role { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); background:var(--gray-100); padding:2px 7px; border-radius:999px; }
.comment__time { font-size:11.5px; color:var(--gray-500); }
.comment__text { font-size:13.5px; line-height:1.55; color:var(--gray-700); margin-top:5px; white-space:pre-line; }
.comment__actions { display:flex; align-items:center; gap:16px; margin-top:8px; }
.comment__like { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--gray-500); }
.comment__like svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; }
.comment__reply { font-size:12.5px; font-weight:500; color:var(--gray-700); cursor:pointer; }
.comment__reply:hover { color:var(--black); }

/* Nodo de examen en el temario */
.tl-row--exam { margin-top:8px; }
.tl-node--exam { background:var(--black); border-color:var(--black); color:#fff; }
.tl-node--exam svg { width:15px; height:15px; }
.tl-row--exam.is-done .tl-node--exam { background:#1f9d57; border-color:#1f9d57; }
.tl-card--exam { border-style:dashed; border-color:var(--gray-300); }
.tl-exam-ic { width:60px; height:60px; flex-shrink:0; border-radius:10px; background:var(--gray-100); display:grid; place-items:center; }
.tl-exam-ic svg { width:26px; height:26px; fill:none; stroke:var(--black); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   Examen (quiz) — escenario oscuro de marca (nada de Google Forms)
   ============================================================ */
.quiz { max-width:780px; position:relative; background:linear-gradient(150deg,#1d1d1d,#0b0b0b); border-radius:24px; padding:clamp(26px,4vw,44px); color:#fff; overflow:hidden; }
.quiz::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px); background-size:20px 20px; -webkit-mask-image:linear-gradient(120deg,#000 40%,transparent 90%); mask-image:linear-gradient(120deg,#000 40%,transparent 90%); }
.quiz::after { content:"O"; position:absolute; right:-30px; bottom:-70px; font-family:Georgia,serif; font-size:300px; font-weight:700; color:rgba(255,255,255,.03); line-height:1; pointer-events:none; }
.quiz > * { position:relative; z-index:1; }
.quiz-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.quiz-step { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:700; }
.quiz-step b { color:var(--gold, #caa64a); }
.quiz-timer { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:7px 14px; border-radius:999px; }
.quiz-timer svg { width:15px; height:15px; fill:none; stroke:var(--gold, #caa64a); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.quiz-timer.is-low { color:#ff8f8f; border-color:rgba(230,57,70,.5); animation:pulseLow 1s ease infinite; }
@keyframes pulseLow { 0%,100% { opacity:1; } 50% { opacity:.55; } }
.quiz-track { height:7px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; margin-bottom:30px; }
.quiz-track i { display:block; height:100%; background:linear-gradient(90deg,#a8863a,var(--gold, #caa64a)); border-radius:999px; transition:width .5s cubic-bezier(.19,1,.22,1); }
.quiz-q--in { animation:quizIn .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes quizIn { from { opacity:0; filter:blur(8px); transform:translateY(14px); } to { opacity:1; filter:blur(0); transform:none; } }
.quiz-q__num { font-size:11px; text-transform:uppercase; letter-spacing:.22em; color:var(--gold, #caa64a); font-weight:700; }
.quiz-q__title { font-size:clamp(19px,2.4vw,24px); font-weight:700; letter-spacing:-.01em; color:#fff; margin:12px 0 24px; line-height:1.35; max-width:640px; }
.quiz-opts { display:flex; flex-direction:column; gap:11px; }
.quiz-opt { display:flex; align-items:center; gap:15px; padding:15px 18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); border-radius:14px; cursor:pointer; transition:background .25s, border-color .25s, transform .3s cubic-bezier(.19,1,.22,1); }
.quiz-opt:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); transform:translateX(4px); }
.quiz-opt input { position:absolute; opacity:0; pointer-events:none; }
.quiz-opt__key { width:30px; height:30px; flex:none; border-radius:50%; border:1.5px solid rgba(255,255,255,.3); display:grid; place-items:center; font-size:12.5px; font-weight:800; color:rgba(255,255,255,.6); transition:all .25s; }
.quiz-opt__box { display:none; }
.quiz-opt__txt { font-size:15px; color:rgba(255,255,255,.88); line-height:1.4; }
.quiz-opt:has(input:checked) { background:#fff; border-color:#fff; transform:translateX(4px); }
.quiz-opt:has(input:checked) .quiz-opt__txt { color:#0d0d0d; font-weight:600; }
.quiz-opt:has(input:checked) .quiz-opt__key { background:#0d0d0d; border-color:#0d0d0d; color:var(--gold, #caa64a); }
.quiz-nav { display:flex; align-items:center; gap:12px; margin-top:30px; }
.quiz-nav [hidden] { display:none !important; }   /* el hidden manda sobre el display de .btn */
.quiz-nav #quizPrev { margin-right:auto; background:transparent; color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.25); }
.quiz-nav #quizPrev:hover { color:#fff; border-color:rgba(255,255,255,.5); }
.quiz-nav #quizNext { background:#fff; color:#0d0d0d; padding:13px 30px; }
.quiz-nav #quizNext:disabled { opacity:.35; }
.quiz-nav #quizSubmit { background:var(--gold, #caa64a); color:#0d0d0d; font-weight:800; padding:13px 30px; }
.quiz-nav #quizSubmit:disabled { opacity:.35; }
.quiz-expired { font-size:13.5px; color:#ff9d9d; background:rgba(230,57,70,.14); border:1px solid rgba(230,57,70,.3); border-radius:12px; padding:13px 16px; margin-top:16px; }
.quiz-expired a { color:#ffb3b3; font-weight:700; text-decoration:underline; }
@media (max-width:640px){ .quiz { padding:22px 18px; border-radius:18px; } }

.exam-result { background:#fff; border:1px solid var(--line); border-radius:18px; padding:36px 30px; text-align:center; margin-bottom:26px; }
.exam-result.is-pass { border-color:rgba(31,157,87,.4); background:linear-gradient(180deg,rgba(31,157,87,.05),#fff); }
.exam-result.is-fail { border-color:var(--gray-300); }
.exam-result__seal { width:84px; height:84px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; }
.exam-result.is-pass .exam-result__seal { background:var(--black); animation:sealPop .6s cubic-bezier(.16,1,.3,1); }
.exam-result.is-fail .exam-result__seal { background:rgba(230,57,70,.1); }
.exam-result__seal img { width:46px; height:46px; filter:brightness(0) invert(1); }
.exam-result.is-fail .exam-result__seal svg { width:38px; height:38px; fill:none; stroke:var(--domicilio); stroke-width:2.2; stroke-linecap:round; }
@keyframes sealPop { from { opacity:0; transform:scale(.5) rotate(-12deg); } to { opacity:1; transform:none; } }
.exam-result__score { font-size:42px; font-weight:700; letter-spacing:-.03em; color:var(--black); }
.exam-result__score span { font-size:22px; color:var(--gray-500); font-weight:600; }
.exam-result__title { font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--black); margin-top:4px; }
.exam-result__sub { font-size:14.5px; color:var(--gray-700); margin-top:8px; }
.exam-result__actions { display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap; }

/* ---- Insignias ---- */
.badge-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.badge-tile { text-align:center; padding:22px 14px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--white); transition:transform .15s; }
.badge-tile:hover { transform:translateY(-2px); }
.badge-tile.is-locked { opacity:.5; filter:grayscale(1); }
.badge-tile__ic { width:64px; height:64px; margin:0 auto 12px; border-radius:16px; display:grid; place-items:center; color:#fff; }
.badge-tile__ic svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.6; }
.badge-tile__img { width:36px; height:36px; object-fit:contain; filter:brightness(0) invert(1); }
.badge-tile__name { font-size:13.5px; font-weight:700; color:var(--black); letter-spacing:-.01em; }
.badge-tile__sub { font-size:11.5px; color:var(--gray-500); margin-top:3px; }

/* ---- Certificado: miniatura tipo diploma ---- */
.cert-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px; }
.cert__code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--gray-700); letter-spacing:.04em; }

.certmini { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow .2s, border-color .2s, transform .15s; }
.certmini:hover { box-shadow:0 12px 28px rgba(13,13,13,.08); border-color:var(--gray-300); transform:translateY(-2px); }

/* La "hoja" del diploma con doble marco (crece con el contenido, sin desbordar) */
.certmini__paper { position:relative; flex:1; min-height:208px; margin:14px; background:linear-gradient(180deg,#fff,#fcfcfb); border:1px solid var(--gray-300); border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px 26px; overflow:hidden; color:inherit; text-decoration:none; transition:border-color .22s, transform .3s ease, box-shadow .3s ease; }
.certmini__paper:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.1); }
.certmini__paper::before { content:""; position:absolute; inset:7px; border:1px solid var(--gray-200); border-radius:4px; pointer-events:none; transition:border-color .22s; }
/* Contorno dorado al hover */
.certmini:hover .certmini__paper { border-color:var(--gold); }
.certmini:hover .certmini__paper::before { border-color:var(--gold); }
.certmini__wm { position:absolute; top:50%; left:50%; transform:translate(-50%,-46%); font-size:150px; font-weight:700; color:rgba(13,13,13,.035); line-height:1; z-index:0; font-family:Georgia,'Times New Roman',serif; }
.certmini__logo { position:relative; z-index:1; height:30px; width:auto; object-fit:contain; margin-bottom:10px; }
.certmini__kicker { position:relative; z-index:1; font-size:8.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--gray-500); font-weight:600; max-width:240px; }
.certmini__recog { position:relative; z-index:1; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.22em; color:var(--black); margin-top:10px; }
.certmini__rule { position:relative; z-index:1; width:38px; height:2px; background:var(--gold); margin:9px 0 11px; }
.certmini__course { position:relative; z-index:1; font-size:16px; font-weight:700; color:var(--black); letter-spacing:-.01em; line-height:1.25; }
.certmini__holder { position:relative; z-index:1; font-size:12.5px; color:var(--gray-700); margin-top:7px; }
.certmini__holder b { color:var(--black); font-weight:600; }
.certmini__date { position:relative; z-index:1; font-size:11px; color:var(--gray-500); margin-top:6px; text-transform:capitalize; }
.certmini__foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 18px 16px; }

/* ============================================================
   Reseñas de educadoras
   ============================================================ */
.rev-summary { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin-bottom:24px; }
.rev-summary__av { width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--black); color:#fff; display:grid; place-items:center; font-weight:700; font-size:22px; flex-shrink:0; }
.rev-summary__info { flex:1; min-width:0; }
.rev-summary__name { font-size:18px; font-weight:700; color:var(--black); letter-spacing:-.01em; }
.rev-summary__role { font-size:13px; color:var(--gray-500); margin-top:2px; }
.rev-summary__score { text-align:center; padding-left:20px; border-left:1px solid var(--line); }
.rev-summary__num { font-size:30px; font-weight:700; letter-spacing:-.03em; color:var(--black); line-height:1; }
.rev-summary__stars { display:flex; gap:2px; justify-content:center; margin:5px 0 3px; }
.rev-summary__stars svg { width:14px; height:14px; fill:var(--gray-200); }
.rev-summary__stars svg.on { fill:var(--gold); }
.rev-summary__count { font-size:11.5px; color:var(--gray-500); }
@media (max-width:560px){ .rev-summary__score { padding-left:0; border-left:0; } .rev-summary { flex-wrap:wrap; } }

.rev-edu { margin-bottom:34px; }
.rev-edu__head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.rev-edu__av { width:52px; height:52px; border-radius:50%; object-fit:cover; background:var(--black); color:#fff; display:grid; place-items:center; font-weight:700; font-size:17px; flex-shrink:0; }
.rev-edu__name { font-size:17px; font-weight:700; color:var(--black); letter-spacing:-.01em; }
.rev-edu__role { font-size:12.5px; color:var(--gray-500); margin-top:1px; }
.rev-edu__count { margin-left:auto; font-size:12px; color:var(--gray-500); background:var(--gray-100); padding:5px 12px; border-radius:999px; }
.rev-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.rev-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; transition:box-shadow .2s, transform .15s; }
.rev-card:hover { box-shadow:0 12px 28px rgba(13,13,13,.07); transform:translateY(-2px); }
.rev-card__stars { display:flex; gap:3px; margin-bottom:12px; }
.rev-card__stars svg { width:16px; height:16px; fill:var(--gray-200); }
.rev-card__stars svg.on { fill:var(--gold); }
.rev-card__text { font-size:14.5px; line-height:1.6; color:var(--gray-700); font-style:italic; }
.rev-card__foot { display:flex; align-items:center; gap:11px; margin-top:18px; padding-top:14px; border-top:1px solid var(--gray-100); }
.rev-card__av { width:36px; height:36px; border-radius:50%; background:var(--gray-100); color:var(--black); display:grid; place-items:center; font-weight:700; font-size:12.5px; }
.rev-card__author { font-size:13.5px; font-weight:600; color:var(--black); }
.rev-card__date { font-size:12px; color:var(--gray-500); }

/* ============================================================
   Comunidad (tipo Discord)
   ============================================================ */
.comu { display:grid; grid-template-columns:236px 1fr 210px; gap:16px; align-items:start; }
@media (max-width:1080px) { .comu { grid-template-columns:220px 1fr; } .comu-members { display:none; } }
@media (max-width:680px) { .comu { grid-template-columns:1fr; } .comu-side { display:none; } }

/* Panel de canales */
.comu-side { background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; }
.comu-side__brand { display:flex; align-items:center; gap:11px; padding:4px 6px 14px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.comu-side__logo { width:38px; height:38px; border-radius:11px; background:var(--black); color:#fff; display:grid; place-items:center; font-family:Georgia,serif; font-size:20px; font-weight:700; }
.comu-side__title { font-size:14.5px; font-weight:700; color:var(--black); }
.comu-side__sub { font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--gray-500); }
.comu-side__k { font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--gray-500); font-weight:700; padding:4px 8px 8px; }
.comu-side__nav { display:flex; flex-direction:column; gap:3px; }
.comu-ch { display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:10px; color:var(--gray-700); font-size:14px; font-weight:500; transition:background .15s, color .15s; }
.comu-ch:hover { background:var(--gray-100); color:var(--black); }
.comu-ch.is-active { background:var(--black); color:#fff; }
.comu-ch__hash { font-weight:700; color:var(--gray-300); }
.comu-ch:hover .comu-ch__hash { color:var(--gray-500); }
.comu-ch.is-active .comu-ch__hash { color:rgba(255,255,255,.5); }

/* Chat */
.comu-chat { background:#fff; border:1px solid var(--line); border-radius:18px; display:flex; flex-direction:column; overflow:hidden; height:640px; }
.comu-chat__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--gray-50),#fff); }
.comu-chat__h-main { display:flex; align-items:center; gap:12px; min-width:0; }
.comu-chat__hash { width:38px; height:38px; flex-shrink:0; border-radius:11px; background:var(--black); color:#fff; display:grid; place-items:center; font-size:20px; font-weight:700; }
.comu-chat__title { font-size:16px; font-weight:700; color:var(--black); }
.comu-chat__desc { font-size:12.5px; color:var(--gray-500); margin-top:1px; }
.comu-chat__members { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--gray-700); background:var(--gray-100); padding:6px 12px; border-radius:999px; white-space:nowrap; }
.comu-chat__members .dot { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.comu-feed { flex:1; overflow-y:auto; padding:20px 22px; display:flex; flex-direction:column; gap:18px; }
.comu-empty { margin:auto; text-align:center; color:var(--gray-500); }
.comu-empty__ic { width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:var(--gray-100); color:var(--gray-300); display:grid; place-items:center; font-size:30px; font-weight:700; }
.comu-empty__t { font-size:16px; font-weight:700; color:var(--gray-700); }
.comu-empty__s { font-size:13px; margin-top:4px; }
.msg { display:flex; gap:12px; }
.msg__av { width:40px; height:40px; border-radius:50%; flex-shrink:0; color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700; }
.msg__top { display:flex; align-items:baseline; gap:9px; }
.msg__name { font-size:14px; font-weight:600; color:var(--black); }
.msg__time { font-size:11.5px; color:var(--gray-500); }
.msg__text { font-size:14px; line-height:1.55; color:var(--gray-700); margin-top:3px; }
.comu-compose { padding:14px 18px 18px; border-top:1px solid var(--line); }
.comu-compose__box { display:flex; align-items:center; gap:8px; background:var(--gray-100); border:1px solid transparent; border-radius:14px; padding:6px 6px 6px 16px; transition:border-color .15s, background .15s; }
.comu-compose__box:focus-within { background:#fff; border-color:var(--black); }
.comu-compose__box input { flex:1; border:0; outline:0; background:transparent; font-family:inherit; font-size:14.5px; color:var(--ink); }
.comu-compose__send { width:40px; height:40px; flex-shrink:0; border:0; border-radius:11px; background:var(--black); color:#fff; display:grid; place-items:center; cursor:pointer; transition:opacity .15s, transform .1s; }
.comu-compose__send:hover { opacity:.88; }
.comu-compose__send:active { transform:scale(.95); }
.comu-compose__send svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* Miembros en línea */
.comu-members { background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px 14px; }
.comu-members__k { font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--gray-500); font-weight:700; padding:4px 8px 12px; }
.comu-member { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:10px; transition:background .15s; }
.comu-member:hover { background:var(--gray-100); }
.comu-member__av { position:relative; width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; font-size:11.5px; font-weight:700; flex-shrink:0; }
.comu-member__dot { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:#22c55e; border:2.5px solid #fff; }
.comu-member__name { font-size:13.5px; font-weight:500; color:var(--gray-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================
   Preloader de bienvenida (post-login) — fondo negro, letras blancas
   ============================================================ */
.preloader { position:fixed; inset:0; z-index:9999; background:#0d0d0d; display:grid; place-items:center; transition:opacity .7s ease; }
.preloader::before { content:""; position:absolute; inset:0; background:radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.06), transparent 70%); }
.preloader.is-out { opacity:0; pointer-events:none; }
.preloader__inner { position:relative; text-align:center; }
.preloader__hi { display:block; font-size:clamp(18px, 2.4vw, 26px); text-transform:uppercase; letter-spacing:.34em; color:rgba(255,255,255,.55); }
.preloader__name { display:block; margin-top:18px; font-size:clamp(52px, 11vw, 104px); font-weight:700; letter-spacing:-.03em; line-height:1.04; color:#fff; }
/* Cada letra hace su propio blur reveal, escalonado (word blur reveal letra por letra) */
.plc { display:inline-block; white-space:pre; opacity:0; filter:blur(12px); transform:translateY(8px); animation:letterReveal .62s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes letterReveal {
  0%   { opacity:0; filter:blur(12px); transform:translateY(8px); }
  100% { opacity:1; filter:blur(0); transform:none; }
}

/* ============================================================
   Login (usuario + contraseña) — fondo gris + marca de agua
   ============================================================ */
.authpage {
  position:relative; min-height:100vh; min-height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:flex-end;
  padding:32px clamp(24px, 8vw, 140px);
  background-color:#f4f4f3;
  background-image:radial-gradient(rgba(13,13,13,.06) 1.1px, transparent 1.1px);
  background-size:22px 22px;
}
.authpage__wm { position:absolute; inset:0; z-index:0; pointer-events:none; }
.authpage__wm img {
  position:absolute; left:var(--x); top:var(--y);
  width:clamp(220px, 30vw, 420px); height:auto;
  transform:translate(-10%,-50%) rotate(var(--r)) scale(var(--s, 1));
  opacity:.05;
}
@media (max-width:760px){ .authpage { justify-content:center; padding:24px; } .authpage__wm img:nth-child(2){ display:none; } .authcard__logo{ height:64px; margin-bottom:26px; } }
/* Páginas de auth: sin scroll ni rebote — la card vive clavada en el viewport */
html:has(.authpage), body:has(.authpage){ height:100%; overflow:hidden; overscroll-behavior:none; }

.authcard {
  position:relative; z-index:1; width:100%; max-width:400px;
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:40px 38px 30px; box-shadow:0 24px 70px rgba(13,13,13,.12);
}
.authcard__logo { height:64px; width:auto; max-width:100%; object-fit:contain; display:block; margin:0 auto 26px; }
.authcard__title { font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--black); text-align:center; }
.authcard__sub { font-size:14px; color:var(--gray-500); text-align:center; margin:4px 0 26px; }

.authpass { position:relative; }
.authpass .input { padding-right:44px; }
.authpass__eye { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:32px; height:32px; border:0; background:transparent; display:grid; place-items:center; cursor:pointer; }
.authpass__eye svg { width:19px; height:19px; fill:none; stroke:var(--gray-500); stroke-width:1.7; }
.authpass__eye.is-on svg { stroke:var(--black); }

.authremember { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gray-700); margin:12px 0 4px; cursor:pointer; }
.authremember input { accent-color:var(--black); width:15px; height:15px; }

.authdiv { display:flex; align-items:center; gap:12px; margin:22px 0 16px; color:var(--gray-500); font-size:12px; }
.authdiv::before, .authdiv::after { content:""; flex:1; height:1px; background:var(--line); }

.authgoogle { width:100%; gap:10px; color:var(--gray-700); }
.authgoogle[disabled] { opacity:.7; cursor:not-allowed; }
.authgoogle__soon { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-500); background:var(--gray-100); padding:2px 7px; border-radius:999px; }

.authhelp { font-size:12px; color:var(--gray-500); text-align:center; margin-top:20px; line-height:1.5; }

/* ---- Acceso (magic link) ---- */
.access__hint { font-size:13px; color:var(--gray-500); margin-top:18px; line-height:1.6; text-align:center; }
.access__sent { text-align:center; }
.access__icon { width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--gray-100); display:grid; place-items:center; color:var(--black); }
.access__icon svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; }
.access__dev { margin-top:20px; padding:12px 14px; border:1px dashed var(--gray-300); border-radius:var(--radius); font-size:12px; word-break:break-all; }
.access__dev a { color:var(--brand-red); font-weight:600; }

/* ---- Validación de certificado ---- */
.validate { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--gray-50); }
.validate__card { width:100%; max-width:460px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 30px; text-align:center; }
.validate__seal { width:72px; height:72px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; }
.validate__seal--ok { background:rgba(16,128,64,.1); color:#0f7a3d; }
.validate__seal--bad { background:rgba(230,57,70,.1); color:var(--domicilio); }
.validate__seal svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:2; }

@media (max-width:640px) {
  .hello__wallet { margin-left:0; width:100%; }
}

/* ============================================================
   Rutas educativas (mapa de cada ruta + Profesionalización)
   ============================================================ */
.route { position:relative; background:#fff; border:1px solid var(--gray-300); border-radius:20px; padding:26px 28px; margin-bottom:24px; transition:box-shadow .3s ease, border-color .3s ease; }
.route:hover { border-color:#d8d8d7; box-shadow:0 14px 40px rgba(0,0,0,.05); }
.route.is-earned { border-color:#d9cba4; }
.route__head { display:flex; align-items:flex-start; gap:22px; flex-wrap:wrap; cursor:pointer; }
.route__chev { position:absolute; right:18px; top:18px; width:32px; height:32px; border-radius:50%; background:#f1f1f0; display:grid; place-items:center; transition:transform .45s cubic-bezier(.19,1,.22,1), background .25s; z-index:2; }
.route__chev svg { width:15px; height:15px; stroke:#6f6f6f; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.route:hover .route__chev { background:#e9e9e8; }
.route.is-open .route__chev { transform:rotate(180deg); }
.route__body { overflow:hidden; max-height:0; opacity:0; transition:max-height .6s cubic-bezier(.19,1,.22,1), opacity .4s ease; }
.route.is-open .route__body { max-height:1200px; opacity:1; }
.route__cover { position:relative; width:96px; height:96px; flex:none; border-radius:16px; background:#eee center/cover no-repeat; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.route__cover-seal { position:absolute; right:-8px; bottom:-8px; width:30px; height:30px; border-radius:50%; background:#0d0d0d; border:3px solid #fff; display:grid; place-items:center; }
.route__cover-seal svg { width:14px; height:14px; stroke:var(--gold, #caa64a); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.route__info { flex:1; min-width:240px; }
.route__badge { display:inline-flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#8a8a8a; background:#f4f4f3; border-radius:999px; padding:5px 12px; }
.route__badge .dot { width:8px; height:8px; border-radius:50%; }
.route__name { font-size:23px; font-weight:800; letter-spacing:-.01em; margin-top:10px; }
.route__desc { font-size:13.5px; color:#8a8a8a; margin-top:4px; max-width:520px; line-height:1.5; }
.route__progress { display:flex; align-items:center; gap:12px; margin-top:14px; max-width:420px; }
.route__bar { flex:1; height:7px; background:#efefee; border-radius:99px; overflow:hidden; }
.route__bar i { display:block; height:100%; background:linear-gradient(90deg,#2a2a2a,#0d0d0d); border-radius:99px; }
.route__pct { font-size:14px; font-weight:800; letter-spacing:-.01em; min-width:38px; text-align:right; }
.route__state { display:flex; align-items:center; gap:12px; margin-right:40px; background:#f8f8f7; border:1px solid var(--gray-200); border-radius:14px; padding:14px 18px; }
.route__state-ic { width:38px; height:38px; border-radius:50%; background:#ececeb; display:grid; place-items:center; flex:none; }
.route__state-ic svg { width:19px; height:19px; stroke:#8a8a8a; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.route__state b { display:block; font-size:13.5px; }
.route__state span, .route__state a { font-size:12px; color:#8a8a8a; text-decoration:none; }
.route__state a { font-weight:700; color:#0d0d0d; }
.route__state.is-earned { background:#0d0d0d; border-color:#0d0d0d; }
.route__state.is-earned b { color:#fff; }
.route__state.is-earned a { color:var(--gold, #caa64a); }
.route__state.is-earned .route__state-ic { background:rgba(255,255,255,.12); }
.route__state.is-earned .route__state-ic svg { stroke:var(--gold, #caa64a); }

.route__steps { list-style:none; margin:22px 0 0; padding:0; }
.rstep { display:flex; align-items:center; gap:14px; position:relative; padding:5px 0; }
.rstep::before { content:""; position:absolute; left:15px; top:-7px; bottom:-7px; width:2px; background:#ececeb; }
.rstep:first-child::before { top:50%; }
.rstep:last-child::before { bottom:50%; }
.rstep__n { position:relative; z-index:1; width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid #dcdcdb; display:grid; place-items:center; font-size:12.5px; font-weight:700; color:#9a9a9a; flex:none; }
.rstep__n svg { width:15px; height:15px; stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.rstep.is-done .rstep__n { background:#0d0d0d; border-color:#0d0d0d; }
.rstep.is-current .rstep__n { border-color:#0d0d0d; color:#0d0d0d; box-shadow:0 0 0 4px rgba(13,13,13,.08); }
.rstep__body { flex:1; display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; border:1px solid transparent; border-radius:14px; padding:9px 14px 9px 9px; transition:background .2s, border-color .2s, transform .25s ease; }
.rstep__body:hover { background:#f8f8f7; border-color:#ececeb; transform:translateX(3px); }
.rstep__thumb { width:52px; height:52px; flex:none; border-radius:11px; background:#eee center/cover no-repeat; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.rstep.is-done .rstep__thumb { filter:grayscale(1); opacity:.75; }
.rstep__txt { flex:1; min-width:0; }
.rstep__title { display:block; font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
.rstep.is-done .rstep__title { color:#8a8a8a; font-weight:600; }
.rstep__sub { display:block; font-size:12px; color:#a3a3a2; margin-top:2px; }
.rstep__pill { flex:none; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#6f6f6f; background:#f1f1f0; border-radius:999px; padding:7px 13px; }
.rstep__pill svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.rstep__pill--done { background:#0d0d0d; color:#fff; }
.rstep__pill--done svg { stroke:var(--gold, #caa64a); }
.rstep__pill--now { background:#fff; color:#0d0d0d; border:1.5px solid #0d0d0d; }

.prof { position:relative; overflow:hidden; background:linear-gradient(140deg,#1e1e1e,#0c0c0c); color:#fff; border-radius:20px; padding:30px 32px; margin-bottom:30px; }
.prof::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px); background-size:20px 20px; -webkit-mask-image:linear-gradient(90deg,#000 30%,transparent 90%); mask-image:linear-gradient(90deg,#000 30%,transparent 90%); }
.prof__wm { position:absolute; right:-30px; top:50%; transform:translateY(-50%); font-family:Georgia,serif; font-size:280px; font-weight:700; color:rgba(255,255,255,.04); line-height:1; pointer-events:none; }
.prof__head { position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.prof__kicker { font-size:10.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--gold, #caa64a); }
/* 700 y no 800: Roboto solo se carga hasta 700 y Safari simulaba el 800 (la «ó» salía distinta) */
.prof__name { font-size:24px; font-weight:700; margin-top:8px; letter-spacing:-.01em; font-synthesis:none; }
.prof__desc { font-size:13.5px; color:rgba(255,255,255,.62); margin-top:5px; max-width:520px; line-height:1.55; }
.prof__cta { flex:none; background:var(--gold, #caa64a); color:#0d0d0d; font-size:13.5px; font-weight:800; text-decoration:none; border-radius:999px; padding:13px 24px; transition:transform .25s ease, box-shadow .25s ease; }
.prof__cta:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(202,166,74,.35); }
.prof__reqs { position:relative; display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.prof__req { display:flex; align-items:center; gap:11px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); border-radius:14px; padding:11px 18px 11px 12px; }
.prof__check { width:26px; height:26px; border-radius:50%; border:1.5px solid rgba(255,255,255,.28); display:grid; place-items:center; flex:none; }
.prof__check svg { width:13px; height:13px; stroke:#0d0d0d; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.prof__req-txt b { display:block; font-size:13px; color:rgba(255,255,255,.55); }
.prof__req-txt i { font-style:normal; font-size:11px; color:rgba(255,255,255,.35); }
.prof__req.is-ok { border-color:rgba(202,166,74,.5); background:rgba(202,166,74,.08); }
.prof__req.is-ok .prof__check { background:var(--gold, #caa64a); border-color:var(--gold, #caa64a); }
.prof__req.is-ok .prof__req-txt b { color:#fff; }
.prof__req.is-ok .prof__req-txt i { color:var(--gold, #caa64a); }
.prof__done { position:relative; display:flex; align-items:center; gap:9px; margin-top:20px; font-size:12.5px; color:rgba(255,255,255,.6); }
.prof__done svg { width:16px; height:16px; stroke:var(--gold, #caa64a); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:640px){
  .route { padding:20px; }
  .route__cover { width:72px; height:72px; }
  .route__state { width:100%; }
  .rstep__pill { display:none; }
  .rstep__thumb { width:44px; height:44px; }
  .prof { padding:24px 20px; }
}

/* Curso presencial: panel explicativo (sin temario/video) */
.presencial-info { display:flex; gap:20px; align-items:flex-start; background:#fff; border:1px solid var(--gray-300); border-radius:16px; padding:28px; margin-top:8px; }
.presencial-info__ic { width:52px; height:52px; flex:none; border-radius:50%; background:#0d0d0d; display:grid; place-items:center; }
.presencial-info__ic svg { width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.presencial-info h3 { font-size:18px; font-weight:800; letter-spacing:-.01em; }
.presencial-info p { font-size:14px; color:#6f6f6f; line-height:1.65; margin:8px 0 16px; max-width:640px; }

/* Tooltip del candado (explica cómo se desbloquea) */
.tipwrap { position:relative; display:block; }
.tipwrap[data-tip]:hover::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%); background:#0d0d0d; color:#fff; font-size:12px; font-weight:600; line-height:1.4; padding:9px 13px; border-radius:9px; width:max-content; max-width:240px; text-align:center; z-index:6; box-shadow:0 10px 24px rgba(0,0,0,.28); }
.tipwrap[data-tip]:hover::before { content:""; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#0d0d0d; z-index:6; }
/* En filas anchas (ej. examen), el tooltip sale pegado al inicio, no en la mitad */
.tipwrap--left[data-tip]:hover::after { left:28px; transform:none; }
.tipwrap--left[data-tip]:hover::before { left:58px; transform:none; }

/* Buscador + paginador de cursos */
.filters--row { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.filters__pills { display:flex; gap:8px; }
.course-search { display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--gray-300); border-radius:999px; padding:9px 16px; min-width:260px; transition:border-color .2s; }
.course-search:focus-within { border-color:#0d0d0d; }
.course-search svg { width:16px; height:16px; stroke:#9a9a9a; fill:none; stroke-width:2; stroke-linecap:round; flex:none; }
.course-search input { border:0; outline:0; background:transparent; font-family:inherit; font-size:14px; width:100%; color:#0d0d0d; }
.pager { display:flex; align-items:center; justify-content:center; gap:16px; margin:28px 0 10px; flex-wrap:wrap; }
.pager__btn { font-size:13.5px; font-weight:700; color:#0d0d0d; text-decoration:none; background:#fff; border:1px solid var(--gray-300); border-radius:999px; padding:10px 18px; transition:border-color .2s, transform .2s; }
.pager__btn:hover { border-color:#0d0d0d; transform:translateY(-1px); }
.pager__btn.is-off { color:#c0c0c0; pointer-events:none; }
.pager__info { font-size:12.5px; color:#8a8a8a; }
@media (max-width:640px){ .course-search { width:100%; } }

/* Examen: estados bloqueado / ya aprobado */
.tl-card.is-locked { opacity:.6; cursor:not-allowed; }
.tl-card.is-locked .tl-exam-ic svg { stroke:#9a9a9a; }
.tl-card.is-static { cursor:default; }
.tl-card .link { color:#0d0d0d; font-weight:700; text-decoration:underline; }

/* Botón siguiente deshabilitado hasta terminar el video */
.btn.is-disabled { opacity:.4; pointer-events:none; }

/* Pestaña Completados */
.filter--done { display:inline-flex; align-items:center; gap:7px; }
.filter--done svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.filter--done.is-on { background:var(--gold, #caa64a); border-color:var(--gold, #caa64a); color:#0d0d0d; }

/* Editor de foto de perfil */
.avatar-edit { display:flex; align-items:center; gap:16px; }
.avatar-edit__img { width:76px; height:76px; border-radius:50%; object-fit:cover; border:2px solid var(--gray-300); }
.avatar-edit__ph { width:76px; height:76px; border-radius:50%; background:#0d0d0d; color:#fff; display:grid; place-items:center; font-weight:700; font-size:26px; }
.avatar-edit__btn { cursor:pointer; }

/* Cambio de correo + etiqueta opcional */
.email-change { display:flex; gap:10px; flex-wrap:wrap; }
.email-change .input { flex:1; min-width:220px; }
.field__opt { text-transform:none; letter-spacing:0; color:var(--gray-500); font-weight:400; }

/* Barra flotante "viendo como estudiante" (sesión super admin en el campus) */
.peek-bar{ position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:60; display:inline-flex; align-items:center; gap:8px; background:#0d0d0d; color:#fff; font-size:12.5px; font-weight:600; padding:10px 18px; border-radius:999px; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.3); white-space:nowrap; transition:transform .15s; }
.peek-bar:hover{ transform:translateX(-50%) translateY(-2px); }
.peek-bar svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; flex:none; }
@media (max-width:640px){ .peek-bar{ font-size:11.5px; padding:9px 14px; max-width:92vw; overflow:hidden; text-overflow:ellipsis; } }

/* Formato enriquecido (negrita, cursiva, listas) en descripción y resumen */
.lesson-summary p, .cdetail-hero__desc p{ margin:0 0 9px; }
.lesson-summary p:last-child, .cdetail-hero__desc p:last-child{ margin-bottom:0; }
.lesson-summary ul, .lesson-summary ol, .cdetail-hero__desc ul, .cdetail-hero__desc ol{ margin:9px 0; padding-left:22px; }
.lesson-summary li, .cdetail-hero__desc li{ margin:4px 0; }

/* Insignia con artwork propio (subido por el admin) */
.badge-tile__img--art{ width:74%; height:74%; object-fit:contain; }

/* Curso bloqueado: la card entera deja de ser clicable (portada incluida) */
.course.is-locked .course__main{ pointer-events:none; cursor:default; }

/* Like real en comentarios */
button.comment__like, button.comment__reply{ background:transparent; border:0; padding:0; font:inherit; cursor:pointer; }
.comment__like.is-liked{ color:#0d0d0d; font-weight:700; }
.comment__like.is-liked svg{ fill:#0d0d0d; stroke:#0d0d0d; }
.comment__like:hover, .comment__reply:hover{ color:#0d0d0d; }

/* Campanita de notificaciones en el sidebar */
.nav__badge{ margin-left:auto; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:#e2001a; color:#fff; font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.shell.is-collapsed .nav__badge{ position:absolute; top:6px; right:8px; margin:0; }

/* Lista de notificaciones */
.noti-list{ display:flex; flex-direction:column; gap:10px; }
.noti{ position:relative; display:flex; align-items:center; gap:13px; background:#fff; border:1px solid #ececec; border-radius:14px; padding:14px 16px; text-decoration:none; transition:border-color .14s, transform .14s; }
.noti:hover{ border-color:#0d0d0d; transform:translateY(-1px); }
.noti__dot{ display:none; width:8px; height:8px; border-radius:50%; background:#e2001a; flex:none; }
.noti.is-new{ background:#fffdf6; border-color:#ecd9a8; }
.noti.is-new .noti__dot{ display:block; }
.noti__av{ width:38px; height:38px; border-radius:50%; background:#0d0d0d; color:#fff; font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; flex:none; }
.noti__txt{ flex:1; min-width:0; }
.noti__line{ display:block; font-size:13.5px; color:#333; }
.noti__line b{ color:#0d0d0d; }
.noti__excerpt{ display:block; font-size:12.5px; color:#8a8a8a; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.noti__time{ display:block; font-size:11px; color:#b5b5b5; margin-top:3px; }
.noti__go{ width:16px; height:16px; fill:none; stroke:#c0c0c0; stroke-width:2; flex:none; }

/* ============ Reseña de la capacitación y diploma ============ */
.rsn{ max-width:620px; margin:0 auto; }
.rsn__hero{ background:#0d0d0d; color:#fff; border-radius:22px; padding:32px 30px 30px; text-align:center; }
.rsn__kicker{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold,#caa64a); }
.rsn__title{ font-size:24px; font-weight:700; letter-spacing:-.4px; margin:12px 0 0; line-height:1.25; }
.rsn__sub{ font-size:13.5px; color:rgba(255,255,255,.55); margin:6px 0 0; }
.rsn__lead{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.8); margin:18px 0 0; }

.rsn__diploma{ display:flex; align-items:center; gap:14px; text-align:left; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:14px 16px; margin:22px 0 20px; }
.rsn__diploma svg{ flex:none; width:26px; height:26px; fill:none; stroke:var(--gold,#caa64a); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.rsn__diploma-t{ font-size:15px; font-weight:600; }
.rsn__diploma-s{ font-size:12.5px; color:rgba(255,255,255,.55); margin-top:2px; }
.rsn__btn{ width:100%; padding:14px; margin-top:6px; background:#fff; color:#0d0d0d; border:0; }
.rsn__btn:hover{ opacity:.9; }

.rsn__form{ margin-top:18px; }
.rsn__bloque{ background:#fff; border:1px solid var(--line,#ececec); border-radius:20px; padding:24px 26px; margin-bottom:16px; }
.rsn__bloque-head{ display:flex; align-items:center; gap:13px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #f4f4f4; }
.rsn__bloque-n{ flex:none; width:30px; height:30px; border-radius:50%; background:#0d0d0d; color:#fff;
  font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.rsn__bloque-t{ font-size:16px; font-weight:700; color:var(--ink,#1a1a1a); margin:0; line-height:1.3; }
.rsn__bloque-s{ font-size:12.5px; color:#9a9a9a; margin:2px 0 0; }
.rsn__label{ display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:#9a9a9a; margin-bottom:10px; }
.rsn__texto{ width:100%; min-height:130px; resize:vertical; }
.rsn__hint{ display:block; font-size:12.5px; color:#a0a0a0; margin-top:8px; }
.rsn__form .rsn__btn{ background:#0d0d0d; color:#fff; margin-top:22px; }

/* Estrellas: en orden inverso para que el hover pinte de izquierda a derecha */
.rsn__estrellas{ display:inline-flex; margin-bottom:22px; }
.rsn__estrellas--pick{ flex-direction:row-reverse; justify-content:flex-end; }
.rsn__estrellas--pick input{ position:absolute; opacity:0; width:0; height:0; }
.rsn__estrellas--pick label{ cursor:pointer; padding:0 3px; }
.rsn__estrellas svg{ width:32px; height:32px; fill:#ececec; stroke:none; transition:fill .12s; }
.rsn__estrellas--pick label:hover svg,
.rsn__estrellas--pick label:hover ~ label svg,
.rsn__estrellas--pick input:checked ~ label svg{ fill:var(--gold,#caa64a); }
.rsn__estrellas--fijas svg{ width:20px; height:20px; }
.rsn__estrellas--fijas svg.is-on{ fill:var(--gold,#caa64a); }

.rsn__mia{ background:#fff; border:1px solid var(--line,#ececec); border-radius:20px; padding:22px 26px; margin-top:18px; }
.rsn__mia-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rsn__mia-quien{ display:block; font-size:15px; font-weight:600; color:var(--ink,#1a1a1a); }
.rsn__mia-rol{ display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:#a8a8a8; margin-top:2px; }
.rsn__mia-head .rsn__estrellas{ margin:0; }
.rsn__mia-fecha{ display:block; font-size:12.5px; color:#a0a0a0; margin-top:12px; }
.rsn__mia-texto{ font-size:14.5px; line-height:1.7; color:#4a4a4a; margin:12px 0 0; white-space:pre-wrap; }

.rsn__falta{ display:block; text-align:center; font-size:13.5px; color:#8a6d1f; background:#fbf7ec;
  border:1px solid #efe4c9; border-radius:14px; padding:13px 16px; margin-top:16px; text-decoration:none; }
.rsn__falta:hover{ background:#f7f0df; }

.comu-empty--solo{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; min-height:280px; }

/* ============ Capacitaciones de la sede dentro del catálogo ============ */
.course--sede .course__main{ display:block; }
/* Sin foto del catálogo, la portada se resuelve con la marca en vez de quedar vacía */
.course__cover--sinfoto{ background:#0d0d0d linear-gradient(135deg,#161616,#0d0d0d); position:relative; }
.course__cover--sinfoto::after{ content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size:14px 14px; }

/* La fecha, sobre la portada */
.course__fecha{ position:absolute; right:12px; top:12px; z-index:4; text-align:center;
  background:#fff; color:#0d0d0d; border-radius:12px; padding:7px 11px 6px; min-width:50px;
  box-shadow:0 6px 18px rgba(13,13,13,.22); }
.course__fecha b{ display:block; font-size:19px; font-weight:700; line-height:1; }
.course__fecha span{ display:block; font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:#8a8a8a; margin-top:3px; }

.course__state--no{ color:#a12020; }
.course__inscrito{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.course__cancelar{ background:none; border:0; padding:0; font:inherit; font-size:12.5px; color:#a0a0a0;
  text-decoration:underline; cursor:pointer; }
.course__cancelar:hover{ color:#0d0d0d; }

/* ---- Verificación de datos (Mi perfil + franja del Inicio) ---- */
.verify { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:28px; align-items:center; background:#0d0d0d; color:#fff; border-radius:var(--radius-lg); padding:28px 30px; margin-bottom:22px; position:relative; overflow:hidden; }
.verify__kicker { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; color:rgba(255,255,255,.55); }
.verify__kicker svg, .verify-strip svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.verify__title { margin:10px 0 0; font-size:23px; font-weight:700; letter-spacing:-.02em; line-height:1.2; color:#fff; }
.verify__sub { margin:8px 0 0; font-size:14px; line-height:1.5; color:rgba(255,255,255,.66); max-width:46ch; }
.verify__actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; margin-top:20px; }
.verify__ok { font-family:inherit; font-size:14px; font-weight:600; color:#0d0d0d; background:#fff; border:0; border-radius:999px; padding:11px 20px; cursor:pointer; transition:filter .15s; }
.verify__ok:hover { filter:brightness(.92); }
.verify__fix { font-size:14px; font-weight:500; color:rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:1px; }
.verify__fix:hover { color:#fff; border-color:#fff; }
.verify__paper { background:#faf8f4; color:#0d0d0d; border-radius:12px; padding:20px 22px 18px; box-shadow:0 18px 40px rgba(0,0,0,.35); outline:1px solid rgba(13,13,13,.1); outline-offset:-7px; transform:rotate(-1.2deg); min-width:0; }
.verify__paper-k { display:block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--gray-500); }
.verify__paper-l { display:block; margin-top:14px; font-size:11px; color:var(--gray-500); }
.verify__paper-name { display:block; margin-top:2px; font-size:21px; font-weight:700; letter-spacing:-.01em; line-height:1.2; overflow-wrap:anywhere; }
.verify__paper-meta { display:flex; flex-wrap:wrap; gap:6px 22px; margin:14px 0 0; padding-top:12px; border-top:1px dashed rgba(13,13,13,.18); }
.verify__paper-meta dt { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--gray-500); }
.verify__paper-meta dd { margin:1px 0 0; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.verify__paper-meta dd.is-missing { color:var(--gray-500); font-style:italic; font-weight:500; }

.verify-strip { display:flex; align-items:center; gap:10px; background:#0d0d0d; color:rgba(255,255,255,.8); border-radius:12px; padding:11px 16px; margin:-6px 0 22px; font-size:13.5px; line-height:1.4; transition:background .15s; }
.verify-strip svg { color:rgba(255,255,255,.6); }
.verify-strip b { color:#fff; font-weight:600; }
.verify-strip__go { margin-left:auto; flex:none; font-weight:600; color:#fff; }
.verify-strip:hover { background:#222; }

@media (max-width:760px) {
  .verify { grid-template-columns:1fr; gap:22px; padding:24px 20px 26px; }
  .verify__paper { transform:none; order:-1; }
  .verify__title { font-size:20px; }
  .verify__actions form, .verify__ok { width:100%; }
  .verify__fix { margin:0 auto; }
}
@media (max-width:560px) { .verify-strip__go { display:none; } }

/* ---- Cursos: filtro por familia del catálogo ---- */
.fam { display:flex; flex-wrap:wrap; gap:8px; margin:-8px 0 22px; }
.fam__chip { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:12.5px; font-weight:500; color:var(--gray-700); transition:border-color .15s, background .15s, color .15s; }
.fam__chip:hover { border-color:var(--gray-300); color:var(--black); }
.fam__dot { width:8px; height:8px; border-radius:3px; background:var(--fam); flex:none; }
.fam__n { font-size:11px; font-weight:700; color:var(--gray-500); background:var(--gray-100); border-radius:999px; padding:1px 7px; }
.fam__chip.is-on { border-color:var(--fam, var(--black)); background:color-mix(in srgb, var(--fam, #0d0d0d) 10%, #fff); color:var(--black); font-weight:600; }
.fam__chip.is-on .fam__n { background:var(--fam, var(--black)); color:#fff; }
.fam__chip:first-child.is-on { background:var(--black); border-color:var(--black); color:#fff; }

/* ---- Cursos en celular: fila compacta con la portada en círculo al lado del texto ---- */
@media (max-width:560px) {
  .course-grid { grid-template-columns:1fr; gap:12px; }
  .course:hover { transform:none; }
  .course__main, .course--sede .course__main { display:flex; flex-direction:row; align-items:flex-start; gap:14px; padding:14px 14px 0; }
  .course__cover { flex:none; width:64px; height:64px; aspect-ratio:auto; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(13,13,13,.06); }
  .course__cover::after, .course__tags, .course__fecha { display:none; }
  .course__cover--sinfoto::after { display:block; border-radius:50%; }
  .course__lock { border-radius:50%; }
  .course__lock svg { width:20px; height:20px; }
  .course__approved { top:auto; right:-3px; bottom:-3px; width:24px; height:24px; padding:0; justify-content:center; border-radius:50%; font-size:0; gap:0; border:2px solid #fff; box-shadow:0 2px 6px rgba(13,13,13,.2); }
  .course__approved svg { width:12px; height:12px; }
  .course__body { padding:0; min-width:0; }
  .course__path { font-size:10px; }
  .course__title { font-size:15px; margin-top:3px; }
  .course__desc { font-size:12.5px; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .course__foot { margin-top:10px; padding-top:10px; }
  .course__action { padding:12px 14px 14px; }
}

/* ---- Primeros pasos (Inicio) ---- */
.steps { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px 22px 16px; margin-bottom:6px; }
.steps__head { display:flex; align-items:center; gap:12px; }
.steps__title { font-weight:700; font-size:15.5px; color:var(--black); letter-spacing:-.01em; }
.steps__count { margin-left:auto; font-size:12.5px; color:var(--gray-500); }
.steps__count b { color:var(--black); font-size:15px; }
.steps__close button { display:flex; background:none; border:0; padding:4px; border-radius:8px; color:var(--gray-500); cursor:pointer; }
.steps__close button:hover { background:var(--gray-100); color:var(--black); }
.steps__close svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.steps__bar { height:4px; border-radius:999px; background:var(--gray-200); margin:12px 0 14px; overflow:hidden; }
.steps__bar i { display:block; height:100%; background:var(--black); border-radius:999px; transition:width .5s ease; }
.steps__list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px 18px; }
.steps__item { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--gray-700); line-height:1.35; min-width:0; }
.steps__item a { color:var(--black); font-weight:600; }
.steps__item a:hover { text-decoration:underline; }
.steps__item small { display:block; font-size:11.5px; color:var(--gray-500); margin-top:1px; }
.steps__item.is-hecho > span:last-child { color:var(--gray-500); text-decoration:line-through; text-decoration-color:var(--gray-300); }
.steps__check { flex:none; width:20px; height:20px; border-radius:50%; border:2px solid var(--gray-300); display:flex; align-items:center; justify-content:center; margin-top:-1px; }
.steps__item.is-hecho .steps__check { background:var(--black); border-color:var(--black); color:#fff; }
.steps__item.is-sigue .steps__check { border-color:var(--black); box-shadow:0 0 0 4px rgba(13,13,13,.1); }
.steps__check svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* ---- Bienvenida del recorrido ---- */
.onb { position:fixed; inset:0; z-index:950; display:grid; place-items:center; padding:20px; background:rgba(13,13,13,.6); backdrop-filter:blur(3px); opacity:0; transition:opacity .25s ease; }
.onb.is-in { opacity:1; }
/* Oculta o saliendo no puede tapar la página: display:grid le ganaba a [hidden] */
.onb[hidden] { display:none; }
.onb:not(.is-in) { pointer-events:none; }
.onb__welcome { position:relative; overflow:hidden; width:min(420px,100%); text-align:center; color:#fff; border-radius:22px; padding:36px 30px 22px;
  background:#0d0d0d radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0/16px 16px; box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:translateY(14px) scale(.98); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.onb.is-in .onb__welcome { transform:none; }
.onb__logo { height:46px; width:auto; }
.onb__kicker { margin:18px 0 0; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.5); }
.onb__title { margin:10px 0 0; font-size:24px; line-height:1.25; font-weight:700; letter-spacing:-.02em; }
.onb__title span { display:block; color:#fff; }
.onb__sub { margin:10px 0 24px; font-size:14px; color:rgba(255,255,255,.65); }
.onb__start { width:100%; font-family:inherit; font-size:15px; font-weight:600; color:#0d0d0d; background:#fff; border:0; border-radius:999px; padding:13px 20px; cursor:pointer; transition:filter .15s; }
.onb__start:hover { filter:brightness(.92); }
.onb__later { margin-top:10px; font-family:inherit; font-size:13.5px; color:rgba(255,255,255,.55); background:none; border:0; padding:8px; cursor:pointer; }
.onb__later:hover { color:#fff; }

/* ---- Recorrido: foco sobre el elemento real + tarjeta ---- */
.onb-velo { position:fixed; inset:0; z-index:960; }
.onb-foco { position:fixed; z-index:961; border-radius:14px; pointer-events:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.95), 0 0 0 9999px rgba(13,13,13,.72);
  transition:top .38s cubic-bezier(.2,.8,.2,1), left .38s cubic-bezier(.2,.8,.2,1), width .38s cubic-bezier(.2,.8,.2,1), height .38s cubic-bezier(.2,.8,.2,1); }
.onb-card { position:fixed; z-index:962; top:0; left:0; width:340px; max-width:calc(100vw - 28px); background:#fff; border-radius:16px; padding:18px 18px 14px;
  box-shadow:0 22px 60px rgba(0,0,0,.4); opacity:0; transform:translateY(6px);
  transition:top .38s cubic-bezier(.2,.8,.2,1), left .38s cubic-bezier(.2,.8,.2,1), opacity .2s, transform .25s; }
.onb-card.is-in { opacity:1; transform:none; }
.onb-card__top { display:flex; align-items:center; justify-content:space-between; }
.onb-card__n { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--gray-500); }
.onb-card__dots { display:flex; gap:5px; }
.onb-card__dots i { width:6px; height:6px; border-radius:999px; background:var(--gray-200); transition:width .25s, background .25s; }
.onb-card__dots i.is-on { width:18px; background:var(--black); }
.onb-card__t { margin:10px 0 0; font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--black); }
.onb-card__p { margin:6px 0 0; font-size:13.5px; line-height:1.5; color:var(--gray-700); }
.onb-card__foot { display:flex; align-items:center; justify-content:space-between; margin-top:16px; }
.onb-card__nav { display:flex; gap:6px; }
.onb-card button { font-family:inherit; font-size:13.5px; cursor:pointer; border-radius:999px; border:0; padding:9px 14px; background:none; }
.onb-card__skip { color:var(--gray-500); padding-left:0 !important; }
.onb-card__skip:hover { color:var(--black); }
.onb-card__back { color:var(--gray-700); }
.onb-card__back:hover { background:var(--gray-100); }
.onb-card__next { background:var(--black) !important; color:#fff; font-weight:600; padding:9px 18px !important; }
.onb-card__next:hover { opacity:.88; }

@media (max-width:560px) {
  .steps { padding:16px 16px 14px; }
  .onb-card { left:14px !important; right:14px; width:auto; max-width:none; }
  .onb__title { font-size:21px; }
}
@media (prefers-reduced-motion:reduce) {
  .onb, .onb__welcome, .onb-foco, .onb-card { transition:none; }
}
.replay { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* Examen con multimedia: imagen o video en la pregunta, imagen por opción */
.quiz-q__media{ margin:-8px 0 22px; max-width:640px; }
.quiz-q__media img, .quiz-q__media video{ display:block; width:100%; max-height:340px; object-fit:contain; border-radius:14px; background:#000; border:1px solid rgba(255,255,255,.13); }
.quiz-opt__img{ flex:none; width:84px; height:84px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.18); }
.quiz-opt--img{ padding:10px 14px; }
@media (max-width:560px){ .quiz-opt__img{ width:64px; height:64px; } }

/* Foto del menú → Mi perfil */
.side-profile__link{ flex:none; display:block; border-radius:50%; cursor:pointer; }

/* Selección múltiple (técnicas de interés) */
.msel{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.msel__chips{ display:contents; }
.msel__chip{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:#fff; background:#0d0d0d; border-radius:999px; padding:6px 6px 6px 12px; }
.msel__chip button{ width:20px; height:20px; border-radius:50%; border:0; background:rgba(255,255,255,.18); color:#fff; font-size:13px; line-height:1; cursor:pointer; }
.msel__chip button:hover{ background:rgba(255,255,255,.32); }
.msel__btn{ font:inherit; font-size:13px; font-weight:600; color:#0d0d0d; background:#fff; border:1px dashed #cfcfcf; border-radius:999px; padding:7px 13px; cursor:pointer; }
.msel__btn:hover{ border-color:#0d0d0d; }
.msel__cuenta{ font-size:12px; color:#9a9a9a; }
.msel__panel{ position:absolute; z-index:40; top:calc(100% + 8px); left:0; width:min(420px,100%); background:#fff; border:1px solid #e3e3e3; border-radius:14px; box-shadow:0 18px 44px rgba(13,13,13,.14); overflow:hidden; }
.msel__panel[hidden]{ display:none; }
.msel__q{ width:100%; font:inherit; font-size:14px; border:0; border-bottom:1px solid #f0f0f0; padding:12px 14px; outline:none; }
.msel__list{ max-height:280px; overflow-y:auto; overscroll-behavior:contain; padding:6px; }
.msel__grupo{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#a8a8a8; padding:10px 10px 5px; }
.msel__grupo[hidden], .msel__op[hidden], .msel__none[hidden]{ display:none; }
.msel__op{ display:block; width:100%; text-align:left; font:inherit; font-size:14px; color:#1a1a1a; background:none; border:0; border-radius:9px; padding:9px 10px; cursor:pointer; }
.msel__op:hover{ background:#f5f5f5; }
.msel__op.is-sel{ background:#0d0d0d; color:#fff; }
.msel__op:disabled{ color:#c4c4c4; cursor:not-allowed; background:none; }
.msel__none{ padding:16px 12px; text-align:center; font-size:13px; color:#9a9a9a; }

/* ---- Campana de notificaciones ---- */
.main{ position:relative; }
.campana{ position:relative; }
.campana--escritorio{ position:absolute; top:22px; right:28px; z-index:50; }
.campana--movil{ display:none; }
.campana__btn{ position:relative; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.campana__btn:hover, .campana.is-open .campana__btn{ border-color:#0d0d0d; box-shadow:0 6px 18px rgba(13,13,13,.08); }
.campana__btn svg{ width:19px; height:19px; fill:none; stroke:#0d0d0d; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.campana__n{ position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:#0d0d0d; color:#fff; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff; }
.campana__panel{ position:absolute; top:calc(100% + 10px); right:0; width:min(380px, calc(100vw - 24px)); background:#fff; border:1px solid #e6e6e6; border-radius:16px; box-shadow:0 22px 60px rgba(13,13,13,.18); overflow:hidden; animation:campanaIn .15s ease; }
.campana__panel[hidden]{ display:none; }
@keyframes campanaIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.campana__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px 12px; border-bottom:1px solid #f0f0f0; }
.campana__head b{ font-size:14.5px; color:#0d0d0d; }
.campana__head button{ font:inherit; font-size:12.5px; color:#8a8a8a; background:none; border:0; cursor:pointer; padding:0; }
.campana__head button:hover{ color:#0d0d0d; }
.campana__list{ max-height:min(420px, 60vh); overflow-y:auto; overscroll-behavior:contain; }
.campana__it{ display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid #f5f5f5; color:inherit; text-decoration:none; transition:background .12s; }
.campana__it:hover{ background:#fafafa; }
.campana__it.is-new{ background:#f7f7f6; }
.campana__it.is-new .campana__t::after{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#0d0d0d; margin-left:6px; vertical-align:middle; }
.campana__txt{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.campana__t{ font-size:13.5px; font-weight:600; color:#0d0d0d; line-height:1.35; }
.campana__e{ font-size:12.5px; color:#6a6a6a; line-height:1.4; }
.campana__f{ font-size:11.5px; color:#a8a8a8; }
.campana__vacio{ padding:26px 18px; text-align:center; font-size:13px; color:#9a9a9a; }
.campana__todas{ display:block; text-align:center; padding:12px; font-size:13px; font-weight:600; color:#0d0d0d; text-decoration:none; border-top:1px solid #f0f0f0; }
.campana__todas:hover{ background:#fafafa; }
.noti-ic{ flex:none; width:34px; height:34px; border-radius:10px; background:#f1f1f0; display:flex; align-items:center; justify-content:center; }
.noti-ic svg{ width:17px; height:17px; fill:none; stroke:#0d0d0d; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.noti-ic--diploma, .noti-ic--medalla{ background:#0d0d0d; }
.noti-ic--diploma svg, .noti-ic--medalla svg{ stroke:#fff; }
.topbar__acc{ display:flex; align-items:center; gap:10px; }
@media (max-width:860px){
  .campana--escritorio{ display:none; }
  .campana--movil{ display:block; }
  .campana--movil .campana__btn{ width:40px; height:40px; border-radius:9px; }
  .campana--movil .campana__panel{ position:fixed; top:66px; right:12px; }
}
.rstep__pill--sin{ color:#a8a8a8; border-style:dashed; }

/* Quitar notificaciones: la × aparece al pasar por el aviso (siempre visible en pantallas táctiles) */
.campana__fila, .noti-fila{ position:relative; }
.noti-x{ position:absolute; top:50%; right:10px; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; border:0; background:#fff; color:#9a9a9a; font-size:16px; line-height:1; cursor:pointer; opacity:0; transition:opacity .12s, color .12s, background .12s; box-shadow:0 1px 4px rgba(13,13,13,.12); }
.noti-x:hover{ color:#0d0d0d; background:#f1f1f1; }
.campana__fila:hover .noti-x, .noti-fila:hover .noti-x, .noti-x:focus-visible{ opacity:1; }
.noti-fila .noti{ padding-right:48px; }
.campana__fila .campana__it{ padding-right:44px; }
.noti-fila .noti-x{ right:40px; }
@media (hover:none){ .noti-x{ opacity:1; } }

/* Opción virtual en rutas y barra (solo con CAMPUS_VIRTUAL_ACTIVO) */
.rstep__alt, .prog__alt{ font-size:12.5px; font-weight:600; color:#0d0d0d; text-decoration:none; border-bottom:1px solid #d6d6d6; }
.rstep__alt:hover, .prog__alt:hover{ border-color:#0d0d0d; }
.rstep__alt{ display:inline-block; margin:6px 0 0 54px; }
.prog__alt{ flex:none; white-space:nowrap; }

/* Bienvenida en 3 pantallas (antes del recorrido) */
.onb__slide[hidden]{ display:none; }
.onb__slide.is-on{ animation:onbSlide .25s ease; }
@keyframes onbSlide{ from{ opacity:0; transform:translateX(10px) } to{ opacity:1; transform:none } }
.onb__slide .onb__sub{ margin:10px 0 0; line-height:1.55; }
.onb__slide .onb__sub b{ color:#fff; }
.onb__slide .onb__start{ margin-top:24px; }
.onb__sede{ margin:14px 0 0; font-size:13px; color:rgba(255,255,255,.6); }
.onb__sede b{ color:#fff; }
.onb__dots{ display:flex; justify-content:center; gap:6px; margin-top:16px; }
.onb__dots i{ width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.25); transition:width .2s, background .2s; }
.onb__dots i.is-on{ width:18px; background:#fff; }
.prog__name > span:last-child{ display:flex; flex-direction:column; min-width:0; }
.prog__perfil{ font-size:12px; font-weight:400; color:var(--gray-500); letter-spacing:0; margin-top:2px; }
.prog__perfil b{ color:var(--black); font-weight:600; }
.prog__name .dot{ align-self:flex-start; margin-top:6px; }
.route__perfil{ margin:4px 0 0; font-size:13px; color:var(--gray-500); }
.route__perfil b{ color:var(--black); font-weight:600; }

/* Selector de sala técnica (registro general) */
.salasel{ position:relative; }
.salasel__campo{ position:relative; }
.salasel__input{ width:100%; font:inherit; font-size:15px; color:#0d0d0d; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 40px 12px 14px; outline:none; }
.salasel__input::placeholder{ color:#9a9a9a; }
.salasel.is-open .salasel__input, .salasel__input:focus{ border-color:#0d0d0d; }
.salasel.is-error .salasel__input{ border-color:#b3261e; }
.salasel__campo svg{ position:absolute; right:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; fill:none; stroke:#8a8a8a; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; transition:transform .18s; }
.salasel.is-open .salasel__campo svg{ transform:translateY(-50%) rotate(180deg); }
.salasel__panel{ position:absolute; z-index:60; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid #e3e3e3; border-radius:14px; box-shadow:0 18px 44px rgba(13,13,13,.16); overflow:hidden; }
.salasel__panel[hidden]{ display:none; }
.salasel__list{ max-height:300px; overflow-y:auto; overscroll-behavior:contain; padding:6px; }
.salasel__grupo{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#a8a8a8; padding:10px 10px 5px; }
.salasel__op{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; width:100%; text-align:left; font:inherit; font-size:14.5px; color:#1a1a1a; background:none; border:0; border-radius:9px; padding:10px; cursor:pointer; }
.salasel__op small{ font-size:12px; color:#9a9a9a; }
.salasel__op:hover, .salasel__op.is-activa{ background:#f5f5f5; }
.salasel__grupo[hidden], .salasel__op[hidden], .salasel__none[hidden]{ display:none; }
.salasel__none{ padding:16px 12px; text-align:center; font-size:13px; color:#9a9a9a; }
.salasel__op.is-sel{ background:#0d0d0d; color:#fff; }
.salasel__op.is-sel small{ color:rgba(255,255,255,.6); }
@media (max-width:560px){
  /* En el celular también se despliega debajo del campo (nada de hoja inferior). */
  .salasel__list{ max-height:min(300px, 50vh); }
}

/* Celular: el logo completo del Campus en la barra de arriba */
.topbar__brand--logo img{ width:auto; height:42px; display:block; }

/* Próximas capacitaciones (Inicio) */
.pc__tabs{ display:flex; gap:8px; margin:-4px 0 14px; }
.pc__tab{ font:inherit; font-size:13.5px; font-weight:500; color:var(--gray-700); background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px; cursor:pointer; }
.pc__tab:hover{ border-color:var(--gray-300); color:var(--black); }
.pc__tab.is-on{ background:var(--black); border-color:var(--black); color:#fff; }
.pc__panel[hidden]{ display:none; }
.pc__filtro{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.pc__filtro .cursel--mini{ min-width:210px; }
.pc-nota{ margin:0; font-size:12.5px; color:var(--gray-500); }
.pc-row{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:11px 14px 11px 11px; margin-bottom:8px; }
.pc-row[hidden]{ display:none; }
.pc-date{ flex:none; width:52px; padding:7px 0 6px; border-radius:10px; background:#f5f5f4; text-align:center; line-height:1; }
.pc-date b{ display:block; font-size:19px; font-weight:700; color:var(--black); }
.pc-date span{ display:block; font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--gray-500); margin-top:4px; }
.pc-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pc-name{ font-size:14.5px; font-weight:600; color:var(--black); }
.pc-meta{ font-size:12.5px; color:var(--gray-500); }
.pc-btn{ font:inherit; font-size:13px; font-weight:600; color:#fff; background:var(--black); border:0; border-radius:999px; padding:8px 14px; cursor:pointer; white-space:nowrap; }
.pc-btn:hover{ opacity:.88; }
.pc-ok{ font-size:12.5px; font-weight:600; color:var(--gray-700); white-space:nowrap; }
.pc-vacio{ font-size:13.5px; color:var(--gray-500); margin:4px 2px 10px; }
.pc-vacio[hidden], .pc-mas[hidden]{ display:none; }
.pc-mas{ font:inherit; font-size:13px; font-weight:600; color:var(--black); background:none; border:1px dashed var(--gray-300); border-radius:999px; padding:8px 16px; cursor:pointer; margin-top:4px; }
.pc-mas:hover{ border-color:var(--black); }
/* En el celular las fechas se deslizan de lado, como tarjetas */
@media (max-width:560px){
  .pc-lista{ display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:2px; }
  .pc-lista::-webkit-scrollbar{ display:none; }
  .pc-row{ flex:0 0 78%; flex-direction:column; align-items:stretch; gap:10px; margin-bottom:0; padding:12px; scroll-snap-align:start; }
  .pc-row:last-child{ margin-right:2px; }
  .pc-date{ display:flex; align-items:baseline; gap:6px; width:auto; align-self:flex-start; padding:6px 10px; }
  .pc-date b{ display:inline; font-size:16px; }
  .pc-date span{ display:inline; margin-top:0; }
  .pc-body{ flex:1; }
  .pc-row form{ margin-top:auto; }
  .pc-btn{ width:100%; }
  .pc-ok{ margin-top:auto; text-align:center; }
  .pc-mas{ display:none; }
  .pc-vertodas:not([hidden]){ flex:0 0 46%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; scroll-snap-align:start;
    border:1px dashed var(--gray-300); border-radius:14px; color:var(--black); font-size:14px; font-weight:600; text-decoration:none; text-align:center; padding:12px; }
  .pc-vertodas span{ font-size:20px; }
}
@media (min-width:561px){ .pc-vertodas{ display:none; } }
.pc-vertodas[hidden]{ display:none; }
/* Página completa: lista vertical también en el celular */
.pc--todas .pc-lista{ display:block; }
.pc--todas .pc-row{ flex-direction:row; align-items:center; margin-bottom:8px; }

/* Desplegable de la casa (copia para el panel del estudiante, que no carga distribuidor.css) */
.cursel{ position:relative; }
.cursel__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px;
  font:inherit; font-size:14px; color:#0d0d0d; background:#fff; border:1px solid #dcdcdc; border-radius:11px;
  padding:10px 13px; cursor:pointer; text-align:left; transition:border-color .12s; }
.cursel__btn:hover{ border-color:#b8b8b8; }
.cursel.is-open .cursel__btn{ border-color:#0d0d0d; }
.cursel__txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cursel__txt.is-ph{ color:#9a9a9a; }
.cursel__chev{ flex:none; width:17px; height:17px; fill:none; stroke:#8a8a8a; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s; }
.cursel.is-open .cursel__chev{ transform:rotate(180deg); }

.cursel__panel{ position:absolute; z-index:30; top:calc(100% + 7px); left:0; right:0; background:#fff;
  border:1px solid #e6e6e6; border-radius:15px; box-shadow:0 18px 44px rgba(13,13,13,.15); overflow:hidden;
  animation:curselIn .15s ease; }
.cursel__panel[hidden]{ display:none; }
.cursel.is-arriba .cursel__panel{ top:auto; bottom:calc(100% + 7px); }
@keyframes curselIn{ from{ transform:translateY(-6px); opacity:0 } to{ transform:none; opacity:1 } }

.cursel__list{ max-height:290px; overflow-y:auto; overscroll-behavior:contain; padding:6px; }
.cursel__grupo{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#a8a8a8; padding:11px 10px 6px; }
.cursel__grupo[hidden]{ display:none; }
.cursel__op{ display:block; width:100%; text-align:left; font:inherit; font-size:14px; color:#1a1a1a;
  background:none; border:0; border-radius:9px; padding:9px 11px; cursor:pointer; }
.cursel__op:hover{ background:#f5f5f5; }
.cursel__op.is-sel{ background:#0d0d0d; color:#fff; }
.cursel__op[hidden]{ display:none; }
.cursel__none{ padding:18px 12px; text-align:center; font-size:13px; color:#9a9a9a; }
.cursel__none[hidden]{ display:none; }

.bonito-nativo{ position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; overflow:hidden; }
.cursel--mini{ min-width:150px; }
.cursel--mini .cursel__btn{ min-height:42px; }
.cursel--mini .cursel__list{ max-height:260px; }
.cursel--mini .cursel__op:focus-visible{ outline:2px solid #0d0d0d; outline-offset:-2px; }
.cursel[hidden]{ display:none; }
/* Ahora es global (todo <select>): dentro de un campo ocupa el ancho que tenía el select. */
.sa-field .cursel, .field .cursel{ width:100%; }
.cursel--ancho{ width:100%; }
/* Contextos donde el select tenía su propio tamaño */
.agnew .cursel{ min-width:120px; }
.sop-estado .cursel{ min-width:170px; }
.rep-filtros .cursel{ max-width:100%; }
@media (max-width:560px){ .cli-sort .cursel{ flex:1; } }
/* Buscador del panel (aparece con más de 10 opciones); copia del de distribuidor.css para el panel del estudiante */
.cursel__search{ display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid #f0f0f0; }
.cursel__search[hidden]{ display:none; }
.cursel__search svg{ flex:none; width:16px; height:16px; fill:none; stroke:#a0a0a0; stroke-width:2; stroke-linecap:round; }
.cursel__q{ flex:1; min-width:0; font:inherit; font-size:14px; border:0; outline:none; color:#0d0d0d; background:none; }
.cursel__q::-webkit-search-cancel-button{ display:none; }
/* Dentro de .sa-field el estilo de los campos le pondría caja al buscador: se anula aquí. */
.cursel .cursel__search input.cursel__q{ width:auto; border:0; border-radius:0; padding:0; min-height:0; background:none; box-shadow:none; outline:none; }
.cursel__op{ overflow-wrap:anywhere; }
.cursel__op:focus-visible{ outline:2px solid #0d0d0d; outline-offset:-2px; }
.cursel__op:disabled{ color:#b8b8b8; background:none; cursor:default; }
.cursel__op.is-sel:disabled{ background:#f0f0f0; color:#8a8a8a; }
/* Deshabilitado: se ve apagado y no abre */
.cursel__btn:disabled{ background:#f6f6f6; color:#8a8a8a; cursor:not-allowed; }
.cursel__btn:disabled:hover{ border-color:#dcdcdc; }
.cursel__btn:disabled .cursel__chev{ opacity:.45; }
.cursel__btn:focus-visible{ outline:2px solid #0d0d0d; outline-offset:2px; }
/* required sin elegir: borde oscuro con halo rosa muy suave (sin rojo fuerte, a pedido del dueño) */
.cursel.is-invalida .cursel__btn{ border-color:#0d0d0d; box-shadow:0 0 0 3px #f7e6ec; }
/* Fuera del flujo: en filas alineadas abajo el botón no se mueve al aparecer */
.cursel__aviso{ position:absolute; top:100%; left:2px; margin-top:4px; font-size:12px; color:#6a6a6a; white-space:nowrap; }
.cursel__aviso[hidden]{ display:none; }
/* Celular: sigue siendo un panel pegado al botón (nada de hoja desde abajo); la lista se
   recorta al espacio que haya y corre por dentro. El JS ajusta el alto exacto al abrir. */
@media (max-width:640px){
  .cursel .cursel__panel .cursel__list{ max-height:260px; }
}

/* Ficha de una fecha presencial */
.cap-nota{ font-size:13.5px; color:var(--gray-500); }
.cap-pasos{ list-style:none; counter-reset:paso; margin:0 0 22px; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.cap-pasos li{ counter-increment:paso; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; font-size:13.5px; line-height:1.45; color:var(--gray-700); }
.cap-pasos li::before{ content:counter(paso); display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--black); color:#fff; font-size:12px; font-weight:700; margin-bottom:10px; }
.cap-pasos b{ color:var(--black); }
.cap-apoyo{ display:flex; align-items:center; gap:14px; background:#fff; border:1px dashed var(--gray-300); border-radius:14px; padding:14px 16px; color:inherit; text-decoration:none; }
.cap-apoyo:hover{ border-color:var(--black); }
.cap-apoyo svg{ flex:none; width:22px; height:22px; fill:none; stroke:var(--black); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cap-apoyo span{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.cap-apoyo b{ font-size:14px; color:var(--black); }
.cap-apoyo small{ font-size:12.5px; color:var(--gray-500); }
.cap-apoyo .cap-apoyo__ir{ flex:none; font-size:13px; font-weight:600; color:var(--black); }
a.pc-name{ color:var(--black); text-decoration:none; }
a.pc-name:hover{ text-decoration:underline; }
@media (max-width:760px){ .cap-pasos{ grid-template-columns:1fr 1fr; } }

/* ---- Calendario de la casa (input[type=date][data-fecha]) ---- */
.fechasel{ position:relative; }
.fechasel__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:42px; font:inherit; font-size:14px; color:#0d0d0d; background:#fff; border:1px solid #dcdcdc; border-radius:11px; padding:9px 12px; cursor:pointer; text-align:left; transition:border-color .12s; }
.fechasel__btn:hover{ border-color:#b8b8b8; }
.fechasel.is-open .fechasel__btn{ border-color:#0d0d0d; }
.fechasel.is-error .fechasel__btn{ border-color:#b3261e; }
.fechasel__btn svg{ flex:none; width:17px; height:17px; fill:none; stroke:#8a8a8a; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fechasel__txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fechasel__txt.is-ph{ color:#9a9a9a; }
.fechasel__panel{ position:absolute; z-index:70; top:calc(100% + 7px); left:0; width:292px; max-width:calc(100vw - 32px); background:#fff; border:1px solid #e6e6e6; border-radius:16px; box-shadow:0 18px 44px rgba(13,13,13,.16); padding:12px; animation:curselIn .15s ease; }
.fechasel__panel[hidden]{ display:none; }
.fechasel.is-arriba .fechasel__panel{ top:auto; bottom:calc(100% + 7px); }
.fechasel__head{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:8px; }
.fechasel__nav{ width:34px; height:34px; border-radius:50%; border:0; background:none; font-size:22px; line-height:1; color:#0d0d0d; cursor:pointer; }
.fechasel__nav:hover{ background:#f2f2f2; }
.fechasel__titulo{ display:flex; gap:4px; }
.fechasel__sel{ font:inherit; font-size:14.5px; font-weight:600; color:#0d0d0d; background:none; border:0; border-radius:8px; padding:6px 8px; cursor:pointer; text-transform:capitalize; }
.fechasel__sel:hover{ background:#f2f2f2; }
.fechasel__rango{ font-size:14.5px; font-weight:600; padding:6px 8px; }
.fechasel__semana, .fechasel__dias{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.fechasel__semana span{ text-align:center; font-size:11px; font-weight:600; color:#a0a0a0; padding:4px 0 6px; }
.fechasel__dia{ height:36px; font:inherit; font-size:13.5px; color:#1a1a1a; background:none; border:0; border-radius:10px; cursor:pointer; }
.fechasel__dia:hover:not(:disabled){ background:#f2f2f2; }
.fechasel__dia.is-hoy{ box-shadow:inset 0 0 0 1px #0d0d0d; }
.fechasel__dia.is-sel{ background:#0d0d0d; color:#fff; box-shadow:none; }
.fechasel__dia:disabled, .fechasel__celda:disabled{ color:#cfcfcf; cursor:default; }
.fechasel__rejilla{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; padding:4px 0; }
.fechasel__celda{ height:40px; font:inherit; font-size:13.5px; color:#1a1a1a; background:none; border:0; border-radius:10px; cursor:pointer; text-transform:capitalize; }
.fechasel__celda:hover:not(:disabled){ background:#f2f2f2; }
.fechasel__celda.is-sel{ background:#0d0d0d; color:#fff; }
.fechasel__pie{ display:flex; justify-content:space-between; margin-top:8px; padding-top:8px; border-top:1px solid #f0f0f0; }
.fechasel__pie button{ font:inherit; font-size:13px; font-weight:600; color:#0d0d0d; background:none; border:0; border-radius:8px; padding:6px 10px; cursor:pointer; }
.fechasel__pie button:hover{ background:#f2f2f2; }
.fechasel__pie [data-borrar]{ color:#8a8a8a; font-weight:500; }

/* ---- Cupos que quedan (estudiante) ---- */
.cupos{ display:inline-block; font-size:12.5px; font-weight:600; color:#4a4a4a; background:#f2f2f2; border-radius:999px; padding:5px 10px; white-space:nowrap; }
.cupos--pocos{ color:#fff; background:#0d0d0d; }
.course__action .cupos{ display:block; text-align:center; margin-bottom:8px; }
.course__state--lleno{ display:block; text-align:center; font-weight:600; color:#6a6a6a; }
.pc-accion{ display:flex; align-items:center; gap:10px; }
.pc-ok--lleno{ color:#8a8a8a; }
.cdetail-hero__actions .cupos{ order:-1; }
@media (max-width:560px){
  .pc-accion{ flex-direction:column; align-items:stretch; margin-top:auto; gap:8px; }
  .pc-accion .cupos{ text-align:center; }
}

/* ---- Confirmar asistencia (página del correo y panel) ---- */
.asis{ max-width:420px; }
.asis__cap{ display:flex; flex-direction:column; gap:4px; background:#f6f6f5; border-radius:14px; padding:14px 16px; margin:4px 0 18px; text-align:left; }
.asis__cap b{ font-size:15.5px; color:#0d0d0d; }
.asis__cap span{ font-size:13.5px; color:#6a6a6a; }
.asis__ya{ font-size:14px; font-weight:600; color:#0d0d0d; margin:0 0 6px; }
.asis__ir{ display:inline-block; margin-top:16px; font-size:13.5px; color:#6a6a6a; text-decoration:none; border-bottom:1px solid #d0d0d0; }
.asistencia{ display:flex; flex-direction:column; gap:8px; }
.asistencia__p{ font-size:13px; font-weight:600; color:#0d0d0d; }
.asistencia__botones{ display:flex; gap:8px; flex-wrap:wrap; }
.asistencia__botones form{ flex:1; }
.asistencia__botones .btn{ width:100%; }
.asistencia__ok{ font-size:13px; font-weight:600; color:#0d0d0d; }
.asistencia__no{ font-size:13px; color:#8a8a8a; }
.asistencia__cambiar{ background:none; border:0; padding:0; font:inherit; font-size:12.5px; color:#8a8a8a; border-bottom:1px solid #d0d0d0; cursor:pointer; }
.pc-confirmar{ text-decoration:none; border-bottom:1px solid #cfcfcf; }
.cdetail-hero__actions .asistencia{ flex:1 1 100%; }
.asistencia__botones{ max-width:360px; }
.asistencia__botones .btn{ white-space:nowrap; }
.asis .asis__ir{ display:table; margin:16px auto 0; }

/* Capacitaciones: Presenciales es la pestaña principal (en la sede), Virtuales la de apoyo */
.filter svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-right:7px; flex:none; }
.filter--prin{ padding:10px 16px 10px 18px; font-size:14.5px; font-weight:700; color:var(--black); border-color:var(--black); }
.filter__sede{ margin-left:9px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; background:#f6efe7; color:#6b4a2a; border-radius:999px; padding:3px 8px; }
.filter--prin.is-on .filter__sede{ background:#fff; color:var(--black); }
.filter--virt{ color:var(--gray-500); }

/* Fecha obligatoria sin elegir: mismo aviso que el desplegable, sin rojo */
.fechasel.is-invalida .fechasel__btn{ border-color:#0d0d0d; box-shadow:0 0 0 3px #f7e6ec; }
.fechasel__aviso{ position:absolute; top:100%; left:2px; margin-top:4px; font-size:12px; color:#6a6a6a; white-space:nowrap; }
.fechasel__aviso[hidden]{ display:none; }

/* Perfil: técnicas de interés como botones de marcar (sin desplegable) */
.tec-pick{ display:flex; flex-wrap:wrap; gap:10px; }
.tec-pick__op{ position:relative; cursor:pointer; }
.tec-pick__op input{ position:absolute; opacity:0; pointer-events:none; }
.tec-pick__op span{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--black); background:#fff; border:1px solid #dcdcdc; border-radius:999px; padding:10px 18px; transition:background .15s, border-color .15s, color .15s; }
.tec-pick__op svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; display:none; }
.tec-pick__op:hover span{ border-color:var(--black); }
.tec-pick__op input:checked + span{ background:var(--black); border-color:var(--black); color:#fff; }
.tec-pick__op input:checked + span svg{ display:block; }
.tec-pick__op input:focus-visible + span{ outline:2px solid var(--black); outline-offset:2px; }

/* Roboto se carga hasta 700: los 800 usan el 700 real en vez de un negro simulado */
body{ font-synthesis-weight:none; }

/* ---- Prerrequisitos de la ruta: lo que falta antes de inscribirse (sin rojo) ---- */
.prerreq{ display:flex; gap:12px; align-items:flex-start; background:#f6f6f6; border:1px solid var(--line); border-radius:14px; padding:14px 16px; max-width:560px; }
.prerreq svg{ flex:none; width:20px; height:20px; margin-top:1px; fill:none; stroke:var(--black); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.prerreq__txt{ font-size:13.5px; line-height:1.5; color:var(--gray-700); }
.prerreq__txt b{ display:block; color:var(--black); margin-bottom:2px; }
.prerreq__curso{ font-weight:600; color:var(--black); }
.prerreq__curso a{ margin-left:6px; font-size:12.5px; font-weight:600; color:var(--black); text-decoration:underline; white-space:nowrap; }
.prerreq__txt small{ display:block; margin-top:6px; font-size:12.5px; color:var(--gray-500); }
.prerreq-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#4a4a4a; background:#f2f2f2; border:1px dashed #cfcfcf; border-radius:999px; padding:6px 11px; text-decoration:none; white-space:nowrap; }
.prerreq-chip::before{ content:""; width:12px; height:12px; flex:none; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3C/svg%3E") center/contain no-repeat; }
.prerreq-chip:hover{ border-color:var(--black); color:var(--black); }
.prerreq-chip--bloque{ display:flex; justify-content:center; width:100%; }
@media (max-width:560px){ .pc-row .prerreq-chip{ align-self:flex-start; white-space:normal; } }