/*
 * Estilos para el sitio del mapa interactivo
 */

/* Reset básico */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Evitar zoom automático al enfocar inputs en móviles (iOS/Android) */
html { -webkit-text-size-adjust: 100%; }
input,
select,
textarea {
  font-size: 16px; /* iOS hace zoom si < 16px */
}

/* Respetar el atributo [hidden] para ocultar paneles/tablas/etc. */
[hidden] { display: none !important; }

/* Scrollbars globales (ocultas, mantiene scroll funcional) */
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
*::-webkit-scrollbar-thumb { display: none; }
*::-webkit-scrollbar-track { display: none; }
*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
/* Oculta explícitamente las flechas en ambos sentidos/orientaciones (Chromium/Brave) */
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:horizontal:decrement,
*::-webkit-scrollbar-button:horizontal:increment,
*::-webkit-scrollbar-button:vertical:decrement,
*::-webkit-scrollbar-button:vertical:increment,
*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:end:increment,
*::-webkit-scrollbar-button:decrement,
*::-webkit-scrollbar-button:increment {
  display: none;
}
/* Firefox: oculta barras visuales globalmente */
* {
  scrollbar-width: none;
}

body {
  font-family: 'Montserrat', Arial, sans-serif;
  background: #f5f5f5;
  color: #333;
  line-height: 1.4;
}

/* Barra de navegación */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  min-height: 120px;
  background-color: #6200ea; /* morado oscuro */
  color: #fff;
}

.nav-left,
.nav-center,
.nav-right {
  display: flex;
  align-items: center;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger span {
  width: 20px;
  height: 2px;
  background: #fff;
  margin: 3px 0;
  display: block;
}

.sponsor-logos {
  display: flex;
  gap: 2rem;
}

.sponsor-logo {
  height: 80px;
  width: auto;
}


.event-logo {
  font-weight: bold;
  font-size: 1.4rem;
  text-align: center;
}

/* Ajuste de tamaño para el logotipo del evento cuando se usa una imagen SVG */
.event-logo-img {
  height: 60px;
  width: auto;
  display: block;
}

.countdown {
  display: flex;
  gap: 0.625rem; /* 50% del tamaño anterior */
  margin-right: 1rem;
  align-items: center;
}

.time-segment {
  text-align: center;
  background: #ffffff; /* tarjeta blanca */
  border-radius: 8px; /* 50% del radio */
  padding: 0.25rem 0.625rem; /* 50% del padding */
  min-width: 56px; /* 50% del ancho */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.time-segment span {
  font-size: 1.1rem; /* 50% del tamaño anterior */
  font-weight: 800;
  line-height: 1;
  color: #ff5252; /* rojo coral del mock */
  display: block;
}

.time-segment small {
  font-size: 0.525rem; /* 50% del tamaño anterior */
  font-weight: 700;
  color: #6aa6ff; /* azul suave para texto */
  margin-top: 0.2rem;
}

.tickets-btn {
  background: #e53935;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}

/* Menú overlay (desktop y mobile) */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9); /* overlay negro con transparencia */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  display: block;            /* presente siempre para poder animar */
  opacity: 0;
  pointer-events: none;      /* inactivo por defecto */
  transition: opacity 220ms ease;
}
.mobile-menu[hidden] { display: none; } /* si está hidden, no se renderiza */
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu-inner {
  position: absolute;
  inset: 0;
  background: transparent;   /* el color viene del overlay para permitir ver el blur */
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;       /* centrar todo */
  justify-content: center;   /* centrar vertical */
  gap: 1.25rem;
  padding: 1.5rem;
  transform: scale(0.98);
  opacity: 0;
  transition: transform 260ms ease, opacity 260ms ease;
}
.mobile-menu.open .mobile-menu-inner { transform: scale(1); opacity: 1; }
.mobile-menu-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}
.mobile-menu-logo { height: 56px; width: auto; }
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.mobile-menu-link {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
}
.mobile-menu-countdown { width: 100%; display: flex; justify-content: center; }
.mobile-menu .countdown { justify-content: center; }
.mobile-menu-actions { margin-top: 0.5rem; }
.mobile-tickets { display: inline-block; }

/* Contenedor principal */
.main-container {
  display: flex;
  height: calc(100vh - 120px);
}

/* Sidebar */
.sidebar {
  width: 380px;
  background-color: #6200ea;
  color: #fff;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* fija cabecera; solo lista scrollea */
  /* Ocultar scrollbar en sidebar pero mantener scroll */
  -ms-overflow-style: none;  /* IE y Edge antiguo */
  scrollbar-width: none;     /* Firefox */
  /* Panel flotante con esquinas redondeadas */
  border-radius: 1rem;
  margin: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  /* Ocupa la altura total disponible restando el margen. Esto crea el
     efecto de panel flotante full height como en el diseño original */
  height: calc(100% - 2rem);
  min-height: 0; /* permite que hijos con overflow funcionen */
}

/* Sidebar en Chromium/Brave: ocultar barra visual */
.sidebar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Título del sidebar */
.sidebar-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* Paneles de categoría: mantienen el layout de columna y permiten que
   la lista interna (.exhibitors-list) conserve su scroll propio */
#panel-expo,
#panel-mercado {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Tabs de categorías en el sidebar */
.sidebar-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0.75rem;
  background: #6200ea; /* mismo fondo del sidebar */
  border-radius: 10px;
  overflow: hidden; /* pestañas integradas */
  width: 100%;
}
.tab-btn {
  background: #6200ea; /* se integra con el fondo */
  color: #ffffff;
  border: none;
  padding: 0.5rem 0.9rem;
  font-weight: 800;
  cursor: pointer;
  width: 50%;
}
.tab-btn#tab-expo.active { background: #ff4f5c; color: #ffffff; }
.tab-btn#tab-mercado.active { background: #7562dd; color: #ffffff; }
.tab-btn:not(.active):hover { background: rgba(255,255,255,0.08); }

.search-container {
  margin-bottom: 1rem;
  position: relative;
  width: 100%;
}

#search-input {
  width: 100%;
  padding: 0.5rem;
  border-radius: 200px;
  border: none;
  padding-left: 2rem;
  font-size: 16px; /* asegura >=16px en el buscador */
}

/* Ícono de búsqueda dentro del input */
.search-icon {
  position: absolute;
  top: 50%;
  left: 0.5rem;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1rem;
}

.exhibitor-detail {

  padding: 0.5rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

/* Imagen del logo del expositor en el panel de detalle. Se ajusta al
   ancho disponible y mantiene su proporción. Se oculta por defecto
   hasta que se selecciona un expositor con logo. */
.exhibitor-logo {
  width: 100%;
  height: auto; /* asegura mantener proporción ocupando todo el ancho */
  max-height: none; /* sin límite de altura para permitir 100% de ancho */
  object-fit: contain;
  display: block;
  margin: 0.5rem 0;
  background: #f1f2f2; /* fondo del área de logos */
  border-radius: 8px;
  padding: 8px; /* ligero respiro alrededor del logo */
}

.exhibitor-detail h2 {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}

.exhibitor-detail h3 {
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}

.exhibitor-detail .category {
  font-style: italic;
  margin-bottom: 0.5rem;
}

/* Número y nombre en la misma línea */
#detail-number, #detail-name {
  display: inline-block;
  vertical-align: middle;
  font-size: 2rem;        /* mismo tamaño para ambos */
  font-weight: 700;       /* mismo peso */
  line-height: 1.1;
  margin-bottom: 0.25rem; /* coherente con h2 */
}
#detail-number {
  margin-right: 0.5rem;
}

/* Enlaces del expositor */
.exhibitor-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.link-icon {
  color: #ffffff;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.link-icon[hidden], .exhibitor-links[hidden] {
  display: none !important; /* asegurar ocultamiento si hay estilos que fuerzan display */
}
.link-icon:hover {
  background: rgba(255,255,255,0.2);
}

.exhibitors-list {
  list-style: none;
  flex: 1;                 /* ocupa el resto del alto del sidebar */
  min-height: 0;           /* necesario para que overflow calcule bien */
  overflow-y: auto;        /* solo la lista es scrolleable */
  padding-right: 0;        /* sin espacio para barra */
}

/* Scrollbar minimalista para los listados del sidebar */
.exhibitors-list { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.4) transparent; }
.exhibitors-list::-webkit-scrollbar { width: 6px; height: 6px; }
.exhibitors-list::-webkit-scrollbar-track { background: transparent; }
.exhibitors-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 999px; }
.exhibitors-list:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.4); }

.exhibitor-item {
  padding: 10px;
  cursor: pointer;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.exhibitor-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.exhibitor-item.active {
  background: #ff993d; /* mismo color que el seleccionado en el mapa */
}

/* Map section */
.map-section {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.map-controls {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  flex-direction: column;
  z-index: 10;
  gap: 0.5rem;
}

.zoom-btn {
  width: 32px;
  height: 32px;
  background: #6200ea;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1.4rem;
  cursor: pointer;
}
.zoom-btn.active { background: #ff993d; }

/* Contenedor del mapa. Utilizamos padding-bottom para mantener la
   relación de aspecto del SVG (1080/1920 = 56.25%). */
.map-wrapper {
  position: relative;
  width: 100%;
  /* Relación de aspecto del mapa. El SVG base tiene un viewBox de 1280×1024,
     por lo que la relación es 1024/1280 = 80%. Ajusta este valor si cambias
     el mapa por otro con dimensiones distintas. */
  padding-bottom: 80%;
  overflow: hidden;
  cursor: grab; /* cursor de paneo por defecto */
  touch-action: none; /* permitir control total de pan/pinch dentro del mapa */
}

/* El SVG ocupa todo el contenedor y será transformado para zoom y pan */
.map-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
}

/* Estado de paneo activo */
.map-wrapper.panning { cursor: grabbing; }

/* En modo reacomodo, indicar que los spots pueden moverse */
.map-wrapper.reposition .map-spot { cursor: move; }

/* Tooltip visual para spots del mapa */
.map-tooltip {
  background: #d51a5e;
  color: #ffffff;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transition: opacity 120ms ease;
  z-index: 9999;
}

/* Círculos interactivos del mapa. Estos círculos se superponen a los
   círculos originales del plano para que no se vean duplicados. Por
   defecto se dibujan con relleno morado y texto blanco, imitando el
   diseño del mapa vectorial. Al pasar el mouse se aclara el relleno y
   cuando se seleccionan cambian a un tono rosa basado en el expositor
   44 (#d51a5e). */
.map-spot circle {
  fill: #6200ea;            /* color de fondo de los puestos */
  stroke: none;
  cursor: pointer;
  transition: fill 0.2s ease;
}
.map-spot[data-cat="mercado"] circle { fill: #7562dd; }
.map-spot[data-cat="expo"] circle { fill: #ff4f5c; }
.map-spot text {
  fill: #ffffff;            /* números blancos sobre el fondo morado */
  font-family: 'Montserrat', Arial, sans-serif;
  /* Reducimos el tamaño de fuente de los números para que se ajusten
     visualmente al nuevo radio más pequeño de los círculos.  Un
     tamaño de 9.5px proporciona una apariencia más equilibrada. */
  font-size: 9.5px;
  font-weight: 600;
  pointer-events: none;
}
/* Efecto hover: aclaramos ligeramente el morado */
.map-spot:hover circle { fill: #ff993d; }
/* Estado seleccionado: color sólido unificado */
.map-spot.active { color: #ff993d; }
.map-spot.active circle { fill: currentColor; stroke: none; }
.map-spot.active text {
  fill: #ffffff;
}

@media (max-width: 768px) {
  /* Navbar móvil: ocultar solo la zona derecha; mantener logos visibles y pequeños */
  .nav-right { display: none; }
  .sponsor-logos { display: flex; gap: 0.5rem; }
  .sponsor-logo { height: 45px; width: auto; }
  .event-logo-img { height: 40px; }

  /* Menú móvil fullscreen con backdrop */
  .mobile-menu { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10000; }
  .mobile-menu[hidden] { display: none !important; }
  .mobile-menu-inner { position: absolute; inset: 0; background: #6200ea; color: #fff; display: flex; flex-direction: column; padding: 1.25rem; }
  .mobile-menu-close { background: transparent; border: none; color: #fff; font-size: 2rem; align-self: flex-end; line-height: 1; }
  .mobile-menu-logo { height: 48px; width: auto; }
  .mobile-menu-nav { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; }
  .mobile-menu-link { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.25rem; }
  .mobile-menu-countdown { margin: 1rem 0; }
  .mobile-menu .countdown { justify-content: center; }
  .mobile-menu-actions { margin-top: auto; }
  .mobile-tickets { align-self: center; }
  /* Layout del detalle SOLO en pantallas pequeñas */
  .exhibitor-detail-body {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
  }
  .exhibitor-detail-info {
    flex: 1;
    min-width: 0;
  }
  .exhibitor-logo {
    width: 38%;
    max-width: 120px;
    height: auto;
  }
  .main-container {
    flex-direction: column;
  }
  /* Orden: mapa arriba, sidebar abajo */
  .map-section {
    order: 1;
    height: 56vh; /* fallback */
    height: 56dvh; /* viewport dinámico en mobile */
  }
  .sidebar {
    order: 2;
    width: calc(100% - 2rem); /* asegura gutter lateral */
    height: calc(44dvh - 2rem - env(safe-area-inset-bottom, 0)); /* ajusta por márgenes y safe area */
    overflow-y: auto; /* sidebar completo scrolleable en mobile */
    margin: 1rem; /* separa de las orillas del viewport */
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 12px); /* asegurar contenido visible sobre la barra del sistema */
  }
  /* Botones de zoom más grandes y en esquina inferior derecha en mobile */
  .map-controls {
    bottom: calc(env(safe-area-inset-bottom, 0) + 0.75rem);
    right: calc(env(safe-area-inset-right, 0) + 0.75rem);
    top: auto;
    flex-direction: row;
    gap: 0.75rem;
  }
  .zoom-btn {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    font-size: 1.5rem;
  }
  /* La lista interna usa el scroll del sidebar; evita doble scroll en mobile */
  .exhibitors-list {
    max-height: none;
    padding-right: 0.5rem;
    overflow-y: auto; /* la lista scrollea y siempre es visible dentro del sidebar */
    -webkit-overflow-scrolling: touch; /* suaviza scroll en iOS */
  }
  /* El contenedor del mapa ocupa toda la altura asignada en mobile */
  .map-wrapper {
    padding-bottom: 0;
    height: 100%;
  }
  /* Ajustes de spacing en mobile para que no se vea amontonado */
  .exhibitor-detail-body { gap: 0.75rem; }
  .exhibitor-logo { width: 38%; max-width: 120px; }
}