/* =========================================================
   Vanda — Sistema de Design (UI)
   Atentare Segurança e Facilities
   Fonte única de tokens e componentes
   ========================================================= */

/* -------- TOKENS -------- */
:root{
  /* Fundos */
  --bg:#f7f8f7;
  --bg-2:#eef2f0;
  --panel:#ffffff;
  --panel-soft:#fbfdfb;

  /* Sidebar (verde corporativo escuro) */
  --sidebar:#18483f;
  --sidebar-2:#1d554b;
  --sidebar-line:rgba(255,255,255,.06);

  /* Texto */
  --text:#1F2937;
  --text-soft:#64748B;
  --text-faint:#94A3B8;
  --text-inverse:#ffffff;

  /* Linhas / divisores */
  --line:rgba(15,61,52,.10);
  --line-soft:rgba(15,61,52,.06);
  --line-strong:rgba(15,61,52,.18);

  /* Marca / verdes */
  --green:#166534;
  --green-2:#16a34a;
  --green-soft:#dcfce7;
  --green-softer:#ecfdf5;
  --green-line:#bbf7d0;

  /* Estados */
  --success:#16a34a;
  --success-soft:#dcfce7;
  --warning:#d97706;
  --warning-soft:#fef3c7;
  --warning-line:#fcd34d;
  --danger:#b42318;
  --danger-soft:#fef2f2;
  --danger-line:#fecaca;
  --info:#0f766e;
  --info-soft:#ccfbf1;
  --info-line:#99f6e4;

  /* Acentos analíticos */
  --accent-blue:#2563eb;
  --accent-blue-2:#3b82f6;
  --accent-blue-soft:#dbeafe;
  --accent-purple:#7c3aed;
  --accent-orange:#ea580c;
  --accent-orange-2:#fb923c;
  --accent-orange-soft:#ffedd5;
  --accent-cyan:#0891b2;
  --accent-rose:#e11d48;

  /* Paleta de status expandida (8 estados de pagamento) — formalizada em 28/07/2026
     a partir da paleta que já existia só em contas-pagar.html. Antes de criar tokens
     novos, comparado contra a paleta de 10 cores já documentada na seção 5e do
     DESIGN_SYSTEM_LOCK.md (.v-status-blue/purple/neutral/etc., linhas ~1359-1379
     abaixo): "open"/"aguardando_aprovacao"/"cancelled" já tinham cor quase idêntica
     lá (.v-status-blue, .v-status-warn, .v-status-neutral) — reaproveitados direto,
     em vez de duplicar. Só ficaram tokens novos os 4 estados sem par: overdue
     (vermelho mais vivo que o .v-status-danger existente, pra "vencido" chamar mais
     atenção), partial, paid (verde-esmeralda distinto do .v-status-ok, já
     estabelecido nesta tela desde antes) e previsto. Cores idênticas às de
     produção, sem nenhuma mudança visual nesses 4; "open"/"cancelled"/o badge
     violeta de parcela tiveram um ajuste de tom imperceptível (poucos pontos de
     RGB) pra convergir com a cor que já era oficial — ver memoria/contas-pagar.md
     (28/07/2026 (4)) pros valores exatos antes/depois. */
  --status-overdue-bg:#fee2e2;   --status-overdue-text:#dc2626;
  --status-partial-bg:#fef9c3;   --status-partial-text:#854d0e;
  --status-paid-bg:#d1fae5;      --status-paid-text:#065f46;
  --status-previsto-bg:#e0f2fe;  --status-previsto-text:#0369a1;

  /* Alias legível do texto de .v-status-blue (#1e40af), pra uso em texto solto
     que não é badge/pill (ex.: label colorido no gráfico do dashboard). */
  --status-open-text: #1e40af;

  /* Alias legível pra texto de erro solto (mensagem de validação, aviso),
     mesma cor de --status-overdue-text — não é o mesmo --danger (mais escuro,
     usado em botão/borda), é o vermelho de texto que várias telas já usavam
     solto em hex. */
  --text-error: var(--status-overdue-text);

  /* Âmbar escuro — mesmo valor que .v-status-warn já hardcoda como color
     (não é var lá também). Formalizado aqui pra parar de repetir o hex solto
     em texto de aviso e no botão "desmarcar" do painel de itens pulados. */
  --warning-strong:#92400e;
  --text-warning: var(--warning-strong);

  /* Sombras */
  --shadow:0 24px 56px rgba(15,61,52,.10);
  --shadow-soft:0 10px 24px rgba(15,23,42,.06);
  --shadow-xs:0 4px 10px rgba(15,23,42,.025);
  --shadow-brand:0 12px 24px rgba(21,128,61,.25);

  /* Raios */
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:11px;
  --radius-xs:8px;

  /* Layout (fixed) */
  --topbar-h:88px;
  --footer-h:44px;
  --sidebar-open:264px;
  --sidebar-collapsed:78px;
  --page-pad:22px;
  --sidebar-gap:16px;
  --page-top-gap:18px;  /* distância padrão entre topbar e primeiro card de qualquer tela */

  /* Tipografia */
  --font-base:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* -------- RESET / BASE -------- */
*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  font-family:var(--font-base);
  color:var(--text);
}

html{ height:100%; }
body{
  min-height:100vh;
  background:
    radial-gradient(980px 620px at 10% 0%, rgba(22,163,74,.10), transparent 56%),
    radial-gradient(900px 560px at 92% 8%, rgba(21,128,61,.06), transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg-2) 78%);
  background-attachment:fixed;
  /* reserva espaço pra topbar/sidebar/footer fixos */
  padding-top:var(--topbar-h);
  padding-bottom:calc(var(--footer-h) + 12px);
  padding-left:calc(var(--sidebar-collapsed) + var(--sidebar-gap) * 2);
  padding-right:var(--sidebar-gap);
  transition:padding-left .22s ease;
}

body.sidebar-expanded{
  padding-left:calc(var(--sidebar-open) + var(--sidebar-gap) * 2);
}

a,button{ -webkit-tap-highlight-color:transparent; }
a{ color:inherit; }
.hidden{ display:none !important; }
.invisible{ visibility:hidden !important; pointer-events:none !important; }

/* -------- TOPBAR (FIXED) -------- */
.v-topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  height:var(--topbar-h);
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:rgba(243,244,246,.86);
  border-bottom:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 30px rgba(15,23,42,.04);
  backdrop-filter:blur(16px);
}

.v-topbar-brand{
  display:flex;
  align-items:center;
  height:100%;
  min-width:0;
  flex:0 0 auto;
}

.v-brand-logo{
  display:block;
  height:60px;
  width:auto;
  object-fit:contain;
  flex:0 0 auto;
}

.v-topbar-center{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  flex:1 1 auto;
  align-items:flex-start;
  margin-left:12px;
}

.v-topbar-company,
.v-topbar-user{
  margin:0;
  font-size:12.5px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.v-topbar-user{
  font-size:11.5px;
  color:var(--text-soft);
  font-weight:500;
  letter-spacing:.06em;
}

.v-topbar-right{
  display:flex;
  align-items:center;
  gap:14px;
  flex:0 0 auto;
}

.v-topbar-datetime{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
}

.v-top-chip{
  display:block;
  margin:0;
  padding:0;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:12.5px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}

.v-top-chip + .v-top-chip{
  color:var(--text-soft);
  font-weight:500;
  font-size:11.5px;
}

/* -------- SIDEBAR (FIXED, card flutuante) -------- */
.v-sidebar{
  position:fixed;
  top:calc(var(--topbar-h) + var(--sidebar-gap));
  bottom:calc(var(--footer-h) + var(--sidebar-gap));
  left:var(--sidebar-gap);
  width:var(--sidebar-collapsed);
  z-index:45;
  background:
    radial-gradient(circle at top left, rgba(50,192,122,.08), transparent 26%),
    linear-gradient(180deg,var(--sidebar) 0%,var(--sidebar-2) 100%);
  color:#fff;
  padding:12px 10px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow-y:auto;
  overflow-x:hidden;
  transition:width .22s ease, padding .22s ease;
  scrollbar-gutter:stable;
}

body.sidebar-expanded .v-sidebar{
  width:var(--sidebar-open);
  padding:12px 12px;
}

.v-sidebar::-webkit-scrollbar{ width:6px; }
.v-sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.10); border-radius:3px; }

.v-sidebar-top{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.v-brand{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:#fff;
  min-height:52px;
  overflow:hidden;
}

.v-brand-mark{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  flex:0 0 32px;
  overflow:hidden;
}

.v-brand-mark img{
  width:26px;
  height:26px;
  object-fit:contain;
  display:block;
}

.v-brand-text{
  min-width:0;
  opacity:0;
  width:0;
  pointer-events:none;
  transition:opacity .18s ease, width .22s ease;
  white-space:nowrap;
}

body.sidebar-expanded .v-brand-text{
  opacity:1;
  width:auto;
  pointer-events:auto;
}

.v-brand h1{
  margin:0;
  font-size:14px;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap;
  color:var(--green);
}

.v-brand small{
  display:block;
  margin-top:2px;
  font-size:10.5px;
  color:var(--text-soft);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.v-toggle{
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
  border-radius:11px;
  padding:8px 10px;
  font:inherit;
  font-size:12px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:.18s ease;
  width:100%;
  min-height:36px;
  white-space:nowrap;
}

.v-toggle:hover{ background:rgba(255,255,255,.07); }

.v-menu-block{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.v-menu-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(220,252,231,.55);
  padding:10px 10px 4px;
  font-weight:700;
  opacity:0;
  height:0;
  overflow:hidden;
  transition:opacity .18s ease;
}

body.sidebar-expanded .v-menu-label{
  opacity:1;
  height:auto;
  padding:10px 10px 4px;
}

.v-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:11px;
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  border:1px solid transparent;
  transition:.18s ease;
  min-height:38px;
  position:relative;
  background:transparent;
  cursor:pointer;
  text-align:left;
  white-space:nowrap;
  width:100%;
}

.v-menu-item:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.08);
  color:#fff;
}

.v-menu-item.active{
  background:linear-gradient(90deg,rgba(34,197,94,.24),rgba(34,197,94,.06));
  border-color:rgba(34,197,94,.24);
  color:#fff;
}

.v-menu-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.v-menu-icon svg,
.v-toggle svg{
  width:20px;
  height:20px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.v-menu-text{
  opacity:0;
  width:0;
  overflow:hidden;
  pointer-events:none;
  transition:opacity .18s ease, width .22s ease;
}

body.sidebar-expanded .v-menu-text{
  opacity:1;
  width:auto;
  pointer-events:auto;
}

.v-menu-spacer{ flex:1 1 auto; }

.v-sidebar-foot{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:2px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:8px;
}

/* -------- FOOTER (FIXED, embaixo da sidebar) -------- */
.v-footer{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:55;
  height:var(--footer-h);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 var(--sidebar-gap);
  font-size:11.5px;
  color:var(--text-soft);
  border-top:1px solid var(--line-soft);
  letter-spacing:.02em;
  background:
    radial-gradient(980px 620px at 10% 0%, rgba(22,163,74,.10), transparent 56%),
    radial-gradient(900px 560px at 92% 8%, rgba(21,128,61,.06), transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg-2) 78%);
  background-attachment:fixed;
}

/* -------- CONTENT AREA -------- */
/* max-width:var(--content-max) + margin:0 auto removidos (11/08/2026) — em monitor largo isso
   centralizava o conteúdo e deixava vão cinza vazio dos dois lados, em toda tela do sistema.
   Removido a pedido da Cássia: layout deve ser fluido, sem teto de largura. */
.v-content{
  width:100%;
  padding:var(--page-pad) var(--page-pad) calc(var(--page-pad) + 4px);
  display:grid;
  gap:18px;
}

/* -------- CARDS -------- */
.v-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

.v-card-soft{
  background:var(--panel-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs);
}

.v-section-head{
  padding:18px 22px 8px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.v-section-head h3,
.v-section-head h4{
  margin:0;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--green);
}

.v-section-head p{
  margin:4px 0 0;
  color:var(--text-soft);
  font-size:12.5px;
}

/* -------- KPI -------- */
.v-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.v-kpi{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.v-kpi-label{
  margin:0;
  font-size:11.5px;
  font-weight:700;
  color:var(--text-soft);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.v-kpi-value{
  margin:0;
  font-size:26px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.05;
  color:var(--text);
}

.v-kpi-foot{
  margin:0;
  font-size:11.5px;
  color:var(--text-soft);
  line-height:1.4;
}

.v-up{ color:var(--success); font-weight:700; }
.v-down{ color:var(--danger); font-weight:700; }

/* -------- BUTTONS -------- */
.v-btn{
  height:38px;
  padding:0 14px;
  border-radius:11px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font:inherit;
  font-weight:700;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  cursor:pointer;
  transition:.18s ease;
  white-space:nowrap;
}

.v-btn:hover{
  transform:translateY(-1px);
  background:var(--success-soft);
  border-color:var(--green-line);
  color:var(--green);
  box-shadow:0 4px 10px rgba(22,101,52,.10);
}
.v-btn:active{ transform:translateY(0); box-shadow:none; }
.v-btn:disabled{ opacity:.72; cursor:not-allowed; transform:none; box-shadow:none; }

.v-btn-primary{
  background:linear-gradient(135deg,var(--green-2),var(--green));
  color:#fff;
  border:none;
  box-shadow:var(--shadow-brand);
}

.v-btn-primary:hover{
  background:linear-gradient(135deg,var(--green),var(--green));
  color:#fff;
}

.v-btn-ghost{ background:transparent; border-color:transparent; }
.v-btn-ghost:hover{ background:rgba(15,61,52,.05); }

/* Cancelar — fundo branco, texto vermelho (padrão Vanda UI, formalizado em 04/06/2026) */
.v-btn-cancel{ color:var(--danger); }
.v-btn-cancel:hover{ background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger); box-shadow:none; }

.v-btn-danger{
  background:var(--danger-soft);
  border-color:var(--danger-line);
  color:var(--danger);
}

.v-btn-danger:hover{ background:#fee2e2; }

/* Variantes soft — botões de ação coloridos em tabela (formalizado em 04/07/2026) */
.v-btn-green-soft { background:var(--success-soft); border-color:var(--green-line); color:#166534; }
.v-btn-green-soft:hover { background:#bbf7d0; }
.v-btn-blue-soft { background:#dbeafe; border-color:#bfdbfe; color:#1e40af; }
.v-btn-blue-soft:hover { background:#bfdbfe; }
.v-btn-warn { background:var(--warning-soft); border-color:var(--warning-line); color:#92400e; }
.v-btn-warn:hover { background:#fde68a; }
.v-btn-orange-soft { background:var(--accent-orange-soft); border-color:#fed7aa; color:var(--accent-orange); }
.v-btn-orange-soft:hover { background:#fed7aa; }

/* Azul Vanda — botão de apoio/secundário com destaque (formalizado em 25/05/2026) */
.v-btn-blue,
.v-btn-blue:hover,
.v-btn-blue:focus,
.v-btn-blue:active {
  background:linear-gradient(135deg, #2563EB, #3828A8);
  color:#fff;
  border-color:transparent;
}
.v-btn-blue:hover {
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(37,99,235,.30);
}

/* Laranja — botão de apoio/secundário com destaque, mesma hierarquia do Azul Vanda
   (oficializado em 14/07/2026 a pedido da Cássia — usa o gradiente de identidade do
   Adm. e Financeiro já documentado na seção 5b do DESIGN_SYSTEM_LOCK) */
.v-btn-orange,
.v-btn-orange:hover,
.v-btn-orange:focus,
.v-btn-orange:active {
  background:linear-gradient(135deg, #7c2d12, #f59e0b);
  color:#fff;
  border-color:transparent;
}
.v-btn-orange:hover {
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(234,88,12,.30);
}

.v-btn-sm{ height:32px; padding:0 11px; font-size:12px; border-radius:9px; }
.v-btn-lg{ height:44px; padding:0 18px; font-size:14px; border-radius:13px; }

/* -------- BADGES / CHIPS / STATUS -------- */
.v-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:var(--green-soft);
  color:var(--green);
  letter-spacing:.02em;
}

.v-badge-warn{ background:var(--warning-soft); color:var(--warning); }
.v-badge-danger{ background:var(--danger-soft); color:var(--danger); }
.v-badge-info{ background:var(--info-soft); color:var(--info); }
.v-badge-neutral{ background:#eef2f0; color:var(--text-soft); }

.v-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  font-size:12px;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  transition:.18s ease;
}

.v-chip:hover{ background:#fbfdfb; border-color:var(--line-strong); }
.v-chip.active{ background:var(--green-soft); border-color:var(--green-line); color:var(--green); }

.v-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.03em;
}

.v-status-ok{ background:var(--success-soft); color:#166534; }
.v-status-warn{ background:var(--warning-soft); color:#92400e; }
.v-status-danger{ background:var(--danger-soft); color:#991b1b; }
.v-status-info{ background:var(--info-soft); color:#0f766e; }
.v-status-neutral{ background:#eef2f0; color:var(--text-soft); }

/* Paleta de status expandida (8 estados de pagamento) — ver tokens --status-*
   no :root e o comentário lá explicando por que só estas 4 são novas (as outras
   4 estados reaproveitam .v-status-blue/warn/neutral, já existentes acima).
   .v-status-danger já existe com um vermelho mais claro/mudado, usado em outro
   contexto — este .v-status-overdue é o vermelho mais forte que esta tela (e
   possivelmente outras) já usava solto em hex. */
.v-status-overdue{ background:var(--status-overdue-bg); color:var(--status-overdue-text); }
.v-status-partial{ background:var(--status-partial-bg); color:var(--status-partial-text); }
.v-status-paid{ background:var(--status-paid-bg); color:var(--status-paid-text); }
.v-status-previsto{ background:var(--status-previsto-bg); color:var(--status-previsto-text); }

/* -------- TABLES -------- */
.v-table-wrap{ padding:0 8px 8px; overflow-x:auto; }

.v-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13.5px;
}

.v-table thead th{
  text-align:left;
  padding:12px 14px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-soft);
  background:var(--panel-soft);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
}

.v-table tbody td{
  padding:13px 14px;
  font-weight:500;
  border-bottom:1px solid #edf2f7;
}

.v-table tbody tr:hover td{ background:#fbfdfb; }
.v-table tbody tr:last-child td{ border-bottom:none; }
.v-table .right{ text-align:right; }
.v-table .center{ text-align:center; }

/* -------- FORMS -------- */
.v-field{ display:flex; flex-direction:column; gap:6px; }

.v-label{
  font-size:12px;
  font-weight:700;
  color:var(--text-soft);
  letter-spacing:.02em;
}

.v-input,
.v-select,
.v-textarea{
  width:100%;
  height:40px;
  padding:0 12px;
  border-radius:11px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font:inherit;
  font-size:13.5px;
  transition:.15s ease;
  outline:none;
}

.v-textarea{ height:auto; min-height:84px; padding:10px 12px; resize:vertical; }

.v-input:focus,
.v-select:focus,
.v-textarea:focus{
  border-color:var(--green-2);
  box-shadow:0 0 0 3px rgba(22,163,74,.12);
}

.v-input::placeholder,
.v-textarea::placeholder{ color:var(--text-faint); }

.v-input[disabled],
.v-select[disabled]{ background:#f6f8f7; color:var(--text-faint); cursor:not-allowed; }

.v-hint{ font-size:11.5px; color:var(--text-faint); }
.v-hint-error{ font-size:11.5px; color:var(--danger); font-weight:600; }

/* -------- UTILITÁRIOS -------- */
.v-stack{ display:flex; flex-direction:column; gap:18px; }
.v-stack-sm{ display:flex; flex-direction:column; gap:10px; }
.v-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.v-row-end{ display:flex; align-items:center; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.v-grow{ flex:1 1 auto; min-width:0; }

/* -------- AUTH (telas sem shell) -------- */
.v-auth-page{
  padding:0 !important;
  min-height:100vh;
  display:grid;
  place-items:center;
}

.v-auth-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  padding:36px 32px;
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.v-auth-brand{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  margin-bottom:8px;
}

.v-auth-brand img{ height:48px; width:auto; }

.v-auth-card h1{
  margin:0;
  font-size:22px;
  font-weight:800;
  text-align:center;
  letter-spacing:-.02em;
}

.v-auth-card p{
  margin:0;
  text-align:center;
  font-size:13px;
  color:var(--text-soft);
}

/* =========================================================
   AUTH SHELL utilitário (formalizado em 25/05/2026)
   Estrutura padrão para telas sem sidebar:
   login, forgot, reset, registro, register, select-company,
   acesso-bloqueado, empresa, perfil.
   Usar SEMPRE estas classes em vez de redeclarar local.
   ========================================================= */

/* ── Topbar fixa ── */
.r-topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:88px; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(243,244,246,.92);
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 4px 16px rgba(15,23,42,.04);
  backdrop-filter:blur(14px);
}
.r-topbar-logo{ height:62px; width:auto; display:block; }

/* ── Área central — fixa entre topbar e footer ── */
.r-main{
  position:fixed;
  top:88px; left:0; right:0; bottom:44px;
  display:flex; align-items:center; justify-content:center;
  overflow-y:auto;
  padding:16px;
}

/* ── Card auth padrão ── */
.r-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  padding:24px 32px 22px;
  width:100%;
  max-width:560px;
}

/* Variante: dois ou mais cards lado a lado (empresa.html) */
.r-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  width:100%;
  max-width:1000px;
}

/* ── Cabeçalho do card auth ── */
.r-card-head{
  display:flex; align-items:center; gap:10px; margin-bottom:4px;
}
.r-card-icon{
  width:42px; height:42px; display:block; object-fit:contain; flex:0 0 auto;
}
.r-card-title{
  font-size:26px; font-weight:800; color:var(--green);
  letter-spacing:-.02em; margin:0;
}
.r-card-sub{
  font-size:12.5px; color:var(--text-soft); margin:0 0 14px;
}

/* Badge no canto direito do header */
.r-status-inline{ margin-left:auto; }

/* ── Separador de seção dentro do card ── */
.r-section-label{
  font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-faint);
  margin:14px 0 10px;
}

/* ── Grids 2 e 3 colunas ── */
.r-grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 14px;
}
.r-grid3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0 14px;
}

/* ── Inputs em card auth (compactos, 36px) ── */
.r-card .v-input,
.r-card .v-select{ height:36px; font-size:13px; }
.r-card .v-input::placeholder{ color:var(--text-faint); }

/* ── Espaçamento dos campos dentro do card ── */
.r-card .v-field{ margin-bottom:10px; }
.r-card .v-field:last-of-type{ margin-bottom:0; }

/* ── Linha de ações secundárias (ex: Trocar Empresa + Recarregar) ── */
.r-actions-row{
  display:flex; gap:10px; flex-wrap:wrap;
  margin:14px 0 10px;
}
.r-actions-row .v-btn{ flex:1; justify-content:center; }

/* ── Linha de ação centralizada (ex: Sair sozinho na 2a linha) ── */
.r-actions-bottom{
  display:flex; justify-content:center;
}
.r-actions-bottom .v-btn{
  flex:1; max-width:calc(50% - 5px);
  justify-content:center;
}

/* ── Mensagens de status (ok/warn/err/loading) ── */
.r-status{
  margin-top:10px;
  padding:10px 14px;
  border-radius:10px;
  font-size:12.5px;
  font-weight:500;
  border:1px solid var(--line);
  background:var(--panel-soft);
  color:var(--text-soft);
  display:none;
}
.r-status.show{ display:block; }
.r-status.ok  { background:var(--success-soft); border-color:var(--green-line); color:var(--green); }
.r-status.warn{ background:var(--warning-soft); border-color:var(--warning); color:var(--warning); }
.r-status.err { background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger); }

/* ── Erro inline (sob input, ex: cpf-error) ── */
.r-field-error{
  color:var(--danger);
  font-size:11px;
  display:block;
  min-height:14px;
  margin-top:2px;
}

/* ── Footer fixo auth ── */
.r-footer{
  position:fixed; bottom:0; left:0; right:0;
  height:44px;
  display:flex; align-items:center;
  padding:0 16px;
  font-size:11.5px; color:var(--text-soft);
  background:rgba(243,244,246,.88);
  border-top:1px solid var(--line-soft);
  backdrop-filter:blur(8px);
}

/* ── Responsivo unificado para auth ── */
@media (max-width:720px){
  .r-card{ padding:20px 18px; max-width:520px; }
  .r-card-title{ font-size:23px; }
  .r-grid3{ grid-template-columns:1fr 1fr; }
  .r-columns{ grid-template-columns:1fr; max-width:560px; }
}
@media (max-width:480px){
  .r-topbar{ padding:0 14px; }
  .r-card{ padding:18px 16px; }
  .r-card-title{ font-size:21px; }
  .r-grid2, .r-grid3{ grid-template-columns:1fr; }
}

/* =========================================================
   PÁGINAS AUXILIARES (não-auth, ex: perfil)
   Mesma estrutura visual de auth mas semanticamente diferente:
   o usuário JÁ está logado, é uma página pessoal.
   Reusa todas as classes .r-* acima.
   ========================================================= */

/* -------- RESPONSIVE -------- */
@media (max-width:1180px){
  .v-kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:920px){
  body{ padding-left:0; }
  body.sidebar-expanded{ padding-left:0; }
  .v-sidebar{
    transform:translateX(-100%);
    transition:transform .25s ease;
    width:280px;
  }
  body.sidebar-expanded .v-sidebar{
    transform:translateX(0);
    width:280px;
  }
  body.sidebar-expanded .v-brand-text,
  body.sidebar-expanded .v-menu-text,
  body.sidebar-expanded .v-menu-label{
    opacity:1;
    width:auto;
    pointer-events:auto;
  }
  .v-topbar{ padding:0 14px; }
  .v-brand-logo{ height:50px; }
  .v-content{ padding:14px; }
}

@media (max-width:640px){
  .v-kpi-grid{ grid-template-columns:1fr; }
  .v-topbar-center{ display:none; }
}

/* -------- DEPT CONTEXT CLASSES -------- */
.dept-diretoria  { --dept-color:#3b0764; --dept-soft:#ede9fe; --dept-line:#c4b5fd; }
.dept-comercial  { --dept-color:#2563eb; --dept-soft:#eff6ff; --dept-line:#bfdbfe; }
.dept-operacional{ --dept-color:#0c8a5a; --dept-soft:#d1fae5; --dept-line:#6ee7b7; }
.dept-adm        { --dept-color:#ea580c; --dept-soft:#fff7ed; --dept-line:#fed7aa; }

/* Herda cor dept no v-section-head */
.dept-diretoria  .v-section-head h3, .dept-diretoria  .v-section-head h4,
.dept-comercial  .v-section-head h3, .dept-comercial  .v-section-head h4,
.dept-operacional .v-section-head h3, .dept-operacional .v-section-head h4,
.dept-adm        .v-section-head h3, .dept-adm        .v-section-head h4 {
  color:var(--dept-color);
}

/* Chip ativo com cor do dept */
.dept-diretoria  .v-chip.active,
.dept-comercial  .v-chip.active,
.dept-operacional .v-chip.active,
.dept-adm        .v-chip.active {
  background:var(--dept-soft);
  border-color:var(--dept-line);
  color:var(--dept-color);
}

/* -------- PAGE HEADER -------- */
.v-page-header{
  padding:16px 22px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  border-left:4px solid var(--dept-color, var(--green));
  border-radius:0 var(--radius-md) var(--radius-md) 0;
}

.v-page-dept{
  margin:0;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--dept-color, var(--green));
}

.v-page-title{
  margin:3px 0 0;
  font-size:21px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--text);
  line-height:1.1;
}

.v-page-sub{
  margin:4px 0 0;
  font-size:12.5px;
  color:var(--text-soft);
}

/* -------- FILTER BAR -------- */
.v-filter-bar{
  padding:0 22px 14px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.v-search-wrap{
  position:relative;
  flex:0 0 auto;
}

.v-search-wrap svg{
  position:absolute;
  left:11px;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  stroke:var(--text-faint);
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.v-search{
  height:36px;
  padding:0 12px 0 34px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font:inherit;
  font-size:13px;
  outline:none;
  transition:.15s ease;
  min-width:200px;
}

.v-search:focus{
  border-color:var(--green-2);
  box-shadow:0 0 0 3px rgba(22,163,74,.12);
}

.v-search::placeholder{ color:var(--text-faint); }

/* -------- EMPTY STATE -------- */
.v-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px 24px;
  gap:12px;
  text-align:center;
}

.v-empty-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  background:var(--dept-soft, var(--green-softer));
  display:grid;
  place-items:center;
  color:var(--dept-color, var(--green));
}

.v-empty-icon svg{
  width:26px;
  height:26px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.v-empty-title{
  margin:0;
  font-size:15px;
  font-weight:800;
  color:var(--text);
  letter-spacing:-.01em;
}

.v-empty-sub{
  margin:0;
  font-size:13px;
  color:var(--text-soft);
  max-width:280px;
  line-height:1.5;
}

/* -------- MODAL / DIALOG -------- */
.v-modal-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(15,23,42,.46);
  backdrop-filter:blur(4px);
  display:none;
  place-items:center;
  padding:20px;
}
/* Abrir via JS: modal.style.display='grid'  ou  modal.classList.add('show') */
.v-modal-overlay.show{ display:grid !important; }

.v-modal{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:0 32px 64px rgba(15,23,42,.18);
  width:100%;
  max-width:480px;
  max-height:90vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}

.v-modal-lg{ max-width:680px; }

.v-modal-head{
  padding:20px 24px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line-soft);
}

/* Cabeçalho de modal Vanda — padrão obrigatório (formalizado em 25/05/2026) */
.v-modal-title-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.v-modal-icon{
  width:32px;
  height:32px;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
}
.v-modal-head h3{
  margin:0;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--green);
}

.v-modal-body{
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}

.v-modal-foot{
  padding:14px 24px 20px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid var(--line-soft);
}

/* -------- SKELETON / LOADING -------- */
@keyframes v-shimmer{
  0%  { background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

.v-skeleton{
  background:linear-gradient(90deg,#eef2f0 25%,#f4f7f5 50%,#eef2f0 75%);
  background-size:200% 100%;
  animation:v-shimmer 1.6s ease-in-out infinite;
  border-radius:var(--radius-xs);
}

.v-skeleton-line{ height:14px; width:100%; }
.v-skeleton-line.w60{ width:60%; }
.v-skeleton-line.w40{ width:40%; }
.v-skeleton-line.h24{ height:24px; }
.v-skeleton-box{ height:80px; width:100%; }

/* =========================================================
   EXTENSÕES DO DESIGN SYSTEM — v2026.05.25-E (25/05/2026)
   Paleta expandida de status (10 cores), chips coloridos,
   KPIs com destaque, botão purple, tabs, gap padrão topbar.
   ========================================================= */

/* ── Status expandidos (5 novos: blue, purple, orange, cyan, rose) ── */
.v-status-blue   { background:#dbeafe; color:#1e40af; }   /* Em renovação, Dobra */
.v-status-purple { background:#ede9fe; color:#5b21b6; }   /* Substituição, Especial */
.v-status-orange { background:#ffedd5; color:#9a3412; }   /* Atenção forte */
.v-status-cyan   { background:#cffafe; color:#155e75; }   /* Sincronizando, Automático */
.v-status-rose   { background:#ffe4e6; color:#9f1239; }   /* Atestado, Estornado, Parcial */

/* Variante outline (só borda colorida, sem fundo — para listagens densas) */
.v-status-outline{
  background:transparent;
  border:1px solid currentColor;
}
.v-status-ok.v-status-outline      { color:var(--green); border-color:var(--green-line); }
.v-status-warn.v-status-outline    { color:var(--warning); border-color:#fde68a; }
.v-status-danger.v-status-outline  { color:var(--danger); border-color:var(--danger-line); }
.v-status-info.v-status-outline    { color:var(--info); border-color:#99f6e4; }
.v-status-neutral.v-status-outline { color:var(--text-soft); border-color:var(--line); }
.v-status-blue.v-status-outline    { color:#1e40af; border-color:#bfdbfe; }
.v-status-purple.v-status-outline  { color:#5b21b6; border-color:#c4b5fd; }
.v-status-orange.v-status-outline  { color:#9a3412; border-color:#fed7aa; }
.v-status-cyan.v-status-outline    { color:#155e75; border-color:#a5f3fc; }
.v-status-rose.v-status-outline    { color:#9f1239; border-color:#fecdd3; }

/* ── Chips coloridos (paralelo a status, para filtros) ── */
/* .v-chip padrão já existe (cinza). Estado active herda dept-* automaticamente. */
.v-chip-ok      { background:var(--success-soft);  color:var(--green);  border-color:var(--green-line); }
.v-chip-warn    { background:var(--warning-soft);  color:#9a3412;       border-color:#fde68a; }
.v-chip-danger  { background:var(--danger-soft);   color:var(--danger); border-color:var(--danger-line); }
.v-chip-blue    { background:#dbeafe;              color:#1e40af;       border-color:#bfdbfe; }
.v-chip-purple  { background:#ede9fe;              color:#5b21b6;       border-color:#c4b5fd; }
.v-chip-cyan    { background:#cffafe;              color:#155e75;       border-color:#a5f3fc; }
.v-chip-rose    { background:#ffe4e6;              color:#9f1239;       border-color:#fecdd3; }
.v-chip-orange  { background:#ffedd5;              color:#9a3412;       border-color:#fed7aa; }

/* Estado active reforça com tom mais saturado */
.v-chip-ok.active,
.v-chip-warn.active,
.v-chip-danger.active,
.v-chip-blue.active,
.v-chip-purple.active,
.v-chip-cyan.active,
.v-chip-rose.active,
.v-chip-orange.active {
  filter:brightness(.96);
  border-width:1.5px;
  font-weight:800;
}

/* ── KPI modifiers (destaque por cor da métrica) ── */
.v-kpi-success { border-left:4px solid var(--green); }
.v-kpi-success .v-kpi-label { color:var(--green); }
.v-kpi-success .v-kpi-value { color:var(--green); }

.v-kpi-warn { border-left:4px solid var(--warning); }
.v-kpi-warn .v-kpi-label { color:var(--warning); }
.v-kpi-warn .v-kpi-value { color:var(--warning); }

.v-kpi-danger { border-left:4px solid var(--danger); }
.v-kpi-danger .v-kpi-label { color:var(--danger); }
.v-kpi-danger .v-kpi-value { color:var(--danger); }

.v-kpi-info { border-left:4px solid var(--info); }
.v-kpi-info .v-kpi-label { color:var(--info); }
.v-kpi-info .v-kpi-value { color:var(--info); }

.v-kpi-blue { border-left:4px solid #2563eb; }
.v-kpi-blue .v-kpi-label { color:#1e40af; }
.v-kpi-blue .v-kpi-value { color:#1e40af; }

.v-kpi-purple { border-left:4px solid var(--accent-purple); }
.v-kpi-purple .v-kpi-label { color:#5b21b6; }
.v-kpi-purple .v-kpi-value { color:#5b21b6; }

/* ── KPI preenchido — par previsto (caixa sólida em gradiente) / realizado (caixa clara), mesmo matiz ──
   Diferente de .v-kpi-success/-warn/-danger/-info/-blue (que só colorem borda+texto e já
   são usados em outras telas): aqui a cor preenche a caixa inteira. Uso: pares
   previsto x realizado do mesmo indicador (ex.: financeiro.html, Resumo do Mês).
   Versão compacta: padding e fonte do valor menores que o `.v-kpi` padrão. */
.v-kpi-fill-green, .v-kpi-fill-green-soft,
.v-kpi-fill-orange, .v-kpi-fill-orange-soft,
.v-kpi-fill-blue, .v-kpi-fill-blue-soft {
  padding:12px 14px;
  gap:3px;
}
.v-kpi-fill-green .v-kpi-value, .v-kpi-fill-green-soft .v-kpi-value,
.v-kpi-fill-orange .v-kpi-value, .v-kpi-fill-orange-soft .v-kpi-value,
.v-kpi-fill-blue .v-kpi-value, .v-kpi-fill-blue-soft .v-kpi-value {
  font-size:20px;
}

.v-kpi-fill-green { background:linear-gradient(135deg, var(--green), var(--green-2)); border-color:var(--green); }
.v-kpi-fill-green .v-kpi-label { color:rgba(255,255,255,.82); }
.v-kpi-fill-green .v-kpi-value { color:#fff; }

.v-kpi-fill-green-soft { background:var(--green-soft); border-color:var(--green-line); }
.v-kpi-fill-green-soft .v-kpi-label { color:var(--green); }
.v-kpi-fill-green-soft .v-kpi-value { color:var(--green); }

.v-kpi-fill-orange { background:linear-gradient(135deg, var(--accent-orange), var(--accent-orange-2)); border-color:var(--accent-orange); }
.v-kpi-fill-orange .v-kpi-label { color:rgba(255,255,255,.82); }
.v-kpi-fill-orange .v-kpi-value { color:#fff; }

.v-kpi-fill-orange-soft { background:var(--accent-orange-soft); border-color:#fed7aa; }
.v-kpi-fill-orange-soft .v-kpi-label { color:var(--accent-orange); }
.v-kpi-fill-orange-soft .v-kpi-value { color:var(--accent-orange); }

.v-kpi-fill-blue { background:linear-gradient(135deg, var(--accent-blue), var(--accent-blue-2)); border-color:var(--accent-blue); }
.v-kpi-fill-blue .v-kpi-label { color:rgba(255,255,255,.82); }
.v-kpi-fill-blue .v-kpi-value { color:#fff; }

.v-kpi-fill-blue-soft { background:var(--accent-blue-soft); border-color:#bfdbfe; }
.v-kpi-fill-blue-soft .v-kpi-label { color:var(--accent-blue); }
.v-kpi-fill-blue-soft .v-kpi-value { color:var(--accent-blue); }

/* ── Botão Purple (ação especial — para ações como "Permissões", "Aprovar") ── */
.v-btn-purple,
.v-btn-purple:hover,
.v-btn-purple:focus,
.v-btn-purple:active {
  background:linear-gradient(135deg, #7c3aed, #5b21b6);
  color:#fff;
  border-color:transparent;
}
.v-btn-purple:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(124,58,237,.30);
}

/* ── Tabs (navegação por abas) ── */
.v-tabs{
  display:flex;
  flex-direction:column;
  width:100%;
}
.v-tabs-nav{
  display:flex;
  gap:0;
  border-bottom:2px solid var(--line);
  padding:0 22px;
  overflow-x:auto;
  scrollbar-width:none;
}
.v-tabs-nav::-webkit-scrollbar { display:none; }

.v-tab-item{
  position:relative;
  background:transparent;
  border:none;
  padding:12px 16px;
  font:inherit;
  font-size:13.5px;
  font-weight:600;
  color:var(--text-soft);
  cursor:pointer;
  transition:.15s ease;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
}
.v-tab-item:hover{
  color:var(--text);
  background:rgba(15,61,52,.04);
}
.v-tab-item.active{
  color:var(--green);
  font-weight:800;
  border-bottom-color:var(--green);
}
.v-tab-item[disabled]{
  opacity:.5;
  cursor:not-allowed;
}

.v-tabs-content{
  padding:18px 22px;
}
.v-tab-panel{ display:none; }
.v-tab-panel.active{ display:block; }

/* ── Tabs em pílula (troca de seção de página — diferente de .v-tabs, que é aba dentro de card) ──
   Uso: navegação de topo entre seções inteiras de uma tela (ex.: Contas a Pagar / Recorrências /
   Dashboard / Contas Bancárias, ou Equipe / Escalas do Mês / Ocorrências / Extras / Carteiras de
   Supervisão). Cada pílula tem cor própria (mesma nas duas variantes ativa/inativa — não inverte
   fundo/texto, decisão da Cássia em 14/07/2026); só a espessura da borda muda quando ativa. */
.v-tab-pills{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.v-tab-pill{
  padding:6px 16px;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--panel);
  font-family:var(--font-base);
  font-size:13px;
  font-weight:600;
  line-height:normal;
  color:var(--text-soft);
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,border-width .15s;
}
.v-tab-pill.active{
  border-width:2px;
  padding:5px 15px;
  font-weight:800;
}

.v-tab-pill-green{ border-color:var(--green); color:var(--green); }
.v-tab-pill-green:hover:not(.active){ background:var(--green-softer); }

.v-tab-pill-blue{ border-color:#2563eb; color:#2563eb; }
.v-tab-pill-blue:hover:not(.active){ background:#eff6ff; }

.v-tab-pill-purple{ border-color:#3b0764; color:#3b0764; }
.v-tab-pill-purple:hover:not(.active){ background:#ede9fe; }

.v-tab-pill-orange{ border-color:#ea580c; color:#ea580c; }
.v-tab-pill-orange:hover:not(.active){ background:#fff7ed; }

.v-tab-pill-cyan{ border-color:#155e75; color:#155e75; }
.v-tab-pill-cyan:hover:not(.active){ background:#cffafe; }

/* ── Page top gap (distância padrão entre topbar e primeiro card) ── */
.v-content{
  padding-top:var(--page-top-gap, 18px);
}

/* ────────────────────────────────────────────────────────────
   MONTH-MARK — marcas de ocorrência na tabela de Escalas do Mês
   Círculo 26×26px com sigla abreviada. Usado em movimentacao.html.
   Cada classe cobre um tipo ou grupo de tipos de ocorrência.
   ──────────────────────────────────────────────────────────── */
.monthMark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--line);
}

/* T — Trabalho previsto/normal */
.monthMarkT       { background: #16a34a; color: #fff; border-color: #16a34a; }

/* F — Folga prevista/normal */
.monthMarkF       { background: #64748b; color: #fff; border-color: #64748b; }

/* FX — Folga extra (concedida: presente/banco de horas) */
.monthMarkFX      { background: #65a30d; color: #fff; border-color: #65a30d; }

/* FE — Falta de efetivo (vaga sem funcionário) */
.monthMarkFE      { background: #facc15; color: #111827; border-color: #facc15; }

/* FJ — Falta justificada (atestado, licença prevista) */
.monthMarkFJ      { background: #dc2626; color: #fff; border-color: #dc2626; }

/* FI — Falta injustificada (ausência sem justificativa) */
.monthMarkFI      { background: #7f1d1d; color: #fff; border-color: #7f1d1d; }

/* AF — Afastamento sem cobertura no momento */
.monthMarkAF      { background: #be185d; color: #fff; border-color: #be185d; }

/* CO — Cobertura operacional */
.monthMarkCO      { background: #2563eb; color: #fff; border-color: #2563eb; }

/* CFE — Cobertura por falta de efetivo (cobre a vaga) */
.monthMarkCFE     { background: #a21caf; color: #fff; border-color: #a21caf; }

/* CE — Cobertura extra */
.monthMarkCE      { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* CT — Treinamento */
.monthMarkCT      { background: #0891b2; color: #fff; border-color: #0891b2; }

/* SB — Substituição */
.monthMarkSB      { background: #0369a1; color: #fff; border-color: #0369a1; }

/* AR — Atraso */
.monthMarkAR      { background: #b45309; color: #fff; border-color: #b45309; }

/* SA — Saída antecipada */
.monthMarkSA      { background: #ea580c; color: #fff; border-color: #ea580c; }

/* DB — Dobra (turno extra, dupla jornada) */
.monthMarkDB      { background: #0d9488; color: #fff; border-color: #0d9488; }

/* RM — Remanejamento */
.monthMarkRM      { background: #4338ca; color: #fff; border-color: #4338ca; }

/* PD — Pendente (reservado) */
.monthMarkPD      { background: #92400e; color: #fff; border-color: #92400e; }

/* Special — fallback para siglas sem mapeamento específico */
.monthMarkSpecial { background: #374151; color: #fff; border-color: #374151; }

/* MONTH-CELL OVERLAY BADGES — círculos secundários 16px que aparecem ao lado do monthMark principal.
   Gerados por monthCellCoverageBadge() no movimentacao.js.
   Mesmas cores dos monthMark correspondentes para manter coerência visual. */
.monthCoBadge,
.monthCeBadge,
.monthCtBadge,
.monthPdBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 7px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  vertical-align: middle;
}
.monthCoBadge { background: #2563eb; } /* mesma cor de monthMarkCO */
.monthCeBadge { background: #7c3aed; } /* mesma cor de monthMarkCE */
.monthCtBadge { background: #0891b2; } /* mesma cor de monthMarkCT */
.monthPdBadge { background: #b45309; } /* âmbar — alerta de posto descoberto */

/* -------- SCROLLBAR -------- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:rgba(15,61,52,.18);
  border-radius:6px;
}
*::-webkit-scrollbar-thumb:hover{ background:rgba(15,61,52,.30); }