/*
  CurricuLabs — App shell
  Header superior + contenedor principal. Misma forma general que el legacy
  (header horizontal fijo arriba, sin sidebar) — ver AUDITORIA_FRONTEND_CURRICULABS.md,
  que documenta que ningún panel de escritorio del legacy usa sidebar lateral.

  Corrección de distribución (ver IDENTIDAD_VISUAL_CURRICULABS.md): el header
  usa CSS Grid con áreas nombradas en TODOS los anchos (nunca flexbox para
  centrar el título). Mobile-first: la plantilla base ya es la de teléfono
  (logo + cerrar sesión en la primera fila, título centrado en la segunda,
  ficha de cuenta en la tercera); a partir de 768px cambia a 3 columnas
  reales (`1fr auto 1fr`) con el título en la columna central. No se usa la
  propiedad `order` en ningún punto — es la causa del bug anterior (el título
  quedaba a la izquierda): `order` se aplica también dentro de CSS Grid, y un
  `order` que solo se reseteaba para el título y no para marca/cuenta hacía
  que el navegador reordenara las columnas igual que en flexbox.

  El fondo del header se resuelve vía tokens de rol (--role-header, con
  fallback institucional) para que la misma página cambie de identidad según
  el rol del usuario sin duplicar CSS.
*/

.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--role-header);
  color: var(--color-text-on-brand);
  box-shadow: var(--shadow-sm);
  border-bottom: 2px solid var(--role-header-active);
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

/* ---------- Plantilla base (< 768px, teléfono/tablet chica) ----------
   Fila 1: logo | cerrar sesión — Fila 2: título (centrado, ancho completo)
   — Fila 3: ficha de cuenta (rol + correo, ancho completo). El botón
   "Cerrar sesión" vive dentro de `.app-header__end` en el DOM, pero
   `display: contents` en `.app-header__end` lo "aplana" para que tanto el
   botón como `.app-header__account` sean celdas independientes de esta
   grilla — así el botón puede ir arriba (junto al logo) sin mover el correo. */
.app-header__bar {
  max-width: var(--container-max);
  min-height: var(--header-height);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "logo   close"
    "title  title"
    "account account";
  align-items: center;
  row-gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.app-header__start {
  grid-area: logo;
  display: flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
}

.app-header__center {
  grid-area: title;
  text-align: center;
  min-width: 0;
}

.app-header__end {
  display: contents;
}

#btnCerrarSesion {
  grid-area: close;
  justify-self: end;
}

.app-header__account {
  grid-area: account;
  justify-self: start;
}

/* ---------- Escritorio / tablet amplia (>= 768px): 3 columnas reales ----------
   `1fr auto 1fr` es lo único que centra el título de verdad respecto del
   ancho total del header, sin importar cuánto más ancha sea la ficha de
   cuenta (columna derecha) que el logo (columna izquierda). */
@media (min-width: 768px) {
  .app-header__bar {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "logo title account";
    row-gap: 0;
    padding: var(--space-3) var(--space-6);
  }

  .app-header__center {
    justify-self: center;
  }

  /* En escritorio la ficha de cuenta vuelve a ser un solo bloque visual:
     rol+correo arriba, "Cerrar sesión" debajo, ambos alineados al extremo
     derecho del header (mismo borde final). */
  .app-header__end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    grid-area: account;
    justify-self: end;
  }

  #btnCerrarSesion {
    justify-self: auto;
  }

  .app-header__account {
    justify-self: auto;
  }
}

/* ---------- Navegación principal dentro del encabezado ----------
   Segunda franja del propio <header>, no una barra blanca aparte — el menú
   de secciones de un panel (Panel Profesores hoy) vive sobre el mismo fondo
   de rol que el resto del header. Genérico y reutilizable: cualquier panel
   con pestañas puede incluir un <nav class="app-header__nav"> igual a este;
   Mi Perfil simplemente no lo usa y el header le queda idéntico a como
   estaba (esta regla no afecta a páginas que no la incluyen en su HTML). */
.app-header__nav {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-3);
  border-top: 1px solid var(--color-on-brand-wash-weak);
}

@media (min-width: 768px) {
  .app-header__nav {
    padding: 0 var(--space-6) var(--space-3);
  }
}

/* El scroll horizontal del menú (heredado de .tabs__scroll) necesita algo
   de aire arriba para no pegarse al borde superior de esta franja. */
.app-header__nav .tabs__scroll {
  padding-top: var(--space-3);
}

.app-header__nav .tabs__list {
  justify-content: center;
  padding: 0;
}

/* Indicación discreta de que el menú puede desplazarse horizontalmente en
   pantallas angostas: un desvanecido sutil en el borde derecho, del color
   del propio header — no interactivo, no interfiere con el scroll real. */
.app-header__nav::after {
  content: "";
  position: absolute;
  top: var(--space-3);
  right: 0;
  bottom: 0;
  width: 1.75rem;
  background: linear-gradient(to right, transparent, var(--role-header));
  pointer-events: none;
}

@media (min-width: 1024px) {
  /* En escritorio amplio el menú suele entrar completo — el desvanecido ya
     no aporta información real y podría leerse como un elemento suelto. */
  .app-header__nav::after {
    display: none;
  }
}

.app-header__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-on-brand);
  line-height: var(--leading-tight);
  margin: 0;
}

.app-header__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-on-brand-secondary);
  margin: 0 0 0.15rem;
}

/* ---------- Marca CurricuLabs (enlace al inicio) ---------- */
/* La marca ES el acceso a index.html — no hay botón "Inicio" aparte.
   Área táctil generosa (padding) para que el enlace sea fácil de presionar
   sin depender de que el texto solo mida ~28px de alto. */
.brand-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  margin: calc(var(--space-2) * -1) 0 calc(var(--space-2) * -1) calc(var(--space-2) * -1);
  border-radius: var(--radius-md);
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.brand-link:hover {
  opacity: 0.85;
}

.brand-link:active {
  opacity: 0.7;
}

.brand-link:focus-visible {
  outline: 2px solid var(--color-text-on-brand);
  outline-offset: 2px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  white-space: nowrap;
}

.brand__curricu {
  color: var(--color-text-on-brand);
}

.brand__labs {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 0.5em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
  background-color: var(--color-accent);
  padding: 0.25em 0.55em;
  border-radius: var(--radius-sm);
  transform: translateY(-0.32em);
}

/* ---------- Cuenta del usuario (rol · correo · cerrar sesión) ---------- */
.app-header__account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.app-header__email {
  font-size: var(--text-xs);
  color: var(--color-text-on-brand-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 13rem;
}

.app-main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}

/* ---------- Anchos de contenido reutilizables ----------
   Tres anchos semánticos por tipo de pantalla, no por panel puntual:
   - .content-narrow: perfiles, login, registro, formularios simples.
   - .content-medium: paneles administrativos comunes (tabs + tablas moderadas).
   - .content-wide:   horarios, planillas, grillas grandes, Base de Datos.
   Mi Perfil usa .content-narrow. Los otros dos quedan listos, sin usar
   todavía, para cuando se reconstruyan paneles más complejos. */
.content-narrow,
.content-medium,
.content-wide {
  margin-inline: auto;
}

.content-narrow { max-width: var(--width-content-narrow); }
.content-medium { max-width: var(--width-content-medium); }
.content-wide   { max-width: var(--width-content-wide); }

.app-main__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.demo-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 600;
}

.demo-banner svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

/* ---------- Modal "Mis horarios de trabajo" ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 50;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 34rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

/* Variante para formularios con más campos (p. ej. el informe formal de
   Asistencia: ámbito + categoría + importancia + detalle) — mismo
   componente, solo más ancho. */
.modal--wide {
  max-width: 46rem;
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
}

.modal__subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: 0.15rem;
}

.modal__close {
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
}
.modal__close:hover {
  color: var(--color-text);
  background-color: var(--color-surface-secondary);
}
.modal__close svg {
  width: 1.15rem;
  height: 1.15rem;
}

.modal__body {
  padding: var(--space-4) var(--space-5);
  overflow: auto;
  flex: 1 1 auto;
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface-secondary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}