/* v348: más contraste en métricas, filtros y selección. Sólo listado de Clientes. */
body main>.metrics>.metric{--metric-accent:#8dc6f8;border:1px solid color-mix(in srgb,var(--metric-accent) 66%,#263b52);border-top:3px solid color-mix(in srgb,var(--metric-accent) 86%,#263b52);background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--metric-accent) 20%,transparent),transparent 72%),linear-gradient(140deg,#111e2c,#090f18);box-shadow:inset 0 1px #ffffff0c,0 4px 18px #0004,0 0 0 1px color-mix(in srgb,var(--metric-accent) 10%,transparent);transition:border-color .15s,box-shadow .15s}
body main>.metrics>.metric.debt{--metric-accent:#e9bb72}
body main>.metrics>.metric.subscriber{--metric-accent:#bd95ff}
body main>.metrics>.metric.favor{--metric-accent:#88dbaa}
body main>.metrics>.metric.has-critical{--metric-accent:#ff969c}
body main>.metrics>.metric:hover,body main>.metrics>.metric:focus-within{border-color:var(--metric-accent);box-shadow:inset 0 1px #ffffff12,0 4px 20px #0005,0 0 0 1px color-mix(in srgb,var(--metric-accent) 25%,transparent)}
body main>.metrics .metric-top i{border-color:color-mix(in srgb,var(--metric-accent) 65%,#263b52);background:color-mix(in srgb,var(--metric-accent) 19%,#101b28);box-shadow:inset 0 1px #ffffff13,0 0 14px color-mix(in srgb,var(--metric-accent) 10%,transparent)}
body main>.metrics .metric-top span{color:#f0f4fa;font-weight:650}
body main>.metrics .metric-link{color:var(--metric-accent);border-radius:5px}
body main>.metrics .metric-link::after{border-color:color-mix(in srgb,var(--metric-accent) 65%,#263b52);background:color-mix(in srgb,var(--metric-accent) 14%,#101b28);color:var(--metric-accent)}
body main>.metrics .metric-link:focus-visible{outline:2px solid var(--metric-accent);outline-offset:4px}

/* Selector: cada filtro tiene cuerpo propio; el activo se reconoce sin depender del color. */
body main>.workspace>.card>.filters{gap:8px;padding:11px;margin-bottom:12px;border:1px solid #3a5576;border-radius:12px;background:linear-gradient(125deg,#17273b,#0d1520);box-shadow:inset 0 1px #c6deff0d}
body main>.workspace .filters>.filter{--client-filter-accent:#a9cbed;border:1px solid color-mix(in srgb,var(--client-filter-accent) 36%,#26384d);border-radius:9px;background:color-mix(in srgb,var(--client-filter-accent) 7%,#111a25);color:#cbd9eb;transition:border-color .15s,background .15s}
body main>.workspace .filters>.filter[data-filter="all"]{--client-filter-accent:#8ce6b2}
body main>.workspace .filters>.filter[data-filter="active"]{--client-filter-accent:#9cc4fa}
body main>.workspace .filters>.filter[data-filter="debt"]{--client-filter-accent:#efc879}
body main>.workspace .filters>.filter[data-filter="subscriber"]{--client-filter-accent:#c8a3ff}
body main>.workspace .filters>.filter[data-filter="inactive"]{--client-filter-accent:#b3becc}
body main>.workspace .filters>.filter .filter-icon{color:var(--client-filter-accent)}
body main>.workspace .filters>.filter.active{border-color:var(--client-filter-accent);background:color-mix(in srgb,var(--client-filter-accent) 23%,#111a25);box-shadow:inset 0 -3px var(--client-filter-accent);color:#f3f7ff;font-weight:700}
body main>.workspace .filters>.filter:hover{border-color:var(--client-filter-accent);background:color-mix(in srgb,var(--client-filter-accent) 17%,#111a25)}
body main>.workspace .filters>.filter.active:hover{background:color-mix(in srgb,var(--client-filter-accent) 28%,#111a25)}
body main>.workspace .filters>.filter:focus-visible{outline:2px solid var(--client-filter-accent);outline-offset:3px}
body main>.workspace .filters>.filter.active small{color:#d4deed}
body main>.workspace .list-head{border:1px solid #354e6d;border-radius:10px;background:linear-gradient(110deg,#14243a,#0e1724);color:#b6cce8;box-shadow:inset 0 1px #c6deff08}
body main>.workspace .list-head :is(.list-sort-select,.category-sort-button,#clientPositionSort,#clientSubscriberSort){border:1px solid #4a6585;border-radius:7px;background:#182a40}
body main>.workspace .list-head .list-sort-select{color:#d4e6ff}
body main>.workspace .list-head :is(.list-sort-select,.category-sort-button,#clientPositionSort,#clientSubscriberSort):focus-visible{outline:2px solid #a5c9fc;outline-offset:3px}

/* Se acentúa la fila, nunca se recolorean los importes, badges ni la foto. */
body main>.workspace #clientList>.client-row{--client-row-accent:#83b6ef;border-color:color-mix(in srgb,var(--client-row-accent) 42%,#263344);border-left-color:color-mix(in srgb,var(--client-row-accent) 78%,#263344);background:linear-gradient(110deg,color-mix(in srgb,var(--client-row-accent) 10%,#10151d),#090f16 80%);box-shadow:inset 0 1px #c6deff08;transition:border-color .15s,background .15s,box-shadow .15s}
body main>.workspace #clientList>.client-row.subscriber-client{--client-row-accent:#bd95ff}
body main>.workspace #clientList>.client-row.blocked{--client-row-accent:#cd929c}
body main>.workspace #clientList>.client-row.critical{--client-row-accent:#ef8d9a}
body main>.workspace #clientList>.client-row:hover,body main>.workspace #clientList>.client-row:focus-within,body main>.workspace #clientList>.client-row.selected{border-color:var(--client-row-accent);border-left-color:var(--client-row-accent);background:linear-gradient(110deg,color-mix(in srgb,var(--client-row-accent) 17%,#10151d),#0b1320 80%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--client-row-accent) 17%,transparent),0 0 12px color-mix(in srgb,var(--client-row-accent) 9%,transparent)}
body main>.workspace #clientList>.client-row.selected{box-shadow:inset 4px 0 var(--client-row-accent),inset 0 0 0 1px color-mix(in srgb,var(--client-row-accent) 24%,transparent)}
body main>.workspace #clientList>.client-row:focus-visible{outline:2px solid var(--client-row-accent);outline-offset:3px}
@media(max-width:690px){body main>.workspace>.card>.filters{padding:8px;gap:6px}body main>.workspace .filters>.filter{padding:9px 8px}}
@media(prefers-reduced-motion:reduce){body main>.metrics>.metric,body main>.workspace .filters>.filter,body main>.workspace #clientList>.client-row{transition:none}}