/* Visita Loja — UI responsive incremental.
 * Mantiene la lógica existente y libera espacio útil en móvil y escritorio.
 */

/* Escritorio ancho: las secciones secundarias viven dentro de Explorar. */
@media (min-width: 1536px) {
  .vl-desktop-secondary-original { display: none !important; }
  #desktopExploreMenu { flex: 0 0 auto; }
  #desktopExploreMenu > summary::-webkit-details-marker { display: none; }
  #desktopExploreMenu[open] > summary { color: #EA580C; border-color: rgba(234,88,12,.55); background: rgba(234,88,12,.10); }
  .vl-desktop-explore-panel { max-height: min(70vh, 560px); overflow-y: auto; }
  .vl-explore-item i { width: 1.1rem; text-align: center; }
}

/* Tablet/móvil: Mi Ruta es una acción primaria junto al menú. */
@media (max-width: 1535px) {
  .vl-route-menu-duplicate { display: none !important; }
  .vl-mobile-nav-actions { min-width: 0; }
  .vl-mobile-route-quick { min-height: 44px; white-space: nowrap; }
}

@media (max-width: 767px) {
  /* La franja institucional deja de ocupar dos pisos antes del contenido. */
  body > header:first-of-type { padding-top: calc(.35rem + env(safe-area-inset-top)); padding-bottom: .35rem; }
  body > header:first-of-type > div { flex-direction: row; justify-content: center; gap: .5rem; }
  body > header:first-of-type [data-i18n="topInit"] { max-width: calc(100vw - 8.5rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body > header:first-of-type [data-i18n="topMesa"] { display: none; }
  #connectionStatusIndicator { flex: 0 0 auto; white-space: nowrap; font-size: 9px; }

  nav { padding-left: max(.65rem, env(safe-area-inset-left)); padding-right: max(.65rem, env(safe-area-inset-right)); }
  nav > div:first-child { gap: .5rem; }
  nav > div:first-child > a { min-width: 0; gap: .5rem; }
  nav > div:first-child > a > div:first-child { width: 40px; height: 40px; flex: 0 0 40px; }
  #brandNameText { font-size: .78rem; }
  #brandNameText + span { display: none; }

  .vl-mobile-nav-actions { gap: .35rem; }
  .vl-mobile-route-quick { padding: .55rem .7rem; border-radius: .8rem; }
  #mobileMenuButton { padding: .5rem; }

  #mobileMenu {
    max-height: calc(100dvh - 5rem - env(safe-area-inset-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  #mobileMenu .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mobileMenu a { line-height: 1.2; }

  /* Flotantes separados de los bordes y del contenido crítico. */
  .fab-whatsapp {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    animation: none !important;
    transform: scale(.84);
    transform-origin: bottom right;
  }

  .web-mascot {
    width: 56px;
    height: 56px;
    left: max(12px, env(safe-area-inset-left));
    bottom: calc(16px + env(safe-area-inset-bottom));
    border-radius: 9999px;
    background: #fff;
    border: 2px solid #EA580C;
    box-shadow: 0 7px 20px rgba(0,0,0,.25);
    overflow: visible;
  }

  .web-mascot > button.block {
    width: 52px !important;
    height: 52px !important;
    border-radius: 9999px;
    overflow: hidden;
    display: grid !important;
    place-items: center;
    background: #fff;
  }

  .web-mascot-character {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
    animation: none !important;
    filter: none;
  }

  .web-mascot-close { width: 20px; height: 20px; right: -7px; top: -7px; font-size: 9px; z-index: 3; }
  .web-mascot-bubble { left: 48px; bottom: 48px; width: min(210px, calc(100vw - 86px)); max-height: 36vh; overflow-y: auto; font-size: 11px; padding: 9px 11px; }
  .web-mascot-restore {
    left: max(12px, env(safe-area-inset-left));
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
  }

  #accountFloatingInvite { right: max(8px, env(safe-area-inset-right)) !important; bottom: calc(78px + env(safe-area-inset-bottom)) !important; transform: scale(.78); transform-origin: bottom right; }
  #accountFloatingInvite:hover { transform: scale(.82); }
  #toast { bottom: calc(5rem + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 430px) {
  .vl-mobile-route-quick { padding-left: .6rem; padding-right: .6rem; }
  .vl-mobile-route-label { font-size: 11px; }
}

@media (max-width: 370px) {
  .vl-mobile-route-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .vl-mobile-route-quick { width: 44px; justify-content: center; padding: .5rem; }
  #mobileQuickRouteBadge { position: absolute; top: -5px; right: -5px; }
  .web-mascot { width: 52px; height: 52px; }
  .web-mascot > button.block { width: 48px !important; height: 48px !important; }
  .web-mascot-character { width: 44px !important; height: 44px !important; }
  .web-mascot-bubble { left: 44px; bottom: 44px; width: min(196px, calc(100vw - 78px)); }
  #accountFloatingInvite { transform: scale(.72); }
  #accountFloatingInvite:hover { transform: scale(.76); }
}