/* =============================================================
   LAYOUT — Challenge Mercado Libre
   Fuente: Figma node 31:290
   Mobile-first · 375px base · 768px tablet
   Grid: 4 cols · margin 16px · gutter 12px
   ============================================================= */

/* -----------------------------------------------------------
   RESET MÍNIMO
----------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  background: var(--color-neutral-100);
  -webkit-font-smoothing: antialiased;
}

/* -----------------------------------------------------------
   APP SHELL
   Ocupa toda la pantalla y organiza las 3 zonas:
   topbar fijo · contenido scrolleable · bottom nav fijo
----------------------------------------------------------- */
.app {
  display:        flex;
  flex-direction: column;
  height:         100dvh;
  width:          100%;
  background:     var(--color-neutral-100);
  position:       relative;
}

/* Wrapper animado — todo lo que está DEBAJO del topbar.
   El topbar queda fuera para que no se mueva durante las transiciones. */
.page-content {
  flex:           1;
  display:        flex;
  flex-direction: column;
  padding-top:    calc(64px + max(36px, env(safe-area-inset-top, 36px)));
  overflow:       hidden;
  width:          100%;
}

/* -----------------------------------------------------------
   TOPBAR
   Status bar (36px) + Navbar (56px + 4px padding) = 100px total
----------------------------------------------------------- */
.topbar {
  position: fixed;
  top:       0;
  left:      0;
  right:     0;
  z-index:   100;
  background: var(--color-fill-primary);
  border-bottom: var(--border-width) solid #e6e6e6;
}

.status-bar {
  height: max(36px, env(safe-area-inset-top, 36px));
  background: var(--color-fill-primary);
}

/* Navbar → ver components.css */

/* -----------------------------------------------------------
   CONTENIDO PRINCIPAL — scrolleable
----------------------------------------------------------- */
.app-content {
  flex:        1;
  overflow-y:  auto;
  overflow-x:  hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* -----------------------------------------------------------
   CONTAINER — margin 16px, gutter 12px
   En mobile: columna única (flex)
   En tablet: grilla de 4 columnas
----------------------------------------------------------- */
.container {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24) var(--space-16) var(--space-40);
  width: 100%;
}

/* -----------------------------------------------------------
   MÓDULO — card de contenido base
   Siempre ocupa el 100% del container (16px margin en cada lado)
----------------------------------------------------------- */
.module {
  width: 100%;
  background: var(--color-neutral-white);
  border: var(--border-width) solid #e6e6e6;
  border-radius: var(--radius-6);
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  overflow: hidden;
}

.module__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
  color: var(--color-text-heading);
  padding-block: var(--space-4);
}

.module__body {
  flex: 1;
}

/* Placeholder de contenido (wireframe) */
.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  background: var(--color-info-disable);
  border: var(--border-width) dashed var(--color-info-primary);
  border-radius: var(--radius-8);
  padding: var(--space-10);
  min-height: 200px;
  width: 100%;
  height: 100%;
}

.placeholder__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
  color: var(--color-fill-accent);
  text-align: center;
}

/* -----------------------------------------------------------
   BOTTOM NAV — home indicator (iOS)
----------------------------------------------------------- */
.bottom-nav {
  flex-shrink: 0;
  height: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--space-8);
  background: var(--color-neutral-white);
}

.home-indicator {
  width: 134px;
  height: 5px;
  background: var(--color-text-heading);
  border-radius: 100px;
}

/* Fila responsive: columna en mobile, fila en desktop */
.desktop-row {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-12);
}

/* -----------------------------------------------------------
   BREAKPOINT DESKTOP — 768px+
   Contenido centrado con 200px de padding lateral.
   Hero (.header-dark) y topbar siguen siendo 100% ancho.
   El comportamiento mobile queda intacto.
----------------------------------------------------------- */
@media (min-width: 768px) {

  /* En desktop env(safe-area-inset-top) resuelve a 0px (no hay notch),
     por lo que fijamos los valores originales en píxeles. */
  .status-bar {
    height: 36px;
  }

  .page-content {
    padding-top: 100px; /* 36px status + 64px navbar */
  }

  /* Contenido centrado con padding generoso */
  .container {
    padding-inline: 200px;
  }

  /* Fila de dos columnas para desktop (N1: banner + savings) */
  .desktop-row {
    flex-direction: row;
    gap:            var(--space-16);
  }

  .desktop-row > * {
    flex: 1;
    min-width: 0;
  }

}