*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}


.container_stores{
  display:flex;
  height:100vh;
}

/* SIDEBAR */

.sidebar_stores {
  width: 380px;
  background: white;
  padding: 24px;
  overflow: hidden; /* 👈 cambia overflow-y:auto por esto */
  border-right: 1px solid #ddd;
  position: relative; /* 👈 AGREGAR */
}

/* SEARCH */

.search-box{
  display: none;
  margin-bottom:30px;
}

.search-box input{
  width:100%;
  padding:16px;
  border:1px solid #bbb;
  background:white;
  font-size:16px;
  outline:none;
}

/* COUNTRY */


.country{
  border-bottom:1px solid #ddd;
  padding:20px 0;
}

.country-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  font-size:20px;
  font-weight:bold;
}

.toggle{
  font-size:26px;
}


.cities {
 margin-top: 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.cities.active {
  max-height: 500px; /* suficientemente grande para cualquier cantidad de ciudades */
}

.city{
  border-bottom: 1px solid;
  padding:14px;
  margin-bottom:8px;
  background:white;
  cursor:pointer;
  transition:.2s;
  /* border:1px solid #eee; */
}

.city:hover{
  opacity: 0.9;
  background:rgb(158, 158, 158);
  color:white;
}

.city.active {
  background: rgb(158, 158, 158);
  color: white;
}

.listView_info{
margin-bottom: 10px;
border-bottom: 1px solid black;
width: max-content;
}


/* DETAIL VIEW */
.detail-view {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  padding: 24px;
  transform: translateX(-100%);
  transition: transform 350ms ease;
  pointer-events: none;
}

.detail-view.visible {
  transform: translateX(0%);
  pointer-events: all;
}

/* LIST VIEW */
#listView {
  transition: transform 350ms ease, opacity 350ms ease;
}

#listView.hidden {
  transform: translateX(-30px);
  opacity: 0;
  pointer-events: none;
}

.back-btn{
  margin-bottom:40px;
  font-size:14px;
  font-weight:bold;
  cursor:pointer;
  display:inline-block;
}

.back-btn:hover{
  opacity:.7;
}

.dealer-title{
  font-size:22px;
  font-weight:bold;
  margin-bottom:30px;
  line-height:1.3;
}

.dealer-info{
  margin-bottom:40px;
  font-size:20px;
  line-height:1.7;
}

.details-btn{
  display: none;
  width:100%;
  padding:18px;
  background:white;
  border:1px solid black;
  cursor:pointer;
  font-size:16px;
  font-weight:bold;
  transition:.2s;
}

.details-btn:hover{
  opacity: 0.9;
  background:rgb(158, 158, 158);
  color:white;
}

/* MAP */

.map-container{
  flex:1;
  height:100%;
}

.map-container iframe{
  width:100%;
  height:100%;
  border:none;
}

/* MOBILE */

@media(max-width:768px){

  .container_stores{
    flex-direction:column;
  }

  .sidebar_stores{
    width:100%;
    height:45%;
  }

  .map-container{
    height:55%;
  }

}