/* ---- Clientes: grid de tarjetas, formulario, ficha ----
     Primer módulo que adopta la escala tipográfica/de espaciado de
     shared/styles/tokens.css directamente en sus selectores (--text-*,
     --space-*) en vez de valores sueltos — Equipo/Planificación se
     migran aparte, módulo por módulo, sin tocarlos acá. */

  .clientes-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
    gap:var(--space-4);
  }
  .cliente-card{
    display:flex; flex-direction:column; gap:var(--space-2);
    text-align:left; cursor:pointer;
    box-shadow:var(--shadow-card);
    transition:border-color .12s ease, transform .12s ease;
  }
  .cliente-card:hover{border-color:var(--accent); transform:translateY(-1px);}
  .cliente-card-top{display:flex; align-items:center; justify-content:space-between;}
  .cliente-card-nombre{font-size:var(--text-h3); margin-top:var(--space-1);}
  .cliente-card-desde{
    font-size:var(--text-metadata); color:var(--text-faint);
    text-transform:uppercase; letter-spacing:.04em;
  }
  .cliente-card-contacto{display:flex; flex-direction:column; gap:.3rem; font-size:var(--text-caption); color:var(--text-dim);}
  .cliente-card-contacto span{display:flex; align-items:center; gap:.4rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .cliente-card-contacto .icon{color:var(--text-faint); flex:none;}
  .cliente-card-tipo{
    display:flex; align-items:center; gap:.4rem; font-size:var(--text-label); color:var(--text-faint);
    margin-top:auto; padding-top:var(--space-2); border-top:1px solid var(--border-soft);
  }
  .cliente-card-tipo .icon{color:var(--text-faint);}

  .cliente-stats{grid-template-columns:repeat(3,1fr); margin-bottom:var(--space-4);}
  .cliente-search{width:auto; flex:1; max-width:420px;}
  .cliente-filtros{justify-content:space-between; margin-top:-.3rem; flex-wrap:wrap;}
  .cliente-tipo-toggle{display:flex; gap:.4rem; margin-bottom:var(--space-4);}

  @media (max-width:640px){
    .clientes-grid{grid-template-columns:1fr;}
    .cliente-filtros{flex-direction:column; align-items:flex-start; gap:.5rem;}
  }
  @media (max-width:520px){
    .cliente-stats{grid-template-columns:1fr;}
  }