/* ============================================================
   fix.css — INMO GRAN CANARIA Auditoría IA
   Overrides sobre el bundle original (AI Studio) para corregir:
   - Móvil: la app forzaba overflow:hidden + alturas de viewport
     en todos los niveles, el body NUNCA hacía scroll y la
     columna de resultados quedaba aplastada/oculta.
   - Desktop: contenedor max-w-7xl (1280px) sin aire -> sensación
     de ventana "muy amplia" a tope de pantalla.
   ============================================================ */

/* ---------- MÓVIL (flex-col de la app: <1024px) ---------- */
@media (max-width: 1023px) {
  /* Permitir scroll vertical natural */
  html, body {
    height: auto !important;
    overflow: visible !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Contenedor raíz: quitar bloqueo de altura y overflow */
  #root > div {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  /* MAIN: altura natural, sin recorte */
  #root main {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  /* Contenedor interior de columnas: apilar y dejar fluir */
  #root main > div {
    height: auto !important;
    overflow: visible !important;
    flex-direction: column !important;
  }

  /* Ambas columnas: altura natural, sin scroll interno forzado */
  #root main > div > div {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  /* Footer: visible en móvil, apilado para que no desborde */
  #root > div > footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    overflow: hidden !important;
  }
  #root > div > footer > div {
    flex-wrap: wrap !important;
  }
}

/* ---------- DESKTOP (>=1024px): contenido menos panorámico ---------- */
@media (min-width: 1024px) {
  #root main > div {
    max-width: 72rem !important; /* 1152px en vez de 1280px */
  }
}