/* ==========================================================================
   CENTROS DE ATENCIÓN (SUCURSALES) — Figma node 3054:971
   ========================================================================== */

/* ------------------------------ HERO (3054:972) --------------------------
   1440x940 a sangre, bloque de 527px con título, texto y CTA morado.      */
.suc-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 940px;
  padding: 320px var(--grid-margin) 0;
  background-image: url('../images/desktop/sucursales/hero-bg.webp');
  background-size: cover;
  background-position: center;
}

.suc-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: var(--w-5col);
  max-width: 100%;
}

.suc-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  color: var(--color-primario);
  line-height: var(--lh-base);
  width: 100%;
}
/* "Conoce nuestros Centros de Atención." va en Light, en línea aparte */
.suc-hero__title em { font-style: normal; font-weight: 300; display: block; }

.suc-hero__subtitle {
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  color: var(--color-secundario);
  width: var(--w-4col);
  max-width: 100%;
}

/* ------------------------------ MAPA (3054:1004) ------------------------- */
.suc-mapa {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 160px var(--grid-margin);
  background: var(--color-bg);
}

.suc-mapa__row {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: min(740px, 51.4vw);
}

/* --- Panel de búsqueda (419px) --- */
.suc-buscador {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 0 0 auto;
  width: var(--w-4col);
  max-width: 100%;
  height: 100%;
}

.suc-buscador__titulo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0 16px;
}
.suc-buscador__titulo img { width: 22px; height: auto; flex-shrink: 0; }
.suc-buscador__titulo p {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  color: var(--color-primario);
}

.suc-buscador__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
}

/* Campo de búsqueda: píldora blanca con borde morado */
.suc-buscador__input {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 16px 24px;
  border: 2px solid var(--color-primario);
  border-radius: 64px;
  background: var(--color-blanco);
}
.suc-buscador__input img { width: 18px; height: 18px; flex-shrink: 0; }
.suc-buscador__input input {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  color: var(--color-primario);
}
.suc-buscador__input input::placeholder { color: var(--color-secundario); opacity: 1; }

/* Lista de estados con barra de desplazamiento propia */
.suc-buscador__lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primario) #e9e0ee;
}
.suc-buscador__lista::-webkit-scrollbar { width: 6px; }
.suc-buscador__lista::-webkit-scrollbar-track { background: #e9e0ee; border-radius: 4px; }
.suc-buscador__lista::-webkit-scrollbar-thumb {
  background: var(--color-primario);
  border-radius: 4px;
}

.suc-estados__vacio {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  color: var(--color-primario);
  padding: 8px 24px;
}

/* --- Estado (acordeón) --- */
.suc-estado {
  /* La lista es un flex column con altura limitada: sin flex-shrink:0 los 32
     estados se comprimen hasta desaparecer en vez de generar scroll. */
  flex-shrink: 0;
  border: 2px solid var(--color-primario);
  border-radius: 64px;
  background: var(--color-blanco);
  overflow: hidden;
  transition: border-radius 0.2s ease;
}
.suc-estado.is-open { border-radius: 24px; }

.suc-estado__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 24px;
  background: none;
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  color: var(--color-secundario);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.suc-estado__btn img { width: 16px; height: auto; flex-shrink: 0; }

/* Estado abierto: cabecera rosa con texto blanco */
.suc-estado.is-open .suc-estado__btn {
  background: var(--color-secundario);
  border-radius: 24px;
  color: var(--color-blanco);
  font-weight: var(--fw-bold);
}

.suc-estado__panel {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px;
}
.suc-estado.is-open .suc-estado__panel { display: flex; }

/* --- Sucursal dentro del estado --- */
.suc-sucursal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
  border-radius: 16px;
  transition: opacity 0.2s ease;
}
.suc-sucursal:hover { opacity: 0.75; }
.suc-sucursal:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 4px; }

.suc-sucursal__nombre {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  color: var(--color-secundario);
}

.suc-sucursal__linea {
  display: flex;
  align-items: center;
  gap: 16px;
}
.suc-sucursal__linea img { width: 24px; height: 24px; flex-shrink: 0; }
.suc-sucursal__linea p {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  color: var(--color-primario);
}

/* --- Mapa --- */
.suc-mapa__map {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border-radius: 80px;
  overflow: hidden;
  background: #dfe8ef;
}
#suc-map { width: 100%; height: 100%; }

/* Sin mosaicos (red restringida): fondo neutro con aviso, no un hueco gris */
#suc-map.suc-map--sin-mosaicos {
  background:
    linear-gradient(rgba(255, 243, 249, 0.92), rgba(255, 243, 249, 0.92)),
    var(--color-bg);
}
#suc-map.suc-map--sin-mosaicos::after {
  content: 'No se pudo cargar el mapa. Consulta las direcciones en la lista.';
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  color: var(--color-primario);
  text-align: center;
  pointer-events: none;
}

/* Pin personalizado */
.suc-pin {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-secundario);
  border: 3px solid var(--color-primario);
  box-shadow: 0 2px 6px rgba(84, 55, 132, 0.35);
}

.leaflet-popup-content-wrapper { border-radius: 16px; }
.leaflet-popup-content {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-primario);
  margin: 12px 16px;
  line-height: 1.4;
}
.leaflet-popup-content strong { color: var(--color-secundario); font-size: 15px; }
.suc-popup__dir, .suc-popup__tel { font-size: 11px; }

@media (max-width: 1023px) {
  .suc-hero { height: auto; min-height: 640px; padding: 240px var(--grid-margin) 80px; }
  .suc-hero__title { font-size: clamp(28px, 4.4vw, 44px); }
  .suc-hero__content { width: 100%; }

  .suc-mapa { padding: 100px var(--grid-margin); }
  .suc-mapa__row { flex-direction: column; height: auto; gap: 32px; }
  /* Apilados, el eje principal es el VERTICAL: hay que anular el flex-basis
     heredado (`flex: 1 1 0` / `0 0 var(--w-4col)`) o el alto declarado se
     ignora y el mapa colapsa a 0px. */
  .suc-buscador { flex: 0 0 auto; width: 100%; height: 560px; }
  .suc-mapa__map { flex: 0 0 auto; width: 100%; height: 460px; border-radius: 48px; }
}

@media (max-width: 767px) {
  .suc-hero { padding: 200px var(--grid-margin) 64px; }
  .suc-mapa { padding: 64px var(--grid-margin); }
  .suc-buscador { height: 480px; }
  .suc-mapa__map { height: 360px; border-radius: 32px; }
  .suc-estado__btn { font-size: var(--fs-body); }
}