/* ============================================================
   Gastillo — Layout: estructura de pantallas, responsive, grid
   ============================================================ */

#app { min-height: 100dvh; }

/* Contenedor de página estándar (móvil-first, centrado) */
.screen {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-4);
  /* deja hueco para BottomNav + FAB */
  padding-bottom: calc(var(--bottomnav-h) + var(--s-8) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  gap: var(--s-4);
}

/* Pantallas sin nav inferior (login, formularios full) */
.screen-plain {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-5);
  min-height: 100dvh;
  display: flex; flex-direction: column;
}

.screen-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
}

/* Centrado vertical (login, estados de carga full-screen) */
.center-screen {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--s-5);
}

/* Grid de cards responsive */
.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

/* Logo / marca */
.brand {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: 700; font-size: 20px;
}
.brand .brand-mark {
  width: 32px; height: 32px; border-radius: var(--r-md);
  background: var(--brand-gradient);
  display: grid; place-items: center; color: #fff; font-weight: 800;
}

/* Sidebar (escritorio) oculta en móvil */
.sidebar { display: none; }

/* ============ Responsive ============ */

/* Tablet+ : más aire */
@media (min-width: 768px) {
  .screen, .screen-plain { padding-left: var(--s-5); padding-right: var(--s-5); }
}

/* Escritorio: layout de 2 columnas y sidebar en lugar de bottom-nav */
@media (min-width: 1024px) {
  .screen {
    max-width: var(--content-max-desktop);
    padding-bottom: var(--s-8);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* elementos que ocupan el ancho completo en la cuadrícula */
  .screen > .screen-header,
  .screen > .full-col { grid-column: 1 / -1; }

  .bottom-nav { display: none; }
  .fab { bottom: var(--s-6); }

  .grid-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Dos columnas explícitas para layouts internos */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 380px) { .cols-2 { grid-template-columns: 1fr; } }