/* ============================================================================
   HAYESHI · Layout — el armazón del dashboard
   ============================================================================

   Cabecera, navegación, contenedor, región de mensajes y la pantalla de acceso.
   Todo lo que envuelve al contenido. Los componentes que van ADENTRO
   (tarjetas, tablas, chips, botones, formularios) están en components.css.

   Origen: templates/dashboard/base.html + static/css/instructor.css:69-243.

   ── NAVEGACIÓN SUPERIOR, NO LATERAL ───────────────────────────────────────
   Cinco secciones en fase 1. Una barra lateral gasta 240px de ancho fijo para
   listar cinco enlaces, y en un celular termina siendo un cajón deslizable —
   o sea, un menú superior con más piezas móviles. Se conserva la barra
   superior de Django, que además ya es la que el dueño tiene memorizada.

   ── EL MENÚ MÓVIL NO USA JAVASCRIPT ───────────────────────────────────────
   templates/dashboard/base.html:112-119 abre el menú con un listener de
   `click` registrado en un `<script>` al final del body. Con Turbo Drive eso
   se rompe (convención 11) y por eso Turbo Drive va apagado — pero la
   dependencia sigue ahí: si el JS falla o tarda, en un celular NO HAY
   NAVEGACIÓN. Acá el menú es `<details>/<summary>`: lo abre el navegador,
   funciona sin JS, y `<summary>` ya es enfocable y anuncia su estado
   expandido/colapsado a los lectores de pantalla sin una sola línea de ARIA.
   -------------------------------------------------------------------------- */

/* ── Contenedor ─────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */

.header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-target);
  padding-block: var(--space-3);
}

/* Marca. El nombre sale de Academy::NAME (app/models/academy.rb), no de una
   fila de base de datos: no hay tabla de organización (convención 1). */
.header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-xl);
  white-space: nowrap;
}

.header__brand:hover {
  color: var(--color-text);
}

/* «Admin». Distingue el panel del sitio público en una captura de pantalla,
   que es como el dueño manda las cosas por WhatsApp. */
.header__badge {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* ── Navegación de escritorio ───────────────────────────────────────────── */

.header__nav {
  display: none;
}

.header__session {
  display: none;
}

@media (min-width: 900px) {
  .header__nav,
  .header__session {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .header__nav {
    flex: 1;
    margin-inline-start: var(--space-4);
  }

  .header__session {
    gap: var(--space-3);
  }

  /* Con el menú de escritorio visible, el desplegable sobra. */
  .header__menu {
    display: none;
  }
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-link:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

/* Sección actual. Lleva SIEMPRE `aria-current="page"` en el HTML: el estilo se
   engancha del atributo y no de una clase, así que es imposible pintar la
   pestaña activa y olvidar el anuncio para lectores de pantalla — o al revés.
   templates/dashboard/base.html:33-57 usa `.active`, una clase sin ningún
   significado semántico. */
.nav-link[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}

.header__user {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Menú móvil (`<details>`) ───────────────────────────────────────────── */

.header__menu {
  position: relative;
}

/* Oculta el triangulito nativo en los dos motores que lo dibujan distinto. */
.header__menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  cursor: pointer;
}

.header__menu > summary::-webkit-details-marker {
  display: none;
}

/* Las tres rayitas, dibujadas con bordes: sin imagen, sin icon font, sin SVG
   inline repetido en cada página. */
.header__menu-icon {
  width: 18px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  position: relative;
}

.header__menu-icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 5px;
  border-top: 2px solid currentColor;
}

.header__menu[open] > summary {
  background: var(--color-surface-hover);
}

.header__menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--space-2));
  min-width: 220px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* En el desplegable los enlaces son de ancho completo y con área táctil
   generosa: se usan con el pulgar, de pie, en la academia. */
.header__menu-panel .nav-link {
  min-height: var(--tap-target);
  padding-inline: var(--space-3);
}

.header__menu-panel hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-2);
}

/* ── Contenido ──────────────────────────────────────────────────────────── */

.main {
  padding-block: var(--space-6) var(--space-12);
}

/* Encabezado de página: título + acciones. `flex-wrap` para que en un celular
   el botón «Nuevo estudiante» caiga debajo del título en vez de estrujarlo.
   instructor.css:245-256. */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.page-header__text {
  min-width: 0;
}

.page-header__subtitle {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Pie ────────────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

/* ── Pantalla de acceso ─────────────────────────────────────────────────── */
/* instructor.css:828-874. La usa la vista de inicio de sesión, que renderiza
   con el layout `application` (sin cabecera: quien no entró todavía no tiene a
   dónde navegar). */

.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-4);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
}

.auth-card__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.auth-card__subtitle {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

.auth-card__footer {
  text-align: center;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
}