/* Clientes (replica S-CL-01) and Cuenta y clubes (S-CU-01). Sizes follow the mobile references at 390 CSS px width. */
:root{--cl-card:#16151a;--cl-line:#222126;--cl-line2:#29282d;--cl-title-line:#2a292f;--cl-avatar:#1f1e24;--cl-avatar-ink:#bfbec4;--cl-chip:#26292f;--cl-chip-line:#3e3e47;--cl-mail:#2d3039;--cl-mail-ink:#b9c8ec;--cl-plus-ring:#f4f4f5;--cl-plus-bg:#0d0d0f;--cu-card:#1b1a1f;--cu-line:#2c2b30;--cu-label:#a3a2a8;--cu-badge:#31353f;--cu-badge-ink:#bbc6dc;--cu-badge2:#2e3033;--cu-badge2-ink:#e2dacf;--cu-field:#151517;--cu-sq:#0d0d0f;--cu-btn:#242329;--cu-btn-line:#2b2a30;--cu-view:#262a2d;--cu-view-line:#53575a;--cu-view-ink:#dfdad3;--cu-set-icon:#2b2e35;--cu-set-ink:#bec9db}
body.light{--cl-card:#fff;--cl-line:#d9ddda;--cl-line2:#d9ddda;--cl-title-line:#d9ddda;--cl-avatar:#eef1ef;--cl-avatar-ink:#4b544f;--cl-chip:#eef1ef;--cl-chip-line:#d0d5d2;--cl-mail:#e4e9f3;--cl-mail-ink:#3c5a8a;--cl-plus-ring:#1c2520;--cl-plus-bg:#fff;--cu-card:#fff;--cu-line:#d9ddda;--cu-label:#69726d;--cu-badge:#e3e8f2;--cu-badge-ink:#41557a;--cu-badge2:#f1ebe1;--cu-badge2-ink:#684d24;--cu-field:#fff;--cu-sq:#f1f2f1;--cu-btn:#eeefee;--cu-btn-line:#d9ddda;--cu-view:#f1ebe1;--cu-view-line:#c9b79c;--cu-view-ink:#1c2520;--cu-set-icon:#eef1f5;--cu-set-ink:#41557a}

/* S-CL-01 */
.cl-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:620px;margin:0 0 22px}
.cl-kpi{position:relative;height:80px;padding:11px 13px 0;border:1px solid var(--cl-line);border-radius:12px;background:var(--cl-card)}
.cl-kpi small{display:block;font-size:9px;line-height:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cl-kpi strong{display:block;margin-top:6px;font-size:21px;line-height:26px;font-weight:800;letter-spacing:-.02em}
.cl-kpi.with-icon small{margin:6px 0 0 33px}
.cl-kpi.with-icon strong{margin-top:13px}
.cl-kpi-icon{position:absolute;left:13.5px;top:13.5px;display:grid;place-items:center;width:23px;height:23px;border-radius:6px;background:var(--cl-mail);color:var(--accent)}
.cl-kpi-icon .icon{width:14px;height:14px}
.cl-tools{display:flex;align-items:center;gap:10px;max-width:620px}
.cl-tools .search{flex:1;min-width:0}
.cl-tools .search input{height:36px;min-height:0;border-color:var(--field-line);border-radius:999px;background:var(--cl-card)}
.cl-add{flex:none;display:grid;place-items:center;width:37px;height:37px;padding:0;border:4px solid var(--cl-plus-ring);border-radius:50%;background:var(--cl-plus-bg);color:var(--cl-plus-ring)}
.cl-add .icon{width:15px;height:15px;stroke-width:2.4}
.cl-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:13.5px 0 0 11px}
.cl-filter-wrap{position:relative}
.cl-filter-wrap .pop-menu{left:0;right:auto;min-width:180px}
.cl-filter{height:28.7px;padding:0 13px;border:1px dashed #67666b;border-radius:999px;background:none;color:var(--muted);font-size:11.5px}
.cl-chip{display:inline-flex;align-items:center;gap:6px;height:28.7px;padding:0 10px 0 12px;border:1px solid var(--accent);border-radius:999px;background:none;color:var(--accent);font-size:11.5px}
.cl-chip .icon{width:12px;height:12px}
.cl-selbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;max-width:620px;margin:16px 0 0;padding:8px 10px;border:1px solid var(--cl-line2);border-radius:10px;background:var(--cl-card);font-size:12px}
.cl-selbar>span{margin-right:auto;color:var(--accent)}
.cl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12.4px;margin-top:44.8px}
.cl-card{display:grid;grid-template-columns:13px 33px minmax(0,1fr) 26px;grid-template-areas:"check avatar who more" "actions actions stats stats";column-gap:11px;row-gap:10.1px;align-items:center;min-height:89px;padding:8.4px 13.5px 8.2px 12px;border:1px solid var(--cl-line);border-radius:12px;background:var(--cl-card)}
/* The box is 13 px, as drawn; the control around it is 24 px for touch (WCAG 2.5.8) without moving the row. */
.cl-check{grid-area:check;display:grid;place-items:center;appearance:none;width:24px;height:24px;min-height:0;margin:-5.5px;padding:0;border:0;border-radius:6px;background:none;cursor:pointer}
.cl-check::before{content:"";grid-area:1/1;width:13px;height:13px;border-radius:3.5px;background:#959498}
.cl-check:checked::before{background:var(--accent)}
.cl-check:checked::after{content:"";grid-area:1/1;width:6px;height:3px;border:solid #141416;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.cl-avatar{grid-area:avatar;display:grid;place-items:center;width:33px;height:33px;border:1px solid var(--cl-line2);border-radius:50%;background:var(--cl-avatar);color:var(--cl-avatar-ink);font-size:11.5px;font-weight:500}
.cl-who{grid-area:who;min-width:0}
.cl-who h3{font-size:13px;font-weight:500;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-who p{margin-top:3.7px;font-size:11px;line-height:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-more-wrap{grid-area:more;position:relative}
.cl-round{display:grid;place-items:center;width:26.6px;height:26.6px;padding:0;border:1px solid var(--cl-line2);border-radius:50%;background:none;color:var(--text)}
.cl-round .icon{width:13px;height:13px}
.cl-more{width:26px;height:26px}
.cl-more .icon{width:15px;height:15px;stroke-width:1.4}
.cl-actions{grid-area:actions;display:flex;gap:6px}
.cl-mail{border-color:transparent;background:var(--cl-mail);color:var(--cl-mail-ink)}
.cl-mail.off{opacity:.35}
.cl-stats{grid-area:stats;display:flex;align-items:center;justify-content:flex-end;gap:10.7px}
.cl-stats strong{font-size:13.5px;font-weight:600;color:var(--accent)}
.cl-visits{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:41px;height:18.6px;padding:0 7px;border:1px solid var(--cl-chip-line);border-radius:999px;background:var(--cl-chip);font-size:11.5px}
.cl-visits .icon{width:11px;height:11px}
.cl-visits b{font-weight:500}

/* S-CU-01 */
.cu{max-width:560px;margin:0 auto}
.cu-card{border:1px solid var(--cu-line);border-radius:14px;background:var(--cu-card)}
.cu-head{display:grid;grid-template-columns:65px minmax(0,1fr) 24px;column-gap:13.2px;align-items:center;width:100%;padding:13.5px 12px 13.2px 14.8px;border:0;border-bottom:1px solid var(--cu-line);border-radius:14px 14px 0 0;background:none;color:var(--text);text-align:left}
.cu-head>.icon{justify-self:center;width:16px;height:16px}
.cu-avatar,.cu-mini{display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--club) 22%,#141416);color:var(--club);font-weight:800;letter-spacing:-.02em}
.cu-avatar{width:65px;height:65px;font-size:20px}
.cu-mini{width:27px;height:27px;font-size:10px}
body.light .cu-avatar,body.light .cu-mini{background:color-mix(in srgb,var(--club) 60%,#fff);color:#141416}
.cu-id{display:grid;gap:5.6px;min-width:0}
.cu-badges{display:flex;gap:6.3px}
.cu-badge{display:inline-grid;place-items:center;height:15.2px;padding:0 9px;border-radius:5px;background:var(--cu-badge);color:var(--cu-badge-ink);font-size:9px;font-weight:600;letter-spacing:.08em}
.cu-badge+.cu-badge{background:var(--cu-badge2);color:var(--cu-badge2-ink)}
.cu-id strong{font-size:15.5px;font-weight:500;line-height:20px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cu-label{margin:7.8px 0 3.8px;padding:0 11px;font-size:9.5px;line-height:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--cu-label)}
.cu-label-new{margin-top:10.5px}
.cu-row{display:grid;grid-template-columns:27px minmax(0,1fr) 20px;column-gap:9.7px;align-items:center;width:100%;height:55.4px;padding:0 14px 0 14.8px;border:0;border-bottom:1px solid var(--cu-line);background:none;color:var(--text);text-align:left}
.cu-row .cu-id{gap:4px}
.cu-row .cu-badge{height:14.8px;font-size:8.5px}
.cu-row .cu-id strong{font-size:13px;line-height:16px}
.cu-row.on .cu-id strong{color:var(--accent)}
.cu-row>.icon{width:15px;height:15px;color:var(--accent)}
.cu-new{display:flex;align-items:center;gap:12.5px;width:100%;height:46.9px;padding:0 14.8px;border:0;background:none;color:var(--text);font-size:13.5px;font-weight:500;text-align:left}
.cu-dash{display:grid;place-items:center;width:27px;height:27px;border:1px dashed #6c6c72;border-radius:50%;font-size:14px;line-height:1}
.cu-foot{display:flex;flex-wrap:wrap;gap:7.2px;padding:9.6px 13.1px}
#cu-clubs+.cu-foot{margin-top:3.5px;border-top:1px solid var(--cu-line)}
.cu-btn{display:inline-flex;align-items:center;gap:7px;height:25.8px;padding:0 11px;border:1px solid var(--cu-btn-line);border-radius:7px;background:var(--cu-btn);color:var(--muted);font-size:12px;font-weight:500;text-decoration:none}
.cu-btn .icon{width:14px;height:14px}
.cu-view{border-color:var(--cu-view-line);background:var(--cu-view);color:var(--cu-view-ink)}
.cu-h{margin:21.4px 0 0;text-align:center;font-size:10.5px;line-height:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cu-desc{margin:10.6px 2.5px 0;font-size:12px;line-height:12.7px;color:var(--muted)}
.cu-link{display:flex;align-items:center;gap:8px;height:50px;margin-top:12.4px;padding:0 13.4px;border:1px solid var(--cu-line);border-radius:12px;background:var(--cu-field)}
.cu-link>.icon{flex:none;width:12px;height:12px;color:var(--muted)}
.cu-url{flex:1;min-width:0;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cu-url b{color:var(--text);font-weight:600}
.cu-sq{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--cu-line);border-radius:7px;background:var(--cu-sq);color:var(--text)}
.cu-sq .icon{width:14px;height:14px}
.cu-sq.main{border-color:var(--nv-sel);background:var(--nv-sel);color:var(--nv-sel-ink)}
.cu-search{display:flex;margin-top:10.5px}
.cu-search .icon{left:13px}
.cu-search input{height:46px;padding-left:45px;border-color:var(--field-line);border-radius:999px;background:var(--cu-card)}
.cu-settings{display:grid;gap:12px;margin-top:15px}
.cu-set{display:grid;grid-template-columns:39px minmax(0,1fr) 16px;column-gap:14px;align-items:center;width:100%;min-height:70px;padding:15px 22px 15px 15px;border:1px solid var(--cu-line);border-radius:14px;background:var(--cu-card);color:var(--text);text-align:left}
.cu-set-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:9px;background:var(--cu-set-icon);color:var(--cu-set-ink)}
.cu-set-icon .icon{width:18px;height:18px}
.cu-set strong{display:block;font-size:14px;font-weight:500;line-height:18px}
.cu-set small{display:block;margin-top:3px;font-size:12px;line-height:15px}
.cu-set>.icon{width:15px;height:15px;color:var(--muted)}

@media(min-width:641px){.cl-add{display:none}}
@media(max-width:640px){
 .page-clients .topbar,.page-club .topbar{display:none}
 .page-clients .content{padding:47px 15px 125px}
 .page-club .content{padding:47px 20px 125px}
 .page-club .page-heading{display:none}
 .page-clients .page-heading{display:block;margin:0 0 20.9px;padding-bottom:14px;border-bottom:1px solid var(--cl-title-line)}
 .page-clients .page-heading h1{font-size:20px;line-height:24px;font-weight:800;letter-spacing:.01em;text-transform:uppercase}
 .page-clients .page-heading p,.page-clients .heading-actions{display:none}
 .cl-list{grid-template-columns:1fr}
}
/* Client file (U-002): items to review, history and consent. */
.cl-review{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:2px 8px;border-radius:999px;background:var(--raised);color:var(--text);font-size:11.5px}
.cl-review .icon{width:12px;height:12px}
.cl-reviews{margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:12.5px}
.cl-reviews ul{margin:6px 0 0;padding-left:18px}
.cl-history{margin:0 0 10px}
.cl-history p{margin:2px 0;font-size:12.5px}
/* Data-subject requests */
.cl-rights{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
/* Free tags (E-03) */
.cl-tags{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 0}
.cl-tags span{padding:1px 7px;border:1px solid var(--line);border-radius:999px;font-size:11px;color:var(--muted)}
/* Club metrics (E-08) */
.cl-metrics{margin-top:22px}
.cl-metrics h2{margin:0 0 8px;font-size:14px}
.cl-kpi-base{display:block;font-size:11px;color:var(--muted)}
.cl-defs{margin-top:8px;font-size:12.5px;color:var(--muted)}
.cl-defs summary{cursor:pointer;color:var(--text)}
.cl-defs ul{margin:6px 0 0;padding-left:18px}
/* Client segments (E-03) */
.sg{margin:10px 0 0}
.sg-rules{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.sg-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
/* Client history rows (E-02) */
.cl-hist{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.cl-hist li{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:12.5px}
.cl-hist small{display:block;color:var(--muted)}
/* CSV import (U-005). */
.im-preview{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:12.5px}
.im-preview ul{margin:6px 0 0;padding-left:18px}
.im-preview details{margin-top:8px}
.cl-import{margin-left:auto}

/* The club's main clients (V-12). */
.cl-top{margin-top:12px}
.cl-top h3{margin:0 0 6px;font-size:14px}
.cl-top ol{margin:0;padding-left:20px;display:grid;gap:4px}
.cl-top li{font-size:13px}
.cl-top li span{color:var(--muted);margin-left:6px}
.cl-top-name{display:inline-block;padding:3px 0;margin:-3px 0;border:0;background:none;color:var(--text);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cl-top-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}