/* ============================================================
   DESIGN SYSTEM CONSOLIDADO — Select Club (paleta)
   Copiado de riso_crm/design-system-consolidado.html — só os
   tokens e componentes reutilizáveis (chrome de documentação
   removido). Prefixo neutro: .ds-*
   ============================================================ */

:root{
  /* ── Cores — Manual de Marca Select Club (fonte única) ───── */
  --ds-royal:        #1E3A8A;
  --ds-navy:         #0A1F4D;
  --ds-silver:       #8B9AAE;
  --ds-platinum:     #E2E8F0;
  --ds-ivory:        #f8f9fc;
  --ds-offwhite:     #eef1f7;
  --ds-white:        #ffffff;
  --ds-ink:          #141B2E;
  --ds-muted:        #7E8AA0;
  --ds-border:       #c5cee0;
  --ds-slate:        #3D4858;
  --ds-error:        #ba1a1a;
  --ds-error-bg:     #ffdad6;
  /* extensões funcionais — fora do Manual de Marca oficial */
  --ds-success:      #1B6B4A;
  --ds-success-bg:   #DCEEE5;
  --ds-warn:         #8A5A00;
  --ds-warn-bg:      #FBEEDA;

  /* ── Tipografia ───────────────────────────────────────────── */
  --ds-font-display: 'Newsreader', Georgia, serif;
  --ds-font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --ds-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --ds-type-display-lg:  700 48px/56px var(--ds-font-display);
  --ds-type-headline-md: 700 32px/40px var(--ds-font-display);
  --ds-type-headline-sm: 600 24px/32px var(--ds-font-display);
  --ds-type-title:       600 18px/26px var(--ds-font-display);
  --ds-type-body-lg:     400 18px/28px var(--ds-font-body);
  --ds-type-body-md:     400 16px/24px var(--ds-font-body);
  --ds-type-body-sm:     400 14px/22px var(--ds-font-body);
  --ds-type-label:       700 12px/16px var(--ds-font-body);
  --ds-type-benefit:     600 20px/24px var(--ds-font-body);
  --ds-type-mono-md:     500 14px/20px var(--ds-font-mono);
  --ds-type-mono-sm:     500 12px/16px var(--ds-font-mono);

  /* ── Espaço / forma / elevação ────────────────────────────── */
  --ds-space-xs: 4px; --ds-space-sm: 12px; --ds-space-md: 24px;
  --ds-space-lg: 48px; --ds-space-xl: 80px;

  --ds-radius-sm: 8px; --ds-radius-md: 12px; --ds-radius-lg: 16px;
  --ds-radius-xl: 20px; --ds-radius-2xl: 24px; --ds-radius-full: 9999px;

  --ds-shadow-sm: 0 1px 2px rgba(20,27,46,.05);
  --ds-shadow-md: 0 4px 20px -5px rgba(30,58,138,.10);
  --ds-shadow-lg: 0 12px 40px -10px rgba(10,31,77,.14);
  --ds-shadow-xl: 0 24px 60px -12px rgba(10,31,77,.20);
  --ds-shadow-cta: 0 6px 18px rgba(30,58,138,.24);

  --ds-ease: cubic-bezier(.2,0,0,1);
  --ds-fast: 150ms; --ds-med: 220ms;
}

*{box-sizing:border-box;}
html,body{margin:0;background:var(--ds-ivory);color:var(--ds-ink);font-family:var(--ds-font-body);-webkit-font-smoothing:antialiased;}
h1,h2,h3{margin:0;font-family:var(--ds-font-display);}
::selection{background:var(--ds-platinum);color:var(--ds-navy);}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;line-height:1;vertical-align:middle;}

/* ── ds-card ──────────────────────────────────────────────── */
.ds-card{background:var(--ds-white);border-radius:var(--ds-radius-2xl);box-shadow:var(--ds-shadow-md);padding:24px;}
.grid{display:grid;gap:16px;}
.g2{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(3,1fr);} .g4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.g2,.g3,.g4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr;}}

/* ── botões ───────────────────────────────────────────────── */
.ds-btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;border-radius:var(--ds-radius-md);padding:11px 22px;font:700 14px var(--ds-font-body);transition:all var(--ds-fast) var(--ds-ease);text-decoration:none;}
.ds-btn .material-symbols-outlined{font-size:18px;}
.ds-btn-primary{background:linear-gradient(90deg,var(--ds-royal),var(--ds-navy));color:#fff;box-shadow:var(--ds-shadow-cta);}
.ds-btn-primary:hover{opacity:.92;transform:translateY(-1px);}
.ds-btn-primary:active{transform:scale(.97);}
.ds-btn-secondary{background:var(--ds-offwhite);color:var(--ds-navy);}
.ds-btn-secondary:hover{background:var(--ds-platinum);}
.ds-btn-accent{background:var(--ds-platinum);color:var(--ds-slate);}
.ds-btn-accent:hover{background:var(--ds-silver);color:#fff;}
.ds-btn-ghost{background:transparent;color:var(--ds-royal);padding:11px 14px;}
.ds-btn-ghost:hover{color:var(--ds-navy);background:rgba(30,58,138,.06);}
.ds-btn-danger{background:transparent;color:var(--ds-muted);}
.ds-btn-danger:hover{color:var(--ds-error);}
.ds-btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none;}
.ds-btn-block{width:100%;justify-content:center;}

/* ── formulários ──────────────────────────────────────────── */
.ds-field-label{display:block;font:600 13px var(--ds-font-body);color:var(--ds-slate);margin-bottom:6px;}
.ds-field{width:100%;padding:11px 14px;font:var(--ds-type-body-md);font-size:14px;color:var(--ds-ink);background:var(--ds-white);border:0;border-radius:var(--ds-radius-md);box-shadow:inset 0 0 0 1px var(--ds-border);transition:box-shadow var(--ds-fast) var(--ds-ease);font-family:var(--ds-font-body);}
.ds-field::placeholder{color:var(--ds-muted);}
.ds-field:hover{box-shadow:inset 0 0 0 1px var(--ds-silver);}
.ds-field:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ds-royal),0 0 0 3px rgba(30,58,138,.12);}
.ds-field.is-error{box-shadow:inset 0 0 0 1.5px var(--ds-error);}
select.ds-field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237E8AA0'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.ds-help{font:var(--ds-type-body-sm);color:var(--ds-muted);margin-top:6px;}
.ds-help.is-error{color:var(--ds-error);}
.ds-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:600px){.ds-form-row{grid-template-columns:1fr;}}

/* checkbox custom */
.ds-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;}
.ds-check input{position:absolute;opacity:0;width:0;height:0;}
.ds-check-box{width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--ds-border);display:grid;place-items:center;flex-shrink:0;transition:all var(--ds-fast) var(--ds-ease);background:var(--ds-white);}
.ds-check-box .material-symbols-outlined{font-size:15px;color:#fff;opacity:0;transform:scale(.5);transition:all var(--ds-fast) var(--ds-ease);}
.ds-check input:checked ~ .ds-check-box{background:var(--ds-royal);box-shadow:none;}
.ds-check input:checked ~ .ds-check-box .material-symbols-outlined{opacity:1;transform:scale(1);}
.ds-check-label{font:var(--ds-type-body-sm);color:var(--ds-ink);}
.ds-check--card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--ds-radius-lg);box-shadow:inset 0 0 0 1.5px var(--ds-border);width:100%;}
.ds-check--card:has(input:checked){box-shadow:inset 0 0 0 2px var(--ds-royal);background:rgba(30,58,138,.04);}

/* multiselect com chips */
.ds-multiselect{background:var(--ds-white);border-radius:var(--ds-radius-md);box-shadow:inset 0 0 0 1px var(--ds-border);padding:8px;cursor:text;position:relative;}
.ds-multiselect.is-open{box-shadow:inset 0 0 0 1.5px var(--ds-royal);}
.ds-multiselect-chips{display:flex;flex-wrap:wrap;gap:6px;}
.ds-multiselect-chip{display:inline-flex;align-items:center;gap:6px;background:var(--ds-offwhite);color:var(--ds-navy);border-radius:999px;padding:4px 6px 4px 12px;font:600 12px var(--ds-font-body);}
.ds-multiselect-chip button{border:0;background:var(--ds-platinum);color:var(--ds-navy);width:18px;height:18px;border-radius:50%;cursor:pointer;display:grid;place-items:center;}
.ds-multiselect-search{border:0;background:transparent;flex:1;min-width:80px;font:var(--ds-type-body-sm);padding:4px;}
.ds-multiselect-search:focus{outline:none;}
.ds-multiselect-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--ds-white);border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-xl);z-index:30;display:none;padding:8px;max-height:220px;overflow-y:auto;}
.ds-multiselect.is-open .ds-multiselect-panel{display:block;}
.ds-multiselect-opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;cursor:pointer;font:var(--ds-type-body-sm);}
.ds-multiselect-opt:hover{background:var(--ds-offwhite);}
.ds-multiselect-opt.is-selected{background:rgba(30,58,138,.06);color:var(--ds-royal);font-weight:600;}

/* ── sidebar / shell de navegação ─────────────────────────── */
.ds-sidebar{width:232px;flex-shrink:0;background:var(--ds-white);border-right:1px solid var(--ds-border);display:flex;flex-direction:column;padding:18px 12px;gap:4px;}
.ds-sidebar-brand{display:flex;align-items:center;gap:10px;text-decoration:none;padding:4px 6px 16px;}
.ds-sidebar-mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--ds-royal),var(--ds-navy));display:grid;place-items:center;color:#fff;font:700 14px var(--ds-font-display);flex-shrink:0;}
.ds-sidebar-word{font:600 16px var(--ds-font-display);color:var(--ds-navy);white-space:nowrap;}
.ds-sidebar-nav{display:flex;flex-direction:column;gap:1px;flex:1;}
.ds-sidebar-link{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;font:600 13px var(--ds-font-body);color:var(--ds-slate);text-decoration:none;transition:background var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease);}
.ds-sidebar-link .material-symbols-outlined{font-size:19px;opacity:.8;}
.ds-sidebar-link:hover{background:var(--ds-offwhite);}
.ds-sidebar-link.is-active{background:var(--ds-royal);color:#fff;}
.ds-sidebar-link.is-active .material-symbols-outlined{opacity:1;}
.ds-sidebar-link .ds-badge-inline{margin-left:auto;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--ds-warn);color:#fff;font:700 10px var(--ds-font-body);display:grid;place-items:center;}
.ds-sidebar-link.is-active .ds-badge-inline{background:rgba(255,255,255,.28);}
.ds-sidebar-foot{border-top:1px solid var(--ds-border);padding-top:10px;margin-top:8px;}
.ds-sidebar-user-trigger{width:100%;display:flex;align-items:center;gap:9px;border:0;background:transparent;cursor:pointer;padding:7px 8px;border-radius:11px;text-align:left;}
.ds-sidebar-user-trigger:hover{background:var(--ds-offwhite);}
.ds-sidebar-avatar{width:26px;height:26px;border-radius:999px;flex-shrink:0;background:var(--ds-platinum);color:var(--ds-navy);display:grid;place-items:center;font:700 11px var(--ds-font-body);}
.ds-sidebar-user-text{flex:1;min-width:0;}
.ds-sidebar-user-text .name{display:block;font:700 12px var(--ds-font-body);color:var(--ds-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ds-sidebar-user-text .role{display:block;font:500 10px var(--ds-font-body);color:var(--ds-muted);}
.ds-app-shell{display:flex;align-items:stretch;min-height:100vh;}
.ds-app-main{flex:1;min-width:0;padding:32px;background:var(--ds-ivory);}

/* ── badges / chips ───────────────────────────────────────── */
.ds-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font:700 10px var(--ds-font-body);text-transform:uppercase;letter-spacing:.1em;}
.ds-badge--success{background:var(--ds-success-bg);color:var(--ds-success);}
.ds-badge--warn{background:var(--ds-warn-bg);color:var(--ds-warn);}
.ds-badge--error{background:var(--ds-error-bg);color:var(--ds-error);}
.ds-badge--neutral{background:var(--ds-offwhite);color:var(--ds-muted);}
.ds-badge--accent{background:var(--ds-platinum);color:var(--ds-slate);}
.ds-chip-dot{display:inline-flex;align-items:center;gap:7px;font:600 12px var(--ds-font-body);color:var(--ds-ink);}
.ds-chip-dot .dot{width:8px;height:8px;border-radius:50%;}
.dot--royal{background:var(--ds-royal);} .dot--success{background:var(--ds-success);}
.dot--warn{background:var(--ds-warn);} .dot--error{background:var(--ds-error);} .dot--silver{background:var(--ds-silver);}

/* ── tabelas ──────────────────────────────────────────────── */
.ds-toolbar{display:flex;gap:8px;align-items:center;background:var(--ds-white);padding:8px;border-radius:var(--ds-radius-xl);box-shadow:inset 0 0 0 1px var(--ds-border);flex-wrap:wrap;margin-bottom:16px;}
table.ds-table{width:100%;border-collapse:collapse;background:var(--ds-white);border-radius:var(--ds-radius-lg);overflow:hidden;box-shadow:var(--ds-shadow-sm);}
.ds-table thead th{font:700 10px var(--ds-font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--ds-muted);background:var(--ds-offwhite);padding:12px 16px;text-align:left;position:sticky;top:0;}
.ds-table tbody tr:nth-child(even) td{background:var(--ds-offwhite);}
.ds-table tbody tr:hover td{background:var(--ds-platinum);}
.ds-table td{padding:12px 16px;font:var(--ds-type-body-sm);border-bottom:1px solid var(--ds-offwhite);}
.ds-table td.num{font-family:var(--ds-font-mono);text-align:right;}
.ds-empty-state{padding:40px;text-align:center;color:var(--ds-muted);font:var(--ds-type-body-sm);}

/* paginação */
.ds-pagination{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;font:var(--ds-type-body-sm);color:var(--ds-muted);}
.ds-pagination a{color:var(--ds-royal);text-decoration:none;font-weight:600;}
.ds-pagination a:hover{text-decoration:underline;}

/* ── KPI cards ────────────────────────────────────────────── */
.ds-kpi{position:relative;background:var(--ds-white);border-radius:var(--ds-radius-2xl);padding:22px;box-shadow:var(--ds-shadow-md);overflow:hidden;}
.ds-kpi__decoration{position:absolute;top:-36px;right:-36px;width:110px;height:110px;background:var(--ds-royal);opacity:.08;border-radius:50%;filter:blur(36px);}
.ds-kpi__label{font:var(--ds-type-label);text-transform:uppercase;letter-spacing:.1em;color:var(--ds-muted);}
.ds-kpi__value{font:700 28px/1 var(--ds-font-mono);color:var(--ds-navy);margin-top:10px;}
.ds-kpi--accent{background:linear-gradient(135deg,var(--ds-royal),var(--ds-navy));color:#fff;}
.ds-kpi--accent .ds-kpi__label{color:rgba(255,255,255,.7);}
.ds-kpi--accent .ds-kpi__value{color:#fff;}
.ds-kpi--accent .ds-kpi__decoration{background:var(--ds-silver);opacity:.25;}

/* ── modais ───────────────────────────────────────────────── */
.ds-modal-overlay{position:fixed;inset:0;background:rgba(10,31,77,.5);backdrop-filter:blur(3px);z-index:100;display:none;align-items:center;justify-content:center;padding:24px;}
.ds-modal-overlay.is-open{display:flex;}
.ds-modal{background:var(--ds-white);border-radius:var(--ds-radius-2xl);box-shadow:var(--ds-shadow-xl);max-width:520px;width:100%;padding:28px;}
.ds-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.ds-modal-close{border:0;background:var(--ds-offwhite);width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--ds-muted);}
.ds-confirm-icon{width:52px;height:52px;border-radius:16px;background:var(--ds-error-bg);color:var(--ds-error);display:grid;place-items:center;margin-bottom:16px;}
.ds-confirm-title{font:var(--ds-type-headline-sm);color:var(--ds-navy);}
.ds-confirm-text{font:var(--ds-type-body-sm);color:var(--ds-muted);margin-top:8px;line-height:1.6;}
.ds-confirm-meta{background:var(--ds-offwhite);border-radius:var(--ds-radius-md);padding:12px 14px;margin-top:14px;font:var(--ds-type-mono-sm);color:var(--ds-slate);}
.ds-confirm-actions{display:flex;gap:10px;margin-top:22px;justify-content:flex-end;}

/* ── alerts / toasts ──────────────────────────────────────── */
.ds-alert{padding:13px 16px;border-radius:var(--ds-radius-md);font:var(--ds-type-body-sm);margin-bottom:10px;display:flex;align-items:center;gap:10px;}
.ds-alert--success{background:var(--ds-success-bg);color:var(--ds-success);}
.ds-alert--warn{background:var(--ds-warn-bg);color:var(--ds-warn);}
.ds-alert--error{background:var(--ds-error-bg);color:var(--ds-error);}
#ds-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ds-navy);color:#fff;padding:11px 22px;border-radius:999px;font:600 13px var(--ds-font-body);opacity:0;pointer-events:none;transition:opacity .2s;z-index:200;}
#ds-toast.is-visible{opacity:1;}

/* ── auth ─────────────────────────────────────────────────── */
.ds-auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ds-ivory);}
.ds-auth-card{max-width:360px;width:100%;text-align:center;}
.ds-auth-logo{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--ds-royal),var(--ds-navy));display:grid;place-items:center;color:#fff;font:700 22px var(--ds-font-display);margin:0 auto 14px;}
.ds-auth-card h2{font:var(--ds-type-headline-sm);color:var(--ds-navy);}
.ds-auth-card .sub{color:var(--ds-muted);font:var(--ds-type-body-sm);margin-top:4px;margin-bottom:24px;}
.ds-auth-card .ds-field-label{text-align:left;}