/*
  CurricuLabs — Portada institucional (index.html)
  Puerta de entrada con la misma identidad de los paneles: header
  institucional (.app-header, igual que Panel Maestro/Mi Perfil) en vez de
  un hero de landing. Dos estados togglados por JS según sesión real:
  anónimo (puerta pública de ingreso) y autenticado (usuario conectado +
  accesos según rol — todos los paneles para super_admin, uno solo para el
  resto).

  Las tarjetas (.index-card) toman su color identificativo del sistema de
  tokens por rol ya existente (css/base/tokens.css): cada tarjeta lleva su
  propio [data-theme-role], así que --role-header/--role-badge-bg quedan
  scoped a esa tarjeta sin tocar el header de la página.
*/

/* Wrapper con id="btnCerrarSesion" (ver index.html): hereda la posición del
   header que ya define app-shell.css para ese id exacto, así que acá solo
   hace falta el layout interno de sus acciones públicas o de cierre de
   sesión, toggladas por JS. */
.index-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.index-header__actions > [hidden],
.index-header__account [hidden],
.index-section[hidden],
.index-section__estado[hidden] {
  display: none !important;
}

.index-header__bar .index-header__start {
  grid-area: title;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  justify-self: center;
}

.index-header__bar .index-header__center {
  display: none;
}

.index-header__ciclo {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-on-brand-secondary);
}

/* Bloque de cuenta autenticada: nombre+rol arriba, escuela activa debajo —
   dos líneas dentro del mismo .app-header__account que ya usan los paneles. */
.index-header__account {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}

.index-header__identidad {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.index-header__escuela {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  min-height: 1.25rem;
}

.index-header__escuela-label {
  color: var(--color-text-on-brand-secondary);
}

/* Select compacto sobre el fondo oscuro del header — mismo .input de
   form.css, ajustado en tamaño/color para convivir con el resto del header. */
.index-header__escuela-select {
  width: auto;
  max-width: 12rem;
  padding: 0.2rem 0.5rem;
  font-size: var(--text-xs);
  background-color: var(--color-on-brand-wash-weak);
  border-color: var(--color-on-brand-wash-strong);
  color: var(--color-text-on-brand);
}

.index-header__escuela-select:focus-visible {
  border-color: var(--color-text-on-brand);
}

/* ---------- Secciones de accesos (demo / según rol / super_admin) ----------
   Un solo componente reutilizado en los tres casos: superficie clara con
   borde suave y grilla de tarjetas. */
.index-section {
  max-width: var(--width-content-wide);
  margin: var(--space-10) auto 0;
  padding: var(--space-6) var(--space-4) var(--space-16);
}

.index-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.index-section__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.index-section__hint {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.index-section__estado {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.index-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
}

/* ---------- Tarjeta de acceso ---------- */
.index-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.index-card__notification {
  position: absolute;
  top: -0.55rem;
  right: -0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 0.35rem;
  border: 2px solid var(--color-surface);
  border-radius: 999px;
  background-color: var(--color-danger, #c7352c);
  color: #fff;
  box-shadow: var(--shadow-sm);
  font-size: var(--text-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.index-card:hover,
.index-card:focus-visible {
  border-color: var(--role-header, var(--color-brand-secondary));
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.index-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background-color: var(--role-badge-bg);
  color: var(--role-header, var(--color-brand-primary));
}

.index-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.index-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.index-card__title {
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.index-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.index-card__cta {
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--role-header, var(--color-text-link));
}

@media (min-width: 768px) {
  .index-header__bar {
    grid-template-areas: "logo title account";
  }

  .index-header__bar .index-header__start {
    grid-area: title;
  }
}