/* ════════════════════════════════════════════════════════════════
   VELTRO DS — Design System do Veltro OS (proposta, Etapa 1)
   Referência visual: proposta Waleju (Syne + Inter Tight + JetBrains Mono,
   ícones outline 24px, eyebrows em mono, símbolo dos losangos).

   Tudo aqui usa prefixo  --v-*  (tokens) e  .v-*  (componentes) para
   poder entrar no app.html na Etapa 2 SEM colidir com as classes atuais
   (.kpi, .dtbl, .fbtn, .nav-item...). Nenhum seletor deste arquivo
   toca elementos sem classe .v-*, exceto o reset dentro de .v-root.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS — tema claro (padrão) ─────────────────────────── */
:root{
  /* neutros */
  --v-bg:        #F6F7F9;   /* fundo da aplicação */
  --v-surface:   #FFFFFF;   /* cards, tabelas, modais */
  --v-subtle:    #F2F4F6;   /* cabeçalho de tabela, hover, inputs desativados */
  --v-muted-bg:  #EBEEF1;   /* trilhos, skeleton */
  --v-border:    #E4E7EB;   /* borda padrão */
  --v-border-2:  #D3D8DE;   /* borda de inputs e hover */
  --v-text:      #0E1116;   /* grafite — títulos e valores */
  --v-text-2:    #49515C;   /* texto secundário */
  --v-text-3:    #868E99;   /* rótulos, placeholders, meta */

  /* marca Veltro — menta institucional (#6EE7B7) em escala para fundo claro */
  --v-brand-50:  #ECFBF4;
  --v-brand-100: #D3F5E6;
  --v-brand-300: #6EE7B7;   /* cor da marca, como na proposta Waleju */
  --v-brand-500: #5EDFAA;
  --v-brand-600: #3DD198;   /* menta da marca (Waleju): botões, chaves, ícones */
  --v-brand-700: #0FA572;   /* textos e links verdes no fundo claro; hover do primário */
  --v-on-brand:  #05291C;

  /* semânticas — usar só para status, alerta e indicador */
  --v-success:   #15803D;  --v-success-bg: #EDF8F1;
  --v-danger:    #C8323B;  --v-danger-bg:  #FCEFEF;
  --v-warning:   #B76E00;  --v-warning-bg: #FDF6E7;
  --v-info:      #2459D6;  --v-info-bg:    #EEF3FD;

  /* dados (gráficos): marca + grafite + 3 de apoio, sempre nesta ordem */
  --v-chart-1:   #3DD198;
  --v-chart-2:   #2A313B;
  --v-chart-3:   #8C96A3;
  --v-chart-4:   #6E8DE0;
  --v-chart-5:   #D9A23A;

  /* tipografia */
  --v-font-display: 'Syne', 'Inter', system-ui, sans-serif;  /* só títulos de página e marca */
  --v-font:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* Inter normal: espaçamento confortável entre letras */
  --v-font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --v-fs-11: 11px; --v-fs-12: 12px; --v-fs-13: 13px; --v-fs-14: 14px;
  --v-fs-16: 16px; --v-fs-20: 20px; --v-fs-24: 24px; --v-fs-32: 32px;

  /* espaçamento — base 4 */
  --v-1: 4px; --v-2: 8px; --v-3: 12px; --v-4: 16px; --v-5: 20px; --v-6: 24px; --v-8: 32px; --v-10: 40px;

  /* raios — só três */
  --v-r-sm: 6px;    /* botões, inputs, chips */
  --v-r-md: 10px;   /* cards, tabelas, menus */
  --v-r-lg: 14px;   /* modais, painéis grandes */

  /* sombras — com moderação */
  --v-shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --v-shadow-sm: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --v-shadow-lg: 0 16px 40px -8px rgba(16,24,40,.18), 0 4px 10px rgba(16,24,40,.06);
  --v-focus:     0 0 0 3px rgba(61,209,152,.30);

  /* alturas de controle */
  --v-h-sm: 28px; --v-h-md: 34px; --v-h-lg: 40px;
  --v-row: 44px;             /* linha de tabela padrão */
  --v-row-compact: 36px;

  --v-ease: cubic-bezier(.2,.7,.2,1);
  --v-sidebar: 232px;
}

/* ── tema escuro — derivado direto da proposta Waleju ─────────── */
[data-theme="dark"]{
  --v-bg:        #0A0C10;
  --v-surface:   #111318;
  --v-subtle:    #161920;
  --v-muted-bg:  #1C2028;
  --v-border:    rgba(255,255,255,.08);
  --v-border-2:  rgba(255,255,255,.14);
  --v-text:      #F1F5F9;
  --v-text-2:    #A7B0BE;
  --v-text-3:    #6B7585;
  --v-brand-50:  rgba(110,231,183,.08);
  --v-brand-100: rgba(110,231,183,.16);
  --v-brand-500: #6EE7B7;
  --v-brand-600: #6EE7B7;
  --v-brand-700: #8BF0C7;
  --v-on-brand:  #06281C;
  --v-success:   #4ADE80;  --v-success-bg: rgba(74,222,128,.10);
  --v-danger:    #FB7185;  --v-danger-bg:  rgba(251,113,133,.10);
  --v-warning:   #FBBF24;  --v-warning-bg: rgba(251,191,36,.10);
  --v-info:      #7DA7FF;  --v-info-bg:    rgba(125,167,255,.10);
  --v-chart-1:   #6EE7B7;
  --v-chart-2:   #E2E8F0;
  --v-chart-3:   #64748B;
  --v-chart-4:   #8FA8F0;
  --v-chart-5:   #E8B85A;
  --v-shadow-xs: none;
  --v-shadow-sm: none;
  --v-shadow-lg: 0 20px 50px rgba(0,0,0,.55);
  --v-focus:     0 0 0 3px rgba(110,231,183,.25);
  color-scheme: dark;
}

/* ── tokens extras das camadas do visual novo (claro / escuro) ── */
:root{
  --vx-brand-bd: #BFE7D6; --vx-danger-bd: #F3C9CC; --vx-warn-bd: #F1D9A8;
  --vx-roxo: #8B5CF6; --vx-roxo-bg: #F5F0FF; --vx-roxo-bd: #E4D7FB;
  --vx-alt: #FAFBFC; --vx-head: rgba(255,255,255,.92); --vx-glass: rgba(255,255,255,.82);
  --vx-hover-bd: #B9C0C9; --vx-soft: #EEF0F3; --vx-s2: #F7F8FA; --vx-info-ink: #0369A1; --vx-muted-ink: #A3AAB4;
  --vx-dim: rgba(14,17,22,.38); --vx-scheme: light; --vx-indigo: #5B4FC4; --vx-orange: #C2410C; --vx-pink: #BE185D; --vx-ink: #7C4DDB;   /* texto destacado: roxo no claro */ --vx-checker-a: #EEF0F3; --vx-checker-b: #FFFFFF;
}
/* visual novo ESCURO: mesmos componentes, paleta da proposta Waleju */
html.vds-dark{
  --v-bg: #0A0C10; --v-surface: #111318; --v-subtle: #161920; --v-muted-bg: #1C2028;
  --v-border: rgba(255,255,255,.08); --v-border-2: rgba(255,255,255,.14);
  --v-text: #F1F5F9; --v-text-2: #A7B0BE; --v-text-3: #6B7585;
  --v-brand-50: rgba(110,231,183,.08); --v-brand-100: rgba(110,231,183,.16);
  --v-brand-500: #6EE7B7; --v-brand-600: #6EE7B7; --v-brand-700: #8BF0C7; --v-on-brand: #06281C;
  --v-success: #4ADE80; --v-success-bg: rgba(74,222,128,.10);
  --v-danger: #FB7185;  --v-danger-bg: rgba(251,113,133,.10);
  --v-warning: #FBBF24; --v-warning-bg: rgba(251,191,36,.10);
  --v-info: #7DA7FF;    --v-info-bg: rgba(125,167,255,.10);
  --v-chart-1: #6EE7B7; --v-chart-2: #E2E8F0; --v-chart-3: #64748B; --v-chart-4: #8FA8F0; --v-chart-5: #E8B85A;
  --v-shadow-xs: none; --v-shadow-sm: none; --v-shadow-lg: 0 20px 50px rgba(0,0,0,.55);
  --v-focus: 0 0 0 3px rgba(110,231,183,.25);
  --vx-brand-bd: rgba(110,231,183,.28); --vx-danger-bd: rgba(251,113,133,.35); --vx-warn-bd: rgba(251,191,36,.35);
  --vx-roxo: #C084FC; --vx-roxo-bg: rgba(192,132,252,.10); --vx-roxo-bd: rgba(192,132,252,.26);
  --vx-alt: #0D1015; --vx-head: rgba(10,12,16,.88); --vx-glass: rgba(17,19,24,.70);
  --vx-hover-bd: rgba(255,255,255,.22); --vx-soft: rgba(255,255,255,.06); --vx-s2: #181B22; --vx-info-ink: #38BDF8; --vx-muted-ink: #4B5563;
  --vx-dim: rgba(0,0,0,.62); --vx-scheme: dark; --vx-indigo: #A5B4FC; --vx-orange: #FB923C; --vx-pink: #F472B6; --vx-ink: #8BF0C7;   /* texto destacado: menta no escuro */ --vx-checker-a: #2A2E38; --vx-checker-b: #1D2028;
  color-scheme: dark;
}
/* ── 2. BASE ─────────────────────────────────────────────────── */
.v-root{
  font-family: var(--v-font); font-size: var(--v-fs-14); line-height: 1.5;
  color: var(--v-text); background: var(--v-bg);
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11","ss01";
}
.v-root *, .v-root *::before, .v-root *::after{ box-sizing: border-box; }
.v-num{ font-variant-numeric: tabular-nums; }
.v-mono{ font-family: var(--v-font-mono); font-size: 12px; }
.v-eyebrow{
  font-family: var(--v-font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--v-text-3);
}
.v-muted{ color: var(--v-text-3); }
.v-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ícone — sempre outline, traço 1.75, 16px por padrão */
.v-icon{
  width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.v-icon.sm{ width: 14px; height: 14px; }
.v-icon.lg{ width: 20px; height: 20px; }
.v-icon.xl{ width: 28px; height: 28px; stroke-width: 1.5; }

/* ── 3. BOTÕES ───────────────────────────────────────────────── */
.v-btn{
  --_bg: var(--v-surface); --_fg: var(--v-text); --_bd: var(--v-border-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--v-h-md); padding: 0 12px; border-radius: var(--v-r-sm);
  border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg);
  font: 500 13px/1 var(--v-font); white-space: nowrap; cursor: pointer;
  box-shadow: var(--v-shadow-xs);
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  position: relative; user-select: none; text-decoration: none;
}
.v-btn:hover{ background: var(--v-subtle); border-color: var(--v-border-2); }
.v-btn:focus-visible{ outline: none; box-shadow: var(--v-focus); }
.v-btn:active{ transform: translateY(.5px); }
.v-btn[disabled], .v-btn.is-disabled{ opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none; }

/* primário — destaque sem exagero */
.v-btn--primary{ --_bg: var(--v-brand-600); --_fg: var(--v-on-brand); --_bd: var(--v-brand-600); }
.v-btn--primary:hover{ background: var(--v-brand-700); border-color: var(--v-brand-700); }
/* secundário = padrão (.v-btn) */
/* discreto — ações de baixa ênfase, barras de ferramenta */
.v-btn--ghost{ --_bg: transparent; --_bd: transparent; --_fg: var(--v-text-2); box-shadow: none; }
.v-btn--ghost:hover{ background: var(--v-subtle); color: var(--v-text); border-color: transparent; }
/* cancelar — igual ao secundário, texto mais leve */
.v-btn--cancel{ --_fg: var(--v-text-2); }
/* excluir — vermelho só no botão que confirma a exclusão */
.v-btn--danger{ --_bg: var(--v-danger); --_fg: #fff; --_bd: var(--v-danger); }
.v-btn--danger:hover{ filter: brightness(.94); background: var(--v-danger); }
/* excluir discreto — em linha de tabela, antes de confirmar */
.v-btn--danger-ghost{ --_bg: transparent; --_bd: transparent; --_fg: var(--v-danger); box-shadow:none; }
.v-btn--danger-ghost:hover{ background: var(--v-danger-bg); border-color: transparent; }

.v-btn--sm{ height: var(--v-h-sm); padding: 0 10px; font-size: 12px; }
.v-btn--lg{ height: var(--v-h-lg); padding: 0 16px; font-size: 14px; }
.v-btn--icon{ width: var(--v-h-md); padding: 0; }
.v-btn--icon.v-btn--sm{ width: var(--v-h-sm); }

/* carregando — mantém a largura, troca o conteúdo por spinner */
.v-btn.is-loading{ color: transparent !important; pointer-events: none; }
.v-btn.is-loading::after{
  content:""; position:absolute; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-color: var(--_fg); border-right-color: transparent;
  animation: v-spin .7s linear infinite;
}
@keyframes v-spin{ to{ transform: rotate(360deg); } }

.v-btn-group{ display:inline-flex; }
.v-btn-group .v-btn{ border-radius: 0; margin-left: -1px; }
.v-btn-group .v-btn:first-child{ border-radius: var(--v-r-sm) 0 0 var(--v-r-sm); margin-left:0; }
.v-btn-group .v-btn:last-child{ border-radius: 0 var(--v-r-sm) var(--v-r-sm) 0; }

/* controle segmentado (filtros rápidos, abas compactas) */
.v-seg{ display:inline-flex; padding:2px; gap:2px; background: var(--v-subtle); border:1px solid var(--v-border); border-radius: 8px; }
.v-seg button{
  height: 28px; padding: 0 10px; border:0; border-radius: 6px; background: transparent;
  font: 500 12.5px/1 var(--v-font); color: var(--v-text-2); cursor: pointer; display:inline-flex; align-items:center; gap:6px;
}
.v-seg button:hover{ color: var(--v-text); }
.v-seg button.is-active{ background: var(--v-surface); color: var(--v-text); box-shadow: var(--v-shadow-xs), 0 0 0 1px var(--v-border); }
.v-seg .v-count{ font-size: 11px; color: var(--v-text-3); }

/* ── 4. FORMULÁRIOS ──────────────────────────────────────────── */
.v-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.v-label{ font-size: 13px; font-weight: 500; color: var(--v-text); }
.v-label .v-req{ color: var(--v-danger); margin-left: 2px; }
.v-hint{ font-size: 12px; color: var(--v-text-3); }
.v-error{ font-size: 12px; color: var(--v-danger); display:flex; align-items:center; gap:4px; }

.v-input, .v-select, .v-textarea{
  width: 100%; height: var(--v-h-md); padding: 0 10px;
  font: 400 13.5px/1.4 var(--v-font); color: var(--v-text);
  background: var(--v-surface); border: 1px solid var(--v-border-2); border-radius: var(--v-r-sm);
  box-shadow: var(--v-shadow-xs); transition: border-color .15s, box-shadow .15s;
  appearance: none; -webkit-appearance: none;
}
.v-textarea{ height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; }
.v-input::placeholder, .v-textarea::placeholder{ color: var(--v-text-3); }
.v-input:hover, .v-select:hover, .v-textarea:hover{ border-color: #BCC3CC; }
[data-theme="dark"] .v-input:hover, [data-theme="dark"] .v-select:hover{ border-color: rgba(255,255,255,.22); }
.v-input:focus, .v-select:focus, .v-textarea:focus{ outline:none; border-color: var(--v-brand-500); box-shadow: var(--v-focus); }
.v-input[disabled], .v-select[disabled]{ background: var(--v-subtle); color: var(--v-text-3); cursor:not-allowed; box-shadow:none; }
.v-input.is-invalid, .v-select.is-invalid{ border-color: var(--v-danger); }
.v-input.is-invalid:focus{ box-shadow: 0 0 0 3px rgba(200,50,59,.15); }
.v-select{
  padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868E99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
.v-input-wrap{ position: relative; display:flex; align-items:center; }
.v-input-wrap > .v-icon{ position:absolute; left:10px; color: var(--v-text-3); pointer-events:none; }
.v-input-wrap > .v-input{ padding-left: 32px; }
.v-input-wrap > .v-kbd{ position:absolute; right:8px; }
.v-affix{ display:flex; }
.v-affix > span{
  display:inline-flex; align-items:center; padding: 0 10px; font-size: 13px; color: var(--v-text-3);
  background: var(--v-subtle); border:1px solid var(--v-border-2); border-right:0; border-radius: var(--v-r-sm) 0 0 var(--v-r-sm);
}
.v-affix > .v-input{ border-radius: 0 var(--v-r-sm) var(--v-r-sm) 0; }
.v-kbd{
  font: 500 11px/1 var(--v-font-mono); color: var(--v-text-3); padding: 3px 5px;
  border:1px solid var(--v-border); border-radius: 4px; background: var(--v-subtle);
}

/* checkbox, radio e switch — mesmo traço, mesma cor de marca */
.v-check, .v-radio{ display:inline-flex; align-items:center; gap:8px; font-size: 13.5px; cursor:pointer; color: var(--v-text); }
.v-check input, .v-radio input{
  appearance:none; -webkit-appearance:none; margin:0; width:16px; height:16px; flex:none;
  border:1px solid var(--v-border-2); background: var(--v-surface); cursor:pointer;
  display:grid; place-items:center; transition: background .12s, border-color .12s;
}
.v-check input{ border-radius: 4px; }
.v-radio input{ border-radius: 50%; }
.v-check input:checked{ background: var(--v-brand-600); border-color: var(--v-brand-600); }
.v-check input:checked::after{
  content:""; width: 9px; height: 5px; border: 2px solid var(--v-on-brand); border-top:0; border-right:0;
  transform: translateY(-1px) rotate(-45deg);
}
.v-check input:indeterminate{ background: var(--v-brand-600); border-color: var(--v-brand-600); }
.v-check input:indeterminate::after{ content:""; width:8px; height:2px; background: var(--v-on-brand); border-radius:1px; }
.v-radio input:checked{ border: 5px solid var(--v-brand-600); }
.v-check input:focus-visible, .v-radio input:focus-visible{ outline:none; box-shadow: var(--v-focus); }
.v-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size: 13.5px; }
.v-switch input{ appearance:none; -webkit-appearance:none; margin:0; width:30px; height:18px; border-radius:20px; background: var(--v-border-2); position:relative; cursor:pointer; transition: background .15s; flex:none; }
.v-switch input::after{ content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .18s var(--v-ease); }
.v-switch input:checked{ background: var(--v-brand-600); }
.v-switch input:checked::after{ transform: translateX(12px); }

/* ── 5. CARDS E INDICADORES ──────────────────────────────────── */
.v-card{
  background: var(--v-surface); border: 1px solid var(--v-border); border-radius: var(--v-r-md);
  box-shadow: var(--v-shadow-xs);
}
.v-card__head{
  display:flex; align-items:center; justify-content:space-between; gap: var(--v-3);
  padding: 14px 16px; border-bottom: 1px solid var(--v-border);
}
.v-card__head.is-flush{ border-bottom: 0; padding-bottom: 4px; }
.v-card__title{ font-size: 14px; font-weight: 600; color: var(--v-text); margin:0; display:flex; align-items:center; gap:8px; }
.v-card__sub{ font-size: 12.5px; color: var(--v-text-3); margin: 2px 0 0; }
.v-card__body{ padding: 16px; }
.v-card__foot{ padding: 10px 16px; border-top: 1px solid var(--v-border); display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* KPI: rótulo → valor → comparação. Cor só no indicador de variação. */
.v-kpi{ padding: 16px; display:flex; flex-direction:column; gap: 6px; min-width: 0; }
.v-kpi__label{ display:flex; align-items:center; gap:6px; font-size: 12.5px; color: var(--v-text-2); font-weight: 500; }
.v-kpi__label .v-icon{ color: var(--v-text-3); }
.v-kpi__value{ font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--v-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.v-kpi__value small{ font-size: 14px; font-weight: 500; color: var(--v-text-3); margin-left: 2px; }
.v-kpi__meta{ display:flex; align-items:center; gap:8px; font-size: 12px; color: var(--v-text-3); }
.v-kpi__spark{ height: 28px; margin-top: 4px; }

.v-delta{ display:inline-flex; align-items:center; gap:2px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.v-delta .v-icon{ width: 12px; height: 12px; stroke-width: 2.25; }
.v-delta--up{ color: var(--v-success); }
.v-delta--down{ color: var(--v-danger); }
.v-delta--flat{ color: var(--v-text-3); }

/* grade de KPIs em faixa única com divisórias (estilo Stripe) */
.v-kpi-strip{ display:grid; grid-template-columns: repeat(var(--cols, 4), minmax(0,1fr)); }
.v-kpi-strip > .v-kpi + .v-kpi{ border-left: 1px solid var(--v-border); }

/* status / badges — ponto colorido + texto, fundo bem leve */
.v-badge{
  display:inline-flex; align-items:center; gap:6px; height: 22px; padding: 0 8px;
  border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--v-subtle); color: var(--v-text-2); border: 1px solid var(--v-border);
}
.v-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.9; }
.v-badge.no-dot::before{ display:none; }
.v-badge--success{ background: var(--v-success-bg); color: var(--v-success); border-color: transparent; }
.v-badge--danger { background: var(--v-danger-bg);  color: var(--v-danger);  border-color: transparent; }
.v-badge--warning{ background: var(--v-warning-bg); color: var(--v-warning); border-color: transparent; }
.v-badge--info   { background: var(--v-info-bg);    color: var(--v-info);    border-color: transparent; }
.v-badge--brand  { background: var(--v-brand-50);   color: var(--v-brand-600); border-color: transparent; }
.v-tag{ display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius: 4px; font: 500 11px/1 var(--v-font-mono); color: var(--v-text-2); background: var(--v-subtle); border:1px solid var(--v-border); }

/* alerta em linha */
.v-alert{
  display:flex; gap: 12px; align-items:flex-start; padding: 12px 14px;
  border-radius: var(--v-r-md); border: 1px solid var(--v-border); background: var(--v-surface);
  font-size: 13.5px; color: var(--v-text-2);
}
.v-alert > .v-icon{ margin-top: 2px; }
.v-alert strong{ color: var(--v-text); font-weight: 600; display:block; margin-bottom: 1px; }
.v-alert__actions{ margin-left:auto; display:flex; gap:8px; flex:none; align-self:center; }
.v-alert--warning{ background: var(--v-warning-bg); border-color: transparent; } .v-alert--warning > .v-icon{ color: var(--v-warning); }
.v-alert--danger { background: var(--v-danger-bg);  border-color: transparent; } .v-alert--danger  > .v-icon{ color: var(--v-danger); }
.v-alert--info   { background: var(--v-info-bg);    border-color: transparent; } .v-alert--info    > .v-icon{ color: var(--v-info); }
.v-alert--success{ background: var(--v-success-bg); border-color: transparent; } .v-alert--success > .v-icon{ color: var(--v-success); }

/* barra de progresso / proporção */
.v-progress{ height: 6px; border-radius: 6px; background: var(--v-muted-bg); overflow:hidden; }
.v-progress > i{ display:block; height:100%; border-radius: inherit; background: var(--v-brand-500); }

/* ── 6. TABELAS E LISTAGENS ──────────────────────────────────── */
.v-toolbar{ display:flex; align-items:center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--v-border); }
.v-toolbar__spacer{ flex: 1; }
.v-toolbar .v-input-wrap{ width: 260px; max-width: 100%; }
.v-filter-chip{
  display:inline-flex; align-items:center; gap:6px; height: 28px; padding: 0 6px 0 10px;
  border: 1px dashed var(--v-border-2); border-radius: 999px; font-size: 12.5px; color: var(--v-text-2); background: transparent; cursor:pointer;
  font-family: var(--v-font);
}
.v-filter-chip b{ color: var(--v-text); font-weight: 600; }
.v-filter-chip.is-set{ border-style: solid; background: var(--v-subtle); }
.v-filter-chip .v-icon{ width: 13px; height: 13px; color: var(--v-text-3); }

.v-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v-table{ width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.v-table th{
  position: sticky; top: 0; z-index: 1;
  height: 36px; padding: 0 12px; text-align: left; white-space: nowrap;
  font-size: 12px; font-weight: 500; color: var(--v-text-3);
  background: var(--v-subtle); border-bottom: 1px solid var(--v-border);
}
.v-table th.is-sortable{ cursor: pointer; user-select:none; }
.v-table th.is-sortable:hover{ color: var(--v-text); }
.v-table th .v-icon{ width: 12px; height: 12px; margin-left: 2px; }
.v-table td{
  height: var(--v-row); padding: 0 12px; border-bottom: 1px solid var(--v-border);
  color: var(--v-text); white-space: nowrap; vertical-align: middle;
}
.v-table tbody tr{ transition: background .1s; }
.v-table tbody tr:hover td{ background: var(--v-subtle); }
.v-table tbody tr.is-selected td{ background: var(--v-brand-50); }
.v-table tbody tr:last-child td{ border-bottom: 0; }
.v-table .is-num{ text-align: right; font-variant-numeric: tabular-nums; }
.v-table .is-center{ text-align: center; }
.v-table .is-check{ width: 40px; padding-right: 0; }
.v-table .is-actions{ width: 1%; text-align: right; padding-right: 8px; }
.v-table .is-muted{ color: var(--v-text-3); }
.v-table .v-cell-main{ font-weight: 500; }
.v-table .v-cell-sub{ font-size: 12px; color: var(--v-text-3); margin-top: 1px; }
.v-table .v-row-actions{ display:inline-flex; gap: 2px; opacity: .0; transition: opacity .12s; }
.v-table tr:hover .v-row-actions, .v-table .v-row-actions:focus-within{ opacity: 1; }
@media (hover: none){ .v-table .v-row-actions{ opacity: 1; } }
.v-table--compact td{ height: var(--v-row-compact); }
.v-table tfoot td{ font-weight: 600; background: var(--v-subtle); border-top: 1px solid var(--v-border); border-bottom: 0; }
.v-thumb{ width: 32px; height: 32px; border-radius: 6px; background: var(--v-muted-bg); border:1px solid var(--v-border); display:grid; place-items:center; overflow:hidden; color: var(--v-text-3); }
.v-thumb img{ width:100%; height:100%; object-fit:cover; }
.v-amount--in, .v-table td.v-amount--in{ color: var(--v-success); }
.v-amount--out, .v-table td.v-amount--out{ color: var(--v-text); }

/* paginação */
.v-pager{ display:flex; align-items:center; gap: 12px; font-size: 12.5px; color: var(--v-text-3); }
.v-pager__pages{ display:flex; gap: 2px; }
.v-pager__pages button{
  min-width: 28px; height: 28px; padding: 0 6px; border-radius: 6px; border: 1px solid transparent; background: transparent;
  font: 500 12.5px/1 var(--v-font); color: var(--v-text-2); cursor:pointer; font-variant-numeric: tabular-nums;
  display:inline-flex; align-items:center; justify-content:center;
}
.v-pager__pages button:hover{ background: var(--v-subtle); }
.v-pager__pages button.is-active{ border-color: var(--v-border-2); background: var(--v-surface); color: var(--v-text); box-shadow: var(--v-shadow-xs); }
.v-pager__pages button[disabled]{ opacity:.35; pointer-events:none; }
.v-pager .v-select{ width:auto; height: 28px; font-size: 12.5px; }

/* barra de ações em massa */
.v-bulkbar{
  display:flex; align-items:center; gap: 8px; padding: 8px 12px 8px 16px;
  background: var(--v-text); color: #fff; border-radius: var(--v-r-md); box-shadow: var(--v-shadow-lg);
  font-size: 13px;
}
[data-theme="dark"] .v-bulkbar{ background: #F1F5F9; color: #0A0C10; }
.v-bulkbar .v-btn{ --_bg: transparent; --_fg: inherit; --_bd: rgba(255,255,255,.2); box-shadow:none; }
.v-bulkbar .v-btn:hover{ background: rgba(255,255,255,.1); }
[data-theme="dark"] .v-bulkbar .v-btn{ --_bd: rgba(0,0,0,.2); }
[data-theme="dark"] .v-bulkbar .v-btn:hover{ background: rgba(0,0,0,.06); }

/* estado vazio */
.v-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap: 6px; padding: 48px 24px; }
.v-empty__icon{ width: 44px; height: 44px; border-radius: 10px; display:grid; place-items:center; background: var(--v-subtle); border:1px solid var(--v-border); color: var(--v-text-3); margin-bottom: 8px; }
.v-empty__title{ font-size: 14px; font-weight: 600; color: var(--v-text); }
.v-empty__text{ font-size: 13px; color: var(--v-text-3); max-width: 340px; }
.v-empty .v-btn{ margin-top: 10px; }

/* carregamento — skeleton no lugar do conteúdo, nunca tela em branco */
.v-skel{ display:block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--v-muted-bg) 0%, var(--v-subtle) 50%, var(--v-muted-bg) 100%); background-size: 200% 100%; animation: v-shimmer 1.3s ease-in-out infinite; }
@keyframes v-shimmer{ from{ background-position: 200% 0; } to{ background-position: -200% 0; } }
.v-spinner{ width:16px; height:16px; border-radius:50%; border:2px solid var(--v-border-2); border-top-color: var(--v-brand-600); animation: v-spin .7s linear infinite; display:inline-block; }

/* abas */
.v-tabs{ display:flex; gap: 20px; border-bottom: 1px solid var(--v-border); padding: 0 16px; overflow-x:auto; overflow-y:hidden; scrollbar-width: none; }
.v-tabs::-webkit-scrollbar{ display:none; }
.v-tabs button{
  height: 40px; padding: 0; border:0; background: none; cursor:pointer; white-space:nowrap;
  font: 500 13.5px/1 var(--v-font); color: var(--v-text-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
  display:inline-flex; align-items:center; gap: 6px;
}
.v-tabs button:hover{ color: var(--v-text); }
.v-tabs button.is-active{ color: var(--v-text); border-bottom-color: var(--v-text); }
.v-tabs .v-count{ font-size: 11.5px; padding: 1px 6px; border-radius: 10px; background: var(--v-subtle); color: var(--v-text-3); }

/* ── 7. MODAL, MENU, TOOLTIP, TOAST ──────────────────────────── */
.v-overlay{
  position: fixed; inset: 0; z-index: 1000; background: rgba(14,17,22,.38);
  display:flex; align-items:center; justify-content:center; padding: 16px;
  opacity: 0; pointer-events: none; transition: opacity .18s;
  backdrop-filter: blur(2px);
}
[data-theme="dark"] .v-overlay{ background: rgba(0,0,0,.6); }
.v-overlay.is-open{ opacity: 1; pointer-events: auto; }
.v-modal{
  width: 100%; max-width: 480px; max-height: calc(100vh - 32px); display:flex; flex-direction:column;
  background: var(--v-surface); border: 1px solid var(--v-border); border-radius: var(--v-r-lg); box-shadow: var(--v-shadow-lg);
  transform: translateY(8px) scale(.985); transition: transform .2s var(--v-ease);
}
.v-overlay.is-open .v-modal{ transform: none; }
.v-modal--lg{ max-width: 640px; }
.v-modal__head{ display:flex; align-items:flex-start; gap: 12px; padding: 18px 20px 4px; }
.v-modal__title{ font-size: 16px; font-weight: 600; margin: 0; }
.v-modal__desc{ font-size: 13.5px; color: var(--v-text-2); margin: 4px 0 0; }
.v-modal__close{ margin-left:auto; }
.v-modal__body{ padding: 16px 20px; overflow-y:auto; }
.v-modal__foot{ display:flex; justify-content:flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--v-border); background: var(--v-subtle); border-radius: 0 0 var(--v-r-lg) var(--v-r-lg); }
.v-modal__icon{ width: 36px; height: 36px; border-radius: 50%; display:grid; place-items:center; flex:none; }
.v-modal__icon--danger{ background: var(--v-danger-bg); color: var(--v-danger); }

.v-menu{
  position: absolute; z-index: 900; min-width: 180px; padding: 4px;
  background: var(--v-surface); border:1px solid var(--v-border); border-radius: var(--v-r-md); box-shadow: var(--v-shadow-lg);
}
.v-menu button{
  width: 100%; display:flex; align-items:center; gap: 8px; height: 32px; padding: 0 8px; border:0; background:none; border-radius: 6px;
  font: 400 13.5px/1 var(--v-font); color: var(--v-text); cursor:pointer; text-align:left;
}
.v-menu button .v-icon{ color: var(--v-text-3); }
.v-menu button:hover{ background: var(--v-subtle); }
.v-menu button.is-danger, .v-menu button.is-danger .v-icon{ color: var(--v-danger); }
.v-menu hr{ border:0; border-top:1px solid var(--v-border); margin: 4px -4px; }

[data-tip]{ position: relative; }
[data-tip]::after{
  content: attr(data-tip); position:absolute; left:50%; bottom: calc(100% + 6px); transform: translate(-50%, 2px);
  padding: 5px 8px; border-radius: 6px; background: #1A1F27; color: #fff; font: 500 12px/1.3 var(--v-font);
  width: max-content; max-width: 260px; white-space: normal; text-align: left; pointer-events:none; opacity:0; transition: opacity .12s, transform .12s; z-index: 950;
  display: none; /* escondido não ocupa espaço: evita rolagem lateral perto das bordas */
}
[data-tip]:hover::after, [data-tip]:focus-visible::after{ display:block; opacity:1; transform: translate(-50%, 0); }
[data-tip-pos="end"]::after, [data-tip-pos="end"]:hover::after{ left:auto; right:0; transform:none; }
[data-tip-pos="right"]::after{ left: calc(100% + 8px); bottom: auto; top: 50%; transform: translate(-2px,-50%); }
[data-tip-pos="right"]:hover::after{ transform: translate(0,-50%); }

.v-toasts{ position: fixed; right: 16px; bottom: 16px; z-index: 1100; display:flex; flex-direction:column; gap: 8px; width: 360px; max-width: calc(100vw - 32px); }
.v-toast{
  display:flex; gap: 10px; align-items:flex-start; padding: 12px 12px 12px 14px;
  background: var(--v-surface); border:1px solid var(--v-border); border-radius: var(--v-r-md); box-shadow: var(--v-shadow-lg);
  font-size: 13.5px; color: var(--v-text-2); animation: v-toast-in .22s var(--v-ease);
}
.v-toast strong{ display:block; color: var(--v-text); font-weight: 600; }
.v-toast > .v-icon{ margin-top: 2px; }
.v-toast--success > .v-icon{ color: var(--v-success); }
.v-toast--danger  > .v-icon{ color: var(--v-danger); }
.v-toast--info    > .v-icon{ color: var(--v-info); }
.v-toast .v-btn{ margin-left: auto; }
@keyframes v-toast-in{ from{ opacity:0; transform: translateY(8px); } }

/* ── 8. ESTRUTURA DA APLICAÇÃO ───────────────────────────────── */
.v-app{ display:grid; grid-template-columns: var(--v-sidebar) minmax(0,1fr); min-height: 100vh; }
.v-app.is-collapsed{ --v-sidebar: 60px; }

.v-sidebar{
  position: sticky; top: 0; height: 100vh; display:flex; flex-direction:column;
  background: var(--v-surface); border-right: 1px solid var(--v-border); overflow: hidden;
}
.v-sidebar__brand{ display:flex; align-items:center; gap: 10px; height: 56px; padding: 0 16px; flex:none; }
.v-brandmark{ width: 26px; height: 26px; flex:none; }
.v-brandname{ font: 700 16px/1 var(--v-font-display); letter-spacing: -.01em; white-space: nowrap; }
.v-brandname span{ color: var(--v-brand-500); }
.v-sidebar__org{
  margin: 0 10px 8px; display:flex; align-items:center; gap: 10px; padding: 8px; border-radius: 8px; border:1px solid var(--v-border);
  background: var(--v-surface); cursor:pointer; flex:none; text-align:left; font-family: var(--v-font); color: var(--v-text);
}
.v-sidebar__org:hover{ background: var(--v-subtle); }
.v-avatar{ width: 26px; height: 26px; border-radius: 6px; display:grid; place-items:center; flex:none; font: 600 11px/1 var(--v-font); background: var(--v-text); color: var(--v-surface); }
.v-avatar--round{ border-radius: 50%; }
.v-sidebar__scroll{ flex:1; overflow-y:auto; padding: 4px 10px 16px; scrollbar-width: thin; }
.v-nav-label{ padding: 16px 8px 6px; font: 500 10.5px/1 var(--v-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--v-text-3); white-space:nowrap; }
.v-nav-item{
  width: 100%; display:flex; align-items:center; gap: 10px; height: 32px; padding: 0 8px; border:0; background: none;
  border-radius: 6px; font: 500 13.5px/1 var(--v-font); color: var(--v-text-2); cursor:pointer; text-align:left; text-decoration:none;
  position: relative; white-space: nowrap;
}
.v-nav-item > .v-icon{ color: var(--v-text-3); }
.v-nav-item:hover{ background: var(--v-subtle); color: var(--v-text); }
.v-nav-item:hover > .v-icon{ color: var(--v-text-2); }
.v-nav-item.is-active{ background: var(--v-subtle); color: var(--v-text); font-weight: 600; }
.v-nav-item.is-active > .v-icon{ color: var(--v-brand-600); }
.v-nav-item.is-active::before{ content:""; position:absolute; left:-10px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--v-brand-500); }
.v-nav-item:focus-visible{ outline:none; box-shadow: var(--v-focus); }
.v-nav-item .v-caret{ margin-left: auto; width: 14px; height: 14px; transition: transform .18s var(--v-ease); color: var(--v-text-3); }
.v-nav-item.is-open .v-caret{ transform: rotate(180deg); }
.v-nav-item .v-nav-count{ margin-left:auto; font: 600 11px/1 var(--v-font); padding: 3px 6px; border-radius: 10px; background: var(--v-warning-bg); color: var(--v-warning); }
.v-nav-item .v-nav-pill{ margin-left:auto; font: 500 10px/1 var(--v-font-mono); letter-spacing:.06em; padding: 3px 5px; border-radius: 4px; border:1px solid var(--v-border-2); color: var(--v-text-3); }
.v-nav-sub{ display:none; flex-direction:column; gap: 1px; margin: 2px 0 4px 15px; padding-left: 12px; border-left: 1px solid var(--v-border); }
.v-nav-sub.is-open{ display:flex; }
.v-nav-sub .v-nav-item{ height: 30px; font-size: 13px; font-weight: 500; }
.v-nav-sub .v-nav-item.is-active::before{ left: -13px; top: 6px; bottom: 6px; }
.v-sidebar__foot{ flex:none; padding: 10px; border-top: 1px solid var(--v-border); display:flex; flex-direction:column; gap: 2px; }

/* recolhido: só ícones + tooltip */
.v-app.is-collapsed .v-brandname, .v-app.is-collapsed .v-nav-label, .v-app.is-collapsed .v-nav-item > span,
.v-app.is-collapsed .v-caret, .v-app.is-collapsed .v-nav-count, .v-app.is-collapsed .v-nav-pill,
.v-app.is-collapsed .v-sidebar__org > :not(.v-avatar), .v-app.is-collapsed .v-nav-sub{ display:none !important; }
.v-app.is-collapsed .v-sidebar__brand{ padding: 0 17px; }
.v-app.is-collapsed .v-nav-item{ justify-content:center; padding: 0; }
.v-app.is-collapsed .v-sidebar__org{ justify-content:center; padding: 6px; margin: 0 10px 8px; }
.v-app.is-collapsed .v-nav-label{ display:block !important; height: 1px; padding:0; margin: 10px 8px; background: var(--v-border); font-size:0; }

.v-main{ min-width: 0; display:flex; flex-direction:column; }
.v-topbar{
  position: sticky; top: 0; z-index: 50; height: 56px; display:flex; align-items:center; gap: 8px; padding: 0 24px;
  background: color-mix(in srgb, var(--v-bg) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--v-border);
}
.v-topbar .v-input-wrap{ width: 320px; max-width: 40vw; }
.v-topbar .v-input{ background: var(--v-surface); }
.v-crumbs{ display:flex; align-items:center; gap: 6px; font-size: 13px; color: var(--v-text-3); min-width:0; }
.v-crumbs a{ color: inherit; text-decoration: none; white-space:nowrap; }
.v-crumbs a:hover{ color: var(--v-text); }
.v-crumbs .v-icon{ width: 12px; height: 12px; }
.v-crumbs b{ color: var(--v-text); font-weight: 500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-status-chip{ display:inline-flex; align-items:center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border:1px solid var(--v-border); background: var(--v-surface); font-size: 12px; color: var(--v-text-2); white-space:nowrap; }
.v-status-chip i{ width: 6px; height: 6px; border-radius: 50%; background: var(--v-success); box-shadow: 0 0 0 3px var(--v-success-bg); }

.v-content{ padding: 28px 32px 64px; width: 100%; max-width: 1440px; margin: 0 auto; }
.v-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.v-page-title{ font: 700 26px/1.15 var(--v-font-display); letter-spacing: -.02em; margin: 6px 0 0; color: var(--v-text); }
.v-page-desc{ font-size: 14px; color: var(--v-text-2); margin: 6px 0 0; max-width: 640px; }
.v-page-actions{ display:flex; gap: 8px; flex-wrap: wrap; align-items:center; }
.v-section-title{ font-size: 15px; font-weight: 600; margin: 0 0 12px; display:flex; align-items:center; gap:8px; }

.v-grid{ display:grid; gap: 16px; }
.v-grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.v-grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.v-grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.v-grid--main-side{ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.v-stack{ display:flex; flex-direction:column; gap: 16px; }
.v-row{ display:flex; align-items:center; gap: 8px; }
.v-divider{ height:1px; background: var(--v-border); border:0; margin: 16px 0; }

@media (max-width: 1100px){
  .v-grid--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .v-grid--main-side, .v-grid--3{ grid-template-columns: 1fr; }
  .v-kpi-strip{ grid-template-columns: repeat(min(var(--cols,4),3), minmax(0,1fr)); }
  .v-kpi-strip > .v-kpi:nth-child(3n+1){ border-left: 0; }
  .v-kpi-strip > .v-kpi:nth-child(n+4){ border-top: 1px solid var(--v-border); }
}
@media (max-width: 860px){
  .v-app{ grid-template-columns: 1fr; }
  .v-sidebar{ position: fixed; left: 0; top: 0; bottom: 0; width: 264px; z-index: 200; transform: translateX(-100%); transition: transform .22s var(--v-ease); box-shadow: var(--v-shadow-lg); }
  .v-app.is-drawer .v-sidebar{ transform: none; }
  .v-app.is-collapsed{ --v-sidebar: 232px; }
  .v-topbar{ padding: 0 16px; }
  .v-topbar .v-input-wrap, .v-topbar .v-status-chip, .v-topbar .hide-sm{ display:none; }
  .v-content{ padding: 20px 16px 56px; }
  .v-grid--2{ grid-template-columns: 1fr; }
  .v-page-title{ font-size: 22px; }
}
@media (max-width: 560px){
  .v-grid--4{ grid-template-columns: 1fr 1fr; }
  .v-kpi-strip{ grid-template-columns: 1fr 1fr; }
  .v-kpi-strip > .v-kpi{ border-left: 0 !important; border-top: 1px solid var(--v-border); }
  .v-kpi-strip > .v-kpi:nth-child(2n){ border-left: 1px solid var(--v-border) !important; }
  .v-kpi-strip > .v-kpi:nth-child(-n+2){ border-top: 0; }
  .v-kpi__value{ font-size: 20px; }
  .v-toolbar .v-input-wrap{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .v-root *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}