/* =====================================================================
   Galorina · Ajustes para móvil (se carga después de style.css y appearance.css)
   Objetivo: ninguna página más ancha que la pantalla del teléfono.
   ===================================================================== */

/* Red de seguridad: nada provoca desplazamiento lateral de la página. */
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe { max-width: 100%; }

/* Las columnas de las rejillas pueden encogerse (si no, una galería o una tabla las ensancha). */
.detail-layout { grid-template-columns: minmax(0, 1fr) 360px; }
.detail-layout > *, .form-grid > *, .grid > * { min-width: 0; }
pre, code { white-space: pre-wrap; word-break: break-word; }
.table-wrap, .panel.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------- CABECERA EN MÓVIL */
.site-header .header-nav a { white-space: nowrap; }
.gm-panel .gm-prefs { display: flex; gap: 8px; padding: 6px 0 14px; border-bottom: 1px solid #eee; margin-bottom: 4px; }
.gm-panel .gm-prefs form, .gm-panel .gm-prefs .site-language { flex: 1; display: block !important; }
.gm-panel .gm-prefs select { width: 100%; height: 44px; border: 1px solid #d9dee8; border-radius: 10px; padding: 0 10px; font-size: 15px; background: #fff; color: #222; }
.gm-panel .gm-cta { display: block; text-align: center; border-radius: 10px; margin-top: 10px; border-bottom: 0 !important; font-weight: 600 !important; }
.gm-panel .gm-cta.primary { background: #61CE70; color: #fff !important; }
.gm-panel .gm-cta.ghost { border: 1px solid #045CB4 !important; color: #045CB4 !important; }

@media (max-width: 1220px) {
  /* Solo logo + botón de menú: moneda, idioma y acceso pasan al menú desplegable. */
  .site-header .header-actions { display: none !important; }
  .site-header .header-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; min-width: 0; }
  .site-header .header-brand { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; overflow: hidden; }
  .site-header .site-logo { max-height: 40px; max-width: 170px; width: auto; height: auto; object-fit: contain; }
  .site-header .brand-copy { min-width: 0; }
  .site-header .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .site-header .gm-toggle { flex: 0 0 44px; margin-left: auto; }
}

/* ---------------------------------------------------------- CONTENIDO EN MÓVIL */
@media (max-width: 900px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .container { padding-left: 16px; padding-right: 16px; }
  /* Filas de tablas en tarjetas: que el texto largo no ensanche. */
  h1, h2, h3, p, td, th, .muted, .badge { overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
  h1 { font-size: clamp(22px, 6.4vw, 30px); line-height: 1.2; }
  .form-grid { grid-template-columns: 1fr !important; }
  /* Botones flotantes (chat y Mi viaje) más pequeños para no tapar formularios. */
  .gal-fab, #galAssistantFab { width: 48px !important; height: 48px !important; }
  .g-trip-fab { width: 48px !important; height: 48px !important; }
  /* Habitaciones del hotel: la fila de 3 columnas pasa a 2 (foto + datos) con el botón debajo. */
  .room-row-grid { grid-template-columns: 90px minmax(0, 1fr) !important; }
  .room-row-grid > :last-child { grid-column: 1 / -1; }
  /* Paneles de administración y del proveedor en el móvil. */
  .admin-shell, .dashboard-layout { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Galería del hotel: tamaño fijo mientras carga la foto (sin saltos). */
#galleryMainImg { aspect-ratio: 16 / 10; background: #e9edf3; }

/* Menú móvil: botón de cerrar propio y sin botones flotantes encima. */
.gm-panel .gm-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; background: #f1f4f9; border-radius: 50%; font-size: 28px; line-height: 1; color: #222; cursor: pointer; }
body.gm-locked .gal-fab, body.gm-locked #galAssistantFab, body.gm-locked .g-trip-fab, body.gm-locked .gal-chat-fab { display: none !important; }

/* Cabecera de escritorio con sesión iniciada: el nombre no empuja los botones fuera. */
.site-header .header-account strong { display: block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1440px) {
  .site-header .header-nav { gap: 2px !important; }
  .site-header .header-nav a { padding-left: 9px !important; padding-right: 9px !important; }
  .site-header .header-actions { gap: 6px !important; }
}