/* =====================================================================
   NEUROHABLEMOS · CAMPUS — Hoja de estilos v3 (Sistema de Diseño v1.0, 2026-09-28)
   Construida sobre assets/tokens.css: mismos colores, tipografía y
   movimiento que el sitio principal. Los selectores se mantienen para
   que campus.js y las páginas no cambien.
   Modo: CLARO (capacitaciones). Hero del campus en modo PROFUNDO.
   Acento Lima: solo en los botones principales (una familia por página).
   ===================================================================== */
@import url("tokens.css");

:root {
  /* Alias de compatibilidad (nombres antiguos → tokens oficiales) */
  --blue-dark: var(--nh-tinta); --blue-primary: var(--nh-profundo); --blue-medium: var(--nh-profundo); --blue-light: var(--nh-cian);
  --green-primary: var(--nh-ok); --green-light: var(--nh-ok); --green-dark: var(--nh-ok); --pink-brain: var(--nh-coral);
  --white: var(--nh-hueso);
  --gray-50: var(--nh-hueso); --gray-100: var(--nh-niebla); --gray-200: var(--nh-line-card); --gray-300: var(--nh-line-input); --gray-500: var(--nh-grafito); --gray-700: var(--nh-grafito); --gray-900: var(--nh-tinta);
  --ok: var(--nh-ok); --warn: var(--nh-warn); --bad: var(--nh-bad);
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
  --radius: 12px; --radius-lg: var(--radius-card);
  --text-on-deep: rgba(221,239,249,.80);   /* Hielo al 80 % sobre Profundo (manual §5) */
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-text); font-size: var(--fs-body); color: var(--nh-tinta); line-height: var(--lh-body); background: var(--nh-hueso); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, h4 { font-family: var(--font-display); font-variation-settings: "opsz" 32; color: var(--nh-profundo); letter-spacing: var(--track-display); line-height: 1.1; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); font-weight: 700; line-height: var(--lh-tight); color: var(--nh-tinta); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; }
p { max-width: var(--measure); }
a { color: var(--nh-profundo); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .15em; }
img { max-width: 100%; display: block; }
em.serif, .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--nh-profundo); }
.hidden, [hidden] { display: none !important; }
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
main { flex: 1; padding-block: var(--sp-6) var(--sp-8); }
:focus-visible { outline: 2px solid var(--nh-cian); outline-offset: 3px; }
::selection { background: var(--nh-hielo); color: var(--nh-tinta); }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--nh-grafito); }

/* ---------- Navbar ---------- */
.navbar { position: sticky; top: 0; z-index: 50; background: rgba(250,250,247,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--nh-line-card); }
.navbar-inner { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.navbar-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.navbar-brand:hover { text-decoration: none; }
.navbar-brand img { height: 40px; width: auto; }   /* logotipo oficial (manual 4.1) */
.brand-text { display: none; }
.brand-tag { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--nh-grafito); margin-left: .4rem; padding-left: .8rem; border-left: 1px solid var(--nh-line); }
.nav-links { display: flex; align-items: center; gap: 1.1rem; list-style: none; }
.nav-links a { white-space: nowrap; }
.nav-links a { text-decoration: none; color: var(--nh-tinta); font-weight: 500; font-size: var(--fs-small); border-bottom: 1px solid transparent; transition: border-color var(--dur-fast); }
.nav-links a:hover { border-color: var(--nh-cian); text-decoration: none; }
.nav-links a.btn { border-bottom: 1px solid var(--bg); }
.nav-user { display: flex; align-items: center; gap: .6rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--nh-profundo); color: var(--nh-hueso); display: grid; place-items: center; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; border-bottom: 0 !important; }
.avatar:hover { background: var(--nh-tinta); }
.mobile-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.mobile-toggle span { display: block; width: 22px; height: 1.5px; background: var(--nh-tinta); margin: 5px 0; }
@media (max-width: 820px) {
  .mobile-toggle { display: block; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: var(--nh-profundo); flex-direction: column; align-items: stretch; padding: 1rem var(--gutter) 1.4rem; gap: .2rem; border-bottom: 1px solid var(--nh-line-dark); display: none; }
  .nav-links.open { display: flex; }
  .nav-links li a { display: block; padding: .7rem .2rem; color: var(--nh-hueso); font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
  .nav-links li a.btn { display: inline-flex; margin-top: .6rem; font-size: .875rem; font-family: var(--font-text); --bg: var(--nh-hueso); --fg: var(--nh-profundo); }
  .nav-links li a.btn-outline { --fg: var(--nh-hueso); border-color: var(--nh-hueso); background: transparent; }
  .nav-links .nav-user { flex-direction: row; gap: 1rem; padding-top: .6rem; }
  .brand-tag { display: none; }
}

/* ---------- Botones (manual 6.1 / 6.2) ----------
   Principal en Claro: fondo Tinta + texto Lima. Hover: borde Cian. Sin relleno animado. */
.btn { --bg: var(--nh-tinta); --fg: var(--nh-lima); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.4rem; min-height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--bg); background: var(--bg); color: var(--fg); font: 600 .95rem var(--font-text); text-decoration: none; cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.btn:hover, .btn:focus-visible { border-color: var(--nh-cian); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-green { --bg: var(--nh-tinta); --fg: var(--nh-lima); }
.btn-outline { --bg: transparent; --fg: var(--nh-profundo); border: 1.5px solid var(--nh-profundo); background: transparent; }
.btn-outline:hover { border-color: var(--nh-cian); }
.btn-ghost { --bg: transparent; --fg: var(--nh-grafito); border-color: transparent; background: transparent; }
.btn-ghost:hover { color: var(--nh-tinta); border-color: var(--nh-line-card); }
.btn-sm { padding: .5rem 1rem; min-height: 36px; font-size: .85rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-wa { --bg: var(--nh-profundo); --fg: var(--nh-hueso); }

/* Flecha de botón (manual 6.1) */
.btn .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Tarjetas y layout (manual 6.3) ---------- */
.card { background: var(--nh-hueso); border: var(--border); border-radius: var(--radius-card); padding: var(--sp-5); transition: border-color var(--dur-fast); }
.grid { display: grid; gap: var(--sp-5); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: var(--sp-6); }
.page-head p { color: var(--nh-grafito); max-width: 62ch; margin-top: .4rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--nh-grafito); margin-bottom: .6rem; }
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--nh-azul); clip-path: polygon(0 0, 100% 0, 0 100%); }
.muted { color: var(--nh-grafito); font-size: var(--fs-small); }
.small { font-size: .85rem; }

/* Hero del campus (modo Profundo: botón Hueso con texto Profundo, Cian en datos) */
.campus-hero { background: linear-gradient(90deg, var(--nh-profundo) 0%, var(--nh-profundo) 34%, rgba(28,58,92,.92) 50%, rgba(28,58,92,.55) 66%, rgba(28,58,92,.12) 100%), url("../../assets/img/campus-edificio.webp") right center / cover no-repeat var(--nh-profundo); color: var(--nh-hueso); border-radius: var(--radius-card); padding: clamp(2rem, 5vw, 3.5rem); margin-bottom: var(--sp-7); position: relative; overflow: hidden; }
.campus-hero > * { position: relative; }
@media (max-width: 760px) { .campus-hero { background: linear-gradient(180deg, rgba(28,58,92,.55) 0%, rgba(28,58,92,.92) 38%, var(--nh-profundo) 60%), url("../../assets/img/campus-edificio.webp") 72% top / cover no-repeat var(--nh-profundo); } }
.campus-hero::after { content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px; background: var(--nh-cian); clip-path: polygon(100% 0, 0 0, 100% 100%); }
.campus-hero h1 { color: var(--nh-hueso); max-width: 16ch; }
.campus-hero .serif { color: var(--nh-coral); }
.campus-hero p { color: var(--text-on-deep); max-width: 50ch; margin: 1rem 0 1.6rem; font-size: var(--fs-body-lg); }
.campus-hero .eyebrow { color: var(--text-on-deep); } .campus-hero .eyebrow::before { background: var(--nh-cian); }
.campus-hero .badge { background: rgba(250,250,247,.12); border: 0; color: var(--nh-hueso); }
.campus-hero .btn, .campus-hero .btn-primary, .campus-hero .btn-green { --bg: var(--nh-hueso); --fg: var(--nh-profundo); }
.campus-hero .btn-outline { --bg: transparent; --fg: var(--nh-hueso); border-color: var(--nh-hueso); }
.campus-hero .btn-outline:hover { border-color: var(--nh-cian); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.6rem; margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--nh-line-dark); max-width: 900px; }
@media (min-width: 700px) { .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero-stats b { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: -0.04em; line-height: 1; color: var(--nh-hueso); font-variant-numeric: tabular-nums; }
.hero-stats span { display: block; margin-top: .4rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-on-deep); }

/* Tarjeta de curso */
.course-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.course-card:hover { border-color: var(--nh-cian); }
.course-cover { text-decoration: none; aspect-ratio: 16/9; background: var(--nh-hielo); position: relative; display: grid; place-items: center; color: var(--nh-profundo); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; padding: 1.2rem; text-align: center; overflow: hidden; }
.course-cover:hover { text-decoration: none; }
.course-cover img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform var(--dur-slow) var(--ease-out); }
.course-card:hover .course-cover img { transform: scale(1.02); }
.course-cover.area-voz, .course-cover.area-afasias, .course-cover.area-lenguaje-infantil { background: var(--nh-hielo); color: var(--nh-profundo); }
.course-cover.area-disfagia { background: var(--nh-profundo); color: var(--nh-hueso); }
.course-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.course-body h3 { font-size: 1.15rem; }
.course-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--nh-grafito); }
.course-foot .btn { white-space: nowrap; }
.course-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-top: .8rem; border-top: var(--border); }
.price { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--nh-tinta); line-height: 1.1; }
.price small { font-family: var(--font-mono); font-weight: 400; font-size: .72rem; letter-spacing: .04em; color: var(--nh-grafito); display: block; margin-top: .25rem; }
.price.free { color: var(--nh-profundo); }

/* Badges / estados (manual 6.4: relleno Hielo + texto Profundo; estados funcionales con su color) */
.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .7rem; border-radius: var(--nh-radius-badge); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-mono); text-transform: uppercase; border: 1px solid transparent; color: var(--nh-profundo); background: var(--nh-hielo); }
.badge-blue { color: var(--nh-profundo); background: var(--nh-hielo); }
.badge-green { color: var(--nh-ok); background: transparent; border-color: rgba(47,125,79,.4); }
.badge-yellow { color: var(--nh-profundo); background: var(--nh-hielo); }      /* "Preventa abierta": antes amarillo; ahora badge Hielo (sin Lima: el acento va en el botón) */
.badge-pink { color: var(--nh-profundo); background: var(--nh-hielo); }
.badge-gray { color: var(--nh-grafito); background: var(--nh-niebla); }
.badge-red { color: var(--nh-bad); background: transparent; border-color: rgba(179,38,30,.4); }
.status-pendiente { color: var(--nh-warn); background: transparent; border-color: rgba(154,107,0,.4); } .status-activa { color: var(--nh-ok); background: transparent; border-color: rgba(47,125,79,.4); }
.status-rechazada, .status-vencida, .status-anulado { color: var(--nh-bad); background: transparent; border-color: rgba(179,38,30,.4); } .status-solicitado { color: var(--nh-profundo); background: var(--nh-hielo); } .status-emitido { color: var(--nh-ok); background: transparent; border-color: rgba(47,125,79,.4); }

/* Progreso */
.progress { height: 6px; background: var(--nh-niebla); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--nh-cian); border-radius: 999px; transition: width var(--dur-slow) var(--ease-out); }
.progress-label { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .06em; color: var(--nh-grafito); margin-top: .45rem; }

/* Formularios */
.form { display: grid; gap: 1rem; }
.form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
label { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--nh-tinta); margin-bottom: .35rem; }
input, select, textarea { width: 100%; padding: .8rem 1rem; border: 1px solid var(--nh-line-input); border-radius: var(--radius-input); font: inherit; color: var(--nh-tinta); background: var(--nh-hueso); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
input:hover, select:hover, textarea:hover { border-color: var(--nh-azul); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--nh-cian); box-shadow: 0 0 0 3px var(--nh-focus-ring); }
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; accent-color: var(--nh-profundo); }
textarea { min-height: 90px; resize: vertical; }
.help { font-size: .8125rem; color: var(--nh-grafito); margin-top: .3rem; }
.alert { padding: .9rem 1.1rem; border-radius: 8px; font-size: var(--fs-small); border: 1px solid var(--nh-line-card); border-left: 3px solid var(--nh-profundo); background: var(--nh-hueso); color: var(--nh-tinta); }
.alert-info { border-left-color: var(--nh-profundo); }
.alert-ok { border-left-color: var(--nh-ok); }
.alert-warn { border-left-color: var(--nh-warn); }
.alert-err { border-left-color: var(--nh-bad); }

/* Auth */
.auth-wrap { max-width: 460px; margin: 1rem auto; }
.tabs { display: flex; border: 1px solid var(--nh-line-input); border-radius: var(--radius-pill); padding: .25rem; margin-bottom: 1.4rem; }
.tabs button { flex: 1; border: 0; background: transparent; padding: .55rem; border-radius: var(--radius-pill); font: 500 .9rem var(--font-text); color: var(--nh-grafito); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.tabs button.active { background: var(--nh-tinta); color: var(--nh-hueso); }

/* Curso: player + temario */
.course-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-5); align-items: start; }
@media (max-width: 960px) { .course-layout { grid-template-columns: 1fr; } }
.player { background: var(--nh-tinta); border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16/9; position: relative; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player .locked { position: absolute; inset: 0; display: grid; place-items: center; color: var(--nh-hueso); text-align: center; padding: 2rem; background: var(--nh-profundo); }
.player .locked h3 { color: var(--nh-hueso); }
.player .locked p { color: var(--text-on-deep); }
.player .locked .btn { --bg: var(--nh-hueso); --fg: var(--nh-profundo); }
.lesson-text { background: var(--nh-hueso); border-radius: var(--radius-card); border: var(--border); padding: var(--sp-5); white-space: pre-line; line-height: 1.7; }
.syllabus { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; padding: 0; }
.syllabus .module { border-bottom: var(--border); }
.syllabus .module:last-child { border-bottom: 0; }
.syllabus .module-title { padding: .9rem 1.1rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--nh-grafito); background: var(--nh-niebla); }
.lesson-item { display: flex; align-items: center; gap: .7rem; padding: .7rem 1.1rem; cursor: pointer; font-size: var(--fs-small); border-left: 2px solid transparent; transition: background var(--dur-fast); }
.lesson-item:hover { background: var(--nh-niebla); }
.lesson-item.active { background: var(--nh-hielo); border-left-color: var(--nh-cian); font-weight: 500; }
.lesson-item .ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: .65rem; border: 1px solid var(--nh-line-input); color: var(--nh-grafito); flex-shrink: 0; }
.lesson-item.done .ico { background: var(--nh-profundo); border-color: var(--nh-profundo); color: var(--nh-hueso); }
.lesson-item.locked { opacity: .55; }
.lesson-item .dur { margin-left: auto; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--nh-grafito); }

/* Quiz */
.quiz-q { background: var(--nh-hueso); border: var(--border); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 1rem; }
.quiz-q p { font-weight: 500; margin-bottom: .6rem; }
.quiz-opt { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .3rem; cursor: pointer; border-radius: 8px; font-size: var(--fs-small); }
.quiz-opt:hover { background: var(--nh-niebla); }
.quiz-opt input { width: auto; margin-top: .3rem; }
.quiz-q.correct { border-color: var(--nh-ok); border-left-width: 3px; }
.quiz-q.wrong { border-color: var(--nh-bad); border-left-width: 3px; }
.quiz-fb { font-size: .85rem; color: var(--nh-grafito); margin-top: .5rem; }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(17,24,32,.7); display: none; align-items: center; justify-content: center; padding: 1rem; z-index: 100; }
.modal-bg.open { display: flex; }
.modal { background: var(--nh-hueso); border-radius: var(--radius-card); width: min(640px, 100%); max-height: 92vh; overflow: auto; padding: 1.6rem; position: relative; }
.modal .close { position: absolute; top: .8rem; right: .9rem; background: transparent; border: 1px solid var(--nh-line-input); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; color: var(--nh-tinta); }
.modal .close:hover { border-color: var(--nh-cian); }
.yape-box { display: grid; grid-template-columns: 160px 1fr; gap: 1.2rem; align-items: center; background: var(--nh-hielo); border: 1px solid transparent; border-radius: var(--radius); padding: 1rem; }
.yape-box img { width: 160px; border-radius: 10px; background: var(--nh-hueso); }
.yape-box b { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.02em; color: var(--nh-tinta); display: block; }
@media (max-width: 560px) { .yape-box { grid-template-columns: 1fr; text-align: center; } .yape-box img { margin: auto; } }

/* Tablas admin */
.table-wrap { overflow-x: auto; border: var(--border); border-radius: var(--radius-card); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; background: var(--nh-hueso); }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--nh-line-card); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th { background: var(--nh-niebla); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--nh-grafito); font-weight: 500; }
tr:hover td { background: rgba(233,238,243,.5); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat { background: var(--nh-hueso); border: var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; }
.stat b { display: block; font-family: var(--font-display); font-weight: 300; font-size: 2.2rem; letter-spacing: -0.04em; line-height: 1; color: var(--nh-profundo); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: .4rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--nh-grafito); }
.admin-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.admin-tabs button { border: 1px solid var(--nh-line-input); background: transparent; padding: .38rem .8rem; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; cursor: pointer; color: var(--nh-grafito); transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.admin-tabs button:hover { border-color: var(--nh-cian); }
.admin-tabs button.active { background: var(--nh-tinta); border-color: var(--nh-tinta); color: var(--nh-hueso); }

/* Footer (modo Claro sobre Niebla) */
footer { background: var(--nh-niebla); color: var(--nh-grafito); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .06em; padding: 1.6rem 0; border-top: 1px solid var(--nh-line); }
footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; }
footer a { color: var(--nh-tinta); }
footer a:hover { color: var(--nh-azul); text-decoration: none; }

/* Toast */
.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--nh-tinta); color: var(--nh-hueso); padding: .8rem 1.2rem; border-radius: var(--radius-pill); font-size: .9rem; border: 1px solid var(--nh-line-dark); z-index: 200; opacity: 0; transition: opacity var(--dur-fast); pointer-events: none; max-width: min(92vw, 520px); text-align: center; }
.toast.show { opacity: 1; }
.skeleton { background: linear-gradient(90deg, var(--nh-niebla), rgba(233,238,243,.4), var(--nh-niebla)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: var(--radius-card); min-height: 1em; }
@keyframes sk { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.empty { text-align: center; padding: 3rem 1rem; color: var(--nh-grafito); border: 1px dashed var(--nh-line-input); border-radius: var(--radius-card); }
.empty b { display: block; color: var(--nh-tinta); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 1.3rem; margin-bottom: .4rem; }
.cert-card { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cert-card > div { min-width: 0; overflow-wrap: anywhere; }
.cert-card .btn { white-space: nowrap; }
.cert-card .ico { width: 48px; height: 48px; border-radius: var(--nh-radius-icon); background: var(--nh-profundo); color: var(--nh-hueso); display: grid; place-items: center; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; flex-shrink: 0; }

/* =====================================================================
   v3.1 · Patrones de producto (login lateral · buscador · orientación · portadas con docente)
   ===================================================================== */

/* Buscador central en la barra */
.nav-search { flex: 1 1 220px; max-width: 380px; display: flex; align-items: center; gap: .6rem; padding: 0 1rem; min-height: 44px; border: 1px solid var(--nh-line-input); border-radius: var(--radius-pill); background: var(--nh-hueso); color: var(--nh-grafito); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.nav-search:focus-within { border-color: var(--nh-cian); box-shadow: 0 0 0 3px var(--nh-focus-ring); }
.nav-search input { border: 0; padding: .5rem 0; background: transparent; box-shadow: none !important; font-size: var(--fs-small); color: var(--nh-tinta); }
.nav-search input::placeholder { color: var(--nh-grafito); }
.nav-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
@media (max-width: 820px) { .nav-search { order: 3; flex-basis: 100%; max-width: none; margin: 0 0 .8rem; } .navbar-inner { flex-wrap: wrap; } }

/* Panel lateral de acceso */
.drawer-bg { position: fixed; inset: 0; background: rgba(17,24,32,.55); z-index: 140; opacity: 0; transition: opacity 240ms var(--ease-out); }
.drawer-bg.open { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--nh-hueso); z-index: 150; padding: 1.4rem 1.6rem 1.6rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; transform: translateX(100%); transition: transform 260ms var(--ease-out); box-shadow: none; border-left: 1px solid var(--nh-line-card); }
.drawer.open { transform: none; }
.drawer-close { position: absolute; top: .9rem; right: .9rem; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--nh-line-input); background: transparent; color: var(--nh-tinta); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.drawer-close:hover { border-color: var(--nh-cian); }
.drawer-logo { height: 47px; width: auto; margin-top: .4rem; align-self: flex-start; }
.drawer h2 { font-size: 1.6rem; margin-top: .6rem; }
.drawer .muted { font-size: var(--fs-small); margin: .3rem 0 1.1rem; }
.drawer .muted a { font-weight: 500; text-decoration: underline; text-underline-offset: .18em; }
.drawer .form { gap: .9rem; }
.drawer .check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.drawer .check input { width: auto; margin-top: .25rem; }
.drawer .alert { margin-bottom: .6rem; }
.or { display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0; color: var(--nh-grafito); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--nh-line); }
.btn-google { gap: .7rem; }
.drawer-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--nh-line-card); }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-bg { transition: none; } }

/* Catálogo con columna de orientación */
.catalog-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
@media (min-width: 1000px) { .catalog-layout { grid-template-columns: 280px minmax(0, 1fr); } .catalog-aside { position: sticky; top: 92px; } }
.catalog-aside { display: grid; gap: 1rem; }
.aside-card { background: var(--nh-niebla); border-radius: var(--radius-card); padding: 1.3rem 1.4rem; display: grid; gap: .5rem; }
.aside-card b { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; font-size: 1.05rem; color: var(--nh-profundo); }
.aside-card p { font-size: var(--fs-small); color: var(--nh-grafito); }
.aside-card .btn { justify-self: start; margin-top: .4rem; }
.aside-card--ice { background: var(--nh-hielo); }
.catalog-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: var(--sp-5); }
.catalog-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.search-note { font-size: var(--fs-small); color: var(--nh-grafito); margin-bottom: 1rem; }
.search-note b { color: var(--nh-tinta); }

/* Portada de curso con docente (patrón Platzi): texto a la izquierda, retrato a la derecha */
.course-cover { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 40%; align-items: stretch; text-align: left; }
.course-cover.has-image { display: block; }
.cover-text { display: grid; gap: .3rem; align-content: center; padding: 1.1rem 0 1.1rem 1.2rem; min-width: 0; }
.cover-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-mono); text-transform: uppercase; opacity: .8; }
.cover-title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
.cover-by { font-size: .8125rem; font-weight: 400; opacity: .85; }
.course-cover img.cover-portrait { position: static; inset: auto; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1) contrast(.95); transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); align-self: end; justify-self: end; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%); mask-image: linear-gradient(90deg, transparent, #000 25%); }
.course-card:hover .cover-portrait { filter: none; transform: scale(1.02); }
.cover-mono { width: 100%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 300; font-size: 2.6rem; letter-spacing: -0.04em; opacity: .55; }
.course-cover.area-disfagia .cover-kicker, .course-cover.area-disfagia .cover-by { color: rgba(221,239,249,.85); }

/* Modal "¿Por dónde empiezo?" (3 preguntas → ruta) */
.route-q { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.route-q b { font-size: var(--fs-small); }
.route-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.route-opts button { border: 1px solid var(--nh-line-input); background: transparent; border-radius: var(--radius-pill); padding: .5rem .95rem; font: 500 .9rem var(--font-text); color: var(--nh-tinta); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.route-opts button:hover { border-color: var(--nh-cian); }
.route-opts button.on { background: var(--nh-tinta); border-color: var(--nh-tinta); color: var(--nh-hueso); }
.route-result { background: var(--nh-hielo); border-radius: var(--radius); padding: 1rem 1.1rem; display: grid; gap: .4rem; }
.route-result b { color: var(--nh-profundo); font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.015em; }
@media (max-width: 999px) { .catalog-aside { order: 2; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

/* Escenario con imagen de presentación (brochure) */
.stage-image { background: var(--nh-hueso); border: var(--border); border-radius: var(--radius-card); overflow: hidden; }
.stage-image img { width: 100%; height: auto; display: block; }
.stage-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1.1rem; border-top: 1px solid var(--nh-line-card); }