/* Lista de Prospectos: barra de control fija (ordenar, filtros de píxel y puntaje, «Mostrando X de Y») y una fila compacta
   por negocio, de 56 a 72 px, que despliega su detalle debajo. El detalle reusa las piezas de tarjetas.css. */

/* ── Barra de control ──────────────────────────────────────────── */

.lista-control {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  margin: 0 0 14px; padding: 10px 0 12px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.lc-orden-grupo, .lc-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lc-orden-grupo { gap: 8px; }
.lc-rotulo { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.lc-grupo .lc-rotulo { margin-right: 2px; }
.form-input.lc-orden { width: auto; min-height: 36px; height: 36px; padding: 0 12px; font-size: 14px; border-radius: var(--r-pill); }
.lc-grupo .filtro { height: 32px; padding: 0 12px; }
.lc-limpiar:disabled { opacity: .45; }
.lc-mostrando { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (pointer: coarse) { .lc-grupo .filtro, .form-input.lc-orden { height: 44px; } }

/* ── Filas ─────────────────────────────────────────────────────── */

#lista-prospectos { display: flex; flex-direction: column; gap: 8px; }
.lista-corte { margin: 12px 0 2px; }
.lista-corte:first-child { margin-top: 0; }
.lista-mas { justify-content: center; }
.lista-tope { font-size: 13px; text-align: center; }

.prospecto.fila { gap: 0; padding: 0; margin: 0; border-radius: var(--r-md); scroll-margin-top: 130px; box-shadow: none; }
.prospecto.fila.abierta { box-shadow: var(--shadow-md); }
.f-linea {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px 8px 16px; cursor: pointer;
  border-radius: inherit;
}
.f-linea:hover { background: var(--soft); }
.prospecto.fila.abierta .f-linea { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.f-id { flex: 0 1 260px; min-width: 150px; }
.f-nombre, .f-sub, .f-hallazgo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-nombre { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
.f-sub { margin-top: 1px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.f-puntaje {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  min-width: 76px; justify-content: center; background: var(--nivel-bg); color: var(--nivel-txt); font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.f-puntaje b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.f-pixel { flex: none; display: flex; width: 134px; }            /* mismo ancho en todas las filas: se leen en columna */
.f-pixel .tag, .f-estado .badge { white-space: nowrap; }
.f-hallazgo { flex: 2 1 0; min-width: 0; font-size: 13.5px; color: var(--muted); }
.f-hallazgo:empty { display: none; }
.f-estado { flex: none; display: flex; gap: 6px; }
.f-acciones { flex: none; display: flex; align-items: center; gap: 8px; }
.f-ver { min-width: 76px; }

.f-detalle { display: flex; flex-direction: column; gap: 18px; padding: 18px 20px 20px; border-top: 1px solid var(--line); }
.f-detalle:focus { outline: none; }
.d-donde { font-size: 13px; color: var(--muted); }
.d-estado { display: none; gap: 6px; }                       /* el estado vuelve al detalle cuando la fila no lo muestra entero */

/* Lo que no entra se acomoda según el ancho de la fila (cada .prospecto es un contenedor, ver tarjetas.css). Lo que la fila deja
   de mostrar sigue en el detalle: el hallazgo principal y, desde 1000 px para abajo, el estado y la etapa. */
@container (max-width: 1000px) { .f-estado .badge + .badge { display: none; } .d-estado { display: flex; } }
@container (max-width: 900px) { .f-hallazgo { display: none; } }
@container (max-width: 780px) { .f-estado { display: none; } }

@media (max-width: 720px) {
  .lista-control { position: static; padding-top: 4px; }
  .lc-mostrando { margin-left: 0; width: 100%; }
  .prospecto.fila { scroll-margin-top: 76px; }       /* la barra fija del celular mide 60 px */
}

/* Fila angosta (celular): nombre y puntaje arriba; abajo, el píxel y las acciones. */
@container (max-width: 660px) {
  .f-linea { flex-wrap: wrap; row-gap: 8px; padding: 12px 14px; }
  .f-id { flex: 1 1 calc(100% - 100px); }
  .f-pixel { order: 1; width: auto; }
  .f-acciones { order: 2; margin-left: auto; }
  .f-ver { min-width: 0; }
  .f-detalle { padding: 16px; }
}