/* =========================================================================
   COSTA8 — CAPA RESPONSIVE
   Corrige los desbordes horizontales y el tamaño de los elementos táctiles
   medidos con un navegador real en 320, 375, 414, 768, 1024 y 1440 px.
   Se carga al final para no pelear con los estilos de cada página.
   ========================================================================= */

/* ---------- 1. Red de seguridad: nunca scroll horizontal fantasma ---------- */
html, body {
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* Una imagen o video nunca debe empujar el ancho de la página */
img, video, iframe, embed, object {
  max-width: 100%;
}
img { height: auto; }

/* ---------- 2. Contenedores flex/grid que se negaban a encoger ---------- */
/* min-width:0 es lo que permite que un hijo con mucho texto se encoja
   en vez de estirar la página (la causa del desborde en el menú). */
header > div,
header nav,
.main-header-inner,
.main-nav-bar,
[style*="overflow-x: auto"],
[style*="overflow-x:auto"] {
  min-width: 0 !important;
  max-width: 100% !important;
}
.main-nav-bar,
nav[style*="overflow-x"] {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.main-nav-bar::-webkit-scrollbar,
nav[style*="overflow-x"]::-webkit-scrollbar { display: none; }

/* ---------- 3. Menú de escritorio en pantallas pequeñas ---------- */
/* Debajo de 860 px manda el menú hamburguesa: la barra horizontal de
   enlaces desaparece para no cortar palabras ni crear scroll lateral. */
@media (max-width: 860px) {
  .main-nav-bar,
  header nav {
    display: none !important;
  }
}

/* ---------- 4. Tablas y bloques de código ---------- */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre, code, .code {
  max-width: 100%;
  overflow-x: auto;
  word-break: break-word;
}

/* ---------- 5. Rejillas de tarjetas: se acomodan solas ---------- */
#experiencias-grid,
#servicios-grid,
#grid,
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* ---------- 6. Teléfonos ---------- */
@media (max-width: 640px) {
  /* Márgenes del encabezado y del contenido */
  header { padding-left: 14px !important; padding-right: 14px !important; }
  .main-header-wrapper { padding: 10px 14px !important; }

  /* Títulos que se salían */
  h1 { font-size: clamp(1.45rem, 6.2vw, 2.1rem) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(1.25rem, 5.2vw, 1.7rem) !important; line-height: 1.25 !important; }
  h3 { font-size: clamp(1.05rem, 4.4vw, 1.35rem) !important; }
  .hero-title, .titulo-hero { font-size: clamp(1.6rem, 8vw, 2.4rem) !important; }

  /* Párrafos largos sin justificar (evita huecos y cortes) */
  p, li { overflow-wrap: break-word; }

  /* Campos: 16 px evita el zoom automático de iOS y los hace cómodos */
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100%;
  }
  input[type="file"] { font-size: 13px !important; }

  /* Botones cómodos para el dedo */
  button, .btn, a.btn, .btn-primary, .btn-ghost {
    min-height: 42px;
  }
  .btn-sm, .chip, .tab { min-height: 34px; }

  /* Modales: caben en pantalla y hacen scroll por dentro */
  .modal, .c8-modal, [id^="modal-"] > div {
    max-width: calc(100vw - 20px) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
  }
  .modal-bg { padding: 10px !important; }

  /* Barra lateral del menú: nunca más ancha que la pantalla */
  #mobile-drawer {
    width: min(300px, 86vw) !important;
    right: -100vw;
  }

  /* Rejillas de dos columnas pasan a una */
  .row, .row-2, .grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* Imágenes tipo banner no se recortan raro */
  .card-img, .listing-card img, .rest-card img {
    max-height: 220px;
    object-fit: cover;
  }

  /* El botón flotante del tema no tapa la barra inferior */
  .c8-theme-fab {
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    right: 12px !important;
  }
}

/* ---------- 6-bis. Rejillas declaradas en línea con columnas fijas ---------- */
/* Muchas secciones traen minmax(360px, 1fr) escrito a mano: en un teléfono
   eso no cabe. Aquí se fuerzan a una sola columna. */
@media (max-width: 640px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  [id$="-grid"], #restaurants-grid, #fleet-grid, #hotels-grid {
    grid-template-columns: 1fr !important;
  }
  .rest-card, .fleet-card, .listing-card, .card, .stat, .panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Filas de búsqueda: el botón baja debajo del campo */
  [style*="display: flex"][style*="gap"] > input,
  [style*="display: flex"][style*="gap"] > select {
    flex: 1 1 100%;
  }

  /* El selector de idioma del encabezado se va al menú lateral */
  #global-lang-selector,
  header select { display: none !important; }

  /* El globo de texto de Mariam tapaba el contenido: en teléfono queda
     solo el botón redondo. */
  #ai-quick-bubble { display: none !important; }

  /* Barra de anuncio superior: una sola línea, sin tapar el encabezado */
  .top-announcement-banner,
  [class*="announcement"] {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
    padding: 6px 10px !important;
    max-height: 46px;
    overflow: hidden;
  }
  /* El botón de "probar notificación" no cabe en el teléfono: vive en el menú */
  [onclick*="Notification"], [onclick*="notificacion"], [onclick*="notificación"] {
    display: none !important;
  }

  /* Aire al final para que nada quede debajo de los botones flotantes */
  body { padding-bottom: 84px; }

  /* Los botones del encabezado nunca se parten en varias líneas */
  header a, header button, header .btn {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

@media (max-width: 430px) {
  /* En pantallas mínimas el enlace secundario "Ver el sitio" queda en el menú */
  header a[title="Ver el sitio"],
  .top-actions a:first-child { display: none !important; }
  .top-actions { gap: 6px; }
}

/* La cabecera puede partirse en dos líneas antes que desbordarse */
@media (max-width: 520px) {
  header > div, .top-bar, .app-header {
    flex-wrap: wrap !important;
    row-gap: 8px;
  }
}

/* Las filas que no caben se acomodan en varias líneas en vez de cortarse */
@media (max-width: 520px) {
  [style*="display: flex"][style*="gap"],
  [style*="display:flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }
}

/* ---------- 7. Teléfonos muy angostos (320 px) ---------- */
@media (max-width: 360px) {
  body { font-size: 15px; }
  header { padding-left: 10px !important; padding-right: 10px !important; }
  .stat, .card-body, .panel { padding: 12px !important; }
  .chip { font-size: 0.72rem !important; padding: 4px 9px !important; }
}

/* ---------- 8. Impresión ---------- */
@media print {
  html, body { overflow: visible !important; }
}