/* =========================================================
   KUATRO – SUCURSALES v2 (más compacto, sidebar scroll)
   File: /NUEVA/assets/sucursales/style.css
   Scope: #k-ubicaciones-v1
========================================================= */

#k-ubicaciones-v1.k-ub{
  /* Ajusta estos 2 si tu Kuatro usa otros */
  --k-accent: #F35109;
  --k-ink: #0B0D12;

  /* Look Apple/Tesla: claros + elegantes */
  --k-surface: rgba(255,255,255,.72);
  --k-panel: rgba(255,255,255,.86);
  --k-card: rgba(255,255,255,.92);
  --k-line: rgba(15,17,21,.12);
  --k-text: rgba(15,17,21,.92);
  --k-muted: rgba(15,17,21,.62);

  --k-radius: 18px;
  --k-radius-sm: 14px;

  /* deja espacio por barra redes a la izquierda */
  --k-safe-left: clamp(12px, 3vw, 36px);
  --k-safe-right: clamp(12px, 2vw, 28px);

  padding: clamp(14px, 2vw, 22px);
  padding-left: calc(clamp(14px, 2vw, 22px) + var(--k-safe-left));
  padding-right: var(--k-safe-right);

  max-width: 1400px;
  margin: 0 auto;
}





#k-ubicaciones-v1 .k-ub__top{
  margin-bottom: 12px;
}

#k-ubicaciones-v1 .k-ub__h1{
  margin: 0 0 6px;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -0.03em;
  color: var(--k-text);
}

#k-ubicaciones-v1 .k-ub__sub{
  margin: 0;
  color: var(--k-muted);
  line-height: 1.4;
  font-size: 14px;
}

#k-ubicaciones-v1 .k-ub__layout{
  display: grid;
  grid-template-columns: 360px 1fr; /* más compacto */
  gap: 12px;
  align-items: stretch;
}

@media (max-width: 980px){
  #k-ubicaciones-v1.k-ub{
    --k-safe-left: 0px; /* ✅ sin safe inset en móvil */
    padding-left: clamp(14px, 2vw, 22px);
    padding-right: clamp(14px, 2vw, 22px);
  }

  #k-ubicaciones-v1 .k-ub__layout{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Mobile: solo buscador + mapa (sin lista)
========================================================= */
@media (max-width: 980px){
  /* Oculta header de lista y cards */
  #k-ubicaciones-v1 .k-ub__listHeader,
  #k-ubicaciones-v1 .k-ub__cards{
    display: none !important;
  }

  /* Sidebar se vuelve “barra” de búsqueda arriba */
  #k-ubicaciones-v1 .k-ub__side{
    height: auto;
    grid-template-rows: auto; /* solo search */
    border-radius: 18px;
  }

  /* Layout: search arriba, mapa abajo */
  #k-ubicaciones-v1 .k-ub__layout{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Mapa más alto en móvil para mejor usabilidad */
  #k-ubicaciones-v1 .k-ub__mapWrap{
    height: min(72vh, 640px);
  }
}


/* Sidebar */
#k-ubicaciones-v1 .k-ub__side{
  background: var(--k-panel);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  overflow: hidden;
  backdrop-filter: blur(14px);

  /* alto controlado para que se vea “casi todo” */
  height: clamp(520px, 70vh, 680px);
  display: grid;
  grid-template-rows: auto auto 1fr; /* search, header, list scroll */
}

/* Search dentro del sidebar */
#k-ubicaciones-v1 .k-ub__search{
  padding: 12px;
  border-bottom: 1px solid var(--k-line);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
}

#k-ubicaciones-v1 .k-ub__searchLabel{
  display: block;
  font-size: 12px;
  color: var(--k-muted);
  margin-bottom: 8px;
}

#k-ubicaciones-v1 .k-ub__searchRow{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

#k-ubicaciones-v1 .k-ub__searchInput{
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(15,17,21,.14);
  background: rgba(255,255,255,.9);
  color: var(--k-text);
  padding: 11px 14px;
  outline: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

#k-ubicaciones-v1 .k-ub__searchInput::placeholder{
  color: rgba(15,17,21,.45);
}

#k-ubicaciones-v1 .k-ub__searchInput:focus{
  border-color: rgba(243,81,9,.55);
  box-shadow: 0 0 0 4px rgba(243,81,9,.14), 0 10px 24px rgba(0,0,0,.08);
}

#k-ubicaciones-v1 .k-ub__searchBtn{
  border: 0;
  border-radius: 999px;
  padding: 11px 14px;
  background: var(--k-accent);
  color: white;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(243,81,9,.22);
}

#k-ubicaciones-v1 .k-ub__hint{
  margin-top: 8px;
  font-size: 12px;
  color: var(--k-muted);
  min-height: 16px;
}

/* Header lista */
#k-ubicaciones-v1 .k-ub__listHeader{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--k-line);
  color: var(--k-text);
  font-weight: 900;
  letter-spacing: -0.01em;
}

#k-ubicaciones-v1 .k-ub__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(243,81,9,.12);
  color: var(--k-text);
  border: 1px solid rgba(243,81,9,.18);
  font-size: 12px;
}

/* Scroll propio de la lista */
#k-ubicaciones-v1 .k-ub__cards{
  overflow: auto;
  padding: 10px;
}

#k-ubicaciones-v1 .k-ub__cards::-webkit-scrollbar{
  width: 10px;
}
#k-ubicaciones-v1 .k-ub__cards::-webkit-scrollbar-thumb{
  background: rgba(15,17,21,.18);
  border-radius: 999px;
}
#k-ubicaciones-v1 .k-ub__cards::-webkit-scrollbar-track{
  background: rgba(15,17,21,.06);
}

/* Cards */
#k-ubicaciones-v1 .k-ub__card{
  border: 1px solid rgba(15,17,21,.10);
  background: var(--k-card);
  border-radius: var(--k-radius);
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

#k-ubicaciones-v1 .k-ub__card:hover{
  transform: translateY(-1px);
  border-color: rgba(243,81,9,.22);
}

#k-ubicaciones-v1 .k-ub__card.is-active{
  border-color: rgba(243,81,9,.55);
  box-shadow: 0 0 0 4px rgba(243,81,9,.12), 0 14px 34px rgba(0,0,0,.12);
}

#k-ubicaciones-v1 .k-ub__cardTop{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

#k-ubicaciones-v1 .k-ub__city{
  color: var(--k-text);
  font-weight: 950;
  letter-spacing: -0.02em;
}

#k-ubicaciones-v1 .k-ub__tag{
  font-size: 12px;
  color: rgba(15,17,21,.78);
  background: rgba(15,17,21,.06);
  border: 1px solid rgba(15,17,21,.08);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

#k-ubicaciones-v1 .k-ub__meta{
  margin-top: 8px;
  color: var(--k-muted);
  font-size: 13px;
  line-height: 1.35;
}

#k-ubicaciones-v1 .k-ub__actions{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#k-ubicaciones-v1 .k-ub__btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border-radius: 999px;
  padding: 9px 12px;
  border: 1px solid rgba(15,17,21,.12);
  color: rgba(15,17,21,.88);
  background: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 13px;
}

#k-ubicaciones-v1 .k-ub__btn:hover{
  border-color: rgba(243,81,9,.35);
}

/* Map */
#k-ubicaciones-v1 .k-ub__mapWrap{
  background: var(--k-panel);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  overflow: hidden;
  backdrop-filter: blur(14px);
  height: clamp(520px, 70vh, 680px);
}

#k-ubicaciones-v1 .k-ub__map{
  width: 100%;
  height: 100%;
}

/* Leaflet tweaks para verse premium */
#k-ubicaciones-v1 .leaflet-control-zoom a{
  background: rgba(255,255,255,.9);
  color: rgba(15,17,21,.9);
  border: 1px solid rgba(15,17,21,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
#k-ubicaciones-v1 .leaflet-popup-content-wrapper,
#k-ubicaciones-v1 .leaflet-popup-tip{
  background: rgba(255,255,255,.92);
  color: rgba(15,17,21,.92);
  border: 1px solid rgba(15,17,21,.12);
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
}
#k-ubicaciones-v1 .leaflet-container{
  background: rgba(255,255,255,.85);
}


/* =========================================================
   Mobile FIX: mapa justo debajo del buscador (sin espacio blanco)
   Pegar al FINAL del archivo
========================================================= */
@media (max-width: 980px){

  /* Quita safe inset en móvil */
  #k-ubicaciones-v1.k-ub{
    --k-safe-left: 0px;
    padding-left: clamp(14px, 2vw, 22px);
    padding-right: clamp(14px, 2vw, 22px);
  }

  /* Oculta lista (header + cards) */
  #k-ubicaciones-v1 .k-ub__listHeader,
  #k-ubicaciones-v1 .k-ub__cards{
    display: none !important;
  }

  /* ✅ Sidebar SOLO como contenedor del buscador */
  #k-ubicaciones-v1 .k-ub__side{
    height: auto !important;          /* <- clave para quitar el bloque blanco */
    min-height: 0 !important;
    grid-template-rows: auto !important;
    overflow: visible !important;
    padding: 0 !important;            /* que no cree “aire” extra */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Pero el buscador sí conserva su “card” */
  #k-ubicaciones-v1 .k-ub__search{
    border: 1px solid var(--k-line) !important;
    border-radius: var(--k-radius) !important;
    background: var(--k-panel) !important;
    padding: 12px !important;
  }

  /* Layout: buscador arriba, mapa abajo */
  #k-ubicaciones-v1 .k-ub__layout{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Mapa con buen alto en móvil */
  #k-ubicaciones-v1 .k-ub__mapWrap{
    height: min(72vh, 640px) !important;
  }
}




#k-ubicaciones-v1 .ksn-kicker{
  display: inline-block;
  font-weight: 700;
  letter-spacing: .14em;
  font-size: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(243,81,9,0.08);
  color: var(--k-accent);
  margin-bottom: 12px;
}


/* =========================================================
   SUCURSALES | OVERRIDES – Card activa naranja + botón buscar
   Pegar AL FINAL del archivo
========================================================= */

/* Botón Buscar (asegura texto blanco) */
#k-ubicaciones-v1 .k-ub__searchBtn{
  background: var(--k-accent) !important;
  color: #fff !important;
}

/* CARD ACTIVA: fondo naranja + letras blancas */
#k-ubicaciones-v1 .k-ub__card.is-active{
  background: var(--k-accent) !important;
  border-color: var(--k-accent) !important;
  box-shadow: none !important;
}

/* Ciudad/título en blanco */
#k-ubicaciones-v1 .k-ub__card.is-active .k-ub__city{
  color: #fff !important;
}

/* Meta y textos secundarios en blanco suave */
#k-ubicaciones-v1 .k-ub__card.is-active .k-ub__meta{
  color: rgba(255,255,255,.92) !important;
}

/* Tag (Noreste, etc.) invertido: pill transparente blanca */
#k-ubicaciones-v1 .k-ub__card.is-active .k-ub__tag{
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Links dentro (teléfono) blancos */
#k-ubicaciones-v1 .k-ub__card.is-active a{
  color: #fff !important;
  text-decoration-color: rgba(255,255,255,.55) !important;
}

/* Botón "Abrir en Maps" dentro de card activa: blanco con texto naranja */
#k-ubicaciones-v1 .k-ub__card.is-active .k-ub__btn{
  background: #fff !important;
  color: var(--k-accent) !important;
  border-color: rgba(255,255,255,.45) !important;
}

/* Hover del botón dentro de activa (opcional) */
#k-ubicaciones-v1 .k-ub__card.is-active .k-ub__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}