/* Mapa de sucursales — interfaz al estilo iOS (HIG).
   Lista agrupada: el encabezado de región va FUERA, en gris, y las sucursales
   son filas dentro de una sola tarjeta blanca. Nada de caja dentro de caja.
   Se usa la fuente del sistema (SF Pro en Apple) en vez de la PT Sans del sitio:
   es lo que da el aire de app nativa y además PT Sans solo trae 400 y 700, así
   que sin ella no existen los pesos intermedios que el estilo necesita. */
.fdo-mapa {
    /* marca */
    --fdo-tint: #2669bb;
    --fdo-tint-osc: #184363;
    --fdo-pin: #5fa5cd;          /* cuerpo del pin: los grupos usan este tono */
    /* neutros del sistema */
    --ios-card: #fff;
    --ios-label: #1c1c1e;
    --ios-label-2: rgba(60,60,67,.6);
    --ios-label-3: rgba(60,60,67,.32);
    --ios-sep: rgba(60,60,67,.2);
    --ios-fill: rgba(120,120,128,.12);
    --ios-fill-2: rgba(120,120,128,.2);
    --ios-verde: #2a9e4b;
    --ios-rojo: #d6392f;
    --ios-r: 13px;

    margin: 0 0 30px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
                 Roboto, system-ui, sans-serif;
    color: var(--ios-label);
    -webkit-font-smoothing: antialiased;
}
.fdo-mapa *, .fdo-mapa *::before, .fdo-mapa *::after { box-sizing: border-box; }

/* --- controles --------------------------------------------------------- */
.fdo-mapa-controles { margin-bottom: 16px; }
.fdo-mapa-fila-busqueda { display: flex; gap: 10px; margin-bottom: 12px; max-width: 620px; }

/* Campo de búsqueda: relleno gris translúcido y lupa dentro, como en iOS. */
/* El tema define input[type="search"] (0,1,1) y le gana a una clase sola. */
.fdo-mapa input[type="search"].fdo-mapa-buscar {
    flex: 1 1 auto; min-width: 0; height: 40px;
    padding: 0 14px 0 38px;
    border: 0; border-radius: 10px; background: var(--ios-fill);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(60,60,67,.5)'%3E%3Cpath d='M11.74 10.34h-.68l-.24-.23a5.56 5.56 0 1 0-.6.6l.23.24v.68L14.7 16l1.3-1.3-4.26-4.26Zm-5.13 0a3.85 3.85 0 1 1 0-7.7 3.85 3.85 0 0 1 0 7.7Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 13px center; background-size: 15px 15px;
    font: inherit; font-size: 16px; font-weight: 400; color: var(--ios-label);
    -webkit-appearance: none; appearance: none;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.fdo-mapa input[type="search"].fdo-mapa-buscar::placeholder { color: var(--ios-label-2); font-weight: 400; }
.fdo-mapa input[type="search"].fdo-mapa-buscar:focus {
    outline: none; background-color: #fff;
    box-shadow: 0 0 0 3.5px rgba(38,105,187,.22);
}
.fdo-mapa input[type="search"].fdo-mapa-buscar::-webkit-search-cancel-button { -webkit-appearance: none; }

.fdo-mapa-cercana {
    flex: 0 0 auto; height: 40px; padding: 0 16px; border: 0; border-radius: 10px;
    background: var(--fdo-tint); color: #fff;
    font: inherit; font-size: 15px; font-weight: 600; line-height: 1;
    cursor: pointer; white-space: nowrap;
    transition: opacity .15s ease, transform .1s ease;
}
.fdo-mapa-cercana:hover { opacity: .88; }
.fdo-mapa-cercana:active { transform: scale(.96); }
.fdo-mapa-cercana[disabled] { opacity: .5; cursor: default; }

/* Chips de región, estilo filtros de Apple Music: relleno gris, sin borde. */
.fdo-mapa-filtros {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fdo-mapa-filtros::-webkit-scrollbar { display: none; }
.fdo-mapa-filtro {
    flex: 0 0 auto; height: 34px; padding: 0 15px; border: 0;
    border-radius: 999px; background: var(--ios-fill); color: var(--ios-label);
    font: inherit; font-size: 15px; font-weight: 500; line-height: 1;
    cursor: pointer; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.fdo-mapa-filtro:hover { background: var(--ios-fill-2); }
.fdo-mapa-filtro:active { transform: scale(.96); }
.fdo-mapa-filtro.is-activo { background: var(--fdo-tint); color: #fff; font-weight: 600; }

@media (min-width: 901px) {
    .fdo-mapa-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
    .fdo-mapa-filtros { order: 1; overflow: visible; flex: 0 1 auto; padding-bottom: 0; }
    .fdo-mapa-fila-busqueda {
        order: 2; margin: 0 0 0 auto; flex: 1 1 340px; max-width: 460px; min-width: 300px;
    }
    .fdo-mapa-filtro { height: 38px; }
    .fdo-mapa-buscar, .fdo-mapa-cercana { height: 38px; }
}

/* --- pestanas (solo celular) -------------------------------------------- */
/* Control segmentado: pista gris con una "pastilla" blanca que se desliza. */
.fdo-mapa-tabs { display: none; }

@media (max-width: 900px) {
    .fdo-mapa-tabs {
        display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
        padding: 2px; margin-bottom: 14px;
        background: var(--ios-fill); border-radius: 10px;
    }
    .fdo-mapa-tab {
        border: 0; background: transparent; border-radius: 8px; height: 32px;
        font: inherit; font-size: 14px; font-weight: 500; color: var(--ios-label);
        cursor: pointer; line-height: 1;
        transition: background-color .2s ease, box-shadow .2s ease, font-weight .2s ease;
    }
    .fdo-mapa-tab.is-activo {
        background: #fff; font-weight: 600;
        box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04);
    }
    /* En celular solo se ve la pestana elegida. */
    .fdo-mapa-cuerpo[data-movil="mapa"] .fdo-mapa-listado { display: none; }
    .fdo-mapa-cuerpo[data-movil="lista"] .fdo-mapa-lienzo { display: none; }
}

/* --- cuerpo ------------------------------------------------------------ */
.fdo-mapa-cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.fdo-mapa-lienzo {
    height: 580px; border-radius: var(--ios-r); overflow: hidden; background: #e6e6eb;
    position: sticky; top: 20px;
    border: 1px solid rgba(60,60,67,.13);
}
.fdo-mapa-listado { max-height: 580px; overflow-y: auto; padding-right: 6px; }
.fdo-mapa-listado::-webkit-scrollbar { width: 5px; }
.fdo-mapa-listado::-webkit-scrollbar-thumb { background: var(--ios-label-3); border-radius: 999px; }

/* Encabezado de sección: fuera de la tarjeta, gris, como en Ajustes. */
.fdo-mapa-region {
    font-size: 13px; font-weight: 600; color: var(--ios-label-2);
    margin: 0 0 7px; padding: 0 16px; letter-spacing: 0; text-transform: none;
}
.fdo-mapa-grupo + .fdo-mapa-grupo { margin-top: 22px; }

/* Una sola tarjeta por región; las sucursales son filas con hairline. */
/* Cada sucursal es su propia tarjeta. Sin panel gris de fondo, lo que la
   delimita es el hairline: una sombra sobre blanco se ve sucia. */
.fdo-mapa-lista { display: flex; flex-direction: column; gap: 10px; }
.fdo-mapa-tarjeta {
    position: relative; padding: 14px 16px; cursor: pointer;
    background: var(--ios-card); border: 1px solid rgba(60,60,67,.13);
    border-radius: var(--ios-r);
    transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.fdo-mapa-tarjeta:hover { border-color: rgba(60,60,67,.26); }
.fdo-mapa-tarjeta:active { transform: scale(.995); }
.fdo-mapa-tarjeta.is-activa {
    border-color: var(--fdo-tint); background: rgba(38,105,187,.05);
    box-shadow: 0 0 0 1px var(--fdo-tint);
}

.fdo-mapa-nombre {
    font-size: 17px; font-weight: 600; line-height: 1.3; margin: 0 0 2px;
    color: var(--ios-label); text-transform: none;
}
.fdo-mapa-direccion {
    font-size: 15px; font-weight: 400; line-height: 1.35; margin: 0 0 6px;
    color: var(--ios-label-2);
}

/* Estado: punto de color + texto, no una cápsula. */
/* Etiqueta y valor en dos columnas: si el horario no cabe, envuelve alineado
   bajo el estado y no arranca una línea suelta. */
.fdo-mapa-horario {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 13px; font-weight: 400; color: var(--ios-label-2); margin: 0 0 11px;
}
.fdo-mapa-valor { flex: 1 1 auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; }
.fdo-mapa-etq { color: var(--ios-label-2); font-weight: 400; flex: 0 0 auto; }
.fdo-mapa-estado {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 600; padding: 0; background: none;
}
.fdo-mapa-estado::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.fdo-mapa-estado.abierto { color: var(--ios-verde); }
.fdo-mapa-estado.cerrado { color: var(--ios-rojo); }
.fdo-mapa-horas { color: var(--ios-label-2); }

/* Acciones: botones "tinted" de iOS — relleno suave y etiqueta en color. */
.fdo-mapa-acciones { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.fdo-mapa-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 32px; padding: 0 13px; border: 0; border-radius: 9px;
    background: var(--ios-fill); color: var(--ios-label);
    font-size: 14px; font-weight: 500; text-decoration: none; line-height: 1;
    white-space: nowrap; transition: background-color .15s ease, transform .1s ease;
}
.fdo-mapa-btn:hover { background: var(--ios-fill-2); color: var(--ios-label); }
.fdo-mapa-btn:active { transform: scale(.96); }
.fdo-mapa-btn-maps { background: var(--fdo-tint); color: #fff; font-weight: 600; }
.fdo-mapa-btn-maps:hover { background: var(--fdo-tint); color: #fff; opacity: .88; }
.fdo-mapa-btn-wa { background: rgba(37,211,102,.14); color: #1a8a45; }
.fdo-mapa-btn-wa:hover { background: rgba(37,211,102,.24); color: #16773b; }

.fdo-mapa-vacio {
    padding: 28px 16px; color: var(--ios-label-2); font-size: 15px;
    font-weight: 400; text-align: center;
}
.fdo-mapa-distancia { color: var(--fdo-tint); font-weight: 600; }

/* --- pines y grupos ---------------------------------------------------- */
.fdo-pin {
    transition: transform .15s ease, filter .15s ease;
    transform-origin: 50% 98%; /* crece desde la punta, no desde el centro */
    filter: drop-shadow(0 2px 3px rgba(24,67,99,.35));
}
.fdo-pin:hover { transform: scale(1.12); }
.fdo-pin.is-activo { transform: scale(1.3); filter: drop-shadow(0 4px 7px rgba(24,67,99,.5)); }
@media (prefers-reduced-motion: reduce) {
    .fdo-pin, .fdo-mapa-tarjeta, .fdo-mapa-btn, .fdo-mapa-filtro { transition: none; }
}

/* El globo del pin, con la tipografía y el radio del sistema. */
.fdo-mapa-popup {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
    font-size: 13px; line-height: 1.5; font-weight: 400; color: rgba(60,60,67,.6);
}
.fdo-mapa-popup strong {
    display: block; color: #1c1c1e; margin-bottom: 2px; font-size: 15px; font-weight: 600;
}
.fdo-mapa-popup a { color: #2669bb; font-weight: 500; }
.leaflet-popup-content-wrapper { border-radius: 13px; box-shadow: 0 3px 16px rgba(0,0,0,.18); }

/* Grupos en el tono del pin, para que el mapa se lea como una sola pieza. */
.fdo-cluster {
    background: rgba(95,165,205,.28); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.fdo-cluster span {
    width: 34px; height: 34px; border-radius: 50%; background: var(--fdo-pin, #5fa5cd);
    color: #fff; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(24,67,99,.3);
}

/* --- celular ----------------------------------------------------------- */
@media (max-width: 900px) {
    .fdo-mapa-cuerpo { grid-template-columns: 1fr; gap: 16px; }
    /* El mapa se queda pegado arriba mientras se recorre el listado. */
    /* De borde a borde: se anulan los márgenes del contenedor de la página.
       Va con max-width para que la barra de desplazamiento no genere scroll
       horizontal en los navegadores que sí la reservan. */
    .fdo-mapa-lienzo {
        height: 62vh; min-height: 340px; max-height: none; position: static;
        width: calc(100vw - var(--fdo-sb, 0px)); max-width: calc(100vw - var(--fdo-sb, 0px));
        margin-left: calc(50% - 50vw + var(--fdo-sb, 0px) / 2);
        margin-right: calc(50% - 50vw + var(--fdo-sb, 0px) / 2);
        border-radius: 0; border-left: 0; border-right: 0;
    }
    .fdo-mapa-listado { max-height: none; overflow: visible; padding-right: 0; }
    .fdo-mapa-cercana { padding: 0 14px; font-size: 14px; }
    .fdo-mapa-btn { height: 34px; }
}

@media (max-width: 600px) {
    /* Cuatro chips no caben en una fila de celular y quedaban 3 + 1 suelto. */
    .fdo-mapa-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .fdo-mapa-btn { padding: 0 10px; }
    /* Difumina el borde derecho para que se note que la fila se desliza. */
    .fdo-mapa-filtros {
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
        mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    }
}