/* Leads Fríos: solo lo que no cubren las clases `ph-*` de pautas-historico.css.
   Las dos vistas reutilizan ese sistema para verse igual que Distribución de
   leads históricos; acá viven únicamente los bloques propios. */

/* Los dos filtros del paso 1 (bases y departamentos), uno al lado del otro. */
.lf-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}

.lf-filter-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #5b6472;
  margin-bottom: 6px;
}

/* Las listas de origen y departamento pueden crecer: se les pone tope y scroll
   propio para que el paso 1 no empuje el resto de la vista fuera de pantalla. */
.lf-filter-box {
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.lf-filter-box .ph-dist-asesor small {
  color: #6b7480;
  font-weight: 400;
}

/* La casilla de ThinkChat es una frase, no un campo: se alinea con los inputs
   de al lado sin heredar el ancho de columna del formulario. */
.lf-check-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: end;
  padding-bottom: 8px;
  font-size: 13px;
  color: #3c4653;
}

.lf-check-inline input {
  width: auto;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Cobertura geográfica
   El bloque se separa del resto del paso 1 porque es la decisión que más cambia
   el resultado del reparto: se ve como un panel propio, no como un filtro más.
   --------------------------------------------------------------------------- */
.lf-cobertura {
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  padding: 14px 16px;
  background: #f8fafc;
  margin-bottom: 14px;
}

.lf-cob-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

/* El botón que pidió el usuario: una sola acción, con estado visible. */
.lf-cob-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #cfd6e0;
  border-radius: 999px;
  padding: 9px 18px 9px 14px;
  background: #fff;
  color: #3c4653;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.lf-cob-toggle:hover { border-color: #9fb0c4; }

.lf-cob-toggle.is-on {
  background: #1f7a3d;
  border-color: #1f7a3d;
  color: #fff;
}

/* Punto de estado: encendido/apagado se lee sin depender solo del color de
   fondo, para quien distingue mal el verde. */
.lf-cob-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
}

.lf-cob-toggle.is-on .lf-cob-dot { background: currentColor; }

.lf-cob-resumen {
  margin: 0;
  font-size: 13px;
  color: #46505e;
  font-variant-numeric: tabular-nums;
}

.lf-cob-nota {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #6b7480;
}

.lf-cobertura .lf-check-inline {
  align-self: auto;
  padding-bottom: 0;
  margin-top: 12px;
}

.lf-cob-paneles {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e6eaf0;
}

.lf-cob-link {
  border: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #1f5fa8;
  cursor: pointer;
}

.lf-cob-link:hover { text-decoration: underline; }

.lf-cob-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e6eaf0;
}

/* Marca de "esta ciudad no está en la cobertura" dentro de la lista de
   exclusiones puntuales, para no tener que cruzar las dos listas a ojo. */
.lf-tag-fuera {
  color: #a8560f;
  background: #fdf1e3;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 600;
}

/* La lista blanca: son nombres cortos, se leen mejor como fichas que como filas. */
.lf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.lf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #dfe3ea;
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  background: #fff;
  font-size: 13px;
  color: #3c4653;
}

.lf-chip button {
  border: 0;
  background: #eef1f5;
  color: #5b6472;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}

.lf-chip button:hover { background: #f6d9d9; color: #a12727; }

@media (max-width: 900px) {
  .lf-filter-grid { grid-template-columns: 1fr; }
  .lf-filter-box { max-height: 150px; }
  .lf-cob-head { align-items: flex-start; flex-direction: column; gap: 10px; }
}