/*
  CurricuLabs — Ajustes responsive
  Breakpoints alineados a los de tailwind-css-patterns (sm 640 / md 768 / lg 1024)
  para que este vocabulario sea consistente si más adelante se usa Tailwind
  en otro panel. Mobile-first: las reglas base ya son las de teléfono.
  Probado en 375 / 640 / 768 / 1024 / 1440px — ver IDENTIDAD_VISUAL_CURRICULABS.md.

  La distribución del header (grid con áreas nombradas, en todos los anchos)
  vive completa en css/layout/app-shell.css — acá solo quedan los ajustes de
  tamaño de fuente/ancho del correo por breakpoint y el resto de la página
  (tarjetas, formularios, espaciado) que no depende de esa grilla.
*/

/* ======================================================================
   Base (< 640px, teléfono)
   ====================================================================== */
.app-header__email {
  max-width: 9.5rem;
}

.app-header__title {
  font-size: 1.25rem; /* 20px — un paso por encima de --text-md (18px) */
}

.field-row {
  grid-template-columns: 1fr;
}

.card {
  padding: var(--space-5);
}

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

.app-main__column {
  gap: var(--space-6);
}

/* ======================================================================
   Tablet chica en adelante (>= 640px)
   ====================================================================== */
@media (min-width: 640px) {
  .app-header__email {
    max-width: 10rem;
  }

  .app-header__title {
    font-size: 1.5rem; /* 24px — un paso por encima de --text-lg (22px), sin igualar la marca (28px) */
  }

  .field-row {
    grid-template-columns: 1fr 1fr;
  }

  .card {
    padding: var(--space-8);
  }

  .app-main {
    padding: var(--space-8) var(--space-6) var(--space-16);
  }

  .app-main__column {
    gap: var(--space-8);
  }
}

/* ======================================================================
   Tablet amplia / escritorio (>= 768px): el correo tiene más espacio antes
   de truncarse — la distribución en sí (grilla de 3 columnas) está definida
   en app-shell.css.
   ====================================================================== */
@media (min-width: 768px) {
  .app-header__email {
    max-width: 13rem;
  }
}

/* ======================================================================
   Notebook / escritorio (>= 1024px): más aire entre tarjetas; el header
   se mantiene compacto a propósito (no vuelve a crecer con el viewport).
   ====================================================================== */
@media (min-width: 1024px) {
  .app-main__column {
    gap: var(--space-10);
  }

  .app-header__email {
    max-width: 16rem;
  }
}

/* Escritorio amplio (>= 1440px): el contenedor exterior (--container-max)
   y los anchos de contenido semánticos ya evitan que la página se vea
   como una versión móvil centrada — no se agrega padding lateral extra
   para no generar márgenes vacíos sin propósito. El correo puede mostrarse
   casi siempre completo a este ancho. */
@media (min-width: 1440px) {
  .app-header__email {
    max-width: 22rem;
  }
}

/* ======================================================================
   Teléfono angosto (<= 400px aprox.): evita que los grupos de botones y
   la cuenta del usuario se compriman de forma ilegible.
   ====================================================================== */
@media (max-width: 24rem) {
  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .modal__footer {
    flex-direction: column-reverse;
  }

  .app-header__email {
    max-width: 7.5rem;
  }
}

/* La grilla de horarios nunca se comprime por debajo de un tamaño legible:
   en vez de eso, scroll horizontal controlado solo dentro de .table-scroll
   (nunca scroll horizontal de toda la página). */
.table-scroll {
  max-width: 100%;
}