/* ========================================
   ROOT & ESTRUCTURA BASE
======================================== */

html {
  height: 100%;
  margin: 0;
  padding: 0;
  scrollbar-gutter: stable; /* Evita que el contenido salte al aparecer el scroll */
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; /* Estructura: NAV -> CONTENT -> FOOTER */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1d1d1f;
  background: #f5f5f7; /* Color gris claro Apple */
  overflow-x: hidden;
}

/* Gradiente superior sutil (Efecto profundidad) */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 400px;
  pointer-events: none;
  background: linear-gradient(to bottom, #ffffff 0%, rgba(245,245,247,0) 100%);
  z-index: -1;
}

/* ========================================
   CONTENEDORES PRINCIPALES
======================================== */

#nav-container {
  flex-shrink: 0;
  z-index: 1000; /* Siempre por encima */
}

/* El MAIN crece para empujar el footer abajo si hay poco contenido */
main, .panel-content {
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 44px; /* Altura exacta de tu Nav */
}

/* Contenedor central de contenido */
.panel-container, .main-container {
  width: 100%;
  max-width: 1180px; /* Ancho estándar de Apple */
  margin: 0 auto;
  padding: 32px 3rem; /* Espaciado lateral pro */
  box-sizing: border-box;
}

#footer-container {
  flex-shrink: 0;
  background: #f5f5f7;
}

/* ========================================
   RESPONSIVE (MOBILE)
======================================== */

@media (max-width: 768px) {
  .panel-container, .main-container {
    padding: 24px 1.2rem calc(24px + env(safe-area-inset-bottom)) 1.2rem;
  }
}