/* ==========================================================================
   PANEL DE CLIENTES — estilos
   --------------------------------------------------------------------------
   Hereda de dz-plan.css (tipografías, botones, colores). Aquí solo lo propio
   de esta pantalla: las fichas y el semáforo.

   El estado se dice CON PALABRAS además de con color —"Vencido hace 3 días",
   no solo un punto rojo— porque este panel se mira con prisa y en el teléfono,
   donde un color a contraluz no se distingue.
   ========================================================================== */
@import url('dz-plan.css?v=8');

/* La cabecera y el contenedor los pone dz-plan.css (.tool / .tool-head), los
   mismos que el planificador: así las dos pantallas se ven hermanas y no hay
   dos definiciones del mismo título que mantener. */

.dz-plan .cli-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.dz-plan .cli-filtros input[type=search]{
  flex:1 1 220px;min-width:0;padding:9px 12px;border:1px solid var(--line);
  border-radius:10px;font:inherit;font-size:14px;background:var(--nf-card,#fff);
}
.dz-plan .cli-filtros .chip{
  padding:7px 14px;border:1px solid var(--line);background:var(--nf-card,#fff);border-radius:99px;
  font:inherit;font-size:13px;cursor:pointer;color:var(--grey-num);
}
.dz-plan .cli-filtros .chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#141414}

.dz-plan .cli-error{
  padding:11px 14px;border-radius:11px;font-size:13px;margin:0 0 14px;
  background:rgba(184,144,63,.08);border:1px solid rgba(184,144,63,.22);
}

.dz-plan .cli-lista{display:grid;gap:12px}
.dz-plan .cli-ficha{
  border:1px solid var(--line);border-left-width:4px;border-radius:14px;
  padding:14px 16px;background:var(--nf-card,#fff);
}
/* El borde izquierdo es el semáforo. Va en el borde y no en el fondo para que
   la ficha siga siendo legible en blanco y negro o impresa. */
.dz-plan .cli-vencido{border-left-color:#b8903f}
.dz-plan .cli-pronto{border-left-color:#d98324}
.dz-plan .cli-aldia{border-left-color:#1f9d55}
.dz-plan .cli-sinplan{border-left-color:var(--grey-num)}

.dz-plan .cli-ficha-cab{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between}
.dz-plan .cli-quien{display:flex;flex-direction:column;gap:1px;min-width:0}
.dz-plan .cli-quien strong{font-size:15.5px}
.dz-plan .cli-correo{font-size:12px;color:var(--grey-num)}
.dz-plan .cli-estado{font-size:12.5px;font-weight:600;white-space:nowrap}
.dz-plan .cli-vencido .cli-estado{color:#b8903f}
.dz-plan .cli-pronto .cli-estado{color:#d98324}
.dz-plan .cli-aldia .cli-estado{color:#1f9d55}

.dz-plan .cli-datos{display:flex;flex-direction:column;gap:2px;margin:8px 0 12px;font-size:13px}
.dz-plan .cli-suave{color:var(--grey-num);font-size:12px}
.dz-plan .cli-botones{display:flex;flex-wrap:wrap;gap:7px}
.dz-plan .cli-botones .btn-xs{padding:6px 12px;font-size:12.5px;border-radius:9px}
.dz-plan .cli-vacio{color:var(--grey-num);text-align:center;padding:30px;font-size:14px}

@media(max-width:520px){
  .dz-plan .cli-cab h1{font-size:24px}
  .dz-plan .cli-botones .btn-xs{flex:1 1 auto;text-align:center}
}

/* Borrar cuenta: separado del resto y en rojo solo al pasar por encima. En
   rojo permanente compite con «+1 mes», que es lo que se pulsa a diario;
   apagado hasta que lo buscas, cuesta pulsarlo sin querer. */
.dz-plan .cli-borrar{margin-left:auto;color:var(--grey-num)}
.dz-plan .cli-borrar:hover{color:#b8903f;border-color:#b8903f}