/**
 * @file nuestras-sucursales.css
 * @description Archivo de estilos para el componente web personalizado NuestrasSucursales.
 *              Proporciona diseño claymorphism completo con sistema de pestañas de navegación,
 *              tarjetas de sucursal con efectos de animación, integración avanzada con mapas Leaflet,
 *              marcadores personalizados con logo YEYU, popups informativos estilizados,
 *              controles de zoom personalizados, sistema completo de theming claro/oscuro,
 *              animaciones de entrada escalonadas y diseño completamente responsivo.
 * @author Enri Rego
 * @version 1.0.0
 * @date 23 de Mayo 2025
 * @since 1.0.0
 * @requires scripts/components/nuestras-sucursales.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

/**
 * ============================================================================
 * CONTENEDOR PRINCIPAL DE SUCURSALES
 * ============================================================================
 * 
 * Contenedor principal del componente sucursales con efecto claymorphism.
 * El efecto claymorphism simula una apariencia de arcilla o material maleable
 * con sombras suaves, bordes redondeados y un aspecto ligeramente elevado.
 */
/* Contenedor principal con efecto claymorphism */
nuestras-sucursales {
  /* Posicionamiento y estructura base */
  position: relative;
  overflow: visible;
  width: 100%;

  /* Espaciado exterior e interior */
  margin: 10px 0 var(--espacio-grande, 2rem);
  padding: 20px 15px;

  /* Efectos visuales claymorphism */
  border-radius: var(--arcilla-radio);
  background-color: var(--arcilla-fondo);
  box-shadow: var(--arcilla-sombra-externa);
  border: var(--arcilla-borde);
}

/* Tema claro para el contenedor principal - sombras sutiles */
:root[data-tema="claro"] nuestras-sucursales {
  /* Sombras claymorphism para tema claro */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.08);
}

:root[data-tema="claro"] nuestras-sucursales:hover {
  /* Elevación en hover para tema claro */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Tema oscuro para el contenedor principal */
:root[data-tema="oscuro"] nuestras-sucursales {
  /* Color de fondo específico para tema oscuro */
  background-color: var(--arcilla-fondo);

  /* Sombras más intensas para tema oscuro */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3);
}

/**
 * ============================================================================
 * ESTRUCTURA BASE Y UTILIDADES
 * ============================================================================
 */

/* Asegurar que el contenido está por encima del efecto */
nuestras-sucursales>* {
  position: relative;
  z-index: 1;
}

/**
 * ============================================================================
 * TÍTULO PRINCIPAL DE SUCURSALES
 * ============================================================================
 * 
 * Título principal del componente con animación de entrada.
 * Incluye transformación y opacidad para un efecto suave de aparición.
 */
/**
 * Título principal del componente de sucursales.
 * Utiliza clamp() para tipografía responsive y efectos de sombra específicos por tema.
 */
.sucursales-titulo {
  /* Tipografía responsive que se adapta al ancho de viewport */
  font-size: clamp(1.8rem, 5vw, 2.5rem);

  /* Peso de fuente para destacar importancia */
  font-weight: 600;

  /* Espaciado inferior para separación del contenido */
  margin-bottom: 1.5rem;

  /* Alineación centrada para mejor presentación */
  text-align: center;

  /* Color principal del sistema de diseño */
  color: var(--naranja);

  /* Sombra de texto para mejorar legibilidad en tema claro */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/**
 * Ajuste de sombra de texto para tema oscuro.
 * Intensifica la sombra para mejor contraste en fondos oscuros.
 */
:root[data-tema="oscuro"] .sucursales-titulo {
  /* Sombra más intensa para mejor legibilidad en tema oscuro */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/**
 * ============================================================================
 * SISTEMA DE NAVEGACIÓN POR PESTAÑAS
 * ============================================================================
 * 
 * Contenedor para las pestañas de navegación entre sucursales con efecto claymorphism.
 * Utiliza flexbox para distribuir las pestañas y adaptarse a diferentes tamaños.
 */
/**
 * Contenedor principal para el sistema de navegación por pestañas.
 * Implementa flexbox responsive con efectos claymorphism y transiciones de entrada.
 */
.sucursales-tabs {
  /* Posicionamiento para control de transformaciones */
  position: relative;

  /* Flexbox para distribución horizontal de pestañas */
  display: flex;

  /* Permite que las pestañas se ajusten en múltiples líneas si es necesario */
  flex-wrap: wrap;

  /* Centra las pestañas horizontalmente */
  justify-content: center;

  /* Espaciado inferior para separación del contenido siguiente */
  margin-bottom: 1.5rem;

  /* Espaciado interno para el efecto claymorphism */
  padding: 0.8rem;

  /* Transiciones suaves para animaciones de entrada */
  transition: opacity 0.5s ease, transform 0.5s ease;

  /* Estado inicial para animación de entrada */
  transform: translateY(-10px);
  opacity: 0;

  /* Radio de borde ajustado para harmonizar con el contenedor padre */
  border-radius: calc(var(--arcilla-radio) - 6px);

  /* Fondo secundario del sistema claymorphism */
  background-color: var(--arcilla-fondo-secundario);

  /* Sombra elevada específica para tarjetas */
  box-shadow: var(--arcilla-elevado-tarjeta);

  /* Espaciado entre elementos flex */
  gap: 0.8rem;

  /* Borde sutil para definición del contenedor */
  border: 1px solid var(--arcilla-borde-color);
}

/**
 * Ajustes de tema oscuro para el contenedor de pestañas.
 * Mantiene consistencia visual con el sistema de diseño claymorphism.
 */
:root[data-tema="oscuro"] .sucursales-tabs {
  /* Fondo específico para tema oscuro */
  background-color: var(--arcilla-fondo-secundario);

  /* Sombra elevada mantenida para consistencia */
  box-shadow: var(--arcilla-elevado-tarjeta);
}

/**
 * Estilo base para cada pestaña individual de navegación.
 * Implementa el diseño claymorphism con estados interactivos y transiciones fluidas.
 */
.sucursal-tab {
  /* Tipografía desde el sistema de diseño */
  font-size: var(--texto-base);
  font-weight: 600;

  /* Posicionamiento para efectos de transformación */
  position: relative;

  /* Espaciado interno balanceado para UX óptima */
  padding: 8px 16px;

  /* Cursor indicativo de interactividad */
  cursor: pointer;

  /* Transiciones suaves para todos los estados */
  transition: all 0.3s ease;

  /* Color principal del sistema */
  color: var(--naranja);

  /* Borde definido con color del sistema */
  border: 2px solid var(--naranja);

  /* Radio de borde para forma pill característico */
  border-radius: 20px;

  /* Fondo transparente en estado normal */
  background-color: transparent;

  /* Sombra sutil para efecto de elevación */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/**
 * Estado hover para pestañas de navegación.
 * Proporciona feedback visual inmediato al usuario.
 */
.sucursal-tab:hover {
  /* Elevación visual mediante transformación */
  transform: translateY(-2px);

  /* Fondo semi-transparente del color principal */
  background-color: rgba(255, 107, 53, 0.1);

  /* Incremento de sombra para mayor elevación percibida */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/**
 * Estado activo para la pestaña seleccionada.
 * Implementa el efecto claymorphism completo con sombras interiores y exteriores.
 */
.sucursal-tab.activo {
  /* Color de texto invertido para contraste */
  color: white;

  /* Fondo sólido del color principal */
  background-color: var(--naranja);

  /* Borde mantenido del mismo color para consistencia */
  border-color: var(--naranja);

  /* Sombras complejas para efecto claymorphism */
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.25),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 5px rgba(255, 255, 255, 0.2);
}

/**
 * Ajustes de tema oscuro para pestañas normales.
 * Mantiene el esquema de colores consistente con el sistema.
 */
:root[data-tema="oscuro"] .sucursal-tab {
  /* Color principal mantenido */
  color: var(--naranja);

  /* Borde del color principal */
  border-color: var(--naranja);

  /* Fondo transparente mantenido */
  background-color: transparent;
}

/**
 * Estado hover en tema oscuro.
 * Intensifica el efecto semi-transparente para mejor visibilidad.
 */
:root[data-tema="oscuro"] .sucursal-tab:hover {
  /* Fondo semi-transparente más intenso para tema oscuro */
  background-color: rgba(255, 107, 53, 0.2);

  /* Sombra más intensa para mejor definición en tema oscuro */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/**
 * Estado activo en tema oscuro.
 * Utiliza color de texto específico del sistema para máximo contraste.
 */
:root[data-tema="oscuro"] .sucursal-tab.activo {
  /* Color de texto del sistema para tema oscuro */
  color: var(--blanco);

  /* Fondo del color principal mantenido */
  background-color: var(--naranja);
}

/**
 * ============================================================================
 * TARJETAS INDIVIDUALES DE SUCURSAL
 * ============================================================================
 * 
 * Estilos para cada elemento de sucursal individual con efectos claymorphism,
 * animaciones de entrada y layout flexible.
 */
/**
 * Elemento personalizado sucursal-item con efectos claymorphism.
 * Contenedor base para cada tarjeta de sucursal individual con animaciones de entrada.
 */
sucursal-item {
  /* Posicionamiento para transformaciones de animación */
  position: relative;

  /* Estado inicial oculto para animación de entrada */
  display: none;

  /* Evita desbordamiento de contenido durante animaciones */
  overflow: hidden;

  /* Layout vertical para organización del contenido */
  flex-direction: column;

  /* Espaciado inferior entre tarjetas */
  margin-bottom: 1rem;

  /* Transición suave para todas las propiedades */
  transition: all 0.5s ease;

  /* Estado inicial de transformación para animación de entrada */
  transform: translateY(20px);
}

/**
 * Estado visible para animación de entrada de tarjetas.
 * Se aplica dinámicamente via JavaScript para efectos escalonados.
 */
sucursal-item.visible {
  /* Transformación final: posición normal */
  transform: translateY(0);

  /* Opacidad completa para visibilidad total */
  opacity: 1;
}

/**
 * ============================================================================
 * CABECERA DE SUCURSAL CON IMAGEN
 * ============================================================================
 * 
 * Contenedor de la imagen principal de cada sucursal con efectos de hover.
 * Utiliza aspect-ratio para mantener proporciones y transform para animaciones.
 */
/**
 * Contenedor de imagen principal para cada sucursal.
 * Utiliza aspect-ratio moderno para mantener proporciones consistentes.
 */
.sucursal-cabecera {
  /* Posicionamiento para contener elementos transformados */
  position: relative;

  /* Evita desbordamiento durante efectos de escala */
  overflow: hidden;

  /* Ancho completo del contenedor padre */
  width: 100%;

  /* Centrado horizontal automático */
  margin: 0 auto;

  /* Proporción cuadrada moderna usando aspect-ratio */
  aspect-ratio: 1/1;
}

/**
 * Imagen principal de la sucursal con efectos interactivos.
 * Optimizada para diferentes dispositivos y resoluciones.
 */
.sucursal-imagen {
  /* Dimensiones completas del contenedor */
  width: 100%;
  height: 100%;

  /* Transición suave para efectos de hover */
  transition: transform 0.5s ease;

  /* Ajuste de imagen para llenar el contenedor manteniendo proporción */
  object-fit: cover;

  /* Posicionamiento centrado del contenido de imagen */
  object-position: center;

  /* Radio de borde ajustado para harmonizar con el diseño claymorphism */
  border-radius: calc(var(--arcilla-radio) - 6px) calc(var(--arcilla-radio) - 6px);
}

/**
 * Efecto hover para el contenedor de imagen.
 * Proporciona feedback visual mediante escala de la imagen.
 */
.sucursal-cabecera:hover .sucursal-imagen {
  /* Escala sutil para efecto de zoom */
  transform: scale(1.08);
}

/**
 * ============================================================================
 * CONTENIDO DE INFORMACIÓN DE SUCURSAL
 * ============================================================================
 * 
 * Contenedor del contenido principal de cada sucursal incluyendo nombre,
 * información de contacto y detalles con iconografía Font Awesome.
 */
/**
 * Contenedor principal del contenido informativo de cada sucursal.
 * Organiza verticalmente nombre, detalles de contacto y elementos interactivos.
 */
.sucursal-contenido {
  /* Layout flexbox vertical */
  display: flex;
  flex-direction: column;

  /* Espaciado interno generoso para legibilidad */
  padding: 20px;

  /* Espaciado uniforme entre elementos hijos */
  gap: 12px;
}

/**
 * Título principal de cada sucursal individual.
 * Utiliza la tipografía jerárquica del sistema de diseño.
 */
.sucursal-nombre {
  /* Tamaño de fuente prominente para jerarquía visual */
  font-size: 2rem;

  /* Peso de fuente para destacar importancia */
  font-weight: 600;

  /* Elimina margen por defecto del elemento heading */
  margin: 0;

  /* Color principal del sistema de diseño */
  color: var(--naranja);

  /* Sombra de texto para mejor legibilidad */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/**
 * Ajuste de sombra de texto para tema oscuro.
 * Proporciona mejor contraste en fondos oscuros.
 */
:root[data-tema="oscuro"] .sucursal-nombre {
  /* Sombra más intensa para tema oscuro */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/**
 * Contenedor para elementos de información de contacto.
 * Integra iconografía Font Awesome con texto descriptivo.
 */
.sucursal-info {
  /* Layout flexbox para alineación de icono y texto */
  display: flex;

  /* Alineación superior para iconos con texto multilínea */
  align-items: flex-start;

  /* Centrado horizontal del contenido */
  justify-content: center;

  /* Color de texto del sistema de diseño */
  color: var(--texto);

  /* Espaciado entre icono y texto */
  gap: 10px;

  /* Alineación centrada del conjunto */
  text-align: center;
}

/**
 * Ajuste de color de texto para tema oscuro.
 * Utiliza la variable del sistema para consistencia.
 */
:root[data-tema="oscuro"] .sucursal-info {
  /* Color de texto específico para tema oscuro */
  color: var(--blanco);
}

/**
 * Iconos Font Awesome dentro de la información de sucursal.
 * Proporciona identificación visual rápida del tipo de información.
 */
.sucursal-info i {
  /* Tamaño de icono balanceado con el texto */
  font-size: 1.2rem;

  /* Ancho mínimo para alineación consistente */
  min-width: 20px;

  /* Color principal para destacar los iconos */
  color: var(--naranja);
}

/**
 * Texto descriptivo dentro de la información de sucursal.
 * Optimizado para legibilidad y espaciado vertical.
 */
.sucursal-info span {
  /* Altura de línea optimizada para legibilidad */
  line-height: 1.4;
}

/**
 * ============================================================================
 * MAPAS LEAFLET INTEGRADOS
 * ============================================================================
 * 
 * Contenedor y configuración para mapas interactivos Leaflet con marcadores
 * personalizados, popups y controles de zoom estilizados.
 */
/**
 * Contenedor del mapa interactivo Leaflet para cada sucursal.
 * Integra controles nativos con el sistema de diseño claymorphism.
 */
.sucursal-mapa {
  /* Posicionamiento para contener elementos Leaflet */
  position: relative;

  /* Evita desbordamiento de controles del mapa */
  overflow: hidden;

  /* Ancho completo del contenedor padre */
  width: 100%;

  /* Altura fija optimizada para visualización en diferentes dispositivos */
  height: 300px;

  /* Espaciado superior para separación del contenido anterior */
  margin-top: 10px;

  /* Radio de borde ajustado para harmonizar con el diseño general */
  border-radius: calc(var(--arcilla-radio) - 4px);

  /* Sombra externa del sistema claymorphism */
  box-shadow: var(--arcilla-sombra-externa);
}

/**
 * Configuración específica para el contenedor Leaflet.
 * Asegura renderizado correcto y control de capas.
 */
.sucursal-mapa .leaflet-container {
  /* Dimensiones forzadas para renderizado correcto */
  width: 100% !important;
  height: 100% !important;

  /* Z-index controlado para evitar conflictos */
  z-index: 1;

  /* Elimina outline de foco por defecto */
  outline: none;
}

/**
 * ============================================================================
 * BOTONES DE ACCIÓN
 * ============================================================================
 * 
 * Botones interactivos con efectos claymorphism para acciones principales
 * como navegación a ubicaciones o contacto directo.
 */
/**
 * Botón de acción principal para cada sucursal.
 * Implementa el diseño claymorphism con efectos interactivos complejos.
 */
.sucursal-accion {
  /* Peso de fuente para destacar la acción */
  font-weight: 600;

  /* Posicionamiento para control de z-index */
  position: relative;
  z-index: 1;

  /* Layout flexbox para alineación de contenido */
  display: inline-flex;

  /* Evita desbordamiento durante animaciones */
  overflow: hidden;

  /* Alineación vertical centrada del contenido */
  align-items: center;

  /* Auto-centrado horizontal */
  align-self: center;

  /* Espaciado superior para separación del contenido */
  margin-top: 15px;

  /* Espaciado interno balanceado */
  padding: 10px 20px;

  /* Transiciones suaves para todos los estados */
  transition: all 0.3s ease;

  /* Elimina decoración de enlace por defecto */
  text-decoration: none;

  /* Color de texto blanco para contraste con fondo naranja */
  color: white;

  /* Radio de borde para forma pill característica */
  border-radius: 20px;

  /* Fondo del color principal del sistema */
  background-color: var(--naranja);

  /* Sombras complejas para efecto claymorphism completo */
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.25),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 5px rgba(255, 255, 255, 0.2);

  /* Espaciado entre icono y texto si los hay */
  gap: 10px;
}

/**
 * Estado hover para botón de acción.
 * Proporciona feedback visual inmediato con elevación y intensificación de sombra.
 */
.sucursal-accion:hover {
  /* Elevación visual mediante transformación */
  transform: translateY(-2px);

  /* Intensificación de sombra para mayor elevación percibida */
  box-shadow: 0 6px 12px rgba(255, 107, 53, 0.3);
}

/**
 * ============================================================================
 * MARCADORES Y POPUPS PERSONALIZADOS PARA MAPAS
 * ============================================================================
 * 
 * Estilos personalizados para marcadores de Leaflet, popups informativos
 * y elementos interactivos específicos de YEYU con SVG vectorial.
 */
/**
 * Marcador personalizado YEYU para mapas Leaflet.
 * Implementa efectos visuales avanzados con transformaciones y filtros CSS.
 */
.leaflet-marker-icon.yeyu-marker {
  /* Sombra proyectada usando filter para mejor rendimiento */
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));

  /* Transiciones suaves para interacciones */
  transition: transform 0.3s ease, filter 0.3s ease;

  /* Punto de origen para transformaciones */
  transform-origin: bottom center;

  /* Cursor indicativo de interactividad */
  cursor: pointer;
}

/**
 * Estado hover para marcador personalizado.
 * Combina elevación visual con intensificación de sombra.
 */
.leaflet-marker-icon.yeyu-marker:hover {
  /* Intensificación de sombra en estado hover */
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.6));

  /* Combinación de elevación y escala para efecto llamativo */
  transform: translateY(-2px) scale(1.05);
}

/**
 * Contenedor principal para popup de sucursal.
 * Establece alineación centrada para todo el contenido.
 */
.popup-sucursal {
  /* Alineación centrada para consistencia visual */
  text-align: center;
}

/**
 * Contenido interno del popup con información de sucursal.
 * Optimizado para legibilidad y experiencia de usuario.
 */
.popup-sucursal-contenido {
  /* Alineación centrada del texto */
  text-align: center;

  /* Peso de fuente para destacar la información */
  font-weight: 600;

  /* Familia de fuente consistente con el sistema de diseño */
  font-family: "Poppins", sans-serif;

  /* Color principal del sistema */
  color: var(--naranja);

  /* Espaciado interno con mayor padding vertical para mejor UX */
  padding: 35px 15px;

  /* Tamaño de fuente apropiado para legibilidad */
  font-size: 1.1rem;

  /* Altura mínima para consistencia visual */
  min-height: 100px;

  /* Layout flexbox para centrado perfecto */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Altura de línea optimizada para legibilidad */
  line-height: 1.4;
}

/**
 * Contenedor envolvente del popup Leaflet.
 * Establece el diseño base y efectos de sombra.
 */
.leaflet-popup-content-wrapper {
  /* Elimina padding por defecto para control total */
  padding: 0;

  /* Radio de borde para consistencia con el diseño general */
  border-radius: 12px;

  /* Sombra elevada para efecto de profundidad */
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);

  /* Alineación centrada del contenido */
  text-align: center;
}

/**
 * Contenido interno del popup Leaflet.
 * Controla dimensiones mínimas y layout del contenido.
 */
.leaflet-popup-content {
  /* Elimina márgenes por defecto */
  margin: 0;

  /* Ancho mínimo para consistencia visual */
  min-width: 160px;

  /* Altura mínima para evitar popups muy pequeños */
  min-height: 120px;

  /* Layout flexbox para centrado perfecto */
  display: flex;
  align-items: center;
  justify-content: center;
}

/**
 * ============================================================================
 * BOTÓN CERRAR PERSONALIZADO CON SVG VECTORIAL
 * ============================================================================
 * 
 * Botón de cierre personalizado para popups de sucursal con iconografía SVG
 * vectorial, efectos hover y posicionamiento absoluto optimizado.
 */

/**
 * Estilo base del botón cerrar popup.
 * Implementa diseño circular con SVG vectorial y múltiples selectores para
 * garantizar especificidad sobre estilos por defecto de Leaflet.
 */
.popup-sucursal .leaflet-popup-close-button,
.leaflet-container .popup-sucursal .leaflet-popup-close-button,
.leaflet-popup-content-wrapper .popup-sucursal .leaflet-popup-close-button {
  /* Posicionamiento absoluto en esquina superior derecha */
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;

  /* Dimensiones circulares estándar para touch targets */
  width: 32px !important;
  height: 32px !important;

  /* Fondo del color principal del sistema */
  background-color: var(--naranja) !important;

  /* Forma circular perfecta */
  border-radius: 50% !important;

  /* Layout flexbox para centrado perfecto del contenido */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Elimina decoración de enlace */
  text-decoration: none !important;

  /* Transición suave para efectos hover */
  transition: all 0.2s ease !important;

  /* Z-index alto para estar por encima de otros elementos */
  z-index: 9999 !important;

  /* Sombra sutil para definición */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;

  /* Elimina borde por defecto */
  border: none !important;

  /* Oculta texto pero mantiene accesibilidad */
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;

  /* Evita desbordamiento del contenido */
  overflow: hidden !important;
}

/**
 * Pseudo-elemento para SVG vectorial de la X.
 * Utiliza data URI para incrustar SVG optimizado con colores del sistema.
 */
.popup-sucursal .leaflet-popup-close-button::before {
  /* Crea pseudo-elemento para el icono */
  content: "";

  /* Posicionamiento absoluto centrado */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Dimensiones del icono SVG */
  width: 16px;
  height: 16px;

  /* SVG vectorial con color del sistema (crema) y grosor optimizado */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF0E5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");

  /* Configuración del background para renderizado óptimo */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/**
 * Estado hover para el botón cerrar.
 * Proporciona feedback visual con cambio de color y escala.
 */
.popup-sucursal .leaflet-popup-close-button:hover,
.leaflet-container .popup-sucursal .leaflet-popup-close-button:hover {
  /* Color de hover más oscuro para feedback visual */
  background-color: #E85C00 !important;

  /* Escala sutil para indicar interactividad */
  transform: scale(1.1) !important;
}

/**
 * SVG en estado hover.
 * Mantiene el mismo diseño pero confirma la interactividad.
 */
.popup-sucursal .leaflet-popup-close-button:hover::before {
  /* Mismo SVG mantenido para consistencia visual */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF0E5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

/**
 * Ocultación completa de contenido interno del botón.
 * Previene mostrar texto o elementos no deseados.
 */
.popup-sucursal .leaflet-popup-close-button span,
.leaflet-container .popup-sucursal .leaflet-popup-close-button span,
.popup-sucursal .leaflet-popup-close-button a,
.popup-sucursal .leaflet-popup-close-button * {
  /* Múltiples métodos para ocultar completamente el contenido */
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  font-size: 0 !important;
}

/**
 * ============================================================================
 * CONFIGURACIÓN ADICIONAL DE POPUPS Y ELEMENTOS AUXILIARES
 * ============================================================================
 * 
 * Configuración adicional para elementos del popup como flecha indicadora
 * y ajustes de contenedor para garantizar renderizado consistente.
 */

/**
 * Configuración redundante del contenedor wrapper para garantizar consistencia.
 * Algunos ajustes se repiten para asegurar que se apliquen correctamente.
 */
.leaflet-popup-content-wrapper {
  /* Elimina padding por defecto para control total */
  padding: 0;

  /* Radio de borde consistente con el diseño */
  border-radius: 12px;

  /* Sombra elevada para profundidad visual */
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);

  /* Alineación centrada del contenido */
  text-align: center;
}

/**
 * Configuración redundante del contenido para garantizar dimensiones.
 * Asegura que las dimensiones mínimas se mantengan en todos los casos.
 */
.leaflet-popup-content {
  /* Elimina márgenes por defecto */
  margin: 0;

  /* Ancho mínimo reducido para mejor adaptabilidad */
  min-width: 150px;

  /* Altura mínima para evitar popups colapsados */
  min-height: 50px;

  /* Layout flexbox para centrado perfecto */
  display: flex;
  align-items: center;
  justify-content: center;
}

/**
 * Contenedor de la flecha indicadora del popup.
 * Controla posicionamiento y dimensiones de la flecha que apunta al marcador.
 */
.leaflet-popup-tip-container {
  /* Ancho estándar para la flecha */
  width: 40px;

  /* Altura estándar para la flecha */
  height: 20px;

  /* Posicionamiento absoluto para control preciso */
  position: absolute;

  /* Centrado horizontal */
  left: 50%;
  margin-left: -20px;

  /* Posicionamiento en la parte inferior del popup */
  bottom: -20px;

  /* Evita desbordamiento del contenido de la flecha */
  overflow: hidden;
}

/**
 * Flecha indicadora del popup.
 * Elemento triangular que apunta del popup hacia el marcador en el mapa.
 */
.leaflet-popup-tip {
  /* Dimensiones del elemento flecha */
  width: 17px;
  height: 17px;

  /* Padding interno para ajuste fino */
  padding: 1px;

  /* Margen superior negativo para posicionamiento preciso */
  margin: -10px auto 0;

  /* Rotación para crear forma de flecha */
  transform: rotate(45deg);

  /* Fondo blanco para consistencia con el popup */
  background-color: white;

  /* Sombra que simula continuidad con el popup */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/**
 * ============================================================================
 * GESTIÓN DE Z-INDEX Y CAPAS DEL MAPA
 * ============================================================================
 * 
 * Configuración específica del sistema de capas de Leaflet para evitar
 * conflictos de z-index y asegurar renderizado correcto de elementos.
 */

/**
 * Restauración del manejo nativo de z-index de Leaflet.
 * Permite que Leaflet gestione automáticamente las capas sin interferencia.
 */
.leaflet-pane,
.leaflet-popup-pane,
.leaflet-marker-pane,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-tooltip-pane {
  /* Restaura manejo automático de z-index nativo de Leaflet */
  z-index: auto;
}

/**
 * Ajustes específicos para capas de sombra y overlay.
 * Asegura que elementos personalizados mantengan prioridad apropiada.
 */
.leaflet-container .leaflet-pane.leaflet-shadow-pane,
.leaflet-container .leaflet-pane.leaflet-overlay-pane {
  /* Z-index estándar para capas de fondo */
  z-index: 450;
}

/**
 * ============================================================================
 * CONTROLES DE ZOOM Y ELEMENTOS DE MAPA
 * ============================================================================
 * 
 * Personalización de controles nativos de Leaflet incluyendo botones de zoom,
 * manejo de z-index y ocultación de elementos no deseados como atribución.
 */
/**
 * Ocultación completa de atribución de Leaflet.
 * Elimina la atribución por defecto para diseño más limpio.
 */
.leaflet-control-attribution {
  /* Ocultación forzada de atribución */
  display: none !important;
}

/**
 * Personalización del contenedor de controles de zoom.
 * Adapta los controles nativos al sistema de diseño del proyecto.
 */
.leaflet-control-zoom {
  /* Elimina borde por defecto */
  border: none !important;

  /* Sombra personalizada para integración con diseño claymorphism */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

/**
 * Estilo base para botones de zoom individuales.
 * Integra los controles con el sistema de colores y efectos del proyecto.
 */
.leaflet-control-zoom a {
  /* Fondo del color principal del sistema */
  background-color: var(--naranja) !important;

  /* Color de texto del sistema (crema) para contraste óptimo */
  color: var(--crema) !important;

  /* Elimina borde por defecto de Leaflet */
  border: none !important;

  /* Transición suave para efectos hover */
  transition: all 0.3s ease !important;

  /* Layout flexbox para centrado perfecto del contenido */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/**
 * Estado hover para botones de zoom.
 * Proporciona feedback visual consistente con otros elementos interactivos.
 */
.leaflet-control-zoom a:hover {
  /* Color de hover más intenso */
  background-color: #E85C00 !important;

  /* Color de texto blanco para máximo contraste */
  color: white !important;
}

/**
 * Configuración específica de dimensiones y tipografía para botones de zoom.
 * Optimizado para accesibilidad y usabilidad en diferentes dispositivos.
 */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  /* Tamaño de fuente aumentado para mejor legibilidad */
  font-size: 24px !important;

  /* Peso de fuente para mejor definición */
  font-weight: bold !important;

  /* Dimensiones cuadradas para botones balanceados */
  width: 34px !important;
  height: 34px !important;

  /* Altura de línea ajustada para alineación vertical perfecta */
  line-height: 30px !important;
}

/**
 * ============================================================================
 * OPTIMIZACIONES ESPECÍFICAS PARA DISPOSITIVOS MÓVILES
 * ============================================================================
 * 
 * Ajustes específicos para mejorar usabilidad en pantallas táctiles pequeñas,
 * incluyendo touch targets más grandes y espaciado optimizado.
 */

/**
 * Mejoras para dispositivos móviles muy pequeños (max-width: 480px).
 * Optimiza controles táctiles y contenido para mejor experiencia de usuario.
 */
@media (max-width: 480px) {

  /**
   * Touch target aumentado para botón cerrar en móviles.
   * Cumple con las directrices de accesibilidad para elementos táctiles.
   */
  .leaflet-control-zoom-in,
  .leaflet-control-zoom-out {
    /* Tamaño de fuente aumentado para mayor legibilidad en móviles */
    font-size: 26px !important;
  }

  /**
   * Botón cerrar de popup optimizado para touch.
   * Dimensiones aumentadas para mejor accesibilidad táctil.
   */
  .popup-sucursal .leaflet-popup-close-button {
    /* Dimensiones aumentadas para mejor touch target */
    width: 36px;
    height: 36px;

    /* Posicionamiento ajustado para las nuevas dimensiones */
    top: 4px;
    right: 4px;
  }

  /**
   * Contenido de popup ajustado para pantallas pequeñas.
   * Reduce padding manteniendo suficiente área de contenido.
   */
  .popup-sucursal-contenido {
    /* Padding ajustado para pantallas pequeñas */
    padding: 25px 15px;

    /* Altura mínima mantenida para consistencia visual */
    min-height: 100px;
  }

  /**
   * Ajuste adicional de contenido para espacios muy limitados.
   * Optimiza el uso del espacio disponible en dispositivos pequeños.
   */
  .popup-sucursal-contenido {
    /* Padding asimétrico para optimizar espacio con botón cerrar */
    padding: 5px 40px 5px 8px;

    /* Tamaño de fuente ligeramente reducido para mejor ajuste */
    font-size: 1rem;

    /* Ancho máximo controlado para evitar popups muy anchos */
    max-width: 160px;
  }
}

/* Estilos para el marcador del mapa y su sombra - ajustado para funcionar con popup */
.leaflet-marker-icon.yeyu-marker {
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease, filter 0.3s ease;
  will-change: transform;
  transform-origin: bottom center;
  pointer-events: auto !important;
  /* Esto es crucial para que los eventos de clic funcionen */
  cursor: pointer;
  z-index: 600 !important;
  /* Prioridad apropiada pero no excesiva */
}

.leaflet-marker-icon.yeyu-marker:hover {
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.6));
  transform: translateY(-2px) scale(1.05);
}

/* Ajustes para asegurar que los popups funcionen correctamente */
.leaflet-popup {
  z-index: 700 !important;
  /* Asegurarse de que esté por encima del marcador */
  pointer-events: auto !important;
}

.leaflet-popup-content-wrapper {
  pointer-events: auto !important;
}

/* Corregir posicionamiento de capas del mapa */
.leaflet-pane {
  z-index: 400 !important;
  position: absolute;
}

.leaflet-popup-pane {
  z-index: 700 !important;
  /* Más alto que otros elementos */
}

.leaflet-marker-pane {
  z-index: 600 !important;
}

.leaflet-overlay-pane {
  z-index: 400 !important;
}

.leaflet-shadow-pane {
  z-index: 500 !important;
}

.leaflet-tooltip-pane {
  z-index: 650 !important;
}

/* Asegurar que las capas del mapa se muestren correctamente */
.leaflet-pane,
.leaflet-control,
.leaflet-top,
.leaflet-bottom {
  z-index: auto !important;
  position: absolute;
}

/* Asegurar posición correcta de los controles */
.leaflet-top {
  top: 10px !important;
}

.leaflet-right {
  right: 10px !important;
}

/* Asegurar que la sombra no sea ocultada por otras capas */
.leaflet-marker-pane {
  z-index: 600 !important;
}

/**
 * ============================================================================
 * DISEÑO RESPONSIVO Y MEDIA QUERIES
 * ============================================================================
 * 
 * Adaptaciones para diferentes tamaños de pantalla garantizando una experiencia
 * óptima en dispositivos móviles, tablets y desktop con ajustes específicos
 * para elementos de mapas, popups y controles de navegación.
 */
/* Media queries para dispositivos móviles */
@media (max-width: 480px) {
  .popup-sucursal .leaflet-popup-close-button {
    width: 44px;
    height: 44px;
    padding: 10px;
    font-size: 26px;
    top: 4px;
    right: 4px;
  }

  .popup-sucursal-contenido {
    padding: 5px 8px;
  }
}

@media (max-width: 767px) {
  .sucursal-nombre {
    font-size: 1.8rem;
  }

  .sucursal-mapa {
    height: 250px;
  }

  .sucursales-tabs {
    padding: 0.3rem;
    gap: 0.5rem;
  }

  .sucursal-tab {
    font-size: var(--texto-chico);
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  nuestras-sucursales {
    padding: 15px 10px;
    border-radius: calc(var(--arcilla-radio) * 0.7);
  }

  .sucursal-nombre {
    font-size: 1.5rem;
  }

  .sucursal-mapa {
    height: 220px;
  }

  .sucursal-info span {
    font-size: 0.8rem;
    line-height: 1.3;
    word-break: break-word;
  }

  .sucursales-titulo {
    font-size: 1.8rem;
  }

  sucursal-item {
    border-radius: calc(var(--arcilla-radio) * 0.5);
  }

  .sucursal-imagen {
    border-radius: calc(var(--arcilla-radio) * 0.5) calc(var(--arcilla-radio) * 0.5) 0 0;
  }
}

@media (max-width: 375px) and (max-height: 667px) {
  .sucursal-info span {
    font-size: 0.75rem;
  }

  .sucursales-titulo {
    font-size: 1.3rem;
  }
}

@media (min-width: 580px) {
  .sucursal-cabecera {
    max-width: 350px;
    max-height: 350px;
  }
}