/* Buscador de ferreterías · Lince SMARt ALARM
   Los colores salen de variables para que puedas cambiarlos en un sitio. */

.lbf{
  --lbf-verde:#2C736F;
  --lbf-verde-osc:#1B504D;
  --lbf-rojo:#E1342D;
  --lbf-tinta:#1D2A28;
  --lbf-texto:#4A5A57;
  --lbf-taupe:#A3937C;
  --lbf-arena:#FAF6F1;
  --lbf-linea:#E2D9CD;

  font-family:"Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--lbf-tinta);
}

.lbf *{box-sizing:border-box}

.lbf-label{
  display:block;
  font-family:"Barlow",sans-serif;
  font-weight:600;
  font-size:17px;
  margin-bottom:10px;
  color:var(--lbf-tinta);
}

.lbf-fila{display:flex;gap:10px;flex-wrap:wrap}

.lbf-input{
  flex:1 1 220px;
  padding:14px 20px;
  font-size:16px;
  font-family:inherit;
  color:var(--lbf-tinta);
  background:var(--lbf-arena);
  border:1px solid var(--lbf-linea);
  border-radius:999px;
  line-height:1.3;
}
.lbf-input:focus{outline:2px solid var(--lbf-verde);outline-offset:1px}
.lbf-input::placeholder{color:var(--lbf-taupe)}

.lbf-btn{
  flex:0 0 auto;
  padding:14px 28px;
  font-family:"Barlow",sans-serif;
  font-weight:600;
  font-size:16px;
  color:#fff;
  background:var(--lbf-verde);
  border:none;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s ease;
}
.lbf-btn:hover{background:var(--lbf-verde-osc)}
.lbf-btn:disabled{opacity:.6;cursor:default}
.lbf-btn:focus-visible{outline:3px solid var(--lbf-rojo);outline-offset:2px}

.lbf-ayuda{
  margin:12px 0 0;
  font-size:13.5px;
  color:var(--lbf-taupe);
}

.lbf-estado{margin-top:18px;font-size:15.5px;color:var(--lbf-texto)}
.lbf-estado:empty{display:none}
.lbf-estado.lbf-vacio{
  background:var(--lbf-arena);
  border-left:3px solid var(--lbf-rojo);
  padding:16px 18px;
  border-radius:0 4px 4px 0;
}
.lbf-estado strong{
  font-family:"Barlow",sans-serif;
  font-weight:600;
  color:var(--lbf-tinta);
}
/* En el aviso de "sin resultados" el titular sí va en su propia línea */
.lbf-estado.lbf-vacio strong{
  display:block;
  font-size:17px;
  margin-bottom:4px;
}

/* ---- Otras poblaciones con el mismo nombre ---- */
.lbf-alternativas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.lbf-alternativas:empty{display:none}
.lbf-alt-titulo{font-size:14px;color:var(--lbf-texto);margin-right:2px}
.lbf-alt{
  font-family:"Barlow",sans-serif;
  font-weight:600;
  font-size:13.5px;
  color:var(--lbf-verde);
  background:transparent;
  border:1px solid var(--lbf-linea);
  border-radius:999px;
  padding:6px 14px;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.lbf-alt:hover{border-color:var(--lbf-verde);background:var(--lbf-arena)}
.lbf-alt:focus-visible{outline:2px solid var(--lbf-verde);outline-offset:1px}

/* ---- Panel de resultados: listado a la izquierda, mapa a la derecha ---- */
.lbf-panel{margin-top:18px}
.lbf-panel:not(.lbf-abierto){display:none}

.lbf-panel--2col.lbf-abierto{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;
  align-items:start;
}

.lbf-col-mapa{position:sticky;top:20px}

.lbf-resultados{display:grid;gap:12px}
.lbf-resultados:empty{display:none}

/* Con muchas ferreterías el listado hace scroll propio y el mapa no se despega */
.lbf-panel--2col .lbf-col-lista{max-height:520px;overflow-y:auto;padding-right:4px}
.lbf-panel--2col .lbf-col-lista::-webkit-scrollbar{width:6px}
.lbf-panel--2col .lbf-col-lista::-webkit-scrollbar-thumb{background:var(--lbf-linea);border-radius:99px}

.lbf-tienda{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:16px 18px;
  background:var(--lbf-arena);
  border:1px solid var(--lbf-linea);
  border-radius:6px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.lbf-panel--2col .lbf-tienda{cursor:pointer}
.lbf-pin{
  flex:none;
  width:34px;height:34px;
  border-radius:50%;
  background:var(--lbf-rojo);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:"Barlow",sans-serif;font-weight:700;font-size:15px;
}
.lbf-datos{flex:1 1 auto;min-width:0}
.lbf-nombre{
  font-family:"Barlow",sans-serif;
  font-weight:600;
  font-size:17px;
  margin:0 0 2px;
  color:var(--lbf-tinta);
}
.lbf-dir{margin:0;font-size:14.5px;color:var(--lbf-texto);line-height:1.5}
.lbf-enlaces{margin-top:8px;display:flex;gap:16px;flex-wrap:wrap;font-size:14.5px}
.lbf-enlaces a{color:var(--lbf-verde);text-decoration:none;font-weight:600}
.lbf-enlaces a:hover{text-decoration:underline}
.lbf-km{
  flex:none;
  font-family:"Barlow",sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--lbf-verde);
  white-space:nowrap;
  padding-top:6px;
}

.lbf-mapa{
  height:520px;
  border-radius:6px;
  border:1px solid var(--lbf-linea);
  overflow:hidden;
}
.lbf-mapa:not(.lbf-activo){display:none}
.lbf-mapa .leaflet-container{font-family:inherit}

/* En una sola columna el mapa va debajo y no necesita tanta altura */
.lbf-panel:not(.lbf-panel--2col) .lbf-mapa{height:360px;margin-top:18px}

/* Tarjeta resaltada al pasar por su chincheta del mapa */
.lbf-tienda.lbf-activa{
  border-color:var(--lbf-verde);
  box-shadow:0 0 0 2px rgba(44,115,111,.18);
}

@media (max-width:880px){
  .lbf-panel--2col.lbf-abierto{grid-template-columns:1fr}
  .lbf-panel--2col .lbf-col-lista{max-height:none;overflow:visible;padding-right:0}
  .lbf-col-mapa{position:static}
  .lbf-mapa{height:360px}
}

@media (max-width:600px){
  .lbf-btn{width:100%}
  /* El pin manda columna propia: el nombre nunca se cae debajo */
  .lbf-tienda{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px 14px;align-items:start}
  .lbf-pin{grid-row:1}
  .lbf-datos{grid-column:2}
  .lbf-km{grid-column:2;padding-top:0}
  .lbf-mapa{height:280px}
}