/* KYMCO Distribuidores CSS - Mobile-First Design */
/* Archivo completamente reescrito para diseño KYMCO con ajustes Figma 100% */

/* CSS Variables para colores KYMCO */
:root {
    --kymco-primary: #000000;
    --kymco-secondary: #666666;
    --kymco-light-gray: #f5f5f5;
    --kymco-border: #e0e0e0;
    --kymco-text: #333333;
}

/* Reset específico para el componente */
#distributor-section-wrapper * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Estilos base del contenedor principal */
#distributor-section-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: transparent; /* Fondo transparente para mostrar fondo de página */
    box-shadow: none; /* Sin sombras */
}

/* Header Styles - Mobile First */
#header {
    padding: 20px; /* Padding completo para header */
}

#main-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: var(--kymco-text);
    margin-bottom: 20px;
}

#search-container {
    position: relative;
    margin-bottom: 20px;
}

#search-input {
    width: 100%;
    padding: 16px 50px 16px 20px;
    border: 2px solid var(--kymco-border);
    border-radius: 50px;
    font-size: 16px;
    outline: none;
    background-color: #FFFFFF; /* El input sí mantiene su fondo blanco */
}

#search-input:focus {
    border-color: var(--kymco-primary);
}

.search-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iQ2FwYV8zIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDg1IDg1Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuNi4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjEgQnVpbGQgOSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICAgIHN0cm9rZTogI2M0YzRjNDsKICAgICAgICBzdHJva2UtbGluZWNhcDogc3F1YXJlOwogICAgICAgIHN0cm9rZS1taXRlcmxpbWl0OiAxMDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMzMuNSIgY3k9IjMwLjgiIHI9IjIxLjMiLz4KICA8bGluZSBjbGFzcz0ic3QwIiB4MT0iNDguMSIgeTE9IjQ2LjciIHgyPSI3My44IiB5Mj0iNzQuNSIvPgo8L3N2Zz4=');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    display: inline-block;
    border-radius: 50%;
    padding: 2px;
}

/* Map Container Styles - Mobile First (Estilo base para desktop: respeta el contenedor) */
#map-container {
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
    border-radius: 8px; /* Bordes redondeados en desktop */
    overflow: hidden;
    box-shadow: none;
}

/* Técnica full-bleed solo para tablets y móviles */
@media (max-width: 991px) {
    #map-container {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-radius: 0; /* Sin bordes redondeados en full-bleed */
    }
}

#map {
    width: 100%;
    height: 100%;
}

/* Leaflet Overrides */
.leaflet-container {
    border-radius: inherit; /* Hereda el border-radius del contenedor */
}

.leaflet-control-attribution {
    display: none;
}

/* Estilo para el icono personalizado KYMCO */
.kymco-marker-icon {
    filter: none !important; /* Evitar filtros que puedan distorsionar el SVG */
    image-rendering: -webkit-optimize-contrast; /* Optimizar renderizado en WebKit */
    image-rendering: crisp-edges; /* Mantener bordes nítidos */
}

/* Controls and List Wrapper */
#controls-and-list-wrapper {
    padding: 0 20px; /* Padding lateral para contenido */
    background-color: transparent; /* Fondo transparente */
}

/* Controls Bar Styles */
#controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en móvil */
    gap: 15px; /* Espacio entre elementos cuando se envuelven */
}

/* Responsive para controls bar en móvil */
@media (max-width: 480px) {
    #controls-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    #store-counter {
        justify-content: center;
        order: 1;
    }

    #view-switcher {
        order: 2;
        justify-content: center;
    }
}

#store-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--kymco-text);
}

.store-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iQ2FwYV8zIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDg1IDg1Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuNi4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjEgQnVpbGQgOSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICAgIHN0cm9rZTogIzk0OTQ5NDsKICAgICAgICBzdHJva2UtbGluZWNhcDogc3F1YXJlOwogICAgICAgIHN0cm9rZS1taXRlcmxpbWl0OiAxMDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHJlY3QgY2xhc3M9InN0MCIgeD0iMTIuNCIgeT0iNDkuMiIgd2lkdGg9IjMzLjciIGhlaWdodD0iMjUuMyIvPgogIDxsaW5lIGNsYXNzPSJzdDAiIHgxPSI3MS4yIiB5MT0iNzQuNSIgeDI9IjcxLjIiIHkyPSI0OS4yIi8+CiAgPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSI3OS40IDQ5LjIgNS4zIDQ5LjIgNS4zIDQxIDkuMyAyMC43IDc1LjEgMjAuNyA3OS40IDQzLjggNzkuNCA0OS4yIi8+CiAgPGxpbmUgY2xhc3M9InN0MCIgeDE9IjEyLjQiIHkxPSIxMC41IiB4Mj0iNzEuMiIgeTI9IjEwLjUiLz4KPC9zdmc+');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    display: inline-block;
    flex-shrink: 0;
    border-radius: 4px;
    padding: 2px;
}

/* View Switcher Styles - Posicionado entre mapa y lista */
#view-switcher {
    display: flex;
    gap: 8px;
    margin: 24px 0; /* Espaciado tanto arriba (del mapa) como abajo (de la lista) */
    justify-content: center; /* Centrar botones */
    padding: 0 20px; /* Padding lateral consistente */
}

.view-btn {
    padding: 10px 32px; /* Más padding vertical y horizontal para mayor comodidad */
    border: 2px solid var(--kymco-border);
    border-radius: 20px;
    background: #fff; /* Asegúrate que el estado normal sea blanco */
    color: var(--kymco-text);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-width: 140px; /* Ancho mínimo garantizado */
}

.view-btn.active, .view-btn:hover {
    background: var(--kymco-secondary) !important; /* Gris oscuro para hover y activo */
    color: #fff !important;
    border-color: var(--kymco-secondary) !important;
}

/* Store List Styles */
#store-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Limitar altura de lista en móvil - solo mostrar 2-3 tiendas */
@media (max-width: 991px) {
    #store-list {
        max-height: 600px; /* Altura para ~2.5 tiendas (aprox 240px por card) */
        overflow-y: auto; /* Scroll vertical */
        border-radius: 8px; /* Bordes redondeados */
        padding-right: 8px; /* Espacio para scrollbar */
    }
    
    /* Scrollbar personalizada para móvil */
    #store-list::-webkit-scrollbar {
        width: 4px;
    }
    
    #store-list::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 2px;
    }
    
    #store-list::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 2px;
    }
    
    #store-list::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
}

.store-card {
    display: block;
    padding: 24px; /* Padding vertical aumentado para dar más "aire" interno */
    margin-bottom: 32px; /* Separación aumentada entre cards para mejor distinción */
    border-bottom: 1px solid var(--kymco-border); /* Mantiene el separador ENTRE cards */
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 8px;
    max-width: 100%;
    background-color: transparent;
    min-height: 200px; /* Aumentado para acomodar mejor contenido y espaciado */
}

.store-card:hover {
    background-color: var(--kymco-light-gray);
}

.store-card.active {
    background-color: var(--kymco-light-gray);
    border-left: 4px solid var(--kymco-primary);
}

.store-card:last-child {
    border-bottom: none;
    margin-bottom: 24px; /* Espacio final consistente */
}

/* Card Icons Column (estructura antigua oculta para compatibilidad) */
.card-icons-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 24px;
}

.icon-location,
.icon-phone {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    display: inline-block;
    flex-shrink: 0;
    border-radius: 4px;
    padding: 2px;
}

.icon-location {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iQ2FwYV8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDg1IDg1Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuNi4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjEgQnVpbGQgOSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogc3F1YXJlOwogICAgICAgIHN0cm9rZS1taXRlcmxpbWl0OiAxMDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Il94MzhfIj4KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OSwzMS4zYzAsNC4zLTEsOC4zLTIuNywxMS45LTQuNCw5LjEtMjQuNSwzNy4xLTI0LjUsMzcuMSwwLDAtMTkuNi0yNy43LTI0LjEtMzYuNC0yLTMuOC0zLjEtOC0zLjEtMTIuNiwwLTE1LDEyLjItMjcuMiwyNy4yLTI3LjJzMjcuMiwxMi4yLDI3LjIsMjcuMloiLz4KICAgIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjQxLjgiIGN5PSIzMS4zIiByPSIxMS4xIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjYgNjQuOCkgcm90YXRlKC03Ni43KSIvPgogIDwvZz4KPC9zdmc+');
}

.icon-phone {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iQ2FwYV8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDg1IDg1Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuNi4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjEgQnVpbGQgOSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogc3F1YXJlOwogICAgICAgIHN0cm9rZS1taXRlcmxpbWl0OiAxMDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Il94MzFfMCI+CiAgICA8cmVjdCBjbGFzcz0ic3QwIiB4PSIyMC43IiB5PSI3LjIiIHdpZHRoPSI0MS40IiBoZWlnaHQ9IjcwLjEiLz4KICAgIDxsaW5lIGNsYXNzPSJzdDAiIHgxPSIyMC43IiB5MT0iNjQuMSIgeDI9IjU1IiB5Mj0iNjQuMSIvPgogICAgPGxpbmUgY2xhc3M9InN0MCIgeDE9IjQwLjYiIHkxPSI3MC45IiB4Mj0iNDIuMyIgeTI9IjcwLjkiLz4KICAgIDxsaW5lIGNsYXNzPSJzdDAiIHgxPSIzNy43IiB5MT0iMTQuNCIgeDI9IjQ1LjIiIHkyPSIxNC40Ii8+CiAgPC9nPgo8L3N2Zz4=');
}

/* Card Text Column (estructura antigua oculta para compatibilidad) */
.card-text-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.store-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--kymco-text);
}

.store-address {
    font-size: 14px;
    color: var(--kymco-secondary);
    line-height: 1.4;
}

.store-phone {
    font-size: 14px;
    color: var(--kymco-primary);
    font-weight: 500;
}

/* Nueva Estructura de Cards - Info Lines */
.store-info-container {
    width: 100%;
}

.distribuidor-nombre {
    font-size: 16px;
    font-weight: 600;
    color: var(--kymco-text);
    margin-bottom: 20px; /* Más espacio después del título */
    display: block;
}

.info-linea {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 16px; /* Aún más separación vertical entre líneas */
}

.info-linea:first-of-type {
    margin-top: 0;
}

/* Íconos en líneas de información */
.icono-ubicacion,
.icono-telefono {
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    flex-shrink: 0;
    margin-top: 2px;
    display: inline-block;
    min-width: 28px;
    min-height: 28px;
    border-radius: 4px;
    padding: 2px;
}

/* Iconos KYMCO oficiales */
.icono-ubicacion {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iQ2FwYV8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDg1IDg1Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuNi4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjEgQnVpbGQgOSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogc3F1YXJlOwogICAgICAgIHN0cm9rZS1taXRlcmxpbWl0OiAxMDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Il94MzhfIj4KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OSwzMS4zYzAsNC4zLTEsOC4zLTIuNywxMS45LTQuNCw5LjEtMjQuNSwzNy4xLTI0LjUsMzcuMSwwLDAtMTkuNi0yNy43LTI0LjEtMzYuNC0yLTMuOC0zLjEtOC0zLjEtMTIuNiwwLTE1LDEyLjItMjcuMiwyNy4yLTI3LjJzMjcuMiwxMi4yLDI3LjIsMjcuMloiLz4KICAgIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjQxLjgiIGN5PSIzMS4zIiByPSIxMS4xIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjYgNjQuOCkgcm90YXRlKC03Ni43KSIvPgogIDwvZz4KPC9zdmc+');
}

.icono-telefono {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iQ2FwYV8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDg1IDg1Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuNi4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjEgQnVpbGQgOSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogc3F1YXJlOwogICAgICAgIHN0cm9rZS1taXRlcmxpbWl0OiAxMDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Il94MzFfMCI+CiAgICA8cmVjdCBjbGFzcz0ic3QwIiB4PSIyMC43IiB5PSI3LjIiIHdpZHRoPSI0MS40IiBoZWlnaHQ9IjcwLjEiLz4KICAgIDxsaW5lIGNsYXNzPSJzdDAiIHgxPSIyMC43IiB5MT0iNjQuMSIgeDI9IjU1IiB5Mj0iNjQuMSIvPgogICAgPGxpbmUgY2xhc3M9InN0MCIgeDE9IjQwLjYiIHkxPSI3MC45IiB4Mj0iNDIuMyIgeTI9IjcwLjkiLz4KICAgIDxsaW5lIGNsYXNzPSJzdDAiIHgxPSIzNy43IiB5MT0iMTQuNCIgeDI9IjQ1LjIiIHkyPSIxNC40Ii8+CiAgPC9nPgo8L3N2Zz4=');
}

/* Texto en líneas de información */
.direccion-texto,
.telefono-texto {
    font-size: 14px;
    color: var(--kymco-secondary);
    line-height: 1.4;
    flex: 1;
}

.telefono-texto {
    color: var(--kymco-primary);
    font-weight: 500;
}

/* Estilos para productos en cards - Layout grilla horizontal */
.productos-lista {
    display: flex;
    flex-direction: row; /* Organiza los productos horizontalmente */
    justify-content: flex-start; /* Cambiado de 'space-around' a 'flex-start' para alineación izquierda */
    align-items: flex-start; /* Alinea los items en la parte superior */
    margin-top: 20px;
    padding-top: 20px;
    border-top: none; /* Elimina la línea separadora interna */
    gap: 24px; /* Aumentado de 10px a 24px para mejor separación */
    flex-wrap: nowrap; /* ¡CRÍTICO! Evita el salto de línea en móvil */
    max-width: 100%; /* Asegurar que no desborde */
    width: 100%;
}

.producto-item {
    display: flex;
    flex-direction: column; /* Apila el ícono y el texto verticalmente */
    align-items: center; /* Centra ambos elementos horizontalmente */
    gap: 8px; /* Espacio entre el ícono y el texto */
    flex: 1; /* Permite que los items se encojan o estiren para caber */
    min-width: 0; /* Permite que el item se encoja por debajo de su contenido */
    text-align: center;
    max-width: 80px; /* Máximo ancho para mantener proporción */
}

.producto-texto {
    font-size: 12px; /* Tamaño de texto optimizado para grilla */
    color: var(--kymco-secondary);
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word; /* Permite quebrar palabras largas */
    hyphens: auto; /* Guiones automáticos */
    max-width: 100%; /* Prevenir desbordamiento */
}

/* Responsivo: En móviles muy pequeños, máximo 3 columnas */
@media (max-width: 480px) {
    .productos-lista {
        justify-content: flex-start; /* Mantener alineación izquierda en móviles */
        gap: 16px; /* Gap consistente con diseño */
    }
    
    .producto-item {
        width: calc(33.333% - 8px); /* 3 columnas exactas */
        min-width: 60px;
        gap: 6px; /* Menos espacio entre icono y texto */
    }
    
    .producto-texto {
        font-size: 10px; /* Texto más pequeño en móviles */
        line-height: 1.1;
    }
    
    /* Iconos más pequeños en móviles */
    .icono-moto,
    .icono-scooter,
    .icono-maxiscooter,
    .icono-todoterreno {
        width: 36px;
        height: 36px;
        background-size: 24px 18px;
    }
}

/* Iconos para productos */
.icono-productos {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJMMTMuMDkgOC4yNkwyMCA5TDEzLjA5IDE1Ljc0TDEyIDIyTDEwLjkxIDE1Ljc0TDQgOUwxMC45MSA4LjI2TDEyIDJaIiBzdHJva2U9IiM2NjY2NjYiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4K');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    flex-shrink: 0;
}

/* Iconos para productos por categoría - Optimizados para grilla */
.icono-moto,
.icono-scooter {
    width: 48px;  /* Tamaño aumentado para mejor visibilidad en grilla */
    height: 48px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iQ2FwYV8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyNi43IDk2LjYiPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOS42LjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMSBCdWlsZCA5KSAgLS0+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6IG5vbmU7CiAgICAgICAgc3Ryb2tlOiAjMDAwOwogICAgICAgIHN0cm9rZS1saW5lY2FwOiBzcXVhcmU7CiAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOwogICAgICAgIHN0cm9rZS13aWR0aDogMnB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyMC4zIiBjeT0iNzQuMyIgcj0iMTMuMSIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjIwLjMiIGN5PSI3NC4zIiByPSI4LjYiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI5OC43IiBjeT0iNzQuMyIgcj0iMTMuMSIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9Ijk4LjciIGN5PSI3NC4zIiByPSI4LjYiLz4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjAuMyw1My4zbDMuNi0xLDEwLjgsMTIuNywxLjgsMTIuMiwzNi4yLTMuN3MxMC44LTE3LjksMTkuMS0yMS4ybDE5LjMtMy44LTgtMy41LDQuOS0yLjgsMy4xLTUuNi0xMi43LDIuNXMtMTAuNCwyLjktMTcsNi4yYzAsMC0xMC4zLDQuOS0xNi4zLDVsLTguMy44LDMsNS43LS42LDIuOCwxLjcuOXMtMS41LDQuNS0xLjgsNC41LTE0LjgsMi4zLTE0LjgsMi4zYzAsMC00LjEtMTIuNy00LjEtMTMuMXMtLjktNi41LjQtOS42bDQuMS04LjYtLjUtMy4zLTYuMS0yLjMtMS41LDJoLTIuNGMwLC4xLTEwLjMsNy43LTEzLjcsMjAuOFoiLz4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTYuNyw1MS4ycy01LTIuOC43LTYuOGwzLjgtMy4yczIuMy0yLDYuNy0xLjdjMCwwLDYuNC4xLDEyLjgtMiwwLDAsMTYuNi00LjcsMjAtMi40bC0yLjQsNCIvPgogIDxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjEwMC43IDM1LjEgMTExIDMyLjcgMTEzLjYgMzMuNCAxMDEuOCAzNy45IDk3LjggNDEuOCAxMDUuMyA0My44Ii8+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTEwMi4yLDUxLjJzOC40LDYuNywxMS40LDEyLjFsNyw1LjctMy4yLTQuNnMtNy4xLTEzLjMtMTAtMTQuOSIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MC4yLDI4LjZoLTIuN2wtMy40LDEuMyw0LjMtNy44LDMuOSwxLjRoMi4zYzAtLjEsNC4yLDIuNCw0LjEsNC44LDAsMC0zLjEsNC04LjUuMloiLz4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDQuNiwyMy40bC0uNS0zLjEuNS0yLjhzLTEuNC0yLjItLjUtNC4zYzAsMCwxLjktMy44LDQuMi0zLjEsMCwwLDEuNiwyLjIsMSw0LjYsMCwwLS42LDIuOS0zLjQsMyIvPgo8L3N2Zz4=');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 24px; /* Tamaño de imagen ajustado */
    flex-shrink: 0;
    margin-bottom: 0; /* Asegurar reset de márgenes previos */
    display: inline-block;
    border-radius: 4px;
}

/* Icono para maxi scooter - Optimizado para grilla */
.icono-maxiscooter {
    width: 48px;
    height: 48px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iQ2FwYV8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE0NC4xIDk2LjYiPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOS42LjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMSBCdWlsZCA5KSAgLS0+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6IG5vbmU7CiAgICAgICAgc3Ryb2tlOiAjMDAwOwogICAgICAgIHN0cm9rZS1saW5lY2FwOiBzcXVhcmU7CiAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOwogICAgICAgIHN0cm9rZS13aWR0aDogMnB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyMS4zIiBjeT0iNzMuOCIgcj0iMTYuOCIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjIxLjMiIGN5PSI3My44IiByPSIxMSIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjExNy43IiBjeT0iNzIuOSIgcj0iMTYuOCIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjExNy43IiBjeT0iNzIuOSIgcj0iMTEiLz4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTkuNyw0N2wtNy42LDYuNSw2LjctLjZzMTAuNCwzLDE5LjMsMTQuM2MwLDAsMS40LDExLjQuOCwxMywwLDAsMjAuNSwyLjcsMzctMS44bDEzLjgtOC42di0yLjNsNS41LTQsMS45LTYuN3MxNi44LTcuNCwyMC04LjFsOC4yLTIuNiwzLjQtMy4xLDIuNS0zLjksMS4zLTUuMmgtNi42bC0zNi41LDEyLjNzLTE3LjgsNC41LTIzLjcsOC4yYzAsMC0xMC43LDUuOC0xMi43LjZsLTQuNi05LjhzNC42LTMsNC4yLTEwLjJjMCwwLDEuMi00LjQtNS43LTYuMWwtMTAuNi0yLjcsMi45LTYuNHMtMi4yLTIuNS01LS41bC02LjksOC4yLDMuNi0uNC03LjQsNy45cy00LjEsMS40LTQuMyw1LjZsLjQsNi41WiIvPgogIDxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjEyNS4zIDQ2LjEgMTMxLjYgNTAuNiAxNDAuMSA2Mi45IDE0MC40IDYwLjUgMTQwLjQgNTcuNyAxMzMuOSA0Ny41IDEzMS42IDQ1IDEyOC43IDQyLjkiLz4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTI2LDMzLjhsMS4yLTNoLTIuMnMtMS45LS43LTQuMywwYzAsMC0uOS0xLjMtMTIuOCwyLDAsMC0xMC40LTEuMi0xMS42LDEsMCwwLS4yLDUuMS05LjUsNC45bC0xMi4yLS44cy0zLjYtLjQtNS43LDMuOGwtNi40LDkuN3MtLjksMi43LDEuOCwzLjciLz4KICA8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjI5LjggMjQuNiAyNC41IDI3LjUgMzcgNi44IDM4LjEgMTIuNSAyOS44IDI0LjYiLz4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDAuNCwyNy4xczEuNi00LDMuNy01LjJsNC4zLTIuOHYtMi4zbDQuNS4zLjYtMi44LTEuMi01LjgsMS44LS41czAtMy4zLDIuNy0yLjZsLjYsNi45aC0yLjJjMCwwLDAsNS4xLDAsNS4xbDQuMSwyLjQtLjksMS42LTQuMi0uNS00LjMsOSIvPgogIDxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjMyLjIgNDkuNCAzMS4zIDUxLjEgNDUuNCA2NS45IDQ2LjUgNzIuNSA0OC40IDczLjggNzguMiA2OSA3OC44IDY3LjUgOTYuNSA1OSIvPgo8L3N2Zz4=');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 24px;
    flex-shrink: 0;
    margin-bottom: 0;
    display: inline-block;
    border-radius: 4px;
}

/* Icono para todo terreno - Optimizado para grilla */
.icono-todoterreno {
    width: 48px;
    height: 48px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iQ2FwYV8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyNi43IDk2LjYiPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOS42LjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMSBCdWlsZCA5KSAgLS0+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6IG5vbmU7CiAgICAgICAgc3Ryb2tlOiAjMDAwOwogICAgICAgIHN0cm9rZS1saW5lY2FwOiBzcXVhcmU7CiAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOwogICAgICAgIHN0cm9rZS13aWR0aDogMnB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyOS41IiBjeT0iNjcuNSIgcj0iMTYuOCIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjI5LjUiIGN5PSI2Ny41IiByPSI3LjkiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxMDAuMSIgY3k9IjY3LjUiIHI9IjE2LjgiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxMDAuMSIgY3k9IjY3LjUiIHI9IjcuOSIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjE2LjMiIGN5PSI0Ni41IiByPSIyLjUiLz4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjAsNDIuNnY5bDQuNy0yLjUsMS43LTUsMy0xLjUsNC4yLTMuNCwzLjIsMy41LTIuMSw0LjQsMy41LDEuOSwyLjktMi41LDYuMywxMC45LDEuOC0uNy0xMC0yMC4xcy0uOC0yLjktNC42LTEuNGwtOC4zLDUuMS03LjUsMS41LDguOS0xMC4xLDYuNy0zLjksMSwuOCwyLjcuNCw1LjkuN3M5LjUtMy44LDEzLjksMi40YzAsMCw4LjYsMTAuOCwxNC40LDEwLjUsMCwwLDYuNy0xLjEsOC4yLTIuNGwyLjEtMi44LDExLjItNS41LDcuNC0yLjksNC44LTQtMy42LDUuNS00LjUsNS4yLTMuOCwxLjUtMTIuMyw1LjktNC4zLDI0LjNoLTIzLjhzLTIuMi0xLjEtMi41LTMuMWwtMS44LTExLjRzLTIuMi0xMS4yLTQuOC0xMy45YzAsMC00LjMtNi4xLTcuMS02LjMsMCwwLTkuNSwzLjUtOS42LDUuNSIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NC45LDM4LjVzMi4yLTMuMiw3LjkuNGMwLDAsMjAuNCwxMC45LDI3LjYsMTEuOCIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01Mi41LDU4LjNzMCw2LjMsMy4xLDYuNWgxNy42czEuNS0uNSwyLTMuMmwxLjctOC41Ii8+CiAgPHBvbHlsaW5lIGNsYXNzPSJzdDAiIHBvaW50cz0iODEuMyA0OC4zIDk4LjkgNDQgMTAwLjYgNDUuOCAxMDAuMSA0OC4zIDc5LjQgNTQuOCIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01Ny45LDMyLjJzMS43LTEuOSw2LjIuOGMwLDAsNy4xLDIuOSwxNC40LDEuMiwwLDAsMTQuMS02LDE3LjItMy44Ii8+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTM2LjksMjguNnMzLTUuNCw0LjItNS41bC0uOC0xLjktLjgtMy43LDIuOC0uOC43LDEuOSwyLjgtMS41czMuMi0yLDMuOC0uNGwtMi41LDIuNSwxLjIsMS44LTEuMiwyLjgsMS41LDEuMi4yLDEuOS0zLjMtLjItLjcsMi4yIi8+Cjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 24px;
    flex-shrink: 0;
    margin-bottom: 0;
    display: inline-block;
    border-radius: 4px;
}

/* Footer eliminado - se desarrollará en Elementor */

/* Desktop Layout - Diseño adaptativo de dos columnas */
@media (min-width: 992px) {
    #distributor-section-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        display: flex; /* Activar Flexbox para layout dos columnas */
        gap: 20px; /* Espacio entre columnas */
        align-items: stretch; /* Columnas de igual altura */
    }

    /* Columna Izquierda: 40% del ancho */
    #left-column {
        width: 40%;
        display: flex;
        flex-direction: column;
        min-height: 650px; /* Igualar la altura mínima de la columna izquierda */
    }

    /* En desktop, el mapa se mueve visualmente a la columna derecha */
    #map-container {
        position: absolute; /* Posicionamiento absoluto para sacarlo del flujo */
        right: 0;
        top: 0;
        width: calc(60% - 20px); /* Ancho de columna derecha menos gap */
        height: 650px; /* ANTERIOR: 500px. Aumentado en ~30% */
        left: calc(40% + 20px); /* Posición después de columna izquierda + gap */
    }

    /* Botones de vista en desktop - posicionados entre mapa y lista */
    #view-switcher {
        margin: 0 0 30px 0; /* Solo margin-bottom para separar de la lista */
        justify-content: center; /* Centrar los botones */
        display: flex;
        gap: 8px;
        order: 1; /* Posicionar después del header pero antes de la lista */
    }

    /* Lista con scroll limitado a 3 items */
    #store-list {
        flex: 1; /* Expandir para ocupar espacio disponible */
        max-height: 400px; /* Altura calculada para ~3 tarjetas (48px padding + 48px margin = ~130px por card) */
        order: 2; /* Posicionar después de los botones de vista */
        overflow-y: auto; /* Scroll vertical cuando sea necesario */
        padding-right: 10px; /* Espacio para scrollbar */
        margin-right: -10px; /* Compensar padding */
    }

    /* Estilos personalizados de scrollbar - WebKit (Chrome, Safari, Edge) */
    #store-list::-webkit-scrollbar {
        width: 6px; /* Ancho delgado */
    }

    #store-list::-webkit-scrollbar-track {
        background: #f1f1f1; /* Color del track */
        border-radius: 3px;
    }

    #store-list::-webkit-scrollbar-thumb {
        background: #c1c1c1; /* Color gris del thumb */
        border-radius: 3px;
    }

    #store-list::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8; /* Color más oscuro en hover */
    }

    /* Estilos personalizados de scrollbar - Firefox */
    #store-list {
        scrollbar-width: thin; /* Delgada */
        scrollbar-color: #c1c1c1 #f1f1f1; /* thumb color, track color */
    }

    /* Empujar contador al final de la columna izquierda */
    #store-counter {
        margin-top: auto; /* ¡Esta es la línea clave! */
        padding-top: 20px;
        justify-content: center; /* Centrar el contador */
        display: flex;
        align-items: center;
        gap: 8px;
        order: 3; /* Posicionar al final después de botones y lista */
    }

    /* Columna Derecha: 60% del ancho */
    #right-column {
        width: 60%;
        display: flex;
        flex-direction: column;
    }

    /* Vista Solo Lista en Desktop: ocultar mapa y expandir lista */
    .solo-lista-view #map-container {
        display: none !important;
    }
    
    .solo-lista-view #left-column {
        width: 100% !important;
    }
    
    .solo-lista-view #right-column {
        display: none !important;
    }

    #header {
        padding: 30px 0 20px 0; /* Ajustar padding para columna */
        text-align: left; /* Alineación izquierda en desktop */
        order: 0; /* Posicionar al inicio, antes que todos los demás elementos */
    }

    #main-title {
        font-size: 32px;
        margin-bottom: 30px;
        text-align: left; /* Alineación izquierda en desktop */
    }

    /* Reset del mapa para desktop - bordes redondeados */
    #map-container {
        margin-left: 0; /* Reset técnica full-bleed para desktop */
        margin-right: 0; /* Reset técnica full-bleed para desktop */
        border-radius: 8px; /* Restaurar bordes redondeados en desktop */
    }

    #map {
        height: 100%;
        width: 100%;
        border-radius: inherit; /* Heredar border-radius del contenedor */
    }

    /* Footer eliminado - se desarrollará en Elementor */
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    max-width: 400px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
    position: relative;
    margin-bottom: 20px;
}

.modal-close {
    position: absolute;
    top: -10px;
    right: -10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--kymco-secondary);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.modal-close:hover {
    color: var(--kymco-primary);
}

.modal-body h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--kymco-text);
    margin-bottom: 15px;
}

.modal-body p {
    font-size: 16px;
    color: var(--kymco-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.directions-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 24px;
    background: var(--kymco-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.directions-btn:hover {
    background: var(--kymco-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Estilos para enlace "Cómo llegar" */
.como-llegar-container {
    margin-top: 24px; /* Incrementado para mejor separación visual del contenido superior */
}

.como-llegar-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--kymco-primary); /* #000000 - Color primario KYMCO */
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 50px; /* Estilo píldora consistente con otros botones */
    font-weight: 500;
    font-size: 14px;
    transition: background-color 0.3s ease;
    text-align: center;
    min-width: 120px;
}

.como-llegar-link:hover {
    background-color: var(--kymco-secondary); /* #666666 - Color hover */
    color: #FFFFFF; /* Mantener texto blanco en hover */
    text-decoration: none;
}

.como-llegar-link:focus {
    outline: 2px solid var(--kymco-primary);
    outline-offset: 2px;
}