/* Milah UI · navegación y botones de toda la plataforma (rediseño aprobado el 18 de septiembre de 2026).
   Se carga la última en cada página. Una sola regla: logo limpio, enlaces en texto, un botón de color, idioma en texto. */
:root {
  --mui-ink: #1f1b2e; --mui-ink-2: #4a4560; --mui-soft: #605b77; --mui-line: #e8e5f3;
  --mui-violet: #5b3df5; --mui-violet-dark: #4529c9; --mui-violet-soft: #efeaff; --mui-violet-tint: #f6f3ff;
  --mui-radius: 12px; --mui-header: 104px;
  /* Tokens Aurora que gobiernan los botones de toda la app: sin degradado, esquinas de 12 px, gris lila para controles. */
  --aurora-action: var(--mui-violet); --aurora-pill: var(--mui-radius); --aurora-control: var(--mui-violet-tint);
  --aurora-glow: 0 6px 18px rgba(91, 61, 245, .22); --aurora-link: var(--mui-violet-dark);
}

/* ---------- Botones: tres niveles ---------- */
html body :is(.button, .primary-button, .nav-account, .course-link, .lp-doors .primary-button) { border-radius: var(--mui-radius); font-weight: 500; letter-spacing: -.005em; }
html body.aurora :is(.button:not(.secondary):not(.ghost):not(.danger), .primary-button, .course-link) { background: var(--mui-violet); color: #fff; box-shadow: 0 6px 18px rgba(91, 61, 245, .22); }
html body.aurora :is(.button:not(.secondary):not(.ghost):not(.danger), .primary-button, .course-link):hover { background: var(--mui-violet-dark); filter: none; }
html body.aurora .button.secondary { color: var(--mui-violet-dark); background: #fff; border: 1px solid #dcd6f5; box-shadow: none; }
html body.aurora .button.secondary:hover { background: var(--mui-violet-tint); }
html body.aurora .button.ghost { color: var(--mui-ink-2); background: transparent; border: 1px solid transparent; box-shadow: none; }
html body.aurora .button.ghost:hover { color: var(--mui-violet-dark); background: var(--mui-violet-tint); }
html body.aurora .hero-panel .button:not(.secondary) { color: var(--mui-violet-dark); background: #fff; box-shadow: none; }
/* El hero dejó de ser oscuro cuando aurora.css lo convirtió en tarjeta clara: en blanco sobre blanco
   este botón era invisible. Afectaba a «Ver estudiantes» desde el rediseño del 18 de septiembre. */
html body.aurora .hero-panel .button.secondary { color: var(--mui-violet-dark); background: var(--mui-violet-soft); border-color: transparent; }
html body.aurora .lp-doors a.primary-button.lp-door-student:not(.secondary):not(.ghost) { background: #fff; color: var(--mui-violet-dark); border: 1px solid #dcd6f5; box-shadow: none; }
html body.aurora .lp-doors a.primary-button.lp-door-student:not(.secondary):not(.ghost):hover { background: var(--mui-violet-tint); }

/* ---------- Cabecera común ---------- */
html body :is(.site-header, .account-header, .topbar) { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--mui-line); box-shadow: none; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html body :is(.nav-shell, .account-header, .topbar-inner) { display: flex; align-items: center; justify-content: flex-start; gap: 20px; min-height: var(--mui-header); padding-block: 0; flex-wrap: nowrap; }
html body .premium-landing .nav-shell { min-height: var(--mui-header); }
html body .account-header { padding: env(safe-area-inset-top) max(22px, env(safe-area-inset-right)) 0 max(22px, env(safe-area-inset-left)); }
html body .premium-landing .nav-shell::after { display: none; }
/* Orden en la cabecera de la portada: logo · enlaces (centrados) · idioma · Entrar · menú */
html body .nav-shell > .hero-brand-row { order: 0; }
html body .nav-shell > #main-navigation { order: 1; margin-inline: auto; }
html body .nav-shell > .lang-switch { order: 2; margin-left: auto; }
html body .nav-shell > .nav-enter { order: 3; margin-left: 0; }
html body .nav-shell > .nav-toggle { order: 4; }
@media (max-width: 1000px) { html body .nav-shell > .lang-switch { margin-left: auto; } }

/* Logo limpio: sin pastilla, sin borde, sin sombra */
html body :is(.brand, .account-brand, .learning-header > a:first-child, .exam-header > a:first-child) { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-decoration: none; }
html body :is(.brand img, .account-brand img, .learning-header > a img, .exam-header > a img) { display: block; height: 88px; width: auto; max-width: none; border-radius: 0; box-shadow: none; filter: none; }
html body :is(.brand span, .account-brand span) { display: none; }
html body .hero-brand-row { margin: 0; flex: 0 0 auto; }

/* Enlaces en texto */
html body :is(nav[id="main-navigation"], .account-nav, .topbar nav, .student-links, .learning-header nav) { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow: visible; width: auto; }
html body #main-navigation { margin-inline: auto; }
html body :is(nav[id="main-navigation"] a, .account-nav a, .topbar nav a, .student-links a, .account-nav .account-signout) { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--mui-ink-2); font: inherit; font-size: .9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; }
html body :is(nav[id="main-navigation"] a, .account-nav a, .topbar nav a, .student-links a, .account-nav .account-signout):hover { color: var(--mui-violet-dark); background: var(--mui-violet-tint); }
html body :is(nav[id="main-navigation"] a, .account-nav a, .topbar nav a, .student-links a)[aria-current="page"] { color: var(--mui-violet-dark); background: transparent; }
html body :is(nav[id="main-navigation"] a, .account-nav a, .topbar nav a, .student-links a)[aria-current="page"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--mui-violet); }
html body :is(nav[id="main-navigation"] a, .account-nav a, .topbar nav a, .student-links a, .account-nav .account-signout, .nav-enter, .lang-switch a, .lang-menu > summary, .nav-toggle, .student-exit):focus-visible { outline: 3px solid var(--mui-violet); outline-offset: 2px; }
html body .topbar nav .crumb-sep { color: #c4bfdc; }
html body .topbar nav a[lang] { color: var(--mui-ink); }

/* Botón principal de la cabecera (Entrar / Mi panel / Mi espacio) */
html body .nav-enter { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 20px; border-radius: var(--mui-radius); background: var(--mui-violet); color: #fff; font-size: .9375rem; font-weight: 500; text-decoration: none; box-shadow: 0 6px 18px rgba(91, 61, 245, .22); order: 0; }
html body .nav-enter:hover { background: var(--mui-violet-dark); }
html body #main-navigation .nav-account { display: none; }
html body .nav-tools { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }

/* Idioma como texto: ES · EN */
html body .lang-switch { display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0 2px; border: 0; border-radius: 0; background: none; overflow: visible; font-size: .8125rem; letter-spacing: .06em; color: var(--mui-soft); }
html body .lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 40px; padding: 0 8px; border-radius: 8px; color: var(--mui-soft); font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-decoration: none; background: none; }
html body .lang-switch a + a::before { content: none; }
html body .lang-switch a[aria-current="page"] { color: var(--mui-violet-dark); background: var(--mui-violet-soft); }
html body .lang-switch a:hover:not([aria-current="page"]) { color: var(--mui-violet-dark); background: var(--mui-violet-tint); }
html body .lang-menu { margin: 0; }
html body .lang-menu > summary { min-height: 44px; padding: 0 4px; border: 0; border-radius: 8px; background: none; color: var(--mui-soft); font-size: .8125rem; font-weight: 500; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 0; }
html body .lang-menu > summary span { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; min-width: 36px; padding: 0 8px; border-radius: 8px; }
html body .lang-menu > summary span[aria-current="true"] { color: var(--mui-violet-dark); background: var(--mui-violet-soft); }
html body .lang-menu > summary i { font-style: normal; color: #c9c5dc; padding: 0 2px; }
html body .lang-menu-panel { border-radius: 14px; border: 1px solid var(--mui-line); box-shadow: 0 14px 40px rgba(31, 27, 46, .14); }

/* Salida del estudiante en cabecera: botón secundario */
html body .student-exit { margin-left: 4px; padding: 0 16px; border: 1px solid #dcd6f5; border-radius: var(--mui-radius); background: #fff; color: var(--mui-violet-dark); font-size: .9375rem; font-weight: 500; }
html body .student-exit:hover { background: var(--mui-violet-tint); }
html body .account-nav .account-signout[data-student-signout] { border: 1px solid #dcd6f5; border-radius: var(--mui-radius); background: #fff; color: var(--mui-violet-dark); padding: 0 16px; }
html body .account-nav .account-signout[data-student-signout]:hover { background: var(--mui-violet-tint); }
html body .account-nav { margin-left: auto; }
html body .account-nav .nav-tools { margin-left: 4px; }

/* Cabeceras de Praxis (estudio y examen) */
html body :is(.learning-header, .exam-header) { display: flex; align-items: center; gap: 20px; min-height: var(--mui-header); padding-block: 8px; flex-wrap: nowrap; background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--mui-line); }
html body .learning-header nav { margin-left: auto; }
html body :is(.learning-header nav .button, .exam-header .button) { min-height: 44px; }
html body .exam-header > #back-link { margin-left: auto; }

/* Enlaces del estudiante montados por nav-home.js (tableta y escritorio) */
html body .student-links { margin-left: auto; }
html body .student-links + .student-exit, html body .student-links ~ .nav-tools { margin-left: 4px; }
html[data-session="student"] body .topbar nav[aria-label="Ruta"] { display: none; }
/* Con enlaces del estudiante montados (o barra inferior en teléfono), el botón «Mi espacio» de las Praxis sobra. */
html[data-session="student"] body :is(.learning-header nav > #back-link, .exam-header > #back-link) { display: none; }

/* Menú de teléfono y tableta (portada) */
html body .nav-toggle { display: none; font-size: 0; line-height: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--mui-ink); align-items: center; justify-content: center; cursor: pointer; }
html body .nav-toggle:hover { background: var(--mui-violet-tint); }
html body .nav-toggle svg { width: 22px; height: 22px; font-size: 1rem; }
html body .nav-toggle > span:not(.visually-hidden) { display: none; }
html body .nav-toggle .nav-toggle-close { display: none; }
html body .nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
html body .nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; }

@media (max-width: 1000px) {
  html.navigation-ready body .nav-toggle { display: inline-flex; margin: 0; order: 4; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--mui-ink); min-height: 44px; }
  html.navigation-ready body #main-navigation { display: none; }
  html.navigation-ready body .nav-toggle[aria-expanded="true"] ~ #main-navigation,
  html.navigation-ready body #main-navigation[data-open="true"] { display: flex; position: fixed; inset: var(--mui-header) 0 auto 0; z-index: 40; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px 20px 24px; background: #fff; border-bottom: 1px solid var(--mui-line); box-shadow: 0 24px 40px rgba(31, 27, 46, .12); }
  html.navigation-ready body #main-navigation a { display: flex; justify-content: space-between; padding: 16px 4px; border-radius: 0; border-bottom: 1px solid var(--mui-line); color: var(--mui-ink); font-size: 1.1875rem; }
  html.navigation-ready body #main-navigation a::after { content: '›'; color: #c4bfdc; position: static; height: auto; background: none; }
  html.navigation-ready body #main-navigation a:hover { background: none; }
  html.navigation-ready body #main-navigation .nav-account { display: flex; }
  html body .site-header { position: sticky; }
  html body .nav-tools { gap: 6px; }
}
@media (max-width: 767px) {
  :root { --mui-header: 76px; }
  html body :is(.brand img, .account-brand img, .learning-header > a img, .exam-header > a img) { height: 64px; }
  html body .nav-enter { min-height: 38px; padding: 0 14px; font-size: .875rem; border-radius: 10px; }
  html body .nav-shell, html body .premium-landing .nav-shell, html body .account-header, html body .topbar-inner { gap: 8px; }
  html body .account-header { padding-inline: 16px; }
  html body .account-nav { gap: 0; flex: 0 1 auto; justify-content: flex-end; }
  html body .account-nav a:not([data-adult-link]):not([data-admin-link]) { display: none; }
  html body .account-nav .account-signout[data-adult-signout] { display: inline-flex; }
  html body :is(.student-links, .student-exit, .account-nav .account-signout[data-student-signout], .account-nav [data-student-signout]) { display: none; }
  html body .topbar nav a:first-child { display: inline-flex; }
  html body .topbar nav[aria-label="Ruta"] { display: flex; }
  html body :is(.learning-header, .exam-header) { padding-inline: 16px; }
  html body .learning-header nav { gap: 6px; }
  html body .learning-header nav .button, html body .exam-header .button { padding-inline: 12px; }
}

/* ---------- Barra inferior del estudiante: solo teléfono ---------- */
html body .student-tabbar { display: none; }
html body.has-student-tabbar { padding-bottom: 0; }
@media (max-width: 767px) {
  html body.has-student-tabbar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  html body .student-tabbar { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--mui-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  html body .student-tabbar :is(a, button) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; border: 0; border-radius: 10px; background: transparent; color: var(--mui-soft); font: inherit; font-size: .6875rem; font-weight: 500; letter-spacing: .01em; text-decoration: none; cursor: pointer; box-shadow: none; }
  html body .student-tabbar :is(a, button) svg { width: 24px; height: 24px; }
  html body .student-tabbar :is(a, button) span { font-size: inherit; line-height: 1.2; }
  html body .student-tabbar a[aria-current="page"] { color: var(--mui-violet-dark); background: transparent; }
  html body .student-tabbar a[aria-current="page"] svg { color: var(--mui-violet); }
  html body .student-tabbar :is(a, button):focus-visible { outline: 3px solid var(--mui-violet); outline-offset: -3px; }
}
@media (prefers-reduced-transparency: reduce) { html body :is(.site-header, .account-header, .topbar, .student-tabbar, .learning-header, .exam-header) { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: no-preference) { html body :is(nav[id="main-navigation"] a, .account-nav a, .topbar nav a, .student-links a, .nav-enter, .lang-switch a) { transition: background 160ms, color 160ms; } }

/* Pantalla de descanso del estudiante («Hasta mañana») */
html body .student-rest { display: grid; place-items: center; min-height: 60vh; text-align: center; padding: 24px; }
html body .student-rest .avatar { width: 88px; height: 88px; flex-basis: 88px; font-size: 2.6rem; border-radius: 28px; }
html body .student-rest h1 { margin: 16px 0 6px; font-size: clamp(1.9rem, 5vw, 2.6rem); }
html body .student-rest p { max-width: 36ch; color: var(--mui-soft); }
html body .student-rest .form-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
/* Auditoría en aparatos (26 sept. 2026): todo lo que se toca mide al menos 44 px, como piden Apple y Android. */
html body summary { min-height: 44px; padding-block: .65rem; box-sizing: border-box; cursor: pointer; }
html body .recall-actions button { min-width: 44px; }