/* =============================================================================
   CLIENTES — cartera segmentada.

   Reusa lo que ya existe: .panel, .kpis, .fi-compo/.fi-leg para la barra de
   concentración y .fi-tabla para los listados. Acá va solo lo propio del módulo:
   la cabecera de cada grupo, las píldoras de estado y el panel de seguimiento.
   ============================================================================= */

.cl-nota{ font-size:10.5px; color:var(--faint); line-height:1.55; }

/* ------------------------------------------------------ cabecera de grupo */
.cl-grupo{ margin-top:18px; }
.cl-hd{
  display:flex; align-items:flex-start; gap:12px;
  padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--line);
}
/* La letra del segmento es el ancla visual de la pantalla: se ve antes que el
   título y es lo que hace que los grupos se distingan de un vistazo. */
.cl-hd .chip{
  width:30px; height:30px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:14px; font-weight:800;
  color:var(--canvas);
}
.cl-hd .t{ font-size:13px; font-weight:700; letter-spacing:.2px; }
.cl-hd .d{ font-size:10.5px; color:var(--mut); margin-top:3px; max-width:60ch; line-height:1.55; }
.cl-hd .q{ text-align:right; flex:none; }
.cl-hd .q .n{ font-size:11px; color:var(--mut); font-weight:600; white-space:nowrap; }
.cl-hd .q .m{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:700; margin-top:3px; white-space:nowrap;
}

/* -------------------------------------------------------------- listado */
.cl-tabla td{ vertical-align:middle; }
.cl-tabla .cli{ display:flex; align-items:baseline; gap:7px; }
/* El puesto en la cartera va en un tono apagado: ordena la lectura sin competir
   con el nombre, que es lo que se busca. */
.cl-tabla .rk{
  font-family:var(--mono); font-size:10px; font-weight:700;
  color:var(--faint); flex:none;
}
.cl-pills{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.cl-pills .pill{ font-size:8.5px; padding:3px 8px; letter-spacing:.4px; }

/* --------------------------------------------------------- seguimiento */
.cl-seg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.cl-seg-col h3{ margin-bottom:3px; }
.cl-item{
  display:flex; align-items:center; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line); cursor:pointer;
}
.cl-item:hover .nm{ color:var(--acc-cl); }
.cl-item:last-child{ border-bottom:0; }
.cl-item .nm{ font-size:12px; font-weight:600; transition:color .14s; }
.cl-item .mini{ font-size:10px; color:var(--mut); margin-top:1px; }
.cl-item .mo{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:12px; font-weight:700; white-space:nowrap;
}

/* ------------------------------------------------------ ficha del cliente */
#cliFicha .kpis{ grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); }
#cliFicha .fi-tabla td{ padding:8px 10px; }
#cliFicha .fld{ margin-bottom:10px; }

/* =============================== TELÉFONO ================================== */
@media (max-width:900px){
  .cl-hd{ flex-wrap:wrap; }
  .cl-hd .q{ text-align:left; width:100%; padding-left:42px; }
  .cl-hd .d{ display:none; }   /* la explicación del segmento no entra en 375px */
  .cl-seg{ gap:18px; }

  /* La tabla de la cartera se apila. Con seis columnas en 375px, un nombre como
     "C.A.A.C.E.R. (Club de Automóviles Antiguos y Clásicos de Entre Ríos)" se
     partía en seis renglones y las píldoras —lo más accionable de la fila— sólo
     aparecían arrastrando de costado. Apilada entra todo y no hace falta scroll
     horizontal. La ficha usa la misma clase pero con celdas cortas: por eso el
     cambio va acotado a .cl-grupo. */
  .cl-grupo .fi-wrap{ overflow-x:visible; }
  .cl-grupo .cl-tabla,
  .cl-grupo .cl-tabla tbody,
  .cl-grupo .cl-tabla tr,
  .cl-grupo .cl-tabla td{ display:block; }
  .cl-grupo .cl-tabla thead{ display:none; }
  .cl-grupo .cl-tabla tr{
    padding:13px 0; border-bottom:1px solid var(--line);
  }
  .cl-grupo .cl-tabla tr:last-child{ border-bottom:0; }
  .cl-grupo .cl-tabla td{ border:0; padding:0; text-align:left; }
  .cl-grupo .cl-tabla .cel-nom .cli{ font-size:13px; }
  .cl-grupo .cl-tabla td[data-k]{
    display:inline-block; margin:9px 18px 0 0; vertical-align:top;
  }
  .cl-grupo .cl-tabla td[data-k]::before{
    content:attr(data-k); display:block;
    font-size:8.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:var(--faint); margin-bottom:1px;
  }
  .cl-grupo .cl-tabla td[data-k].vacia{ display:none; }
  .cl-grupo .cl-tabla .cel-act{ margin-top:8px; }
}