/* ───── Reset mínimo para el bloque original ───── */
.branch-map-wrapper *{box-sizing:border-box;margin:0;padding:0}
.branch-map-wrapper{padding:60px 20px;background:transparent}
.branch-map-wrapper .map-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.branch-map-wrapper .map-wrapper{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.08);border:1px solid #8080804a;position:relative}
.branch-map-wrapper #map{width:100%}

/* ───── Overlay SIN sucursales ───── */
.no-branches-message{position:absolute;top:20px;left:50%;transform:translateX(-50%);background:#ff4444;color:#fff;font-weight:600;padding:14px 32px;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.1);z-index:10}

/* Lista (modo múltiple) */
.branches-list-container{display:flex;flex-direction:column;gap:20px;max-height:600px;overflow-y:auto}
.branch-card{background:#fff;border:1px solid #8080804a;border-radius:12px;padding:25px;transition:.4s cubic-bezier(.175,.885,.32,1.275);cursor:pointer;position:relative;opacity:0;transform:translateY(20px);animation:slideIn .6s forwards}
@keyframes slideIn{to{opacity:1;transform:translateY(0)}}
.branch-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(255,68,68,.15);border-color:#ff4444}
.branch-card.selected{border-color:#ff4444;background:#fff9f9;box-shadow:0 10px 30px rgba(255,68,68,.2)}

/* Estructura de la tarjeta */
.branch-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:15px}
.branch-title h3{font-size:1.3rem;font-weight:700;color:#000;margin-bottom:5px}
.branch-location{display:flex;align-items:center;gap:8px;color:#666;font-size:.95rem}
.location-icon{width:16px;height:16px;fill:#ff4444}
.branch-status{display:flex;align-items:center;gap:8px;padding:6px 16px;background:rgba(76,175,80,.1);color:#4caf50;border-radius:20px;font-size:.85rem;font-weight:600}
.status-dot{width:8px;height:8px;background:#4caf50;border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}
.branch-info{display:flex;align-items:center;justify-content:left;gap:30px;margin-top:20px;padding-top:20px;border-top:1px solid #f0f0f0}
.info-item{display:flex;align-items:center;gap:10px}
.info-icon{width:20px;height:20px;fill:#666}
.info-text a{color:#ff4444;text-decoration:none;transition:.3s}
.info-text a:hover{text-decoration:underline}

/* ───── SINGLE (mapa + tarjeta unificados) ───── */
.branch-map-wrapper.single-branch .map-container{grid-template-columns:1fr;gap:0}
.branch-map-wrapper.single-branch .branches-list-container{order:2;margin-top:0;width:100%}
.branch-map-wrapper.single-branch .branch-card{max-width:none;border-radius:0 0 16px 16px;border-top:1px solid #f0f0f0;box-shadow:none;opacity:1;transform:none;animation:none}

/* ───── NO-BRANCHES (estético) ───── */
.branch-map-wrapper.no-branches .branches-list-container{display:none}

/* Responsive original */
@media(max-width:968px){
	.branch-map-wrapper .map-container{grid-template-columns:1fr}
	.branch-map-wrapper .map-wrapper{order:1}
	.branches-list-container{order:2;margin-top:30px}
}
@media(max-width:480px){
	.branch-map-wrapper .branch-title h3{font-size:1.1rem}
	.branch-map-wrapper .branch-status{padding:4px 12px}
}

/* ────────── BRANCH MAP ALL STYLES (basado en CSS original) ────────── */

/* Reset solo para branch-map-all-wrapper */
.branch-map-all-wrapper * { margin: 0; padding: 0; box-sizing: border-box; }
.branch-map-all-wrapper html { overflow-x: hidden; scroll-behavior: smooth; }
.branch-map-all-wrapper { font-family: "Raleway", Arial, Helvetica, sans-serif; width: 100%; overflow-x: hidden; line-height: 1.6; color: #333; background-color: #ffffff; }

/* Información de servicios */
.branch-map-all-wrapper .services-info-section { background: #ececec; padding: 20px 0; border-bottom: 1px solid #f0f0f0; }
.branch-map-all-wrapper .services-info-grid { display: flex; justify-content: center; align-items: center; gap: 50px; flex-wrap: wrap; }
.branch-map-all-wrapper .service-item { display: flex; align-items: center; gap: 12px; }
.branch-map-all-wrapper .service-icon { width: 20px; height: 20px; fill: #ff4444; flex-shrink: 0; }
.branch-map-all-wrapper .service-text { font-size: 0.95rem; font-weight: 600; color: #333; }

/* Sección de filtros */
.branch-map-all-wrapper .filters-section { background: #f9f9f9; padding: 30px 0; margin-bottom: 40px; }
.branch-map-all-wrapper .filters-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.branch-map-all-wrapper .filter-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.branch-map-all-wrapper .filter-btn { background: white; border: 2px solid #8080804a; padding: 12px 30px; border-radius: 30px; font-size: 0.95rem; font-weight: 600; color: #333; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; }
.branch-map-all-wrapper .filter-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-color: #ff4444; }
.branch-map-all-wrapper .filter-btn.active { background: #ff4444; color: white; border-color: #ff4444; box-shadow: 0 5px 15px rgba(255, 68, 68, 0.25); }
.branch-map-all-wrapper .filter-btn .count { display: inline-block; background: rgba(0, 0, 0, 0.1); padding: 2px 8px; border-radius: 15px; margin-left: 8px; font-size: 0.85rem; }
.branch-map-all-wrapper .filter-btn.active .count { background: rgba(255, 255, 255, 0.25); }

/* Sección principal */
.branch-map-all-wrapper .main-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 60px; max-width: 100%; padding: 0 20px; }

/* Contenedor del mapa */
.branch-map-all-wrapper .map-container { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); border: 1px solid #8080804a; position: sticky; top: 20px; height: 600px; }
.branch-map-all-wrapper #map { width: 100%; height: 100%; }

/* Lista de sucursales */
.branch-map-all-wrapper .branches-list { display: flex; flex-direction: column; gap: 20px; overflow-y: auto; padding-right: 5px; height: 600px; overflow-x: hidden; }

/* Scroll suave con gradiente en los bordes */
.branch-map-all-wrapper .branches-list::-webkit-scrollbar { width: 8px; }
.branch-map-all-wrapper .branches-list::-webkit-scrollbar-track { background: rgba(0,0,0,.1); border-radius: 4px; }
.branch-map-all-wrapper .branches-list::-webkit-scrollbar-thumb { background: rgba(255,68,68,.3); border-radius: 4px; }
.branch-map-all-wrapper .branches-list::-webkit-scrollbar-thumb:hover { background: rgba(255,68,68,.5); }

/* Indicador visual de scroll */
.branch-map-all-wrapper .branches-list.has-scroll { position: relative; }
.branch-map-all-wrapper .branches-list.has-scroll::after { content: ''; position: absolute; bottom: 0; left: 0; right: 8px; height: 20px; background: linear-gradient(transparent, rgba(255,255,255,.8)); pointer-events: none; }

/* Tarjetas de sucursales branch-map-all */
.branch-map-all-wrapper .branch-card { background: white; border: 1px solid #8080804a; border-radius: 12px; padding: 25px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; position: relative; overflow: hidden; opacity: 0; transform: translateY(20px); animation: slideInAll 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; min-height: auto; flex-shrink: 0; }
@keyframes slideInAll { to { opacity: 1; transform: translateY(0); } }
.branch-map-all-wrapper .branch-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(255, 68, 68, 0.15); border-color: #ff4444; }
.branch-map-all-wrapper .branch-card.selected { border-color: #ff4444; background: #fff9f9; box-shadow: 0 10px 30px rgba(255, 68, 68, 0.2); }

/* Estructura de la tarjeta branch-map-all */
.branch-map-all-wrapper .branch-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px; }
.branch-map-all-wrapper .branch-title { flex: 1; }
.branch-map-all-wrapper .branch-title h3 { font-size: 1.3rem; font-weight: 700; color: #000; margin-bottom: 5px; }
.branch-map-all-wrapper .branch-location { display: flex; align-items: center; gap: 8px; color: #666; font-size: 0.95rem; }
.branch-map-all-wrapper .location-icon { width: 16px; height: 16px; fill: #ff4444; }
.branch-map-all-wrapper .branch-status { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: rgba(76, 175, 80, 0.1); color: #4caf50; border-radius: 20px; font-size: 0.85rem; font-weight: 600; }
.branch-map-all-wrapper .status-dot { width: 8px; height: 8px; background: #4caf50; border-radius: 50%; animation: pulseAll 2s ease-in-out infinite; }
@keyframes pulseAll { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } }
.branch-map-all-wrapper .branch-info { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #f0f0f0; }
.branch-map-all-wrapper .info-item { display: flex; align-items: center; gap: 10px; }
.branch-map-all-wrapper .info-icon { width: 20px; height: 20px; fill: #666; }
.branch-map-all-wrapper .info-text { color: #333; font-size: 0.9rem; font-weight: 500; }
.branch-map-all-wrapper .info-text a { color: #ff4444; text-decoration: none; transition: all 0.3s ease; }
.branch-map-all-wrapper .info-text a:hover { text-decoration: underline; }

/* Loader para las sucursales */
.branch-map-all-wrapper .loading-spinner { text-align: center; padding: 40px; }
.branch-map-all-wrapper .spinner { display: inline-block; width: 40px; height: 40px; border: 3px solid #f3f3f3; border-top: 3px solid #ff4444; border-radius: 50%; animation: spinAll 1s linear infinite; }
@keyframes spinAll { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Popup Content */
.branch-map-all-wrapper .popup-content { padding: 15px; max-width: 300px; }
.branch-map-all-wrapper .popup-title { font-size: 1.2rem; font-weight: 700; color: #333; margin-bottom: 8px; }
.branch-map-all-wrapper .popup-info { color: #666; font-size: 0.95rem; }

/* Responsive para branch-map-all-wrapper */
@media (max-width: 968px) {
	.branch-map-all-wrapper .main-section { grid-template-columns: 1fr; }
	.branch-map-all-wrapper .map-container { position: relative; height: 400px; margin-bottom: 30px; }
	.branch-map-all-wrapper .services-info-grid { flex-direction: column; gap: 20px; }
	.branch-map-all-wrapper .service-item { justify-content: center; }
}

@media (max-width: 768px) {
	.branch-map-all-wrapper .filter-buttons { justify-content: stretch; }
	.branch-map-all-wrapper .filter-btn { flex: 1; min-width: 140px; padding: 10px 20px; font-size: 0.9rem; }
	.branch-map-all-wrapper .branch-card { padding: 20px; }
	.branch-map-all-wrapper .branch-title h3 { font-size: 1.15rem; }
	.branch-map-all-wrapper .branch-info { justify-content: center; }
	.branch-map-all-wrapper .services-info-section { padding: 15px 0; }
	.branch-map-all-wrapper .branch-header { flex-direction: column; gap: 10px; }
	.branch-map-all-wrapper .branch-status { align-self: flex-start; }
}

@media (max-width: 480px) {
	.branch-map-all-wrapper .branch-title h3 { font-size: 1.5em; }
	.branch-map-all-wrapper .filter-btn { padding: 8px 16px; font-size: 0.85rem; }
	.branch-map-all-wrapper .branch-header { flex-direction: column; gap: 10px; }
	.branch-map-all-wrapper .branch-status { align-self: flex-start; }
}