/* v421: composición de la referencia; cifras y destinos siguen en clientes.js. */
body main>.metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
body main>.metrics>.metric{--metric-accent:#78b8ff;--metric-tint:#1d41612e;--metric-footer:#112c482e;position:relative;isolation:isolate;display:grid;grid-template-rows:minmax(116px,1fr) 40px;min-width:0;min-height:158px;aspect-ratio:auto;padding:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--metric-accent) 43%,#152434);border-radius:12px;background:radial-gradient(ellipse at 10% 0,var(--metric-tint),transparent 78%),linear-gradient(135deg,#0c1520,#070d14 78%);box-shadow:inset 0 1px #d7e9ff0a,0 7px 23px #0004;transition:border-color .15s,box-shadow .15s}
body main>.metrics>.metric.debt{--metric-accent:#e6b759;--metric-tint:#7255212d;--metric-footer:#5d471c22}
body main>.metrics>.metric.subscriber{--metric-accent:#b28aff;--metric-tint:#6946ba40;--metric-footer:#3b255c30;border-color:#9773c8;box-shadow:inset 0 1px #e4ceff15,0 0 13px #a96eff28,0 7px 23px #0004}
body main>.metrics>.metric.favor{--metric-accent:#8bd699;--metric-tint:#315e3833;--metric-footer:#254e3026}
body main>.metrics>.metric:before{content:none;display:none}
body main>.metrics>.metric:hover,body main>.metrics>.metric:focus-within{border-color:var(--metric-accent);box-shadow:inset 0 1px #ffffff12,0 0 17px color-mix(in srgb,var(--metric-accent) 14%,transparent),0 7px 23px #0005}
body main>.metrics>.metric.has-critical,body main>.metrics>.metric.has-critical:hover,body main>.metrics>.metric.has-critical:focus-within{--metric-accent:#ff969c;border-color:#a95f6b;box-shadow:0 0 12px #c55c6e24}
body main>.metrics .metric-card-body{position:relative;min-width:0;padding:17px 16px 14px}
body main>.metrics .metric-top{display:block;padding:0;min-height:18px}
body main>.metrics .metric-top i{position:absolute;left:16px;top:14px;display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;margin:0;border:1px solid color-mix(in srgb,var(--metric-accent) 72%,#223149);border-radius:50%;background:radial-gradient(circle at 36% 20%,color-mix(in srgb,var(--metric-accent) 28%,#142032),#0d19299c);color:var(--metric-accent);box-shadow:inset 0 1px 5px #d6edff21,0 0 15px color-mix(in srgb,var(--metric-accent) 11%,transparent)}
body main>.metrics .metric-top i svg{width:22px;height:22px}
body main>.metrics .metric-top span{display:block;margin:3px 0 0 56px;font:700 12px/1.5 Inter,Arial,sans-serif;letter-spacing:0;color:#edf1f8;text-shadow:0 1px 3px #0005}
body main>.metrics .metric-value{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0;margin:6px 37px 0 56px}
body main>.metrics .metric-value>b{display:block;min-width:0;margin:0;font:700 38px/1 Rajdhani,Inter,Arial,sans-serif;letter-spacing:-.6px;color:#f6f7fc;text-shadow:0 1px 6px #ffffff0c;overflow-wrap:anywhere}
body main>.metrics .metric-weekly-badge{padding:4px 8px;border:1px solid #714da8;border-radius:99px;background:linear-gradient(135deg,#30204e,#19132d);color:#cfb0ff;font:600 10px/1.4 Inter,Arial,sans-serif;white-space:nowrap}
body main>.metrics .metric-description{margin:6px 0 0 56px;color:#aebbd0;font:400 10px/1.5 Inter,Arial,sans-serif}
body main>.metrics .metric-spark{position:absolute;right:16px;top:55px;display:flex;align-items:flex-end;gap:3px;width:36px;height:26px;pointer-events:none}
body main>.metrics .metric-spark>i{display:block;width:3px;border-radius:2px;background:linear-gradient(0deg,color-mix(in srgb,var(--metric-accent) 25%,#101923),var(--metric-accent));opacity:.55}
body main>.metrics .metric-spark>i:nth-child(1){height:8px}body main>.metrics .metric-spark>i:nth-child(2){height:19px}body main>.metrics .metric-spark>i:nth-child(3){height:11px}body main>.metrics .metric-spark>i:nth-child(4){height:20px}body main>.metrics .metric-spark>i:nth-child(5){height:15px}body main>.metrics .metric-spark>i:nth-child(6){height:26px}
body main>.metrics .metric.subscriber .metric-spark>i{opacity:.85}
body main>.metrics .metric-link{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;min-height:40px;margin:0;padding:10px 18px;border:0;border-top:1px solid color-mix(in srgb,var(--metric-accent) 9%,#0b1219);border-radius:0;background:linear-gradient(110deg,var(--metric-footer),#060b1238);color:var(--metric-accent);font:600 11px/1.5 Inter,Arial,sans-serif;text-align:left;text-shadow:none;cursor:pointer;transition:background .15s}
body main>.metrics .metric-link:after{content:none;display:none}
body main>.metrics .metric-link svg{flex:none;width:17px;height:17px}
body main>.metrics .metric-link:hover{color:var(--metric-accent);background:linear-gradient(110deg,color-mix(in srgb,var(--metric-accent) 15%,#0a121d),#0c1521)}
body main>.metrics .metric-link:focus-visible{outline:2px solid var(--metric-accent);outline-offset:-4px}
/* Búsqueda libre y categoría siguen siendo inputs; no simulan selects. */
body main>.tools{grid-template-columns:minmax(0,1fr) minmax(190px,.42fr);max-width:820px;gap:12px}
body main>.tools>.input{min-height:48px;padding:12px 15px;border:1px solid #3c5576;border-radius:12px;background:linear-gradient(125deg,#18263a,#0c1420 78%);color:#e3ecf7;font:400 13px/1.5 Inter,Arial,sans-serif;box-shadow:inset 0 1px #d7e9ff0b,0 5px 14px #0002;transition:border-color .15s,box-shadow .15s}
body main>.tools>#clientSearch{padding-left:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%239ebee6' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E"),linear-gradient(125deg,#182a42,#0c1420 78%);background-repeat:no-repeat;background-position:14px center,0 0}
body main>.tools>#categoryFilter{padding-left:42px;border-color:#604b80;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23c7a5fa' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18l-7 8v7l-4 2V12Z'/%3E%3C/svg%3E"),linear-gradient(125deg,#2b203c,#111522 78%);background-repeat:no-repeat;background-position:14px center,0 0}
body main>.tools>.input::placeholder{color:#a0b0c5;opacity:1}
body main>.tools>.input:hover{border-color:#7196c7}
body main>.tools>#categoryFilter:hover{border-color:#a381d4}
body main>.tools>.input:focus-visible{border-color:#9fc7fc;outline:2px solid #8ebeff;outline-offset:3px;box-shadow:0 0 17px #6f9bdf20}
body main>.tools>#categoryFilter:focus-visible{border-color:#c2a0f2;outline-color:#c2a0f2;box-shadow:0 0 17px #ae80f22b}
/* Filtros de estado y orden, sin tocar filas o modales. */
body main>.workspace .filters>.filter{background:linear-gradient(135deg,color-mix(in srgb,var(--client-filter-accent) 12%,#131b27),#0a101a);border-color:color-mix(in srgb,var(--client-filter-accent) 38%,#263443)}
body main>.workspace .filters>.filter.active{background:linear-gradient(135deg,color-mix(in srgb,var(--client-filter-accent) 25%,#151c28),#0d1520);border-color:var(--client-filter-accent);box-shadow:inset 0 -2px var(--client-filter-accent)}
body main>.workspace .filters>.filter:hover,body main>.workspace .filters>.filter.active:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--client-filter-accent) 30%,#151c28),#111b29);border-color:var(--client-filter-accent)}
body main>.workspace .list-head :is(.list-sort-select,.category-sort-button,#clientPositionSort,#clientSubscriberSort){--sort-accent:#bca0ef;border:1px solid color-mix(in srgb,var(--sort-accent) 52%,#273549);background:linear-gradient(135deg,color-mix(in srgb,var(--sort-accent) 19%,#141c29),#0e1420);color:var(--sort-accent);border-radius:8px}
body main>.workspace .list-head #clientNameSort{--sort-accent:#a4cafa}
body main>.workspace .list-head #clientPositionSort{--sort-accent:#a4dfbb}
body main>.workspace .list-head :is(.list-sort-select,.category-sort-button,#clientPositionSort,#clientSubscriberSort):focus-visible{outline:2px solid var(--sort-accent);outline-offset:3px}
@media(max-width:1100px){body main>.metrics{gap:12px}body main>.metrics .metric-card-body{padding-left:12px;padding-right:12px}body main>.metrics .metric-top i{left:12px}body main>.metrics .metric-value{gap:6px;margin-right:24px}body main>.metrics .metric-weekly-badge{padding:3px 6px;font-size:9px}body main>.metrics .metric-spark{right:12px;width:26px;gap:2px}}
@media(max-width:1000px){body main>.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){body main>.tools{grid-template-columns:minmax(0,1fr);width:100%;gap:10px}body main>.metrics .metric-value{margin-right:22px}}
@media(max-width:430px){body main>.metrics{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){body main>.metrics>.metric,body main>.metrics .metric-link,body main>.tools>.input{transition:none}}