/* ============================================================
   BASE.CSS — Base nueva de la interfaz (temas con 'base' => 2)

   Tres capas:
     1. MARCA   → --color-primario y --color-header-bg (brand.php /
                  site_settings). Todas las variantes se calculan acá
                  en OKLCH, así cualquier color de cliente funciona en
                  claro y en oscuro.
     2. TEMA    → tipografía, radios, sombras, densidad y movimiento
                  (temas_config.php → estilos.css.php).
     3. BASE    → este archivo: componentes comunes a todas las páginas.

   Los estilos de siempre (general.css.php y el CSS de bloques) se cargan
   dentro de @layer legado; este archivo va afuera de toda capa y por eso
   siempre les gana, sin pelear por especificidad (ver tema_css_links()).
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. MARCA: paleta calculada
   Cada token tiene primero un valor fijo de respaldo, para
   navegadores sin sintaxis de color relativo.
   ───────────────────────────────────────────────────────────── */
:root {
  --ax-top-h: 72px;
  --ax-pub-h: 130px;
  --ax-nav-w: 252px;
  --ax-ancho: 1200px;
  --ax-curva: cubic-bezier(.2, .7, .2, 1);

  --ax-bg: #F5F7FA;
  --ax-bg: oklch(from var(--color-primario) 0.976 0.006 h);
  --ax-surface: #FFFFFF;
  --ax-surface-2: #F1F4F8;
  --ax-surface-2: oklch(from var(--color-primario) 0.962 0.009 h);
  --ax-line: #E3E8EF;
  --ax-line: oklch(from var(--color-primario) 0.915 0.012 h);
  --ax-line-2: #CDD5DF;
  --ax-line-2: oklch(from var(--color-primario) 0.85 0.016 h);
  --ax-ink: #111827;
  --ax-ink: oklch(from var(--color-header-bg) 0.2 min(c, 0.03) h);
  --ax-ink-2: #414B5A;
  --ax-ink-2: oklch(from var(--color-header-bg) 0.41 min(c, 0.03) h);
  --ax-ink-3: #6B7686;
  --ax-ink-3: oklch(from var(--color-header-bg) 0.55 min(c, 0.025) h);

  --ax-accent: var(--color-primario);
  --ax-accent-ink: var(--color-primario);
  --ax-accent-ink: oklch(from var(--color-primario) min(l, 0.5) c h);
  --ax-accent-soft: #E6F7FB;
  --ax-accent-soft: oklch(from var(--color-primario) 0.955 0.035 h);
  --ax-accent-line: oklch(from var(--color-primario) 0.84 0.07 h);
  --ax-on-accent: #FFFFFF;
  --ax-on-accent: oklch(from var(--color-primario) clamp(0.16, (0.66 - l) * 1000, 1) 0.01 h);

  --ax-ok: #147A4B;        --ax-ok-soft: #E3F5EC;
  --ax-warn: #8A5A00;      --ax-warn-soft: #FBF1DC;
  --ax-bad: #B42318;       --ax-bad-soft: #FDECEA;
  --ax-ok: oklch(0.5 0.12 155);   --ax-ok-soft: oklch(0.955 0.035 155);
  --ax-warn: oklch(0.52 0.11 70); --ax-warn-soft: oklch(0.96 0.045 85);
  --ax-bad: oklch(0.52 0.18 27);  --ax-bad-soft: oklch(0.955 0.03 25);

  /* Barra superior: el color de la marca, siempre oscuro-legible */
  --ax-top-bg: var(--color-header-bg);
  --ax-top-ink: #F4F7FB;
  --ax-top-ink-2: rgba(244, 247, 251, .72);
  --ax-top-line: rgba(255, 255, 255, .1);

  --ax-sombra-flotante: 0 1px 2px rgba(16,24,40,.05), 0 12px 32px -8px rgba(16,24,40,.18);
  --ax-anillo: 0 0 0 3px oklch(from var(--color-primario) 0.7 0.12 h / .35);
  --ax-anillo: 0 0 0 3px color-mix(in oklch, var(--color-primario) 35%, transparent);

  color-scheme: light;
}

html[data-theme="dark"] {
  --ax-bg: #0B1322;
  --ax-bg: oklch(from var(--color-header-bg) 0.165 min(c, 0.035) h);
  --ax-surface: #121C2E;
  --ax-surface: oklch(from var(--color-header-bg) 0.205 min(c, 0.035) h);
  --ax-surface-2: #182438;
  --ax-surface-2: oklch(from var(--color-header-bg) 0.235 min(c, 0.035) h);
  --ax-line: rgba(255, 255, 255, .08);
  --ax-line: oklch(from var(--color-primario) 0.8 0.03 h / .12);
  --ax-line-2: rgba(255, 255, 255, .16);
  --ax-line-2: oklch(from var(--color-primario) 0.8 0.03 h / .22);
  --ax-ink: #EEF3F8;
  --ax-ink: oklch(from var(--color-primario) 0.955 0.008 h);
  --ax-ink-2: #B7C3D1;
  --ax-ink-2: oklch(from var(--color-primario) 0.8 0.018 h);
  --ax-ink-3: #8894A5;
  --ax-ink-3: oklch(from var(--color-primario) 0.66 0.018 h);
  --ax-accent-ink: var(--color-primario);
  --ax-accent-ink: oklch(from var(--color-primario) max(l, 0.8) c h);
  --ax-accent-soft: rgba(0, 212, 255, .12);
  --ax-accent-soft: color-mix(in oklch, var(--color-primario) 16%, transparent);
  --ax-accent-line: color-mix(in oklch, var(--color-primario) 40%, transparent);
  --ax-ok: oklch(0.78 0.13 155);  --ax-ok-soft: oklch(0.78 0.13 155 / .14);
  --ax-warn: oklch(0.82 0.12 80); --ax-warn-soft: oklch(0.82 0.12 80 / .14);
  --ax-bad: oklch(0.74 0.15 25);  --ax-bad-soft: oklch(0.74 0.15 25 / .14);
  --ax-top-bg: oklch(from var(--color-header-bg) 0.14 min(c, 0.035) h);
  --ax-sombra-flotante: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -8px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* ─────────────────────────────────────────────────────────────
   Puente con los estilos de siempre: todas las páginas usan estas
   variables, así que al redefinirlas toman la paleta nueva.
   ───────────────────────────────────────────────────────────── */
:root, html[data-theme="dark"] {
  --bg-primary: var(--ax-bg);
  --bg-secondary: var(--ax-surface-2);
  --bg-card: var(--ax-surface);
  --bg-hover: var(--ax-surface-2);
  --text-primary: var(--ax-ink);
  --text-secondary: var(--ax-ink-2);
  --text-muted: var(--ax-ink-3);
  --border-normal: var(--ax-line);
  --border-light: var(--ax-line);
  --cp: var(--ax-accent);
}
body, html[data-theme="dark"] body {
  --bg: var(--ax-bg);
  --bg2: var(--ax-surface);
  --border: var(--ax-line);
  --border-solid: var(--ax-line-2);
  --text: var(--ax-ink);
  --text-muted: var(--ax-ink-2);
  --text-dim: var(--ax-ink-3);
  --muted: var(--ax-ink-3);
  --item-bg: var(--ax-surface-2);
  --item-hover: var(--ax-surface-2);
  --item-active: var(--ax-accent-soft);
  --row-hover: var(--ax-surface-2);
  --input-bg: var(--ax-surface);
  /* diseño web y marketing tienen su propio menú: pasa a la paleta nueva */
  --dw-main-bg: var(--ax-bg);  --mk-main-bg: var(--ax-bg);
  --dw-card-bg: var(--ax-surface); --mk-card-bg: var(--ax-surface);
  --dw-card-border: var(--ax-line); --mk-card-border: var(--ax-line);
  --dw-card-header-bg: var(--ax-surface-2);
  --dw-text: var(--ax-ink); --mk-text: var(--ax-ink);
  --dw-text-muted: var(--ax-ink-3); --mk-text-muted: var(--ax-ink-3);
  --dw-label: var(--ax-ink-2); --mk-label: var(--ax-ink-2);
  --dw-input-bg: var(--ax-surface); --mk-input-bg: var(--ax-surface);
  --dw-repeater-bg: var(--ax-surface-2);
  --dw-sidebar-bg1: var(--ax-surface); --dw-sidebar-bg2: var(--ax-surface);
  --mk-sidebar-bg1: var(--ax-surface); --mk-sidebar-bg2: var(--ax-surface);
  --dw-sidebar-text: var(--ax-ink-2); --mk-sidebar-text: var(--ax-ink-2);
  --dw-sidebar-text-muted: var(--ax-ink-3);
  --dw-sidebar-border: var(--ax-line); --mk-sidebar-border: var(--ax-line);
  --dw-sidebar-item-hover: var(--ax-surface-2); --mk-sidebar-item-hover: var(--ax-surface-2);
  --dw-sidebar-item-active: var(--ax-accent-soft); --mk-sidebar-item-active: var(--ax-accent-soft);
}

/* ─────────────────────────────────────────────────────────────
   2. ELEMENTOS BASE
   ───────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* head.php pone overflow-x:hidden en html y body: eso vuelve al body un contenedor de
   scroll y rompe todo lo "sticky" (se mide desde el body, no desde la pantalla).
   clip corta igual lo que sobresale, sin crear contenedor de scroll. */
html:is(.ui-app, .ui-publico), html:is(.ui-app, .ui-publico) body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--ax-bg);
  color: var(--ax-ink);
  font-family: var(--font-cuerpo);
  font-size: var(--tam-base);
  line-height: var(--alto-linea);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 0;
}
h1, h2, h3, h4 { color: var(--ax-ink); line-height: 1.2; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--ax-accent-ink); text-underline-offset: .2em; }
::selection { background: color-mix(in oklch, var(--color-primario) 28%, transparent); }
:focus-visible { outline: 2px solid var(--ax-accent-ink); outline-offset: 2px; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--ax-line); }
table, .num, .stat .sn, .stat-num { font-variant-numeric: tabular-nums; }

/* Íconos (sprite de ui/iconos.php) */
.ui-ic {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  vertical-align: -.2em;
  stroke: currentColor;
  fill: none;
}
.ax-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ax-saltar {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 10px 14px; border-radius: var(--radio-sm);
  background: var(--ax-surface); color: var(--ax-ink); font-weight: 600;
  box-shadow: var(--ax-sombra-flotante); transform: translateY(-150%);
}
.ax-saltar:focus { transform: none; }
#ax-contenido { outline: none; }

/* ─────────────────────────────────────────────────────────────
   3. ESTRUCTURA DE LA APLICACIÓN
   ───────────────────────────────────────────────────────────── */
.ui-app body { padding-top: var(--ax-top-h); }
.ui-app.ui-lado body { padding-left: var(--ax-nav-w); }
.ax-bloqueo { overflow: hidden; }

/* Barra superior */
.ax-top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--ax-top-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px 0 20px;
  background: var(--ax-top-bg);
  color: var(--ax-top-ink);
  border-bottom: 1px solid var(--ax-top-line);
}
.ax-marca { display: flex; align-items: center; height: 100%; flex-shrink: 0; }
.ax-marca img { height: 56px; width: auto; display: block; filter: drop-shadow(0 0 10px var(--color-glow)); }
.ui-lado .ax-marca { width: calc(var(--ax-nav-w) - 36px); }
.ax-top-nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.ax-top-nav a, .ax-top-link {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 12px; border-radius: var(--radio-sm);
  color: var(--ax-top-ink-2); text-decoration: none; font-size: .92rem; font-weight: 500;
  transition: background var(--transicion), color var(--transicion);
}
.ax-top-nav a:hover, .ax-top-link:hover { color: var(--ax-top-ink); background: rgba(255,255,255,.07); }
.ax-top-nav a[aria-current="page"] { color: var(--ax-top-ink); background: rgba(255,255,255,.1); }
.ax-modo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--radio-pill);
  background: color-mix(in oklch, var(--color-primario) 22%, transparent);
  color: var(--ax-top-ink); font-size: .85rem; font-weight: 600;
}
.ax-top-der { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ax-top-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: var(--radio-sm);
  background: transparent; color: var(--ax-top-ink-2);
  cursor: pointer; text-decoration: none;
  transition: background var(--transicion), color var(--transicion);
}
.ax-top-btn:hover { background: rgba(255,255,255,.08); color: var(--ax-top-ink); }
.ax-top-btn .ui-ic { width: 20px; height: 20px; }
.ax-top-btn:focus-visible, .ax-top-nav a:focus-visible, .ax-top-link:focus-visible { outline-color: var(--ax-top-ink); }
html:not([data-theme="dark"]) .ax-si-oscuro, html[data-theme="dark"] .ax-si-claro { display: none; }
.ax-yo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; margin: 0 4px; border-radius: var(--radio-pill); text-decoration: none; transition: background var(--transicion); }
.ax-yo:hover { background: rgba(255,255,255,.08); }
.ax-yo[aria-disabled="true"] { pointer-events: none; }
.ax-avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primario); color: var(--ax-on-accent);
  font-family: var(--font-titulos); font-weight: 700; font-size: .9rem;
}
.ax-yo-txt { display: flex; flex-direction: column; line-height: 1.2; }
.ax-yo-txt strong { font-size: .88rem; font-weight: 600; color: var(--ax-top-ink); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-yo-txt small { font-size: .75rem; color: var(--ax-top-ink-2); }
.ax-solo-cel { display: none; }

/* Menú lateral */
.ax-nav {
  position: fixed;
  top: var(--ax-top-h); bottom: 0; left: 0;
  z-index: 80;
  width: var(--ax-nav-w);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 12px 28px;
  background: var(--ax-surface);
  border-right: 1px solid var(--ax-line);
  scrollbar-width: thin;
  scrollbar-color: var(--ax-line-2) transparent;
}
.ax-grupo { padding: 6px 0; }
.ax-grupo + .ax-grupo { border-top: 1px solid var(--ax-line); margin-top: 6px; padding-top: 12px; }
.ax-grupo-tit { margin: 0 10px 6px; font-size: .75rem; font-weight: 600; color: var(--ax-ink-3); letter-spacing: .01em; }
.ax-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; margin: 1px 0;
  border-radius: var(--radio-sm);
  color: var(--ax-ink-2); text-decoration: none;
  font-size: .92rem; font-weight: 500;
  transition: background var(--transicion), color var(--transicion);
}
.ax-item .ui-ic { width: 18px; height: 18px; color: var(--ax-ink-3); transition: color var(--transicion); }
.ax-item:hover { background: var(--ax-surface-2); color: var(--ax-ink); }
.ax-item:hover .ui-ic { color: var(--ax-ink-2); }
.ax-item.is-activo { background: var(--ax-accent-soft); color: var(--ax-ink); font-weight: 600; }
.ax-item.is-activo .ui-ic { color: var(--ax-accent-ink); }
.ax-item.is-activo::before {
  content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--color-primario);
}
.ax-aviso {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center; border-radius: var(--radio-pill);
  background: var(--ax-bad); color: #fff; font-size: .72rem; font-weight: 700;
}
.ax-velo {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(8, 12, 20, .45);
  backdrop-filter: blur(2px);
}
.ax-velo[hidden] { display: none; }

/* En la aplicación, lo que cada página repetía queda a cargo de la barra superior */
.ui-app .theme-toggle,
.ui-app a[href="logout.php"]:not(.ax-top-btn),
.ui-app .btn-preview-exit,
.ui-app .btn-back,
.ui-app :is(.top-bar, .top-bar-right, .page-header-right, .header-right, .header-row, .ca-header) a:is([href="login.php"], [href="profesor.php"], [href^="profesor.php?"], [href="campus.php"]),
.ui-app .whatsapp-float { display: none !important; }
.ui-app .cw-fab { right: 25px !important; bottom: 93px !important; box-shadow: 0 8px 24px -6px rgba(0,0,0,.35) !important; }

/* Un solo momento de movimiento: el contenido entra al cargar la página */
@media (prefers-reduced-motion: no-preference) {
  /* Sin "fill-mode": al terminar no queda ningún transform aplicado. Si quedara, el contenedor
     atraparía a los paneles position:fixed de adentro (índice del campus en celular). */
  .ui-app #ax-contenido ~ :is(div, main, section) { animation: ax-entra .38s var(--ax-curva); }
  @keyframes ax-entra { from { opacity: 0; transform: translateY(6px); } }
}

/* ─────────────────────────────────────────────────────────────
   4. ENCABEZADO DE CADA PÁGINA (título + acciones)
   ───────────────────────────────────────────────────────────── */
.ui-app :is(.wrap, .page-wrap, .admin-container, .container) { max-width: var(--ax-ancho); }
.ui-app :is(.wrap, .page-wrap) { margin: 0 auto; padding: 32px clamp(16px, 3vw, 40px) 64px; }
.ui-app :is(.top-bar, .page-header, .header-row, .ca-header) {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 20px; margin: 0 0 24px; padding: 0; background: none; border: 0; box-shadow: none;
}
.ui-app :is(.top-bar, .page-header, .header-row, .ca-header) :is(h1, h2),
.ui-app .admin-container > h2 {
  margin: 0;
  font-family: var(--font-titulos);
  font-size: clamp(1.5rem, 2.2vw, var(--escala-h1));
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
  text-transform: none;
  color: var(--ax-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.ui-app :is(.top-bar, .page-header, .header-row, .ca-header) :is(h1, h2) span { color: inherit; }
/* El ícono decorativo del título sobra: el menú ya dice dónde estás */
.ui-app :is(.top-bar, .page-header, .header-row, .ca-header) :is(h1, h2) > .ui-ic:first-child,
.ui-app .admin-container > h2 > .ui-ic:first-child { display: none; }
.ui-app :is(.top-bar-right, .page-header-right, .header-right) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────────
   5. COMPONENTES
   ───────────────────────────────────────────────────────────── */

/* Tarjetas */
:is(.card, .form-card, .modal-inner, .cta-card, .stats-card) {
  background: var(--ax-surface);
  border: 1px solid var(--ax-line);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
}
.ui-app :is(.card, .form-card) { padding: var(--pad-card); margin-bottom: 20px; }
.ui-app :is(.card, .form-card) > :is(h2, h3):first-child,
.ui-app .card-header h2 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 18px;
  font-family: var(--font-titulos);
  font-size: 1.05rem; font-weight: 650;
  letter-spacing: -.005em; text-transform: none;
  color: var(--ax-ink);
}
.ui-app :is(.card, .form-card) > :is(h2, h3):first-child .ui-ic,
.ui-app .card-header h2 .ui-ic { color: var(--ax-accent-ink); width: 18px; height: 18px; }
.ui-app .card-header { padding: 16px var(--pad-card); border-bottom: 1px solid var(--ax-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-app .card:has(> .card-header) { padding: 0; overflow: hidden; }

/* Botones: todas las variantes que usan las páginas */
:is(.btn, .btn-primary, .btn-submit, .course-btn, .logout-btn, .modal-btn-ok, .mk-btn, .dw-btn, .btn-comprar, .btn-green, .edit-btn, .ax-btn),
.ui-app button[type="submit"]:not([class]),
body.login button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px;
  padding: var(--pad-btn);
  border: 1px solid var(--color-primario);
  border-radius: var(--radio-sm);
  background: var(--color-primario);
  color: var(--ax-on-accent);
  font-family: var(--font-cuerpo); font-size: .92rem; font-weight: 600; line-height: 1.2;
  letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 1px 2px rgba(16,24,40,.12);
  transition: background var(--transicion), border-color var(--transicion), box-shadow var(--transicion), transform .08s ease;
}
:is(.btn, .btn-primary, .btn-submit, .course-btn, .logout-btn, .modal-btn-ok, .mk-btn, .dw-btn, .btn-comprar, .btn-green, .edit-btn, .ax-btn):hover,
.ui-app button[type="submit"]:not([class]):hover, body.login button[type="submit"]:hover {
  background: var(--color-primario-hover); border-color: var(--color-primario-hover);
  color: var(--ax-on-accent); transform: none;
}
:is(.btn, .btn-primary, .btn-submit, .course-btn, .btn-secondary, .btn-gray, .btn-danger, .ax-btn, .mk-btn, .dw-btn):active { transform: scale(.98); }
:is(.btn, .btn-primary, .btn-submit, .course-btn):disabled { opacity: .5; cursor: not-allowed; }
/* Secundarios y neutros */
:is(.btn-secondary, .btn-gray, .modal-btn-cancel, .btn.btn-secondary, .ax-btn-sec) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: var(--pad-btn);
  border: 1px solid var(--ax-line-2); border-radius: var(--radio-sm);
  background: var(--ax-surface); color: var(--ax-ink);
  font-family: var(--font-cuerpo); font-size: .92rem; font-weight: 600; line-height: 1.2;
  text-transform: none; letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
  transition: background var(--transicion), border-color var(--transicion);
}
:is(.btn-secondary, .btn-gray, .modal-btn-cancel, .ax-btn-sec):hover { background: var(--ax-surface-2); border-color: var(--ax-line-2); color: var(--ax-ink); transform: none; }
/* Peligro: solo el color de texto avisa; el relleno rojo queda para confirmar */
:is(.btn-danger, .btn.btn-danger) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 8px 12px;
  border: 1px solid var(--ax-line-2); border-radius: var(--radio-sm);
  background: var(--ax-surface); color: var(--ax-bad);
  font-weight: 600; font-size: .88rem; cursor: pointer; box-shadow: none; text-decoration: none;
}
:is(.btn-danger, .btn.btn-danger):hover { background: var(--ax-bad-soft); border-color: color-mix(in oklch, var(--ax-bad) 35%, transparent); color: var(--ax-bad); }
.btn-green { background: var(--ax-ok); border-color: var(--ax-ok); color: #fff; }
.btn-green:hover { background: color-mix(in oklch, var(--ax-ok), black 12%); border-color: transparent; color: #fff; }
:is(.btn-sm, .btn.btn-sm) { min-height: 32px; padding: 6px 11px; font-size: .84rem; }
:is(.btn, .btn-secondary, .btn-danger, .btn-primary) .ui-ic { width: 16px; height: 16px; }

/* Formularios */
.ui-app label, body.login label, body.register label, .contact-form label {
  display: block; margin: 0 0 6px; font-size: .86rem; font-weight: 600; color: var(--ax-ink-2);
}
:is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="hidden"]), select, textarea) {
  max-width: 100%;
  min-height: 40px;
  padding: var(--pad-input);
  border: 1px solid var(--ax-line-2);
  border-radius: var(--radio-sm);
  background: var(--ax-surface);
  color: var(--ax-ink);
  font: inherit; font-size: .95rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
/* Ancho completo solo dentro de grupos de formulario: los campos sueltos (p. ej. una nota en una tabla) conservan su ancho */
:is(.form-group, .col, .field-block, .mk-field, .container, .modal-inner, .contact-form, .form-full, .form-grid, .card > form, .form-card > form) > :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="hidden"]), select, textarea),
.contact-form form > :is(input, textarea) { width: 100%; }
select[multiple] { background-image: none; padding-right: 12px; min-height: 96px; }
select:not([multiple]) {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7686' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
:is(input, select, textarea)::placeholder { color: var(--ax-ink-3); opacity: 1; }
:is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):hover { border-color: color-mix(in oklch, var(--ax-ink-3) 60%, var(--ax-line-2)); }
:is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):focus {
  outline: none; border-color: var(--ax-accent-ink); box-shadow: var(--ax-anillo);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--ax-accent-ink); width: 16px; height: 16px; }
input[type="file"] { font-size: .9rem; color: var(--ax-ink-2); max-width: 100%; }
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 1px solid var(--ax-line-2); border-radius: var(--radio-sm);
  background: var(--ax-surface-2); color: var(--ax-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.ui-app :is(.form-group, .field-block, .mk-field) { margin-bottom: 16px; }
.ui-app :is(.form-group, .field-block) small, .ui-app .hint-dim { display: block; margin-top: 6px; font-size: .8rem; color: var(--ax-ink-3); }

.ui-app label { text-transform: none; letter-spacing: 0; }
/* Encabezados de tarjeta con fondo de color (foro, formularios): pasan a encabezado neutro */
.ui-app :is(.new-post-head, .card-head, .form-head) {
  padding: 14px var(--pad-card); background: var(--ax-surface-2) !important; color: var(--ax-ink) !important;
  border-bottom: 1px solid var(--ax-line); border-radius: var(--radio-md) var(--radio-md) 0 0;
}
.ui-app :is(.new-post-head, .card-head, .form-head) :is(h2, h3) {
  display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-titulos);
  font-size: 1rem; font-weight: 650; color: var(--ax-ink); text-transform: none; letter-spacing: 0;
}
.ui-app :is(.new-post-head, .card-head, .form-head) .ui-ic { color: var(--ax-accent-ink); }

/* Tablas */
.ui-app table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.ui-app th {
  padding: 10px 14px; text-align: left;
  background: var(--ax-surface-2); color: var(--ax-ink-3);
  font-size: .76rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
  border-bottom: 1px solid var(--ax-line); white-space: nowrap;
}
.ui-app th:first-child { border-top-left-radius: var(--radio-sm); }
.ui-app th:last-child { border-top-right-radius: var(--radio-sm); }
.ui-app td { padding: 12px 14px; border-bottom: 1px solid var(--ax-line); color: var(--ax-ink); vertical-align: middle; }
.ui-app tbody tr:last-child td { border-bottom: 0; }
.ui-app tbody tr { transition: background var(--transicion); }
.ui-app tbody tr:hover td { background: color-mix(in oklch, var(--ax-surface-2) 70%, transparent); }
.ui-app :is(.table-wrap, .tabla-wrap) { overflow-x: auto; border-radius: var(--radio-md); }
.ui-app .card > table { border: 1px solid var(--ax-line); border-radius: var(--radio-sm); }

/* Insignias y estados */
:is(.badge, .pill, .be, .tipo-badge, .nota-pill, .badge-on, .badge-off, .badge-mensual, .badge-unico) {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--radio-pill);
  font-size: .76rem; font-weight: 600; line-height: 1.6; white-space: nowrap;
  background: var(--ax-surface-2); color: var(--ax-ink-2); border: 0;
}
:is(.badge-on, .be-entregado, .badge-mensual) { background: var(--ax-accent-soft); color: var(--ax-accent-ink); }
:is(.be-corregido, .nota-pill, .badge-unico, .pill-ok) { background: var(--ax-ok-soft); color: var(--ax-ok); }
:is(.be-pendiente) { background: var(--ax-warn-soft); color: var(--ax-warn); }
:is(.badge-off) { background: var(--ax-surface-2); color: var(--ax-ink-3); }
:is(.badge, .pill) .ui-ic { width: 13px; height: 13px; }

/* Avisos */
:is(.msg-ok, .alert-success, .msg-err, .alert-error, .error, .msg-warn, .alert, .info-bar) {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin: 0 0 16px;
  border: 1px solid transparent; border-left-width: 3px;
  border-radius: var(--radio-sm);
  font-size: .9rem; line-height: 1.5; text-align: left;
}
:is(.msg-ok, .alert-success) { background: var(--ax-ok-soft); color: var(--ax-ok); border-color: color-mix(in oklch, var(--ax-ok) 25%, transparent); border-left-color: var(--ax-ok); }
:is(.msg-err, .alert-error, .error) { background: var(--ax-bad-soft); color: var(--ax-bad); border-color: color-mix(in oklch, var(--ax-bad) 25%, transparent); border-left-color: var(--ax-bad); }
.msg-warn { background: var(--ax-warn-soft); color: var(--ax-warn); border-color: color-mix(in oklch, var(--ax-warn) 25%, transparent); border-left-color: var(--ax-warn); }
:is(.alert, .info-bar):not(.alert-success, .alert-error) { background: var(--ax-accent-soft); color: var(--ax-ink); border-color: var(--ax-accent-line); border-left-color: var(--color-primario); }

/* Números destacados */
.ui-app :is(.stats, .stats-grid) { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ui-app .stat {
  padding: 16px 18px; text-align: left;
  background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
}
.ui-app .stat :is(.sn, .stat-num, .num) { display: block; font-family: var(--font-titulos); font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--ax-ink); letter-spacing: -.02em; }
.ui-app .stat :is(.sl, .stat-label) { display: block; margin-top: 4px; font-size: .8rem; color: var(--ax-ink-3); }

/* Vacíos */
.ui-app :is(.empty, .empty-msg, .empty-msg-lg, .empty-state, .placeholder) {
  padding: 40px 20px; text-align: center; color: var(--ax-ink-3); font-size: .92rem;
  background: none; border: 1px dashed var(--ax-line-2); border-radius: var(--radio-md);
}

/* Pestañas */
.ui-app :is(.tabs, .tab-bar) { display: flex; gap: 4px; border-bottom: 1px solid var(--ax-line); margin-bottom: 20px; overflow-x: auto; }
.ui-app .tab {
  padding: 10px 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--ax-ink-3); font-weight: 600; font-size: .9rem; cursor: pointer; white-space: nowrap;
}
.ui-app .tab:hover { color: var(--ax-ink); }
.ui-app :is(.tab.active, .tab.activo, .tab[aria-selected="true"]) { color: var(--ax-ink); border-bottom-color: var(--color-primario); }

/* Barras de progreso */
.ui-app :is(.progress-bar, .barra) { height: 8px; border-radius: var(--radio-pill); background: var(--ax-surface-2); border: 0; overflow: hidden; }
.ui-app :is(.progress-fill, .barra-fill) { background: var(--color-primario); border-radius: inherit; }

/* Modal (ver como alumno, confirmaciones) */
.modal-inner { padding: 28px; border-radius: var(--radio-lg); box-shadow: var(--ax-sombra-flotante); }
.modal-inner h3 { margin: 0 0 6px; font-family: var(--font-titulos); font-size: 1.25rem; }
.modal-inner p { color: var(--ax-ink-2); font-size: .92rem; margin: 0 0 20px; }
.modal-inner select { margin-bottom: 16px; }
.modal-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ─────────────────────────────────────────────────────────────
   6. PÁGINAS DE LA APLICACIÓN
   ───────────────────────────────────────────────────────────── */

/* Panel del admin (login.php con sesión): accesos como tarjetas con ícono de línea */
.ui-app body.login .login-page { display: block; min-height: 0; padding: 0; }
.ui-app body.login .admin-container {
  margin: 0 auto; padding: 32px clamp(16px, 3vw, 40px) 64px; background: none; border: 0; box-shadow: none; text-align: left;
}
.ui-app body.login .admin-container > h2::after { display: none; }
.ui-app body.login .welcome { margin: 4px 0 24px; text-align: left; color: var(--ax-ink-3); }
.ui-app body.login .admin-top-bar { display: none; }
.ui-app body.login .admin-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ui-app body.login .admin-option {
  position: relative; display: block; width: 100%; padding: 18px; text-align: left;
  background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm); text-decoration: none; font: inherit; color: inherit; cursor: pointer;
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.ui-app body.login .admin-option:hover { border-color: var(--ax-accent-line); box-shadow: var(--sombra-md); transform: translateY(-1px); background: var(--ax-surface); }
.ui-app body.login .admin-option h3 {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  margin: 0 0 4px; font-family: var(--font-cuerpo); font-size: .98rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--ax-ink);
}
.ui-app body.login .admin-option h3 .ui-ic {
  width: 36px; height: 36px; padding: 8px; border-radius: var(--radio-sm);
  background: var(--ax-accent-soft); color: var(--ax-accent-ink);
}
.ui-app body.login .admin-option p { margin: 0; font-size: .84rem; color: var(--ax-ink-3); line-height: 1.45; }
/* Arriba del panel: lo pendiente (números reales) y "ver como alumno"; debajo, los accesos */
.pa-arriba { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-bottom: 32px; align-items: start; }
.pa-hoy, .pa-vista { padding: 20px 22px; border-radius: var(--radio-md); }
.pa-hoy { background: var(--ax-surface); border: 1px solid var(--ax-line); }
.pa-vista { background: var(--ax-accent-soft); border: 1px solid var(--ax-accent-line); }
.pa-hoy h3, .pa-vista h3, .pa-accesos { margin: 0 0 12px; font-family: var(--font-titulos); font-size: 1.1rem; font-weight: 700; color: var(--ax-ink); text-transform: none; letter-spacing: -.01em; }
.pa-hoy ul { list-style: none; margin: 0; padding: 0; }
.pa-hoy li { display: grid; grid-template-columns: 4.5ch 1fr auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ax-line); }
.pa-num { font-family: var(--font-titulos); font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--ax-accent-ink); font-variant-numeric: tabular-nums; }
.pa-txt { color: var(--ax-ink); font-size: .95rem; }
.pa-vacio { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--ax-line); color: var(--ax-ink-3); }
.pa-vista p { margin: 0 0 16px; color: var(--ax-ink-2); font-size: .92rem; }
@media (max-width: 860px) {
  .pa-arriba { grid-template-columns: 1fr; }
  .pa-hoy li { grid-template-columns: 4.5ch 1fr; }
  .pa-hoy li .ax-btn { grid-column: 1 / -1; justify-self: stretch; }
}
.ui-app body.login .badge-notif {
  position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border: 0; border-radius: var(--radio-pill);
  background: var(--ax-bad); color: #fff; font-size: .75rem; font-weight: 700;
}
.ui-app body.login .logout-btn { display: none; }

/* Panel del profesor */
.ui-app body.profesor :is(.tools, .tools-grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.ui-app body.profesor .tool-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px; text-align: left;
  background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--radio-md);
  color: var(--ax-ink); font-size: .88rem; font-weight: 600; text-decoration: none; box-shadow: var(--sombra-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.ui-app body.profesor .tool-btn:hover { border-color: var(--ax-accent-line); box-shadow: var(--sombra-md); transform: none; }
.ui-app body.profesor .tool-btn .ui-ic { width: 20px; height: 20px; color: var(--ax-accent-ink); }
.ui-app body.profesor .curso-bar { background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--radio-md); box-shadow: var(--sombra-sm); }

/* Marketing y Diseño web: el menú propio de la página pasa a pestañas arriba */
.ui-app body:is(.marketing, .diseno) :is(.mk-wrap, .dw-wrap) { display: block; min-height: 0; }
.ui-app body:is(.marketing, .diseno) :is(.mk-sidebar, .dw-sidebar) {
  position: sticky; top: var(--ax-top-h); z-index: 20;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px;
  width: auto; margin: 0; padding: 10px clamp(16px, 3vw, 40px);
  background: color-mix(in oklch, var(--ax-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 0; border-bottom: 1px solid var(--ax-line);
}
.ui-app body:is(.marketing, .diseno) :is(.mk-tab, .dw-page-item) {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; margin: 0; border: 0; border-left: 0; border-radius: var(--radio-sm);
  background: transparent; color: var(--ax-ink-2); font-size: .9rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
.ui-app body:is(.marketing, .diseno) :is(.mk-tab, .dw-page-item):hover { background: var(--ax-surface-2); color: var(--ax-ink); }
.ui-app body:is(.marketing, .diseno) :is(.mk-tab.activo, .dw-page-item.activo) {
  background: var(--ax-accent-soft); color: var(--ax-ink); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--color-primario);
}
.ui-app body:is(.marketing, .diseno) :is(.mk-tab, .dw-page-item) .ui-ic { color: var(--ax-ink-3); }
.ui-app body:is(.marketing, .diseno) :is(.mk-tab.activo, .dw-page-item.activo) .ui-ic { color: var(--ax-accent-ink); }
.ui-app body.diseno .dw-sidebar > h4 { display: none; }
/* Diseño web: barra de edición = página (izquierda) + apariencia (derecha), alineada al contenido */
.ui-app body.diseno .dw-sidebar {
  align-items: flex-end; gap: 12px 32px;
  padding-top: 14px; padding-bottom: 14px;
  padding-inline: max(16px, calc((100% - var(--ax-ancho)) / 2 + clamp(16px, 3vw, 40px)));
}
.ui-app body.diseno #dw-page-list { display: none; }
.ui-app body.diseno .dw-page-select-wrap { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ui-app body.diseno :is(.dw-page-select-wrap span, .dw-theme-box h4) {
  margin: 0 !important; padding: 0; font-family: var(--font-cuerpo); font-size: .76rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--ax-ink-3);
}
.ui-app body.diseno .dw-theme-box {
  display: grid; grid-auto-flow: column; grid-template-rows: auto auto; gap: 6px 12px;
  margin: 0 0 0 auto; padding: 0; border: 0; background: none;
}
.ui-app body.diseno :is(#dw-page-select, .dw-theme-box select) {
  width: auto; min-height: 40px; margin: 0;
  padding: 8px 36px 8px 12px; font-size: .9rem;
  background-color: var(--ax-surface); border: 1px solid var(--ax-line-2); border-radius: var(--radio-sm);
  box-shadow: 0 1px 2px rgba(16,24,40,.04); color: var(--ax-ink);
}
.ui-app body.diseno #dw-page-select { min-width: 260px; font-weight: 600; }
.ui-app body.diseno .dw-theme-box select { min-width: 200px; max-width: 260px; }
.ui-app body:is(.marketing, .diseno) :is(.mk-main, .dw-main) { background: none; min-height: 0; }
.ui-app body:is(.marketing, .diseno) :is(.mk-main-inner, .dw-main-inner) { max-width: var(--ax-ancho); margin: 0 auto; padding: 28px clamp(16px, 3vw, 40px) 48px; }
.ui-app body:is(.marketing, .diseno) :is(.mk-main-inner, .dw-main-inner) > div:first-child h2 { font-family: var(--font-titulos); font-size: clamp(1.5rem, 2.2vw, var(--escala-h1)); font-weight: var(--peso-titulo); letter-spacing: var(--tracking-titulo); }
@media (max-width: 1024px) {
  .ui-app body:is(.marketing, .diseno) :is(.mk-sidebar, .dw-sidebar) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ui-app body.diseno .dw-sidebar { flex-wrap: wrap; overflow: visible; position: static; }
  .ui-app body.diseno .dw-theme-box { margin-left: 0; grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; width: 100%; }
  .ui-app body.diseno :is(#dw-page-select, .dw-theme-box select) { width: 100%; max-width: none; }
  .ui-app body.diseno .dw-page-select-wrap { width: 100%; }
}

/* Formularios en fila: en celular, un campo debajo del otro (ancho completo) */
@media (max-width: 768px) {
  .ui-app .row { flex-direction: column; align-items: stretch; }
  .ui-app .col { flex: none; width: 100%; min-width: 0; }
  .ui-app :is(.card, .form-card) > table { display: block; max-width: 100%; overflow-x: auto; }
}

/* ─────────────────────────────────────────────────────────────
   7. CAMPUS DEL ALUMNO
   ───────────────────────────────────────────────────────────── */
body.campus .campus-wrap { max-width: 1320px; margin: 0 auto; padding: 24px clamp(16px, 2.5vw, 32px) 48px; gap: 24px; justify-content: center; }
body.campus .content-area { flex: 1 1 auto; min-width: 0; max-width: 980px; }
body.campus .sidebar {
  width: 300px; top: calc(var(--ax-top-h) + 24px); max-height: calc(100vh - var(--ax-top-h) - 48px);
  background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--radio-md); box-shadow: var(--sombra-sm);
  scrollbar-width: thin; scrollbar-color: var(--ax-line-2) transparent;
}
.ui-rol-alumno body.campus .profile-row { display: none; }
body.campus .profile-row { border-bottom: 1px solid var(--ax-line); }
body.campus .sb-nav { padding: 16px 14px 20px; }
body.campus .sb-nav > h3 { margin: 0 4px 14px; font-family: var(--font-cuerpo); font-size: .8rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ax-ink-3); }
body.campus .menu-curso { margin-bottom: 18px; }
body.campus .menu-curso + .menu-curso { padding-top: 16px; border-top: 1px solid var(--ax-line); }
body.campus .menu-curso-title { margin: 0 4px 8px; font-family: var(--font-titulos); font-size: .95rem; font-weight: 650; text-transform: none; letter-spacing: -.005em; color: var(--ax-ink); }
body.campus .menu-cat { margin-bottom: 2px; }
body.campus .menu-cat-hdr {
  padding: 8px 10px !important; border: 0 !important; border-radius: var(--radio-sm) !important;
  background: transparent !important; color: var(--ax-ink-2) !important;
  font-family: var(--font-cuerpo) !important; font-size: .9rem !important; font-weight: 500 !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
body.campus .menu-cat-hdr::before { content: none !important; }
body.campus .menu-cat-hdr > span:first-child { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
body.campus .menu-cat-hdr .ui-ic { width: 17px; height: 17px; color: var(--ax-ink-3); }
body.campus .menu-cat-hdr:hover { background: var(--ax-surface-2) !important; color: var(--ax-ink) !important; }
body.campus .menu-cat-hdr.open { color: var(--ax-ink) !important; font-weight: 600 !important; }
body.campus .menu-cat-hdr .arr { font-size: .6rem; color: var(--ax-ink-3); opacity: .8; }
body.campus .menu-items { padding-left: 18px; margin: 2px 0 6px 18px; border-left: 1px solid var(--ax-line); }
body.campus .menu-item {
  margin: 1px 0; padding: 7px 10px; border: 0 !important; border-radius: var(--radio-sm);
  background: transparent; color: var(--ax-ink-2); font-size: .87rem;
}
body.campus .menu-item:hover { background: var(--ax-surface-2); color: var(--ax-ink); transform: none; }
body.campus .menu-item.active { background: var(--ax-accent-soft); color: var(--ax-ink); font-weight: 600; }
body.campus .menu-item-nuevo .mi-label { font-weight: 600; color: var(--ax-ink); }
body.campus .dot-nuevo { background: var(--color-primario); }
body.campus .novedad-badge { background: var(--ax-bad); }
body.campus .sb-action {
  margin: 4px 0; padding: 8px 10px; border: 0; background: transparent; color: var(--ax-ink-2); font-weight: 500; font-size: .9rem;
}
body.campus .sb-action::before { content: none !important; }
body.campus .sb-action:hover { background: var(--ax-surface-2); color: var(--ax-ink); }
body.campus .sb-action .ui-ic { color: var(--ax-ink-3); }
body.campus .content-area .ca-header h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
body.campus #content-inner {
  background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm); padding: clamp(16px, 2.5vw, 28px);
}
body.campus #content-inner:is(:has(> .hm), :has(> .placeholder)) { background: none; border: 0; box-shadow: none; padding: 0; }
body.campus .placeholder .ui-ic { width: 40px; height: 40px; color: var(--ax-ink-3); }
/* El visor ya vive dentro de la tarjeta: sin segundo borde */
body.campus .cv-wrap { padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
body.campus .cv-title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-family: var(--font-titulos); font-size: 1.2rem; font-weight: 700; color: var(--ax-ink); }
body.campus .cv-title .ui-ic { color: var(--ax-accent-ink); }
body.campus .cv-wrap > .badge { margin-top: 12px; padding: 6px 12px; font-size: .84rem; text-decoration: none; background: var(--ax-surface-2); color: var(--ax-ink); }
body.campus #content-inner iframe { border: 1px solid var(--ax-line); border-radius: var(--radio-sm); background: var(--ax-surface-2); }

/* Inicio del alumno */
.hm { display: grid; gap: 20px; }
.hm-seguir {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px 24px;
  padding: 22px 24px;
  /* Razón: es la única acción principal del inicio; se distingue por color de marca plano, no por brillo */
  background: var(--ax-accent-soft);
  border: 1px solid var(--ax-accent-line); border-radius: var(--radio-lg); box-shadow: none;
}
.hm-seguir-txt { min-width: 0; }
.hm-etiqueta { margin: 0 0 4px; font-size: .82rem; font-weight: 600; color: var(--ax-accent-ink); }
.hm-seguir h3 { margin: 0; font-family: var(--font-titulos); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.hm-seguir p.hm-donde { margin: 6px 0 0; font-size: .88rem; color: var(--ax-ink-3); }
.hm-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hm-curso { padding: 18px 20px; background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--radio-md); box-shadow: var(--sombra-sm); }
.hm-curso h3 { margin: 0 0 14px; font-family: var(--font-titulos); font-size: 1.05rem; font-weight: 650; }
.hm-barra { height: 6px; border-radius: var(--radio-pill); background: var(--ax-surface-2); overflow: hidden; }
.hm-barra span { display: block; height: 100%; border-radius: inherit; background: var(--color-primario); transition: width .6s var(--ax-curva); }
.hm-datos { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: .84rem; color: var(--ax-ink-3); font-variant-numeric: tabular-nums; }
.hm-datos strong { color: var(--ax-ink); font-weight: 600; }
.hm-pend { background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--radio-md); box-shadow: var(--sombra-sm); overflow: hidden; }
.hm-pend h3 { margin: 0; padding: 14px 20px; font-family: var(--font-titulos); font-size: 1rem; font-weight: 650; border-bottom: 1px solid var(--ax-line); }
.hm-pend ul { list-style: none; margin: 0; padding: 0; }
.hm-pend li + li { border-top: 1px solid var(--ax-line); }
.hm-pend a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 20px; color: var(--ax-ink); text-decoration: none; transition: background var(--transicion); }
.hm-pend a:hover { background: var(--ax-surface-2); }
.hm-pend .hm-tit { font-weight: 600; font-size: .92rem; }
.hm-pend .hm-sub { grid-column: 1; font-size: .8rem; color: var(--ax-ink-3); }
.hm-pend .hm-fecha { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: .8rem; font-weight: 600; color: var(--ax-ink-2); white-space: nowrap; }
.hm-pend .hm-vencida { color: var(--ax-bad); }
.hm-vacio { margin: 0; padding: 18px 20px; font-size: .9rem; color: var(--ax-ink-3); }
/* Camino del curso (unidades como paradas): lo muestra el tema que lo usa (tema1.css) */
.hm-camino { display: none; }
/* Aviso al completar una unidad o el curso (campus.php → festejo()); cada tema le da su movimiento */
.ax-festejo {
  position: fixed; left: 50%; bottom: 28px; z-index: 120; transform: translateX(-50%);
  display: grid; gap: 2px; width: max-content; max-width: calc(100vw - 32px);
  padding: 14px 22px; border-radius: var(--radio-md);
  background: var(--ax-ink); color: var(--ax-surface); box-shadow: var(--ax-sombra-flotante);
}
.ax-festejo strong { font-family: var(--font-titulos); font-size: 1.05rem; }
.ax-festejo span { font-size: .88rem; opacity: .8; }
.ax-festejo.is-sale { opacity: 0; transition: opacity .5s; }
/* Piezas del motor de movimiento (ui/movimiento.js) que solo usan algunos temas */
.ax-seguidor { display: none; }
.t5-cinta { display: none; } /* cinta de la portada del tema 5 (la muestra tema5.css) */ /* bloque que sigue al link del menú público */
.ax-rod { display: inline-flex; line-height: 1; vertical-align: baseline; } /* contador de rodillo (--ax-contador: rodillo) */
.ax-rod-col { display: inline-block; height: 1em; overflow: hidden; }
.ax-rod-tira { display: block; width: 1ch; word-break: break-all; line-height: 1em; text-align: center; transform: translateY(calc(var(--d) * -1em)); }

/* ─────────────────────────────────────────────────────────────
   8. SITIO PÚBLICO
   ───────────────────────────────────────────────────────────── */
.ax-pub {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in oklch, var(--color-header-bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ax-pub-in { max-width: var(--ax-ancho); margin: 0 auto; height: var(--ax-pub-h); padding: 0 clamp(16px, 3vw, 32px); display: flex; align-items: center; gap: 24px; }
.ax-pub-marca { display: flex; align-items: center; flex-shrink: 0; }
.ax-pub-marca img { height: 100px; width: auto; display: block; filter: drop-shadow(0 0 10px var(--color-glow)); }
.ax-pub-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.ax-pub-nav a {
  padding: 8px 12px; border-radius: var(--radio-sm);
  color: rgba(244,247,251,.78); text-decoration: none; font-size: .93rem; font-weight: 500;
  transition: color var(--transicion), background var(--transicion);
}
.ax-pub-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.ax-pub-nav a[aria-current="page"] { color: #fff; }
.ax-pub-nav a.ax-pub-cta {
  margin-left: 10px; padding: 9px 16px;
  background: var(--color-primario); color: var(--ax-on-accent); font-weight: 600;
}
.ax-pub-nav a.ax-pub-cta:hover { background: var(--color-primario-hover); color: var(--ax-on-accent); }
.ax-pub-menu { display: none; margin-left: auto; width: 42px; height: 42px; border: 0; border-radius: var(--radio-sm); background: transparent; color: #fff; cursor: pointer; }
.ax-pub-menu .ui-ic { width: 22px; height: 22px; }
.ax-pub :focus-visible { outline-color: #fff; }

/* Aviso de sitio de demostración: en todas las páginas del sitio demo (públicas y del campus) */
.ax-demo { background: var(--ax-accent-soft); border-bottom: 1px solid var(--ax-accent-line); color: var(--ax-ink); }
.ax-demo-in {
  max-width: var(--ax-ancho); margin: 0 auto; padding: 10px clamp(16px, 3vw, 32px);
  display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; font-size: .88rem; line-height: 1.5;
}
.ax-demo-in strong { font-weight: 700; color: var(--ax-accent-ink); white-space: nowrap; }
.ax-demo-in span { color: var(--ax-ink-2); }

.ax-pie { margin-top: 0; background: var(--color-header-bg); color: rgba(244,247,251,.72); font-size: .92rem; }
.ax-pie-in {
  max-width: var(--ax-ancho); margin: 0 auto; padding: 56px clamp(16px, 3vw, 32px) 40px;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px;
}
.ax-pie-marca img { height: 44px; width: auto; border-radius: 4px; }
.ax-pie-marca p { max-width: 42ch; margin: 16px 0 0; line-height: 1.6; }
.ax-pie-redes { display: flex; gap: 8px; margin-top: 20px; }
.ax-pie-redes a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radio-sm); background: rgba(255,255,255,.06); transition: background var(--transicion); }
.ax-pie-redes a:hover { background: rgba(255,255,255,.14); }
.ax-pie-redes img { filter: grayscale(1) brightness(2.2); opacity: .8; transition: opacity var(--transicion); }
.ax-pie-redes a:hover img { opacity: 1; }
.ax-pie-col { display: flex; flex-direction: column; gap: 10px; }
.ax-pie h2, .ax-top h2 { text-align: left; background: none; -webkit-text-fill-color: currentColor; }
.ax-pie h2::after, .ax-pie h2::before { content: none !important; display: none !important; }
.ax-pie-col h2 { margin: 0 0 4px; font-family: var(--font-cuerpo); font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: #fff; }
.ax-pie-col a { color: rgba(244,247,251,.72); text-decoration: none; }
.ax-pie-col a:hover { color: #fff; }
.ax-pie-firma { display: none; } /* la muestra el tema que la usa (tema1.css) */
.ax-pie-base {
  max-width: var(--ax-ancho); margin: 0 auto; padding: 18px clamp(16px, 3vw, 32px) 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.08); font-size: .82rem; color: rgba(244,247,251,.5);
}
.ax-pie-base span:last-child { display: flex; gap: 18px; }
.ax-pie-base a { color: inherit; text-decoration: none; }
.ax-pie-base a:hover { color: #fff; }
/* Footer reducido del instituto (todas las páginas de la app): mismo color de marca que la barra superior */
.ax-pie-app { margin-top: 32px; background: var(--ax-top-bg); color: var(--ax-top-ink-2); font-size: .84rem; border-top: 1px solid var(--ax-top-line); }
.ax-pie-app-in {
  max-width: var(--ax-ancho); margin: 0 auto; padding: 22px clamp(16px, 3vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 14px 32px; flex-wrap: wrap;
}
.ax-pie-app-marca { display: flex; align-items: center; gap: 14px; }
.ax-pie-app-marca img { height: 40px; width: auto; filter: drop-shadow(0 0 8px var(--color-glow)); }
.ax-pie-app-marca span { display: flex; flex-direction: column; line-height: 1.4; }
.ax-pie-app-marca strong { color: var(--ax-top-ink); font-weight: 600; font-size: .9rem; }
.ax-pie-app-marca small { color: var(--ax-top-ink-2); }
.ax-pie-app-links { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; }
.ax-pie-app-links a { color: var(--ax-top-ink-2); text-decoration: none; transition: color var(--transicion); }
.ax-pie-app-links a:hover { color: var(--ax-top-ink); }
.ax-pie-app-links span { color: var(--ax-top-ink-2); }
.ax-pie-app :focus-visible { outline-color: var(--ax-top-ink); }
/* Campus: el footer ocupa el ancho del contenido, no queda pegado al índice */
body.campus .ax-pie-app { margin-top: 0; }
/* En todas las páginas de la app el pie va al final de todo, como en el campus:
   - si el contenido es corto, baja hasta el borde inferior de la pantalla
     (el body ocupa al menos toda la altura y el pie se pega abajo);
   - con menú lateral, ocupa todo el ancho; cuando aparece, el menú sube con la
     página en vez de quedar cortado (lo mueve el script de ui/cabecera.php). */
.ui-app body { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; }
.ax-pie-app { position: sticky; top: 100vh; top: 100dvh; }
@media (min-width: 1025px) {
  .ui-app.ui-lado .ax-pie-app { margin-left: calc(-1 * var(--ax-nav-w)); z-index: 85; }
}

/* WhatsApp (abajo) + mensajería interna (arriba): misma columna y mismo tamaño */
.ax-wa {
  position: fixed; right: 25px; bottom: 25px; z-index: 95;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; box-shadow: 0 8px 24px -6px rgba(0,0,0,.35);
  transition: transform var(--transicion);
}
.ax-wa:hover { transform: scale(1.06); }
.ui-publico .whatsapp-float { display: none !important; }

/* Bloques del sitio (index, nosotros): plantillas temas/tema1/*.php */
.ui-publico :is(.section-container, .mission-container, .contact-container) { max-width: var(--ax-ancho); margin: 0 auto; padding-left: clamp(16px, 3vw, 32px); padding-right: clamp(16px, 3vw, 32px); }
.ui-publico .section-title {
  margin: 0 0 12px; text-align: left;
  font-family: var(--font-titulos); font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1; text-transform: none;
  color: var(--ax-ink); background: none; -webkit-text-fill-color: currentColor;
}
.ui-publico .section-title::after { display: none; }

.ui-publico :is(.hero-section, .about-hero, .hero-split, .hero-vidrio, .hero-aurora, .hero-poster) {
  position: relative; overflow: hidden; text-align: left;
  padding: clamp(72px, 12vw, 148px) 0 clamp(64px, 9vw, 112px);
  /* Razón: la portada continúa la barra de la marca (mismo color de fondo) y cierra con una
     franja del color primario que la separa del contenido; sin halos ni degradés decorativos */
  background: var(--color-header-bg);
  border-bottom: 6px solid var(--color-primario);
  color: #fff;
}
.ui-publico :is(.hero-section, .about-hero, .hero-split, .hero-vidrio, .hero-aurora, .hero-poster)::before, .ui-publico :is(.hero-section, .about-hero, .hero-split, .hero-vidrio, .hero-aurora, .hero-poster)::after { content: none; }
/* Paneles internos de las portadas de cada tema: la base los deja neutros */
.ui-publico .hero-vidrio-panel { background: none; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; }
/* Portada partida (temas 2 y 4): fondo a todo el ancho, texto a la izquierda, panel a la derecha */
.ui-publico .hero-split {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: clamp(32px, 6vw, 80px);
  max-width: none; margin: 0;
  padding-inline: max(clamp(16px, 3vw, 32px), calc((100% - var(--ax-ancho)) / 2 + clamp(16px, 3vw, 32px)));
}
.ui-publico .hero-split .hero-content { max-width: none; margin: 0; padding: 0; }
.ui-publico .hero-split .cta-buttons { justify-content: flex-start; }
.ui-publico .hero-split-panel {
  display: grid; place-items: center; width: 100%; max-width: 420px; aspect-ratio: 1; justify-self: end;
  border-radius: var(--radio-lg); border: 1px solid rgba(255,255,255,.14); box-shadow: none;
  background: color-mix(in oklch, var(--color-primario) 12%, transparent);
}
/* Panel de la portada partida: el nombre de la institución, como cabecera de diario (identidad, no adorno) */
.ui-publico .hero-split-panel span { padding: 12%; font-family: var(--font-titulos); font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.05; text-align: center; text-wrap: balance; overflow-wrap: anywhere; color: #fff; opacity: 1; }
@media (max-width: 860px) { .ui-publico .hero-split { grid-template-columns: 1fr; } .ui-publico .hero-split-panel { display: none; } }
/* Portadas de los otros temas: misma columna que el resto del sitio (no pegadas al borde) */
.ui-publico :is(.hero-poster, .hero-vidrio) { max-width: none; margin: 0; }
.ui-publico .hero-poster { padding-inline: max(clamp(16px, 3vw, 32px), calc((100% - var(--ax-ancho)) / 2 + clamp(16px, 3vw, 32px))); }
.ui-publico .hero-poster .hero-content { max-width: none; margin: 0; padding: 0; }
.ui-publico .hero-vidrio-panel {
  margin-left: max(clamp(16px, 3vw, 32px), calc((100% - var(--ax-ancho)) / 2 + clamp(16px, 3vw, 32px)));
  margin-right: clamp(16px, 3vw, 32px);
}
.ui-publico .hero-vidrio-panel .hero-content { padding: 0; margin: 0; max-width: none; }
.ui-publico :is(.hero-split, .hero-vidrio, .hero-aurora, .hero-poster) .hero-content { position: relative; z-index: 1; }
.ui-publico .hero-content { max-width: var(--ax-ancho); margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); text-align: left; background: none; border: 0; box-shadow: none; }
.ui-publico .hero-content > * { max-width: 760px; }
.ui-publico .hero-title {
  margin: 0; font-family: var(--font-titulos); font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 700;
  line-height: 1.02; letter-spacing: -.03em; text-transform: none;
  color: #fff; background: none; -webkit-text-fill-color: #fff;
}
.ui-publico .hero-title::after { content: none !important; }
.ui-publico .hero-subtitle { margin: 22px 0 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: rgba(244,247,251,.78); max-width: 58ch; }
.ui-publico .cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; justify-content: flex-start; }
.ui-publico .cta-buttons :is(.btn-primary, .btn-secondary) { min-height: 48px; padding: 12px 22px; font-size: 1rem; }
.ui-publico .cta-buttons .btn-secondary { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.28); box-shadow: none; }
.ui-publico .cta-buttons .btn-secondary:hover { background: rgba(255,255,255,.12); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .ui-publico .hero-content > * { animation: ax-sube .7s var(--ax-curva) both; }
  .ui-publico .hero-content > :nth-child(2) { animation-delay: .08s; }
  .ui-publico .hero-content > :nth-child(3) { animation-delay: .16s; }
  @keyframes ax-sube { from { opacity: 0; transform: translateY(12px); } }
}

.ui-publico :is(.features-section, .courses-section, .mission-section, .mission-section-compact, .contact-section) {
  padding: clamp(56px, 8vw, 96px) 0; background: var(--ax-bg);
}
.ui-publico .features-section + .courses-section, .ui-publico .courses-section { background: var(--ax-surface); border-top: 1px solid var(--ax-line); border-bottom: 1px solid var(--ax-line); }
.ui-publico .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; margin-top: 36px; border-top: 1px solid var(--ax-line); }
.ui-publico .feature-card {
  padding: 28px 28px 28px 0; background: none; border: 0; border-radius: 0; box-shadow: none; text-align: left;
}
.ui-publico .feature-card + .feature-card { padding-left: 28px; border-left: 1px solid var(--ax-line); }
.ui-publico .feature-card:hover { transform: none; box-shadow: none; }
.ui-publico .feature-icon { display: none; }
.ui-publico .feature-title { margin: 0 0 10px; font-family: var(--font-titulos); font-size: 1.15rem; font-weight: 650; color: var(--ax-ink); text-transform: none; letter-spacing: -.01em; }
.ui-publico .feature-desc { margin: 0; color: var(--ax-ink-2); line-height: 1.6; font-size: .98rem; }

/* Base (sin layout propio del tema): "¿Por qué elegirnos?" como lista de razones, no como
   tres tarjetas iguales. Razón: son argumentos para leer de corrido; el título de la sección
   queda a la izquierda y las razones en filas separadas por una regla. */
.ui-publico .section-container:has(> .features-grid:not([class*="fg-"])) {
  display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 0 clamp(32px, 6vw, 80px); align-items: start;
}
.ui-publico .section-container:has(> .features-grid:not([class*="fg-"])) > .section-title { position: sticky; top: 96px; margin: 0; }
.ui-publico .features-grid:not([class*="fg-"]) { grid-template-columns: 1fr; margin-top: 0; }
.ui-publico .features-grid:not([class*="fg-"]) .feature-card,
.ui-publico .features-grid:not([class*="fg-"]) .feature-card + .feature-card { padding: 22px 0 24px; border-left: 0; border-bottom: 1px solid var(--ax-line); }
@media (max-width: 860px) {
  .ui-publico .section-container:has(> .features-grid:not([class*="fg-"])) { grid-template-columns: 1fr; }
  .ui-publico .section-container:has(> .features-grid:not([class*="fg-"])) > .section-title { position: static; margin-bottom: 20px; }
}
.ui-publico .courses-intro { max-width: 62ch; margin: 0 0 32px; color: var(--ax-ink-2); font-size: 1.05rem; text-align: left; }
.ui-publico .courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; margin-top: 28px; }
.ui-publico .courses-grid .course-card {
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--radio-md); box-shadow: none;
  color: var(--ax-ink); transition: border-color var(--transicion), box-shadow var(--transicion);
}
.ui-publico .courses-grid .course-card:hover { transform: none; border-color: var(--ax-line-2); box-shadow: var(--sombra-md); }
.ui-publico .courses-grid .course-image { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
.ui-publico .courses-grid .course-content { padding: 18px 20px 20px; text-align: left; }
.ui-publico .courses-grid .course-title { margin: 0 0 6px; font-family: var(--font-titulos); font-size: 1.1rem; font-weight: 650; text-transform: none; letter-spacing: -.01em; color: var(--ax-ink); }
.ui-publico .courses-grid .course-desc { margin: 0 0 14px; color: var(--ax-ink-2); font-size: .93rem; line-height: 1.55; }
.ui-publico .courses-grid .course-link { font-size: .9rem; font-weight: 600; color: var(--ax-accent-ink); }

.ui-publico .mission-section .cta-box {
  max-width: none; padding: clamp(32px, 5vw, 56px); text-align: left;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px 40px;
  background: var(--color-header-bg);
  color: #fff; border: 0; border-radius: var(--radio-lg); box-shadow: none;
}
.ui-publico .cta-box h3 { grid-column: 1; margin: 0; font-family: var(--font-titulos); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; color: #fff; text-transform: none; }
.ui-publico .cta-box p { grid-column: 1; margin: 0; color: rgba(244,247,251,.75); }
.ui-publico .cta-box .btn-primary { grid-column: 2; grid-row: 1 / span 2; min-height: 48px; padding: 12px 22px; }
.ui-publico .mission-section-compact { padding: clamp(28px, 4vw, 44px) 0; }
.ui-publico .mission-section-compact + .mission-section-compact { padding-top: 0; }
.ui-publico .mission-content {
  max-width: 72ch; margin: 0; padding: 0 0 clamp(28px, 4vw, 44px);
  background: none; border: 0; border-bottom: 1px solid var(--ax-line); border-radius: 0; box-shadow: none;
  color: var(--ax-ink-2); font-size: 1.02rem; line-height: 1.7; text-align: left;
}
.ui-publico .mission-content::before, .ui-publico .mission-content::after { content: none; }
.ui-publico .mission-content h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-family: var(--font-titulos); color: var(--ax-ink); font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; text-transform: none;
}
.ui-publico .mission-content h3 .ui-ic { color: var(--ax-accent-ink); width: 22px; height: 22px; }
.ui-publico .mission-content :is(p, li) { color: var(--ax-ink-2); }
.ui-publico .mission-content ul { margin: 12px 0 0; padding-left: 1.2em; }
.ui-publico .mission-content li { margin: 6px 0; padding: 0; border: 0; background: none; }
.ui-publico .mission-content li::marker { color: var(--ax-accent-ink); }
.ui-publico .mission-content li::before { content: none; }

.ui-publico .contact-container { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ui-publico .contact-form { padding: clamp(24px, 3vw, 36px); background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--radio-lg); box-shadow: var(--sombra-md); }
.ui-publico .contact-form form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ui-publico .contact-form form > :is(textarea, .btn-submit) { grid-column: 1 / -1; }
.ui-publico .contact-form .btn-submit { justify-self: start; min-height: 46px; padding: 12px 22px; }
.ui-publico :is(.form-title, .info-title) { margin: 0 0 20px; font-family: var(--font-titulos); font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; color: var(--ax-ink); text-transform: none; background: none; -webkit-text-fill-color: currentColor; }
.ui-publico .info-intro { color: var(--ax-ink-2); line-height: 1.6; margin: 0 0 28px; }
.ui-publico .info-block { padding: 14px 0; border-top: 1px solid var(--ax-line); }
.ui-publico .info-label { font-size: .8rem; font-weight: 600; color: var(--ax-ink-3); letter-spacing: .01em; text-transform: none; }
.ui-publico .info-value { margin-top: 2px; font-size: 1rem; color: var(--ax-ink); font-weight: 500; }

/* Páginas de acceso: ingresar, registro, recuperar clave */
.ui-publico :is(body.login, body.register, body.recuperar, body.reset) { background: var(--ax-bg); }
.ui-publico :is(body.login, body.register, body.recuperar, body.reset) :is(.login-page, .page, .wrap) { min-height: calc(100vh - var(--ax-pub-h)); display: grid; place-items: center; padding: 48px 16px; }
.ui-publico :is(body.login, body.register, body.recuperar, body.reset) .container {
  width: 100%; max-width: 420px; padding: clamp(24px, 4vw, 36px);
  background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--radio-lg); box-shadow: var(--ax-sombra-flotante);
  text-align: left;
}
.ui-publico :is(body.login, body.register, body.recuperar, body.reset) .container h2 {
  margin: 0 0 22px; text-align: left; font-family: var(--font-titulos); font-size: 1.6rem; font-weight: 700;
  letter-spacing: -.02em; text-transform: none; color: var(--ax-ink); background: none; -webkit-text-fill-color: currentColor;
}
.ui-publico :is(body.login, body.register, body.recuperar, body.reset) .container h2::after { display: none; }
.ui-publico :is(body.login, body.register, body.recuperar, body.reset) .container :is(input, select) { margin-bottom: 16px; }
.ui-publico :is(body.login, body.register, body.recuperar, body.reset) .container button[type="submit"] { width: 100%; min-height: 46px; margin-top: 4px; font-size: 1rem; }
.ui-publico :is(body.login, body.register, body.recuperar, body.reset) .links { margin-top: 20px; text-align: left; font-size: .9rem; color: var(--ax-ink-3); line-height: 1.9; }
.ui-publico :is(body.login, body.register, body.recuperar, body.reset) .links a { color: var(--ax-accent-ink); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   9. RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --ax-top-h: 60px; }
  .ui-app.ui-lado body { padding-left: 0; }
  .ax-solo-cel { display: inline-grid; }
  .ax-top { padding: 0 8px 0 6px; gap: 6px; }
  .ui-lado .ax-marca { width: auto; }
  .ax-marca img { height: 44px; }
  .ax-yo-txt { display: none; }
  .ax-yo { padding: 0; margin: 0 2px; }
  .ax-top-link span { display: none; }
  .ax-nav {
    width: min(86vw, 300px);
    transform: translateX(-102%);
    transition: transform .28s var(--ax-curva);
    box-shadow: var(--ax-sombra-flotante);
  }
  .ax-nav.is-abierto { transform: none; }

  /* Campus: el índice pasa a un panel que se abre desde la barra; el contenido queda primero */
  body.campus .campus-wrap { display: block; padding: 16px 16px 40px; }
  body.campus .sidebar {
    position: fixed; top: var(--ax-top-h); bottom: 0; left: 0; z-index: 80;
    width: min(88vw, 340px); max-height: none; margin: 0;
    border-radius: 0 var(--radio-md) var(--radio-md) 0; border-left: 0;
    transform: translateX(-102%); transition: transform .28s var(--ax-curva);
    box-shadow: var(--ax-sombra-flotante);
  }
  body.campus .sidebar.is-abierto { transform: none; }
}
@media (max-width: 860px) {
  .ax-top-nav a { padding: 7px 9px; font-size: .88rem; }
  :root { --ax-pub-h: 80px; }
  .ax-pub-marca img { height: 50px; }
  .ax-pub-menu { display: inline-grid; place-items: center; }
  .ax-pub-nav {
    position: fixed; top: var(--ax-pub-h); left: 0; right: 0; z-index: 85;
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: 12px 16px 20px;
    background: var(--color-header-bg); border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 24px 40px -20px rgba(0,0,0,.5);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform .22s var(--ax-curva), opacity .22s var(--ax-curva), visibility 0s linear .22s;
  }
  .ax-pub-nav.is-abierto { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .ax-pub-nav a { padding: 12px; font-size: 1rem; }
  .ax-pub-nav a.ax-pub-cta { margin: 10px 0 0; text-align: center; }
  .ui-publico .features-grid { grid-template-columns: 1fr; }
  .ui-publico .feature-card, .ui-publico .feature-card + .feature-card { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--ax-line); }
  .ui-publico .mission-section .cta-box { grid-template-columns: 1fr; }
  .ui-publico .cta-box .btn-primary { grid-column: 1; grid-row: auto; justify-self: start; }
  .ui-publico .contact-container { grid-template-columns: 1fr; }
  .ax-pie-in { grid-template-columns: 1fr 1fr; }
  .ax-pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ax-top-nav { margin-left: 2px; }
  .ax-yo { display: none; }
  .ax-top-nav a { padding: 6px 8px; font-size: .84rem; }
  .ax-marca img { height: 38px; }
  .ui-publico .contact-form form { grid-template-columns: 1fr; }
  .ax-pie-in { grid-template-columns: 1fr; gap: 28px; }
  .hm-seguir { grid-template-columns: 1fr; }
  .hm-seguir .ax-btn { width: 100%; }
  .ui-app :is(.wrap, .page-wrap) { padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@media print {
  .ax-top, .ax-nav, .ax-pub, .ax-pie, .ax-wa, .ax-velo { display: none !important; }
  .ui-app body, .ui-app.ui-lado body { padding: 0 !important; }
}