/* ==========================================================================
   HackDevNet · Clientes (template-parts/clientes.php)
   Usa los tokens de hdn.css y los componentes de paginas.css. Selectores con dos clases.
   Los logos de clientes van en gris para respetar el monocromo.
   ========================================================================== */

.hdn-clientes .hdn-clientes__bajada { max-width: 46ch; margin-top: var(--hdn-e4); font: 400 var(--hdn-t-m)/1.55 var(--hdn-fuente); color: var(--hdn-gris); }
.hdn-clientes .hdn-clientes__vacio { font: 400 var(--hdn-t-l)/1.5 var(--hdn-fuente); color: var(--hdn-gris); }

/* --- Cifras --------------------------------------------------------------------- */
.hdn-clientes .hdn-cifras { display: flex; flex-wrap: wrap; gap: var(--hdn-e5) var(--hdn-e8); margin: var(--hdn-e6) 0 0; }
.hdn-clientes .hdn-cifras > div { display: flex; flex-direction: column-reverse; }
.hdn-clientes .hdn-cifras dt { font: 600 .75rem/1.2 var(--hdn-fuente); letter-spacing: .14em; text-transform: uppercase; color: var(--hdn-gris); }
.hdn-clientes .hdn-cifras dd { margin: 0 0 var(--hdn-e1); font: 600 clamp(2.5rem, 2rem + 2vw, 3.5rem)/1 var(--hdn-fuente); letter-spacing: -.03em; color: var(--hdn-tinta); font-variant-numeric: tabular-nums; }

/* --- Mapa y lista ------------------------------------------------------------------- */
.hdn-clientes .hdn-clientes__fila { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--hdn-e7); align-items: start; }
.hdn-clientes .hdn-clientes__mapa-col { position: sticky; top: calc(var(--hdn-alto-cabecera) + var(--hdn-e5)); }
.admin-bar .hdn-clientes .hdn-clientes__mapa-col { top: calc(var(--hdn-alto-cabecera) + var(--hdn-e5) + 32px); }

.hdn-clientes .hdn-mapa { display: block; width: 100%; height: auto; margin-top: var(--hdn-e5); overflow: visible; }
.hdn-clientes .hdn-mapa__prov { fill: #E3E3E3; stroke: var(--hdn-blanco); stroke-width: 1.2; stroke-linejoin: round; transition: fill var(--hdn-transicion); }
.hdn-clientes .hdn-mapa__prov.tiene-clientes { fill: #8A8A8A; cursor: pointer; }
.hdn-clientes .hdn-mapa__prov.tiene-clientes:hover { fill: var(--hdn-gris); }
.hdn-clientes .hdn-mapa__prov.es-elegida { fill: var(--hdn-carbon); }
/* Con un filtro activo, el resto se atenúa. */
.hdn-clientes .hdn-mapa.hay-filtro .hdn-mapa__prov.tiene-clientes:not(.es-elegida) { fill: #BDBDBD; }
.hdn-clientes .hdn-mapa__recuadro { fill: none; stroke: var(--hdn-gris2); stroke-width: 1; stroke-dasharray: 4 4; }
.hdn-clientes .hdn-mapa__rotulo { font: 500 16px/1 var(--hdn-fuente); fill: var(--hdn-gris); }
.hdn-clientes .hdn-mapa__oficina { fill: var(--hdn-blanco); stroke: var(--hdn-tinta); stroke-width: 3; pointer-events: none; }
.hdn-clientes .hdn-mapa__oficina { animation: hdn-latido 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hdn-latido { 50% { transform: scale(1.35); } }
.hdn-clientes .hdn-mapa__leyenda { display: flex; align-items: center; gap: var(--hdn-e2); margin-top: var(--hdn-e3); font: 400 var(--hdn-t-xs)/1.4 var(--hdn-fuente); color: var(--hdn-gris); }
.hdn-clientes .hdn-mapa__punto { width: 12px; height: 12px; border-radius: 50%; background: var(--hdn-blanco); border: 2px solid var(--hdn-tinta); }

.hdn-clientes .hdn-filtros { display: flex; flex-wrap: wrap; gap: var(--hdn-e2); }
.hdn-clientes .hdn-filtros--pilar { margin-top: var(--hdn-e3); }
.hdn .hdn-clientes .hdn-filtro {
	display: inline-flex; align-items: center; gap: .5em; margin: 0; padding: .5rem .9rem; cursor: pointer;
	background: var(--hdn-blanco); color: var(--hdn-tinta); border: 1px solid var(--hdn-linea); border-radius: 999px; box-shadow: none;
	font: 500 var(--hdn-t-s)/1.2 var(--hdn-fuente); text-transform: none; letter-spacing: 0;
	transition: background-color var(--hdn-transicion), border-color var(--hdn-transicion), color var(--hdn-transicion);
}
.hdn .hdn-clientes .hdn-filtro:hover { border-color: var(--hdn-tinta); }
.hdn .hdn-clientes .hdn-filtro[aria-pressed="true"] { background: var(--hdn-carbon); border-color: var(--hdn-carbon); color: var(--hdn-blanco); }
.hdn-clientes .hdn-filtro span { font: 500 var(--hdn-t-xs)/1 var(--hdn-fuente); opacity: .7; font-variant-numeric: tabular-nums; }
.hdn-clientes .hdn-clientes__cuenta { min-height: 1.4em; margin-top: var(--hdn-e5); font: 500 var(--hdn-t-xs)/1.4 var(--hdn-fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--hdn-gris); }

.hdn-clientes .hdn-clientes__lista { display: grid; gap: var(--hdn-e3); margin-top: var(--hdn-e3); list-style: none; }
.hdn-clientes .hdn-cliente {
	display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--hdn-e5); align-items: start; padding: var(--hdn-e5);
	background: var(--hdn-blanco); border: 1px solid var(--hdn-linea); border-radius: var(--hdn-radio);
	animation: hdn-aparece-c .3s ease;
}
.hdn-clientes .hdn-cliente[hidden] { display: none; }
@keyframes hdn-aparece-c { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hdn-clientes .hdn-cliente__logo { display: grid; place-items: center; min-height: 72px; padding: var(--hdn-e2); border-right: 1px solid var(--hdn-linea); padding-right: var(--hdn-e5); }
.hdn-clientes .hdn-cliente__inicial {
	display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--hdn-panel);
	font: 600 var(--hdn-t-l)/1 var(--hdn-fuente); color: var(--hdn-tinta);
}
.hdn-clientes .hdn-cliente__nombre { font: 600 var(--hdn-t-m)/1.3 var(--hdn-fuente); color: var(--hdn-tinta); }
.hdn-clientes .hdn-cliente__nombre a { color: inherit; text-decoration: none; }
.hdn-clientes .hdn-cliente__nombre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hdn-clientes .hdn-cliente__meta { margin-top: var(--hdn-e1); font: 400 var(--hdn-t-xs)/1.45 var(--hdn-fuente); color: var(--hdn-gris); }
.hdn-clientes .hdn-cliente__resumen { margin-top: var(--hdn-e3); font: 400 var(--hdn-t-s)/1.55 var(--hdn-fuente); color: var(--hdn-texto); }
.hdn-clientes .hdn-cliente__servicios { display: flex; flex-wrap: wrap; gap: var(--hdn-e2); margin-top: var(--hdn-e3); list-style: none; }
.hdn-clientes .hdn-cliente__servicios a {
	display: inline-block; padding: .3rem .6rem; border: 1px solid var(--hdn-linea); border-radius: var(--hdn-radio);
	font: 500 var(--hdn-t-xs)/1.2 var(--hdn-fuente); color: var(--hdn-texto); text-decoration: none;
}
.hdn-clientes .hdn-cliente__servicios a:hover { border-color: var(--hdn-tinta); color: var(--hdn-tinta); }

@media (max-width: 1023px) {
	.hdn-clientes .hdn-clientes__fila { grid-template-columns: 1fr; gap: var(--hdn-e6); }
	.hdn-clientes .hdn-cifras { gap: var(--hdn-e5) var(--hdn-e6); }
	.hdn-clientes .hdn-clientes__mapa-col { position: static; }
	.hdn-clientes .hdn-mapa { max-width: 560px; }
}
@media (max-width: 640px) {
	.hdn-clientes .hdn-cliente { grid-template-columns: 1fr; gap: var(--hdn-e4); }
	.hdn-clientes .hdn-cliente__logo { justify-items: start; border-right: 0; padding: 0; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.hdn-clientes .hdn-mapa__oficina, .hdn-clientes .hdn-cliente { animation: none; }
}