/* v339: lienzo completo de Registrar cliente y consumos cronológicos.
   Conserva tonos negros, indicadores, agenda y acciones originales. */
#clientProfileModal #clientDetail.client-profile-v303{
  --client-profile-surface:linear-gradient(145deg,#0d1014,#080a0d);
  --client-profile-border:#272d35;
  box-sizing:border-box;
  width:min(1180px,calc(100vw - 48px));
  max-width:min(1180px,calc(100vw - 48px));
  min-width:0;
  flex:0 1 1180px;
  max-height:calc(100vh - 36px);
  max-height:calc(100dvh - 36px);
  min-height:0;
  padding:12px 14px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  font-size:12px;
  line-height:1.4;
  border-color:#343a44;
  background:linear-gradient(100deg,#080c0ee6,#080c0e60),url('assets/clientes-deuda-v198.png') center/cover no-repeat;
  background-color:#030405;
  box-shadow:inset 0 1px #ffffff09,0 26px 100px #000c;
}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-chrome{position:sticky;top:0;z-index:50;display:flex;justify-content:flex-end;min-height:0;height:0;margin:0;padding:0;border:0;background:none;pointer-events:none}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-brand{display:flex;align-items:center;justify-content:center;min-width:0;grid-column:3;color:#a7c8ee}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-brand img{display:block;width:126px;height:94px;max-width:100%;object-fit:contain;filter:drop-shadow(0 2px 6px #0009)}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-brand span{overflow-wrap:anywhere}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-chrome .close-detail{position:static;float:none;flex:0 0 32px;width:32px;height:32px;margin:0;padding:0;font-size:25px;pointer-events:auto}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-hero{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) 126px;gap:16px;align-items:center;min-height:156px;margin:-12px -14px 10px;padding:18px 52px 18px 18px;border:0;border-radius:17px 17px 0 0;background:linear-gradient(90deg,#080c0e55,transparent)}
#clientProfileModal #clientDetail.client-profile-v303 .profile{grid-template-columns:84px minmax(0,1fr);gap:12px;min-height:112px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-avatar-column{position:relative;gap:0;width:80px;min-height:80px;align-self:center}
#clientProfileModal #clientDetail.client-profile-v303 .profile .profile-avatar{width:76px;height:76px;flex-basis:76px;font-size:27px;border-color:#94cbbf;background:linear-gradient(135deg,#293941,#0c1118);box-shadow:0 0 0 3px #93ccbb0b,0 0 18px #70bea31a}
#clientProfileModal #clientDetail.client-profile-v303 .profile-photo-action{position:absolute;right:0;bottom:0;width:28px;min-height:28px;padding:5px;border:1px solid #749c8e;border-radius:50%;background:#0b1216;color:#e3f3ea;font-size:10px;gap:0;box-shadow:0 2px 7px #0008}
#clientProfileModal #clientDetail.client-profile-v303 .profile-photo-action .client-profile-icon{width:14px;height:14px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-name-row{gap:6px 9px;margin-bottom:8px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-eyebrow{display:block;margin:0 0 7px;color:#9cd7b4;font:600 10px/1.3 Inter,system-ui,sans-serif;letter-spacing:1.2px;text-transform:uppercase}
#clientProfileModal #clientDetail.client-profile-v303 .profile h2{font-size:29px;line-height:1.08}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-hero .client-profile-last{color:inherit}
#clientProfileModal #clientDetail.client-profile-v303 .profile .state{font-size:10px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-flags{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;min-width:0}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-flags :is(.state,.client-profile-flag){display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;margin:0;padding:6px 9px;border:1px solid #3c776454;border-radius:8px;background:#0a1915d9;font:600 10px/1.3 Inter,system-ui,sans-serif;white-space:normal;overflow-wrap:anywhere}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-flags .state.inactive{border-color:#65718280;background:#11171ce6}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-flag .client-profile-icon{width:17px;height:17px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-flags .flag-subscription{border-color:#8f60bb88;background:#251533db;color:#d2b3ed}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-flags .flag-clear{border-color:#51865d88;background:#17351fdb;color:#a7e1b3}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-flags .flag-debt{border-color:#a6535d88;background:#33171cdb;color:#f3b0b6}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-flags .flag-warning{border-color:#947b4988;background:#2c2414db;color:#e5d29d}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-flags .flag-neutral{border-color:#4f5d6a88;background:#11171edb;color:#bac6d3}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-contact{gap:8px;margin-bottom:6px;font-size:13px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-contact a{gap:6px;min-height:28px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-contact .client-profile-icon{width:21px;height:21px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-category{min-height:27px;min-width:40px;padding:3px 7px;font-size:11px}
#clientProfileModal #clientDetail.client-profile-v303 .profile .client-profile-since{font-size:11px}
#clientProfileModal #clientDetail.client-profile-v303 .profile .client-profile-secondary-contact{margin-top:4px;font-size:10px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stats{padding:10px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stats-head{gap:8px;margin-bottom:8px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stats-head h3{gap:6px;font-size:16px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stats-head h3 .client-profile-icon{width:20px;height:20px}
#clientProfileModal #clientDetail.client-profile-v303 .client-statistics-button{min-height:30px;padding:5px 7px;font-size:10px;gap:4px}
#clientProfileModal #clientDetail.client-profile-v303 .client-statistics-button .client-profile-icon{width:14px;height:14px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stat{display:flex;gap:6px;min-height:76px;padding:8px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stat-icon{margin:0}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stat-icon .client-profile-icon{width:20px;height:20px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stat b{font-size:21px;margin-bottom:3px;line-height:1.15}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stat>div>span,#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stat small{font-size:10px;line-height:1.3}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stat small{margin-top:3px}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stats-note{margin-top:6px;font-size:10px;line-height:1.35}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stats-retry{min-height:30px;margin-top:6px;padding:5px 7px;font-size:10px}
#clientProfileModal #clientDetail.client-profile-v303 .detail-metrics.client-account-summary{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:8px 0 12px}
#clientProfileModal #clientDetail.client-profile-v303 .detail-metrics .client-financial-card{grid-template-columns:32px minmax(0,1fr) auto;gap:8px;min-height:78px;padding:10px}
#clientProfileModal #clientDetail.client-profile-v303 .detail-metrics .client-financial-icon{width:32px;height:32px}
#clientProfileModal #clientDetail.client-profile-v303 .client-financial-icon .client-profile-icon{width:21px;height:21px}
#clientProfileModal #clientDetail.client-profile-v303 .detail-metrics .client-financial-copy b{font-size:24px;margin-bottom:3px}
#clientProfileModal #clientDetail.client-profile-v303 .detail-metrics .client-financial-copy span{font-size:10px;line-height:1.3}
#clientProfileModal #clientDetail.client-profile-v303 .inline-action{min-height:30px;gap:5px;padding:5px 8px;font-size:10px}
#clientProfileModal #clientDetail.client-profile-v303 .inline-action .client-profile-icon{width:14px;height:14px}
#clientProfileModal #clientDetail.client-profile-v303 .detail-metrics .inline-action{grid-column:auto;justify-self:end;min-height:30px;padding:5px 7px;font-size:10px;gap:4px}
#clientProfileModal #clientDetail.client-profile-v303 .quick.client-action-panel{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:9px 0 8px}
#clientProfileModal #clientDetail.client-profile-v303 .quick .client-action,#clientProfileModal #clientDetail.client-profile-v303 .client-more-actions summary{min-height:38px;gap:6px;padding:7px 8px;font-size:11px}
#clientProfileModal #clientDetail.client-profile-v303 .quick .action-label{font-size:11px;line-height:1.25}
#clientProfileModal #clientDetail.client-profile-v303 .quick .action-icon{width:21px;height:21px;flex-basis:21px;font-size:19px}
#clientProfileModal #clientDetail.client-profile-v303 .quick .action-icon .client-profile-icon,#clientProfileModal #clientDetail.client-profile-v303 .client-more-actions summary .client-profile-icon{width:21px;height:21px}
#clientProfileModal #clientDetail.client-profile-v303 .client-more-actions{grid-column:auto}
#clientProfileModal #clientDetail.client-profile-v303 .client-more-menu{width:240px;max-width:calc(100vw - 60px);max-height:55dvh;padding:7px;gap:5px}
#clientProfileModal #clientDetail.client-profile-v303 .client-more-menu button,#clientProfileModal #clientDetail.client-profile-v303 .client-more-menu .client-action{min-height:34px;padding:6px 8px;font-size:11px}
#clientProfileModal #clientDetail.client-profile-v303 .tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:740px;margin-bottom:8px}
#clientProfileModal #clientDetail.client-profile-v303 .tabs .tab{min-height:36px;padding:7px 9px;gap:6px;font-size:11px}
#clientProfileModal #clientDetail.client-profile-v303 .tabs .tab .client-profile-icon{width:20px;height:20px}
#clientProfileModal #clientDetail.client-profile-v303 .client-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:8px}
#clientProfileModal #clientDetail.client-profile-v303 .client-summary-card{padding:11px}
#clientProfileModal #clientDetail.client-profile-v303 .client-summary-grid .client-summary-card{min-height:112px}
#clientProfileModal #clientDetail.client-profile-v303 .client-summary-card header{gap:8px;margin-bottom:6px;flex-wrap:nowrap}
#clientProfileModal #clientDetail.client-profile-v303 .client-summary-card h3{gap:7px;font-size:16px}
#clientProfileModal #clientDetail.client-profile-v303 .client-summary-icon{width:24px;height:24px;flex-basis:24px}
#clientProfileModal #clientDetail.client-profile-v303 .client-summary-icon .client-profile-icon,#clientProfileModal #clientDetail.client-profile-v303 .client-summary-card h3 .client-profile-icon{width:21px;height:21px}
#clientProfileModal #clientDetail.client-profile-v303 .client-summary-card p{margin:6px 0;font-size:11px;line-height:1.4}
#clientProfileModal #clientDetail.client-profile-v303 .client-summary-card .empty{padding:7px 3px 3px;font-size:11px}
#clientProfileModal #clientDetail.client-profile-v303 .summary-hint{margin-top:6px;font-size:10px;line-height:1.4}
#clientProfileModal #clientDetail.client-profile-v303 .summary-note{min-height:68px}
#clientProfileModal #clientDetail.client-profile-v303 .summary-note header{margin-bottom:5px}
#clientProfileModal #clientDetail.client-profile-v303 .detail-row{gap:8px;padding:8px 0;font-size:11px}
#clientProfileModal #clientDetail.client-profile-v303 .detail-row small{font-size:10px;line-height:1.4}
#clientProfileModal #clientDetail.client-profile-v303 .badge{padding:3px 7px;font-size:10px}
#clientProfileModal #clientDetail.client-profile-v303 :is(.context-alert,.now){margin:7px 0;padding:8px 10px;font-size:11px;line-height:1.4}
#clientProfileModal #clientDetail.client-profile-v303 .detail-empty{min-height:140px;font-size:12px}
#clientProfileModal #clientDetail.client-profile-v303 .client-summary-card{background:var(--client-profile-surface);border-color:var(--client-profile-border);box-shadow:inset 0 1px #ffffff09}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-stat{background:var(--client-profile-inset);border-color:#263b50}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-brand{color:#a5c2e7}
#clientProfileModal #clientDetail.client-profile-v303 :is(.inline-action,.client-statistics-button){border-color:#365477}
#clientProfileModal #clientDetail.client-profile-v303 .client-summary-card header{flex-wrap:wrap}
#clientProfileModal #clientDetail.client-profile-v303 .client-summary-card h3{flex:1;min-width:0}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-overview{min-width:0}
#clientProfileModal #clientDetail.client-profile-v303 .client-account-summary .client-overview-stat{display:flex;align-items:center;gap:10px;min-width:0;min-height:102px;padding:13px 10px;text-align:left;border:1px solid #29313c;border-radius:10px;background:linear-gradient(140deg,#10151b,#090c10);box-shadow:inset 0 1px #ffffff05}
#clientProfileModal #clientDetail.client-profile-v303 .client-account-summary .client-overview-stat::after,#clientProfileModal #clientDetail.client-profile-v303 .client-account-summary .client-overview-copy::after{content:none}
#clientProfileModal #clientDetail.client-profile-v303 .client-account-summary .client-overview-copy{min-width:0;padding:0;border:0;border-radius:0;background:none;text-align:left}
#clientProfileModal #clientDetail.client-profile-v303 .client-account-summary .client-overview-copy>span{display:block;margin:0 0 5px;color:#c0c8d3;font-size:11px;line-height:1.3;overflow-wrap:anywhere}
#clientProfileModal #clientDetail.client-profile-v303 .client-account-summary .client-overview-copy>b{display:block;margin:0;color:#95e7b3;font:700 25px/1.1 Rajdhani,Inter,system-ui,sans-serif;overflow-wrap:anywhere}
#clientProfileModal #clientDetail.client-profile-v303 .client-account-summary .client-overview-copy>b.debt{color:#ff9a9e}
#clientProfileModal #clientDetail.client-profile-v303 .client-account-summary .client-overview-copy>small{display:block;margin-top:5px;color:#9ca9ba;font-size:10px;line-height:1.3;overflow-wrap:anywhere}
#clientProfileModal #clientDetail.client-profile-v303 .client-account-summary .client-overview-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;margin:0;border:1px solid #a98b4145;border-radius:50%;background:#b69b3b14;color:#e2c46f}
#clientProfileModal #clientDetail.client-profile-v303 .client-overview-icon .client-profile-icon{width:24px;height:24px}
#clientProfileModal #clientDetail.client-profile-v303 .client-account-summary .kpi-favor .client-overview-icon{background:#4dba7c19;border-color:#61c88e45;color:#90e8b2}
#clientProfileModal #clientDetail.client-profile-v303 .client-account-summary :is(.kpi-pending,.kpi-played) .client-overview-icon{background:#517dc119;border-color:#618bc445;color:#9bbdec}
#clientProfileModal #clientDetail.client-profile-v303 .client-account-summary .kpi-last .client-overview-copy>b{color:#f0f3f8;font-size:23px}
#clientProfileModal #clientDetail.client-profile-v303 #profilePanel{padding:10px 12px;border:1px solid #303844;border-radius:12px;background:#060a0ee8;min-width:0}
/* v347: en Resumen quedan sólo las dos tarjetas, sin un tercer marco exterior. */
#clientProfileModal #clientDetail.client-profile-v303 #profilePanel:has(>#clientSubscriptionSummary){padding:0;border:0;border-radius:0;background:none;box-shadow:none}
#clientProfileModal #clientDetail.client-profile-v303 .client-history{min-width:0;margin:0 0 18px}
#clientProfileModal #clientDetail.client-profile-v303 .client-history:last-child{margin-bottom:0}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;padding:5px 0 8px;border-bottom:1px solid #34415080}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-heading h3{margin:0;color:#e4edf6;font:700 15px/1.3 Rajdhani,Inter,system-ui,sans-serif}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-heading>span,#clientProfileModal #clientDetail.client-profile-v303 .client-history-status{color:#9fb5ca;font-size:10px;line-height:1.5}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-pager{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:9px;margin-top:10px;padding:9px 0 0;border-top:1px solid #34415080}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-pager label{display:flex;align-items:center;gap:7px;margin:0;color:#b8c9dc;font-size:11px}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-pager input{box-sizing:border-box;width:66px;min-width:0;min-height:32px;padding:5px 7px;border:1px solid #44618a;border-radius:7px;background:#0a1422;color:#e7f0fc;font:600 12px/1.3 Inter,system-ui,sans-serif;color-scheme:dark;text-align:center}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-pager input:focus-visible{outline:2px solid #8cb1ef;outline-offset:2px}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-pager :disabled{opacity:.45;cursor:default}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-error{margin:8px 0;padding:8px 10px;border:1px solid #947b4970;border-radius:8px;background:#251d13b8;color:#e5cda6;font-size:11px}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-error p{margin:0 0 7px;overflow-wrap:anywhere}
#clientProfileModal #clientDetail.client-profile-v303 .detail-row.client-consumption-row{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:start;gap:12px;padding:12px 0;border-bottom:1px solid #34415080;font-size:12px}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-row:last-child{border-bottom:0}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-date{display:flex;flex-direction:column;gap:2px;min-width:0;padding-right:8px;border-right:1px solid #38526b;color:#a7bdd4;font-style:normal;font-size:10px;line-height:1.35}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-date strong{font-size:13px;color:#e5effb}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-copy{min-width:0;overflow-wrap:anywhere}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-copy>b{display:block;margin:0 0 4px;color:#edf1f6;font-size:12px}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-copy>small{display:block;margin:4px 0;color:#a0b5ca}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-methods{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
#clientProfileModal #clientDetail.client-profile-v303 .client-payment-badge{display:inline-flex;align-items:center;width:fit-content;max-width:100%;padding:2px 6px;border:1px solid #5b6f8259;border-radius:5px;background:#27323b66;color:#c5d2dd;font:600 10px/1.4 Inter,system-ui,sans-serif;overflow-wrap:anywhere}
#clientProfileModal #clientDetail.client-profile-v303 .client-payment-badge.method-efectivo,#clientProfileModal #clientDetail.client-profile-v303 .client-payment-badge.method-gift{background:#163a2cbf;border-color:#568c6866;color:#9de6b9}
#clientProfileModal #clientDetail.client-profile-v303 .client-payment-badge.method-transferencia{background:#1c2d4abf;border-color:#618ac67a;color:#accbfb}
#clientProfileModal #clientDetail.client-profile-v303 .client-payment-badge.method-saldo_favor{background:#302440bf;border-color:#8a6da666;color:#d2b7ee}
#clientProfileModal #clientDetail.client-profile-v303 .client-payment-badge.method-reversed{background:#3d1e27bf;border-color:#c3748266;color:#f0aab7}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-receipts{margin-top:5px;color:#a9bfd3;font-size:10px}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-receipts summary{width:fit-content;cursor:pointer;padding:3px 0;color:#bcd4f0}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-receipts summary:focus-visible{outline:2px solid #9acbab;outline-offset:3px}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-receipts p{margin:5px 0;padding:5px 8px;border-left:2px solid #456486;background:#0a121ce0}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-receipts small{display:block;margin-top:3px}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-receipts .client-payment-reversed{border-color:#c37482;color:#f0aab7}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-row .row-actions{display:flex;flex-direction:column;align-items:flex-end;gap:7px;min-width:0}
#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-row .row-actions>b{color:#a2edbd;font-size:14px;white-space:nowrap}
/* v344: historiales compactos por fecha, sin cambiar estados o importes. */
#clientProfileModal #clientDetail.client-profile-v303 .client-history{container-name:client-history;container-type:inline-size}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-day{--day-accent:#a5c8fa;--day-tint:#172234;min-width:0;margin:12px 0 0}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-day[data-day-tone="violet"]{--day-accent:#c8adf6;--day-tint:#251d34}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-day[data-day-tone="amber"]{--day-accent:#e7c88e;--day-tint:#2c251a}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-day[data-day-tone="cyan"]{--day-accent:#99d5df;--day-tint:#14282d}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-day[data-day-tone="lavender"]{--day-accent:#b4baf8;--day-tint:#21213b}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-day[data-day-tone="neutral"]{--day-accent:#b1bdca;--day-tint:#20262d}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-day-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;min-width:0;padding:7px 10px;border-left:3px solid var(--day-accent);border-radius:0 7px 7px 0;background:linear-gradient(90deg,var(--day-tint),#080c12);color:var(--day-accent)}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-day-heading h4{margin:0;font:700 12px/1.4 Inter,system-ui,sans-serif;color:var(--day-accent)}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-day-heading>span{font-size:10px;line-height:1.4;color:#a9b8c9}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:8px;margin-top:8px}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards>.detail-row{min-width:0;margin:0;padding:11px 12px;gap:10px;border:1px solid #2b3746;border-left:2px solid var(--day-accent);border-radius:9px;background:linear-gradient(130deg,#0d121a,#070b10);font-size:12px;box-sizing:border-box}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards>.detail-row>span:first-child{min-width:0;overflow-wrap:anywhere}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards>.detail-row>span:first-child>b{line-height:1.45}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards>.detail-row>span:first-child>small{line-height:1.5}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards>.client-consumption-row{grid-template-columns:43px minmax(0,1fr) auto}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards .client-consumption-date{gap:2px;padding-right:6px;border-color:var(--day-accent);color:var(--day-accent);font-size:10px}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards .client-consumption-date strong{font-size:12px}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards .client-consumption-copy>b{margin-bottom:3px;font-size:12px;line-height:1.4}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards .client-consumption-copy>small{margin:3px 0;font-size:10px;line-height:1.4}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards .client-consumption-methods{gap:4px;margin-top:4px}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards .client-consumption-receipts{margin-top:3px}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards .client-consumption-receipts p{overflow-wrap:anywhere}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards .row-actions{gap:5px}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards .row-actions .inline-action{min-height:30px;padding:6px 9px;font-size:10px}
#clientProfileModal #clientDetail.client-profile-v303 .client-history-cards .balance{flex-shrink:0;max-width:46%;overflow-wrap:anywhere;text-align:right;font-size:13px;line-height:1.5}
@container client-history (max-width:760px){
  #clientProfileModal #clientDetail.client-profile-v303 .client-history-cards{grid-template-columns:1fr}
}
@media(max-width:820px){
  #clientProfileModal #clientDetail.client-profile-v303 .client-history-cards{grid-template-columns:1fr}
}
@media(max-width:520px){
  #clientProfileModal #clientDetail.client-profile-v303 #profilePanel{padding:8px}
  #clientProfileModal #clientDetail.client-profile-v303 .detail-row.client-consumption-row{grid-template-columns:44px minmax(0,1fr);gap:8px}
  #clientProfileModal #clientDetail.client-profile-v303 .client-consumption-row>.row-actions,#clientProfileModal #clientDetail.client-profile-v303 .client-consumption-row>.balance{grid-column:2;flex-direction:row;justify-content:space-between;align-items:center}
}
#clientProfileModal #clientDetail.client-profile-v303 .client-profile-overview .client-profile-stats-note{margin:0 0 8px}
#clientProfileModal #clientDetail.client-profile-v303 .client-summary-grid.client-subscription-summary-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:stretch;gap:12px}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-summary-grid .client-summary-card{padding:13px 12px}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-summary-grid .client-summary-card>header{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #282f38}
#clientProfileModal #clientDetail.client-profile-v303 .summary-subscription-detail{background:radial-gradient(ellipse at top right,#34513c1a,transparent 65%),var(--client-profile-surface)}
#clientProfileModal #clientDetail.client-profile-v303 .summary-subscription-detail .client-summary-icon{color:#9de5b4}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-table-wrap{max-width:100%;overflow:auto;overscroll-behavior-x:contain}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-table{width:100%;min-width:550px;border-collapse:collapse;color:#e2e8ef;font-size:11px;line-height:1.4;text-align:left}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-table :is(th,td){padding:11px 7px;border-bottom:1px solid #252c35;vertical-align:top;white-space:nowrap}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-table th{padding-top:0;color:#a5b1c2;font-weight:500;font-size:10px}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-table tbody tr:last-child td{border-bottom:0}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-table th:last-child,#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-table td:last-child{text-align:center}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-table .client-subscription-empty{padding:22px 7px;white-space:normal;color:#a9b5c5;text-align:center}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-contract{padding:0 0 10px;margin:0 0 10px;border-bottom:1px solid #28313b}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-contract:last-of-type{margin-bottom:0;border-bottom:0}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-contract h4{margin:0 0 10px;color:#d7e4dc;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-contract dl{margin:0}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-contract dl>div{display:grid;grid-template-columns:minmax(105px,.8fr) minmax(0,1.2fr);gap:10px;margin:0;padding:6px 0;font-size:11px;line-height:1.5}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-contract dt{display:flex;align-items:center;gap:8px;min-width:0;color:#a9b5c5}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-contract dt .client-profile-icon{width:15px;height:15px;color:#afbdcf}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-contract dd{min-width:0;margin:0;color:#e6ecf4;overflow-wrap:anywhere}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-contract dd>span{display:block}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-contract dd>small{display:block;margin-top:3px;color:#a4b0c0;font-size:10px;line-height:1.4}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-state{display:inline-flex;align-items:center;gap:6px;white-space:normal}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-state::before{content:'';display:inline-block;flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:currentColor}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-state.is-active{color:#97e8af}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-state.is-playing{color:#6cdb9a}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-state.is-pending{color:#e1c383}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-badge{display:inline-flex;align-items:center;padding:4px 7px;border:1px solid #52795e88;border-radius:7px;color:#9ddbb0;background:#39744b1c;font-size:10px}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-badge.is-pending{border-color:#8f744f88;color:#e1c383;background:#80632916}
#clientProfileModal #clientDetail.client-profile-v303 .summary-subscription-detail footer{display:flex;justify-content:flex-start;margin:6px 0 8px}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-row-actions{display:inline-block;max-width:150px;text-align:left}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-row-actions summary{display:grid;place-items:center;list-style:none;width:30px;min-height:24px;margin:0;padding:0 3px;border:1px solid #394553;border-radius:6px;background:#171d25;color:#c2d0e0;font:700 17px/1 Inter,system-ui,sans-serif;cursor:pointer}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-row-actions[open] summary{border-color:#7aa58a;color:#b4e3c4}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-row-actions>div{display:grid;gap:3px;min-width:120px;margin-top:5px;padding:4px;border:1px solid #344151;border-radius:6px;background:#0c1118}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-row-actions :is(a,button){display:block;margin:0;padding:5px;border:0;border-radius:4px;background:none;color:#cad6e5;text-align:left;text-decoration:none;font:11px/1.4 Inter,system-ui,sans-serif;cursor:pointer}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-row-actions :is(a,button):hover{background:#1c2923;color:#a9ecc1}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-row-actions :is(summary,a,button):focus-visible{outline:2px solid #9acbab;outline-offset:2px}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-summary-error{margin:0 0 9px;padding:10px;border:1px solid #82653d;border-radius:8px;background:#392c151c;color:#e2cda5}
#clientProfileModal #clientDetail.client-profile-v303 .client-subscription-summary-error p{margin:0 0 7px;color:inherit;overflow-wrap:anywhere}
@media(max-width:1100px){
  #clientProfileModal #clientDetail.client-profile-v303 .detail-metrics.client-account-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:950px){
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-hero{grid-template-columns:minmax(0,1fr) 100px;gap:10px 14px}
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-brand{grid-column:2;grid-row:1}
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-brand img{width:100px;height:78px}
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-flags{grid-column:1/-1;grid-row:2;justify-content:flex-start}
  #clientProfileModal #clientDetail.client-profile-v303 .profile{min-height:126px}
  #clientProfileModal #clientDetail.client-profile-v303 .detail-metrics .client-financial-card{grid-template-columns:32px minmax(0,1fr);gap:6px}
  #clientProfileModal #clientDetail.client-profile-v303 .detail-metrics .inline-action{grid-column:2;justify-self:start}
}
@media(max-width:760px){
  #clientProfileModal #clientDetail.client-profile-v303{width:calc(100vw - 20px);max-width:calc(100vw - 20px);flex-basis:auto;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);padding:10px;border-radius:14px}
  #clientProfileModal #clientDetail.client-profile-v303 .client-summary-grid.client-subscription-summary-grid{grid-template-columns:1fr}
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-chrome{top:0;margin:0;padding:0}
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-hero{margin:-10px -10px 10px;padding:14px 48px 14px 14px;border-radius:13px 13px 0 0}
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-stat{min-height:70px}
  #clientProfileModal #clientDetail.client-profile-v303 .detail-metrics.client-account-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #clientProfileModal #clientDetail.client-profile-v303 .detail-metrics .client-financial-card{grid-template-columns:32px minmax(0,1fr) auto;min-height:62px}
  #clientProfileModal #clientDetail.client-profile-v303 .detail-metrics .inline-action{grid-column:auto;justify-self:end}
  #clientProfileModal #clientDetail.client-profile-v303 .quick.client-action-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #clientProfileModal #clientDetail.client-profile-v303 .client-more-actions{grid-column:1/-1}
  #clientProfileModal #clientDetail.client-profile-v303 .tabs{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;gap:7px}
  #clientProfileModal #clientDetail.client-profile-v303 .client-summary-grid{grid-template-columns:1fr;gap:8px}
  #clientProfileModal #clientDetail.client-profile-v303 .client-summary-grid .client-summary-card{min-height:104px}
  #clientProfileModal #clientDetail.client-profile-v303 .client-summary-card header{flex-wrap:wrap}
}
@media(max-width:600px){
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-hero{grid-template-columns:1fr}
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-brand{grid-column:1;grid-row:3;justify-self:end}
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-brand img{width:88px;height:64px}
}
@media(max-width:460px){
  #clientProfileModal #clientDetail.client-profile-v303 .detail-metrics.client-account-summary{grid-template-columns:1fr}
  #clientProfileModal #clientDetail.client-profile-v303 .profile{grid-template-columns:74px minmax(0,1fr);gap:9px;text-align:left}
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-avatar-column{width:70px;min-height:70px;justify-self:stretch}
  #clientProfileModal #clientDetail.client-profile-v303 .profile .profile-avatar{width:66px;height:66px;flex-basis:66px;font-size:24px}
  #clientProfileModal #clientDetail.client-profile-v303 .profile h2{font-size:25px}
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-name-row,#clientProfileModal #clientDetail.client-profile-v303 .client-profile-contact{justify-content:flex-start}
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-stats-head{flex-wrap:wrap}
  #clientProfileModal #clientDetail.client-profile-v303 .client-profile-stats-head h3{font-size:16px}
  #clientProfileModal #clientDetail.client-profile-v303 .detail-metrics .client-financial-copy b{font-size:23px}
  #clientProfileModal #clientDetail.client-profile-v303 .client-more-menu{width:100%;max-width:100%}
}