:root,
[data-theme="light"] {
  --bg-canvas: #E3E7EF;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #DBDFE8;
  --text-primary: #161A2B;
  --text-secondary: #5B6072;
  --text-inverse: #FFFFFF;
  --border-default: #D2D6E2;
  --brand-navy: #28345C;
  --brand-navy-hover: #1E2847;
  --sidebar-bg: #111A2E;
  --sidebar-bg-top: #0B1220;
  --sidebar-text: #FFFFFF;
  /* Acento fixo (não varia por tema) pro cromo do admin — a sidebar é
     sempre escura mesmo no tema claro, então usar --brand-navy (que troca
     de valor por tema) pro "ativo" ali ficaria ilegível no tema claro,
     onde --brand-navy vira um azul-marinho escuro demais pra ler em cima
     de um fundo já escuro. */
  --sidebar-accent: #7C93F0;
  --brand-gold: #9C7A12;
  --brand-gold-soft: #C9A227;
  --semantic-success: #1E7A4C;
  --semantic-warning: #B45309;
  --semantic-warning-bg: #FCEFE0;
  --semantic-danger: #B3261E;
  --action-primary: var(--brand-navy);
  --action-primary-hover: var(--brand-navy-hover);
  --border-hover: #C7CBD9;

  /* Rampa de elevação: cards em repouso usam --shadow-xs (sombra bem sutil,
     só pra separar do fundo) + hairline border; elevação de verdade (dropdown,
     modal, hover de algo clicável) usa --shadow-sm/md pra cima. */
  --shadow-xs: 0 1px 2px rgba(22, 26, 43, 0.04);
  --shadow-sm: 0 1px 3px rgba(22, 26, 43, 0.06), 0 1px 2px rgba(22, 26, 43, 0.04);
  --shadow-md: 0 8px 24px rgba(22, 26, 43, 0.10), 0 2px 6px rgba(22, 26, 43, 0.05);
  --shadow-lg: 0 16px 40px rgba(22, 26, 43, 0.14), 0 4px 12px rgba(22, 26, 43, 0.06);

  /* 3 radii + círculo — nunca um 4º valor solto (chega de 9/10/12/16/18px espalhados) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ---------- Escala tipográfica (8 passos) ----------
     Regra: nenhum font-size no resto do arquivo deve ser um valor fora
     desta lista (nada de 9.5px/11.5px/12.5px soltos). */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 34px;

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 800;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  /* ---------- Escala de espaçamento ----------
     Regra: no máximo 2 paddings de card no sistema (space-6 pra card
     "principal", space-4 pra card "denso/aninhado") — nunca um 3º valor. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
}

[data-theme="dark"] {
  --bg-canvas: #0E1118;
  --bg-surface: #171B27;
  --bg-surface-elevated: #1F2433;
  --text-primary: #EDEFF5;
  --text-secondary: #9BA1B6;
  --text-inverse: #0E1118;
  --border-default: #2A2F40;
  --brand-navy: #5B72D6;
  --brand-navy-hover: #7488E0;
  --brand-gold: #D4AF37;
  --brand-gold-soft: #E8C766;
  --semantic-success: #3FB87F;
  /* Antes quase idêntico ao brand-gold (#D4AF37) — os dois lados a lados
     liam como "tudo amarelo". Puxado mais pro laranja pra ficar claramente
     um alerta, não a cor da marca. */
  --semantic-warning: #E2984A;
  --semantic-warning-bg: #2E2012;
  --semantic-danger: #F2545B;
  --action-primary: var(--brand-gold);
  --action-primary-hover: var(--brand-gold-soft);
  --border-hover: #3A4058;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Fundo levemente variado (não chapado) — bem sutil de propósito, só
     pra dar profundidade sem competir com o conteúdo. */
  background:
    radial-gradient(ellipse at 15% -10%, color-mix(in srgb, var(--brand-navy) 7%, transparent), transparent 55%),
    var(--bg-canvas);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, sans-serif;
  transition: background 0.2s ease, color 0.2s ease;
}

a { text-decoration: none; color: inherit; }

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Navegação (páginas novas do cliente): sidebar fixa no
   desktop/tablet, vira barra inferior fixa no mobile — ver renderNav() em
   app.js. .app-body é o wrapper novo abaixo da topbar contendo [sidebar][main]. ---------- */
.app-body { display: flex; flex: 1; min-height: 0; }

.nav-sidebar {
  width: 220px;
  flex-shrink: 0;
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-right: 1px solid var(--border-default);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
}
.nav-item:hover { background: var(--bg-surface-elevated); color: var(--text-primary); }
.nav-item.active { background: var(--bg-surface-elevated); color: var(--brand-navy); font-weight: var(--font-semibold); }
.nav-item-icon { display: flex; flex-shrink: 0; }
.nav-item-icon .icon { width: 18px; height: 18px; }

.nav-bottom { display: none; }
.nav-bottom-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) 0;
  color: var(--text-secondary);
  font-size: var(--text-2xs);
}
.nav-bottom-item.active { color: var(--brand-navy); }
.nav-bottom-icon .icon { width: 20px; height: 20px; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Logo é PNG com fundo transparente de verdade — o "T" é navy sólido, que
   fica invisível sobre fundo escuro (sidebar, tema escuro, cabeçalho navy
   do PDF). logo-glyph-dark.png é a mesma logo com só o T recolorido pra
   branco (o dourado do gráfico continua dourado); troca automática por
   tema, sem precisar mexer em nenhum HTML que já usa logo-glyph.png. */
[data-theme="dark"] img[src$="logo-glyph.png"] {
  content: url("../img/logo-glyph-dark.png");
}
/* A sidebar do admin é sempre navy escuro, mesmo no tema claro — não dá
   pra depender só do data-theme aqui, ou o T some quando o app inteiro
   está no tema claro mas a sidebar continua escura. */
.admin-sidebar-header img[src$="logo-glyph.png"] {
  content: url("../img/logo-glyph-dark.png");
}

.brand-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.4px;
}

.brand-sub {
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.theme-toggle {
  border: 1px solid var(--border-default);
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  border-radius: 100px;
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-toggle:hover { border-color: var(--brand-gold-soft); }

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.avatar-ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-elevated);
  border: 2px solid var(--brand-navy);
  padding: 3px;
}
.avatar-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--brand-navy);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Campo de foto/logo: avatar + ação, lado a lado — comunica "isso é upload de imagem" */
.avatar-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: 22px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.avatar-field:hover { border-color: var(--brand-navy); background: var(--bg-surface-elevated); }
.avatar-thumb { position: relative; flex-shrink: 0; }
.avatar-field .avatar-ring { width: 52px; height: 52px; margin: 0; flex-shrink: 0; }
.avatar-field .avatar-ring-inner { font-size: 16px; }
.avatar-field .avatar-ring-inner .icon { width: 20px; height: 20px; color: var(--text-secondary); }

.avatar-upload-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #FFFFFF;
  border: 2px solid var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-upload-badge .icon { width: 10px; height: 10px; }

.avatar-field-info p { margin: 0 0 3px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.avatar-field-info span { font-size: 11.5px; color: var(--text-secondary); }

/* Seletor Pessoa Física / Jurídica no cadastro de cliente — controle
   segmentado (trilho cinza + "pill" ativo elevado), não dois botões soltos. */
.tipo-pessoa-toggle, .segmented-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}
.tipo-pessoa-option, .segmented-option {
  flex: 1;
  padding: 9px 14px;
  border-radius: calc(var(--radius-md) - 3px);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.tipo-pessoa-option:hover:not(.active), .segmented-option:hover:not(.active) { color: var(--text-primary); }
.tipo-pessoa-option.active, .segmented-option.active { background: var(--bg-surface); color: var(--brand-navy); box-shadow: var(--shadow-sm); }

.tag-optional {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: 100px;
  padding: 1px 7px;
}

/* Agrupamento de campos em seções com respiro próprio (evita "blocos soltos") */
.form-section { margin-bottom: 22px; }
.form-section:last-child { margin-bottom: 0; }

.form-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 14px;
}
.form-section + .form-section {
  padding-top: 20px;
  border-top: 1px solid var(--border-default);
}

.modal-icon-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.modal-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand-navy);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Mesmo friso interno claro dos chips (.stat-icon-chip/.cat-icon/.doc-icon)
     — aqui fixo em branco porque o fundo é sempre uma cor sólida saturada
     (navy/danger/etc via style inline), não a superfície do tema. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.12);
}
.modal-icon-badge .icon { width: 18px; height: 18px; }

/* ---------- Layout ---------- */
.main {
  flex: 1;
  padding: 40px 32px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
/* Painel administrativo usa mais largura de tela que as páginas do cliente
   (mais colunas de dado por tela — tabela de clientes/documentos, não um
   formulário) — mesmo container, só mais largo. */
.main.admin-main { max-width: 1600px; }

.page-header { margin-bottom: 28px; }
/* Pedido explícito: tirar todo o "fixado" da página — o cabeçalho global
   (e o resto da pilha sticky do Financeiro/Detalhe do cliente) volta a
   rolar normal junto com o resto do conteúdo, sem grudar no topo. */
#admin-page-header { position: static; }

.page-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px;
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--brand-navy);
  text-transform: uppercase;
  margin: 0 0 8px;
}

/* ---------- Login ---------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-canvas);
  position: relative;
  overflow: hidden;
}

/* Textura de fundo: grade discreta de pontos + um leve véu de navy vindo do
   topo, os dois esmaecendo pra fora do centro via mask — no lugar dos blobs
   desfocados antigos, que são um "tell" de template genérico tão comum
   quanto o próprio card sem graça que eles tentavam disfarçar. */
.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand-navy) 10%, transparent), transparent 60%),
    radial-gradient(var(--border-default) 1px, transparent 1px);
  background-size: auto, 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black, transparent 80%);
  pointer-events: none;
}

.login-graphic {
  position: relative;
  z-index: 1;
}

.login-card {
  width: 380px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-lg);
}

.login-card .btn-primary { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.login-card .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.login-logo .brand-mark { width: 76px; height: 76px; }

.login-logo .brand-name { font-size: var(--text-md); font-weight: var(--font-bold); letter-spacing: var(--tracking-tight); text-align: center; }
.login-logo .brand-sub {
  text-align: center;
  color: var(--brand-gold);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
}

/* ---------- Login: fundo atmosférico + cartão de vidro ----------
   Usado só nas duas telas de entrada de verdade (index.html / admin-login.html)
   — as telas auxiliares (esqueci-senha, redefinir-senha, primeiro-acesso)
   continuam no .login-screen/.login-card de coluna única, sem risco de
   quebrar layout que já funciona. Fundo sempre escuro, nos dois temas —
   é identidade de marca, não superfície de app. */
.auth-atmosphere {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #12172B;
  overflow: hidden;
}

.auth-atmosphere::before,
.auth-atmosphere::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.auth-atmosphere::before {
  width: 560px;
  height: 560px;
  top: -180px;
  left: -120px;
  background: radial-gradient(circle, #3B4A87 0%, transparent 70%);
}
.auth-atmosphere::after {
  width: 480px;
  height: 480px;
  bottom: -200px;
  right: -140px;
  background: radial-gradient(circle, #7A5A14 0%, transparent 70%);
  opacity: 0.5;
}

.auth-glass-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 44px 40px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.auth-glass-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}
.auth-glass-logo .brand-mark { width: 68px; height: 68px; }
.auth-glass-logo .brand-name { font-size: 15px; font-weight: var(--font-bold); color: #fff; }
.auth-glass-logo .brand-sub {
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  color: #E8C766;
  text-transform: uppercase;
}

.auth-glass-card .field label { color: rgba(244, 241, 232, 0.75); }
.auth-glass-card .field input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.auth-glass-card .field input::placeholder { color: rgba(244, 241, 232, 0.4); }
.auth-glass-card .field input:focus {
  border-color: #E8C766;
  box-shadow: 0 0 0 3px rgba(232, 199, 102, 0.18);
}
/* O autofill do navegador (Chrome etc.) ignora background/color normais e
   pinta o campo de branco sólido com texto preto — nesse cartão escuro isso
   sumia com o botão de "ver senha" (ícone claro em cima de branco). Força o
   autofill a manter a mesma aparência de vidro escuro. */
.auth-glass-card .field input:-webkit-autofill,
.auth-glass-card .field input:-webkit-autofill:hover,
.auth-glass-card .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(40, 46, 74, 0.9) inset;
  box-shadow: 0 0 0 1000px rgba(40, 46, 74, 0.9) inset;
  transition: background-color 5000s ease-in-out 0s;
}
.auth-glass-card .password-toggle-btn { color: rgba(244, 241, 232, 0.6); }
.auth-glass-card .password-toggle-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.auth-glass-card .btn-primary { background: #E8C766; color: #1F2A4D; }
.auth-glass-card .btn-primary:hover:not(:disabled) { background: #D4AF37; }
.auth-glass-card .login-footnote { color: rgba(244, 241, 232, 0.6); }
.auth-glass-card .login-footnote a { color: #E8C766; }

@media (max-width: 480px) {
  .auth-glass-card { padding: 32px 24px; }
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.field input,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.field input,
.field textarea,
.select-like {
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.field-error {
  color: var(--semantic-danger);
  font-size: 12px;
  margin: -10px 0 14px;
  display: none;
}
/* Mostrar/ocultar senha — wrapper próprio (não position:relative direto em
   .field, que é usado em campos sem senha nenhuma por toda a aplicação) só
   pra não vazar esse posicionamento pra outros campos. */
.password-field-wrap { position: relative; }
.password-field-wrap input { padding-right: 42px; }
.password-toggle-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
}
.password-toggle-btn:hover { color: var(--text-primary); background: var(--bg-surface-elevated); }
.password-toggle-btn:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 1px; }
.password-toggle-btn .icon { width: 18px; height: 18px; }
.field-error.show { display: block; }
.field input:focus,
.field textarea:focus,
.select-like:focus {
  outline: none;
  border-color: var(--brand-navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-navy) 16%, transparent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-primary {
  background: var(--action-primary);
  color: var(--text-inverse);
}

.btn-primary:hover { background: var(--action-primary-hover); }

.login-card .btn-primary,
.auth-glass-card .btn-primary { width: 100%; }

.btn-secondary {
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

.btn-secondary:hover { border-color: var(--brand-gold-soft); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 12px;
}

.login-footnote {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-5);
  line-height: var(--leading-normal);
}
.login-footnote a { color: var(--brand-navy); font-weight: var(--font-medium); }

/* ---------- Category cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.cat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 22px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
  position: relative;
}

.cat-card:hover {
  border-color: var(--brand-gold-soft);
  transform: translateY(-2px);
}

.cat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 14px;
  color: var(--brand-navy);
}

.cat-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.cat-meta { font-size: 12px; color: var(--text-secondary); margin: 0; }

.cat-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--semantic-warning-bg);
  color: var(--semantic-warning);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
}

/* Hero section: boletos com destaque */
.category-section-hero {
  margin-bottom: 40px;
}

.card-grid-hero {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.cat-card-hero {
  padding: 28px;
  border-width: 2px;
  border-color: var(--brand-navy);
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-elevated) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cat-card-hero:hover {
  border-color: var(--brand-gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

/* Seção de arquivo: outros documentos */
.category-section-archive {
  margin-top: 48px;
  opacity: 0.95;
}

.section-label-secondary {
  color: var(--text-secondary);
  font-size: 13px;
  letter-spacing: 0.5px;
}

.card-grid-archive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.cat-card-archive {
  padding: 16px;
  background: var(--bg-surface);
  border-color: var(--border-default);
  box-shadow: none;
}

.cat-card-archive:hover {
  border-color: var(--text-secondary);
  transform: translateY(-1px);
}

.cat-card-archive .cat-icon {
  width: 32px;
  height: 32px;
  font-size: 14px;
  margin-bottom: 10px;
  opacity: 0.7;
}

.cat-card-archive .cat-title {
  font-size: 13px;
  margin-bottom: 2px;
}

/* ---------- Document list ---------- */
.doc-list { display: flex; flex-direction: column; gap: 10px; }

.doc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}

.doc-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.doc-info { flex: 1; min-width: 0; }
.doc-name { font-size: 14px; font-weight: 600; margin: 0 0 3px; }
.doc-meta { font-size: 12px; color: var(--text-secondary); margin: 0; }

.due-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
.due-tag.warning { background: var(--semantic-warning-bg); color: var(--semantic-warning); }
.due-tag.ok { background: var(--bg-surface-elevated); color: var(--semantic-success); }
.due-tag.danger { background: color-mix(in srgb, var(--semantic-danger) 15%, var(--bg-surface)); color: var(--semantic-danger); }
.due-tag.neutral { background: var(--bg-surface-elevated); color: var(--text-secondary); }

/* ---------- Badge único (páginas novas do cliente) ----------
   4 variantes só — mapeia 1:1 com o "cls" que statusBoleto() (app.js) já
   retorna (ok/warning/danger/neutral). Não mexe em .due-tag/.status-badge
   (usados pelo admin.html, fora de escopo desta rodada) — componente novo,
   paralelo, pras páginas novas. */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.02em;
  padding: var(--space-1) var(--space-2);
  border-radius: 100px;
  white-space: nowrap;
  line-height: 1;
}
.badge.ok { background: color-mix(in srgb, var(--semantic-success) 12%, var(--bg-surface)); color: var(--semantic-success); }
.badge.warning { background: var(--semantic-warning-bg); color: var(--semantic-warning); }
.badge.danger { background: color-mix(in srgb, var(--semantic-danger) 12%, var(--bg-surface)); color: var(--semantic-danger); }
.badge.neutral { background: var(--bg-surface-elevated); color: var(--text-secondary); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 18px;
  cursor: pointer;
}
.back-link:hover { color: var(--brand-navy); }

/* ---------- Admin table ---------- */
.table-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;
}

/* Pedido explícito: tirar todo o "fixado" da página — sem nada sticky
   aqui dentro, .table-card volta a usar o overflow-x:auto padrão (scroll
   horizontal normal em telas estreitas), como qualquer outra tabela. */
#tab-financeiro .table-scroll-wrap thead th {
  position: static;
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-default);
}
.table-pagination:empty { display: none; }
.pagination-info { font-size: 12.5px; color: var(--text-secondary); }
.pagination-controls { display: flex; align-items: center; gap: 10px; }
.pagination-page { font-size: 12.5px; color: var(--text-secondary); min-width: 40px; text-align: center; }
.pagination-prev:disabled, .pagination-next:disabled { opacity: 0.4; cursor: not-allowed; }

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 16px 20px; font-size: 13px; vertical-align: middle; }
th {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: var(--bg-surface-elevated);
  padding-top: 13px;
  padding-bottom: 13px;
  white-space: nowrap;
}
table.table-clients th { white-space: normal; }
table.table-clients td:last-child { white-space: nowrap; width: 1%; }
tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border-default); }
tbody tr.row-clickable { cursor: pointer; transition: background 0.12s ease; }
tbody tr.row-clickable:hover { background: var(--bg-surface-elevated); }
.client-link { cursor: pointer; font-weight: 600; color: var(--text-primary); }
.client-link:hover { color: var(--brand-navy); text-decoration: underline; }
[data-theme="dark"] .client-link:hover { color: var(--brand-gold); }

.client-cell { display: flex; align-items: center; gap: 12px; }
.client-cell .avatar { width: 34px; height: 34px; font-size: 13px; flex-shrink: 0; }
.client-doc { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }

/* Hierarquia tipográfica: e-mail é dado auxiliar, não compete com o nome do cliente */
table.table-clients td { color: var(--text-secondary); }
table.table-clients .client-link,
table.table-clients .last-doc strong { color: var(--text-primary); }

.status-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.status-tag .status-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-tag.active { color: var(--semantic-success); }
.status-tag.active .status-dot { background: var(--semantic-success); }
.status-tag.inactive { color: var(--text-secondary); }
.status-tag.inactive .status-dot { background: var(--text-secondary); }
.status-tag.warning { color: var(--semantic-warning); }
.status-tag.warning .status-dot { background: var(--semantic-warning); }
.status-tag.danger { color: var(--semantic-danger); }
.status-tag.danger .status-dot { background: var(--semantic-danger); }

/* Pendências: indicador fixo (ícone + contador), não escala com a quantidade de categorias */
.pending-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 30px;
  height: 26px;
  border-radius: var(--radius-sm);
  cursor: default;
  justify-content: center;
}
.pending-indicator .icon { width: 13px; height: 13px; flex-shrink: 0; }
.pending-indicator strong { font-size: 12px; font-weight: 700; }
.pending-indicator.ok { color: var(--semantic-success); }
.pending-indicator.warn {
  width: auto;
  padding: 0 9px;
  background: var(--semantic-warning-bg);
  color: var(--semantic-warning);
}

.last-doc { display: flex; flex-direction: column; gap: 2px; }
.last-doc strong { font-size: 13px; font-weight: 600; }
.last-doc span { font-size: 11px; color: var(--text-secondary); }
.last-doc span.valor-danger { color: var(--semantic-danger); font-weight: 600; }

/* ---------- Admin: sidebar fixa de altura total ----------
   Substitui a antiga barra de navegação solta dentro do grid de conteúdo.
   .admin-shell é o wrapper [sidebar fixa][conteúdo]; a sidebar preenche
   100vh com --brand-navy (o "painel azul" do pedido) e três seções fixas
   (topo: marca / meio: navegação, rolável / rodapé: usuário). Recolhe pra
   76px (só ícone) via botão no topo — preferência salva em safeStorage e
   aplicada como classe em .admin-shell. Em telas ≤1024px vira um drawer
   que fica fora da tela por padrão (transform) e abre por cima do conteúdo
   via botão de menu + fundo escurecido, em vez do modo ícone (não faz
   sentido colapsar por ícone numa tela que já não tem espaço lateral). */
.admin-shell { display: flex; min-height: 100vh; }

.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  /* Três camadas de gradiente puro — nenhum backdrop-filter, de propósito:
     não há nada atrás da sidebar pra "ver através" (ela é opaca e o
     conteúdo fica ao lado, não por baixo), então blur de verdade não teria
     efeito visível nenhum, só custaria performance à toa. A sensação de
     vidro/profundidade vem inteiramente de luz e sombra simuladas por
     gradiente, que o navegador pinta de graça: um brilho radial bem fraco
     saindo do canto superior esquerdo (como luz pegando a borda de um
     painel), um escurecimento gradual em direção à base (aterra o painel,
     em vez dele "flutuar" uniforme), e por baixo de tudo o degradê vertical
     principal entre as duas cores de referência. */
  background:
    radial-gradient(130% 55% at 12% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(180deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: var(--shadow-md);
  z-index: 30;
  transition: width 0.18s ease, transform 0.18s ease;
}
.admin-sidebar.resizing { transition: none; }
.admin-content.resizing { transition: none; }

.admin-sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 31;
}
.admin-sidebar-resize-handle:hover { background: rgba(255, 255, 255, 0.14); }
.admin-shell.sidebar-collapsed .admin-sidebar-resize-handle { display: none; }

.admin-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.admin-sidebar-header .brand { min-width: 0; flex: 1; overflow: hidden; }
.admin-sidebar-header .brand-mark { width: 44px; height: 44px; border-color: transparent; flex-shrink: 0; }
.admin-sidebar-header .brand-name { color: var(--sidebar-text); font-size: 13.5px; letter-spacing: 0.2px; }
.admin-sidebar-header .brand-sub { color: color-mix(in srgb, var(--sidebar-text) 60%, transparent); }
.admin-sidebar-brand-text { min-width: 0; overflow: hidden; }
.admin-sidebar-brand-text .brand-name, .admin-sidebar-brand-text .brand-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.admin-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--sidebar-text) 65%, transparent);
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.admin-nav-toggle:hover { background: rgba(255, 255, 255, 0.1); color: var(--sidebar-text); }
.admin-nav-toggle:focus-visible { outline: 2px solid var(--sidebar-accent); outline-offset: 1px; }
.admin-nav-toggle .icon { width: 16px; height: 16px; }

.admin-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--sidebar-text) 70%, transparent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
.admin-nav-item:hover { background: rgba(255, 255, 255, 0.07); color: var(--sidebar-text); }
/* "Pill" limpo — sem borda lateral (era o que deixava o item ativo com
   cara de protótipo). Só um preenchimento azul translúcido, arredondado
   igual ao resto do item, com um glow bem discreto pra dar um toque de
   destaque sem gritar. */
.admin-nav-item.active {
  background: color-mix(in srgb, var(--sidebar-accent) 22%, transparent);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sidebar-accent) 25%, transparent), 0 0 14px color-mix(in srgb, var(--sidebar-accent) 20%, transparent);
}
.admin-nav-item:focus-visible { outline: 2px solid var(--sidebar-accent); outline-offset: -2px; }
/* Ícone só aparece na navegação recolhida (onde é a única coisa visível na
   linha) — a Lorena achou os ícones ao lado do texto no menu expandido
   pouco profissionais, então no dia a dia (menu expandido) só o nome mesmo. */
.admin-nav-item-icon { display: none; flex-shrink: 0; }
.admin-nav-item-icon .icon { width: 18px; height: 18px; }
.admin-shell.sidebar-collapsed .admin-nav-item-icon { display: flex; }
@media (max-width: 1024px) {
  .admin-shell.sidebar-collapsed .admin-nav-item-icon { display: none; }
}
.admin-nav-item-label { overflow: hidden; text-overflow: ellipsis; }

.admin-nav-section-label {
  margin: var(--space-5) 12px 8px;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--sidebar-text) 45%, transparent);
}

.admin-sidebar-footer {
  flex-shrink: 0;
  padding: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-sidebar-footer .user-chip { padding: 6px; border-radius: var(--radius-sm); color: color-mix(in srgb, var(--sidebar-text) 85%, transparent); }
.admin-sidebar-footer .user-chip:hover { background: rgba(255, 255, 255, 0.08); color: var(--sidebar-text); }
.admin-sidebar-user-text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.admin-sidebar-user-text span { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-sidebar-user-text small { font-size: 11px; color: color-mix(in srgb, var(--sidebar-text) 55%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-sidebar-footer .avatar { background: rgba(255, 255, 255, 0.16); flex-shrink: 0; }
.admin-sidebar-footer .dropdown-panel { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; }

.admin-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 30, 0.5);
  z-index: 29;
}

.admin-content { flex: 1; min-width: 0; margin-left: 260px; transition: margin-left 0.18s ease; }

.admin-content-footer { text-align: center; font-size: 12px; color: var(--text-secondary); padding: var(--space-6) 32px; margin: 0; }

.admin-mobile-topbar { display: none; align-items: center; gap: 10px; margin-bottom: var(--space-5); }
.admin-mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}
.admin-mobile-menu-btn:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 1px; }
.admin-mobile-menu-btn .icon { width: 20px; height: 20px; }

.admin-shell.sidebar-collapsed .admin-sidebar { width: 76px; }
.admin-shell.sidebar-collapsed .admin-content { margin-left: 76px; }
.admin-shell.sidebar-collapsed .admin-sidebar-header { justify-content: center; }
.admin-shell.sidebar-collapsed .admin-sidebar-brand-text { display: none; }
.admin-shell.sidebar-collapsed .admin-nav-toggle .icon { transform: rotate(180deg); }
.admin-shell.sidebar-collapsed .admin-nav-item { justify-content: center; padding: 10px; }
.admin-shell.sidebar-collapsed .admin-nav-item-label { display: none; }
.admin-shell.sidebar-collapsed .admin-sidebar-footer .user-chip { justify-content: center; }
.admin-shell.sidebar-collapsed .admin-sidebar-user-text { display: none; }
.admin-shell.sidebar-collapsed .admin-nav-section-label { text-align: center; }
.admin-shell.sidebar-collapsed .admin-nav-section-label span { display: none; }

.admin-layout { display: block; }

@media (max-width: 1024px) {
  .admin-sidebar, .admin-shell.sidebar-collapsed .admin-sidebar { width: 260px; transform: translateX(-100%); }
  .admin-sidebar.mobile-open { transform: translateX(0); }
  .admin-content, .admin-shell.sidebar-collapsed .admin-content { margin-left: 0; }
  .admin-shell.sidebar-collapsed .admin-sidebar-brand-text { display: block; }
  .admin-shell.sidebar-collapsed .admin-nav-item { justify-content: flex-start; padding: 10px 12px; }
  .admin-shell.sidebar-collapsed .admin-nav-item-label { display: inline; }
  .admin-shell.sidebar-collapsed .admin-sidebar-footer .user-chip { justify-content: flex-start; }
  .admin-shell.sidebar-collapsed .admin-sidebar-user-text { display: flex; }
  .admin-shell.sidebar-collapsed .admin-nav-section-label span { display: inline; }
  .admin-nav-toggle { display: none; }
  .admin-sidebar-resize-handle { display: none; }
  .admin-mobile-topbar { display: flex; }
  .admin-sidebar-backdrop.open { display: block; }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  /* Bug real encontrado: modais de confirmação abertos de dentro de um
     painel lateral já aberto (ex: Desativar cliente, chamado a partir do
     painel de detalhe) ficavam completamente invisíveis atrás do painel,
     porque .panel-overlay usa z-index 60-62 e este ficava em 50 — o clique
     em "Confirmar" ainda funcionava (o elemento existia no DOM), mas
     ninguém via o quê estava confirmando. Modal de confirmação precisa
     sempre vencer qualquer painel já aberto, nunca o contrário.
   */
  z-index: 70;
}
.modal-overlay.open { display: flex; }
.modal {
  width: 420px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
}
.modal h3 { margin: 0 0 4px; font-size: 17px; }
.modal p.hint { margin: 0 0 20px; font-size: 13px; color: var(--text-secondary); }
.modal-actions { display: flex; gap: 10px; margin-top: 22px; }
.modal-actions .btn { flex: 1; }
/* Variantes de largura — NUNCA usar style="width:Npx" inline num .modal: um
   estilo inline tem prioridade sobre qualquer regra de classe, então a
   media query mobile (.modal { width:92vw }) seria ignorada nesses casos. */
.modal-sm { width: 380px; }
.modal-md { width: 400px; }
.modal-lg { width: 460px; }
.modal-xl { width: 560px; }

.select-like {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
}
/* Select compacto pra caber dentro de uma célula de tabela (ex: status de boleto) */
.select-sm { width: auto; min-width: 110px; padding: 6px 10px; font-size: 13px; }
/* Feedback visual do status de pagamento do boleto — precisa ser óbvio
   sem ler o texto da opção selecionada, não só mais um select cinza igual
   a todos os outros da tela. */
.doc-status-select.pago {
  border-color: var(--semantic-success);
  background: color-mix(in srgb, var(--semantic-success) 12%, var(--bg-surface-elevated));
  color: var(--semantic-success);
  font-weight: 700;
}

/* ---------- Alert box (feedback informativo) ---------- */
.alert-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  margin-top: 18px;
  border: 1px solid transparent;
}
.alert-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.alert-icon .icon { width: 14px; height: 14px; }
.alert-title { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.4; }
.alert-subtitle { margin: 3px 0 0; font-size: 12px; color: var(--text-secondary); }
.alert-subtitle strong { color: var(--text-primary); font-weight: 600; }

.alert-info {
  background: color-mix(in srgb, var(--brand-navy) 7%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--brand-navy) 22%, var(--border-default));
}
.alert-info .alert-icon { background: var(--brand-navy); color: #FFFFFF; }
.alert-info .alert-title { color: var(--brand-navy); }
[data-theme="dark"] .alert-info .alert-title { color: var(--text-primary); }

/* ---------- Dropzone ---------- */
.dropzone {
  position: relative;
  /* Borda sólida em repouso — tracejado só aparece durante o drag ativo
     (ver .drag-over), como sinal transiente, não como estado permanente
     de "provisório/placeholder". */
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover { border-color: var(--border-hover); }
.dropzone.drag-over {
  border-style: dashed;
  border-color: var(--brand-navy);
  background: color-mix(in srgb, var(--brand-navy) 4%, var(--bg-surface));
}
/* Variante usada nas páginas novas do cliente: ícone pequeno ao lado do
   texto, uma linha só — em vez do ícone grande empilhado acima do texto
   (esse empilhamento centralizado é um dos "tells" de template mais óbvios). */
.dropzone-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: left;
  padding: var(--space-8) var(--space-5);
}
.dropzone-inline .dropzone-icon { width: 20px; height: 20px; margin: 0; background: none; border: none; flex-shrink: 0; }
.dropzone-inline .dropzone-icon .icon { width: 20px; height: 20px; }
.dropzone-inline .dropzone-text { display: flex; flex-direction: column; }
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.dropzone-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: var(--text-secondary);
  pointer-events: none;
}
.dropzone-icon .icon { width: 17px; height: 17px; }
.dropzone-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); pointer-events: none; }
.dropzone-title span { color: var(--brand-navy); text-decoration: underline; }
.dropzone-hint { margin: 4px 0 0; font-size: 11.5px; color: var(--text-secondary); pointer-events: none; }

.upload-file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.upload-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
}
.upload-file-item .doc-icon { width: 32px; height: 32px; flex-shrink: 0; }
.upload-file-item .doc-icon .icon { width: 16px; height: 16px; }
.upload-file-item-info { flex: 1; min-width: 0; }
.upload-file-item-info p { margin: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-file-item-info span { font-size: 11px; color: var(--text-secondary); }
.upload-file-remove {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.upload-file-remove:hover { background: var(--semantic-warning-bg); color: var(--semantic-danger); }
.upload-file-remove .icon { width: 13px; height: 13px; }

/* ---------- Page transition ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.app-shell, .login-screen { animation: fadeUp 0.35s ease both; }

/* ---------- Icons ---------- */
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.cat-icon .icon, .doc-icon .icon { width: 20px; height: 20px; }

/* ---------- Sistema de ícones: chips com leve profundidade ----------
   Toda "caixa com ícone" do sistema (KPI, categoria, documento) é da mesma
   família — fundo com tom sutil da cor semântica + friso interno claro no
   topo, a MESMA técnica que .stat-card já usa (inset via --text-inverse, só
   mais concentrada por serem caixas pequenas). Um lugar só pra ajustar em
   vez de bordas/sombra diferentes em cada tela — é isso que fazia os chips
   do Financeiro/Categorias/Documentos parecerem de "sistemas" diferentes
   mesmo sendo o mesmo componente. */
.stat-icon-chip, .cat-icon, .doc-icon {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-inverse) 20%, transparent);
  transition: transform 0.15s ease;
}
.stat-card:hover .stat-icon-chip,
.cat-card:hover .cat-icon,
.upload-file-item:hover .doc-icon {
  transform: translateY(-1px);
}

/* ---------- Icon buttons / bell ---------- */
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { border-color: var(--brand-gold-soft); background: var(--semantic-warning-bg); color: var(--brand-gold); }
.icon-btn .icon { width: 18px; height: 18px; }

.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--semantic-warning);
  border: 1.5px solid var(--bg-surface);
}

/* ---------- Dropdown ---------- */
.dropdown-wrap { position: relative; }
.dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  display: none;
  z-index: 40;
}
.dropdown-panel.open { display: block; animation: fadeUp 0.15s ease both; }
.dropdown-panel.filtros-dropdown { width: 340px; padding: 14px; }
.dropdown-header { padding: 10px 12px 6px; font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
}
.dropdown-item:hover { background: var(--bg-surface-elevated); }
.dropdown-item .icon { width: 16px; height: 16px; color: var(--text-secondary); }
.dropdown-divider { height: 1px; background: var(--border-default); margin: 6px 4px; }

/* ---------- Painel de upload: cliente por contexto ou busca ---------- */
.cliente-picker-locked, .cliente-picker-escolhido {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
}
.cliente-picker-locked p, .cliente-picker-escolhido p { margin: 0; font-size: 13.5px; font-weight: 600; }
.cliente-picker-locked span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-secondary); }
.cliente-picker-busca { position: relative; }
.cliente-picker-resultados {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: auto;
  max-height: 240px;
  overflow-y: auto;
}
.cliente-picker-resultados.open { display: block; }

.notif-item { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; }
.notif-item:hover { background: var(--bg-surface-elevated); }
.notif-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--semantic-warning); margin-top: 5px; flex-shrink: 0; }
.notif-item p { margin: 0; font-size: 13px; }
.notif-item span { font-size: 11px; color: var(--text-secondary); }

/* ---------- Stat cards ---------- */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
/* Pedido explícito: tirar todo o "fixado" da página — KPIs e
   busca/filtros do Financeiro voltam a rolar normal junto com o resto do
   conteúdo, sem grudar no topo. */
#financial-summary-row { position: static; }
#tab-financeiro .docs-toolbar { position: static; margin-top: var(--space-6); }
.stat-card {
  background: linear-gradient(160deg, var(--bg-surface) 0%, color-mix(in srgb, var(--bg-surface-elevated) 45%, var(--bg-surface)) 100%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs), inset 0 1px 0 color-mix(in srgb, var(--text-inverse) 6%, transparent);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
/* Leve elevação no hover em QUALQUER stat-card do sistema (Visão geral,
   Financeiro, Configurações) — antes só os .clickable reagiam ao hover, o
   que fazia o mesmo componente parecer "vivo" numa tela e "morto" noutra. */
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--brand-navy) 22%, var(--border-default));
}
/* KPIs de alerta ganham peso visual que os neutros não têm, mas por
   tipografia (peso/tamanho) e um risco lateral discreto — não pintando o
   card inteiro nem o número de amarelo/laranja, que é chamativo demais
   pra um dado que só precisa se destacar um pouco. */
.stat-card.attention { border-left: 3px solid var(--semantic-warning); }
.stat-card.attention .stat-value { font-weight: 800; }
.stat-card.clickable { cursor: pointer; }
.stat-card.clickable:hover { box-shadow: var(--shadow-md); }

/* KPIs "hero" da Visão geral (receita mensal, % de clientes com
   pendências) — mesma família visual do .stat-card comum, só maiores, pra
   dar hierarquia às 2 métricas que um dono de escritório olha primeiro,
   sem precisar de paleta de cor nova. */
.stats-row-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat-card-hero { padding: 22px 24px; }
.stat-card-hero .stat-icon-chip { width: 46px; height: 46px; }
.stat-card-hero .stat-icon-chip .icon { width: 22px; height: 22px; }
.stat-card-hero .stat-label { font-size: 13px; }
.stat-card-hero .stat-value { font-size: 34px; }
.stat-card-hero .stat-trend { font-size: 12px; }

@keyframes pulseHighlight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0); }
  30% { box-shadow: 0 0 0 4px var(--semantic-warning-bg); }
}
.side-card.pulse { animation: pulseHighlight 0.9s ease; border-color: var(--semantic-warning); }
.stat-card .stat-top { display: flex; margin-bottom: 8px; }
.stat-card-hero .stat-top { margin-bottom: 10px; }
/* Label denso e caixa-alta (mesmo tratamento de .admin-nav-section-label/
   .dropdown-header) em vez de texto corrido — deixa os KPIs escaneáveis
   num piscar de olho, igual em Visão geral, Financeiro e Configurações. */
.stat-label {
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  margin: 0 0 2px;
}
.stat-value { font-size: 24px; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat-icon-chip {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-icon-chip .icon { width: 18px; height: 18px; }
.stat-icon-chip-navy { background: color-mix(in srgb, var(--brand-navy) 14%, var(--bg-surface)); color: var(--brand-navy); }
.stat-icon-chip-success { background: color-mix(in srgb, var(--semantic-success) 16%, var(--bg-surface)); color: var(--semantic-success); }
.stat-icon-chip-warning { background: color-mix(in srgb, var(--semantic-warning) 16%, var(--bg-surface)); color: var(--semantic-warning); }
.stat-icon-chip-danger { background: color-mix(in srgb, var(--semantic-danger) 14%, var(--bg-surface)); color: var(--semantic-danger); }
/* Pill neutro por padrão — só ganha cor quando é de fato uma alta/queda
   real (.trend-up/.trend-down, atribuída via JS em renderVariacao). Antes
   era sempre verde, mesmo pra texto neutro tipo "1 inativo(s)". */
.stat-trend {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  font-size: 11px;
  margin-top: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 700;
  background: var(--bg-surface-elevated);
  color: var(--text-secondary);
}
.stat-trend.trend-up { background: color-mix(in srgb, var(--semantic-success) 15%, transparent); color: var(--semantic-success); }
.stat-trend.trend-down { background: color-mix(in srgb, var(--semantic-danger) 15%, transparent); color: var(--semantic-danger); }
.stat-period { font-size: 10.5px; color: var(--text-secondary); margin: 2px 0 0; }
.stat-spark { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-top: 4px; }
.stat-spark span { flex: 1; border-radius: 3px 3px 0 0; background: var(--bg-surface-elevated); }
.stat-spark span.hi { background: var(--brand-navy); }

/* ---------- KPI tile (páginas novas do cliente) ----------
   Componente novo, paralelo ao .stat-card do admin (fora de escopo). Sem
   ícone nas métricas principais — o número é o herói. "Atenção" vira uma
   barra de acento à esquerda, não um fundo colorido inteiro (mais calmo,
   mais "Linear/Notion" do que um card inteiro pintado de laranja). */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-8); }
.kpi-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-6);
}
.kpi-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-2);
}
.kpi-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-black);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin: 0;
}
.kpi-value .kpi-currency { font-size: 60%; font-weight: var(--font-semibold); color: var(--text-secondary); margin-right: 4px; }
.kpi-tile.attention .kpi-value { color: var(--semantic-warning); }
.kpi-tile.attention.danger .kpi-value { color: var(--semantic-danger); }
.kpi-trend { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-2); }

.resumo-financeiro { display: flex; flex-direction: column; }
.resumo-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
}
.resumo-linha strong { font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: var(--font-semibold); }
.resumo-linha.total { border-bottom: none; padding-top: var(--space-3); font-weight: var(--font-semibold); color: var(--text-primary); }
.resumo-linha.total strong { font-size: var(--text-md); font-weight: var(--font-bold); }
.resumo-nota { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--text-secondary); }

/* ---------- Lista de boletos (boletos.html) ----------
   Componente novo, sob medida — NÃO é uma <table>. Linhas separadas por
   hairline dentro de um único container (borda só no container, não por
   linha) — é isso que dá o ar Stripe/Mercury em vez de "tabela pesada". */
.boleto-list {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.boleto-row {
  display: grid;
  grid-template-columns: 40px 1fr 110px 100px 100px auto;
  grid-template-areas: "icon main valor vencimento status actions";
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-default);
}
.boleto-row:last-child { border-bottom: none; }
.boleto-row:hover { background: var(--bg-surface-elevated); }
.boleto-row-icon {
  grid-area: icon;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
}
.boleto-row-icon .icon { width: 18px; height: 18px; }
.boleto-row-main { grid-area: main; min-width: 0; }
.boleto-row-competencia { margin: 0; font-size: var(--text-base); font-weight: var(--font-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boleto-row-tipo { margin: 2px 0 0; font-size: var(--text-xs); color: var(--text-secondary); }
.boleto-row-valor {
  grid-area: valor;
  text-align: right;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums;
}
.boleto-row-valor .moeda { font-size: 70%; font-weight: var(--font-medium); color: var(--text-secondary); margin-right: 2px; }
.boleto-row-vencimento { grid-area: vencimento; text-align: right; font-size: var(--text-xs); color: var(--text-secondary); }
.boleto-row-status { grid-area: status; display: flex; justify-content: flex-end; }
.boleto-row-actions { grid-area: actions; display: flex; gap: var(--space-1); }

@media (max-width: 640px) {
  .boleto-list { background: none; border: none; }
  .boleto-row {
    grid-template-columns: 40px 1fr auto;
    grid-template-areas:
      "icon main status"
      "valor valor vencimento"
      "actions actions actions";
    row-gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
  }
  .boleto-row:last-child { margin-bottom: 0; }
  .boleto-row-valor { text-align: left; font-size: var(--text-md); }
  .boleto-row-actions { margin-top: var(--space-2); }
  .boleto-row-actions .btn { flex: 1; }
}

/* ---------- Chips de filtro por status (boletos.html) ---------- */
.status-chip-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }

/* ---------- Medidor de força de senha (primeiro-acesso / redefinir-senha) ---------- */
.senha-forca-bar { display: flex; gap: 4px; margin: var(--space-2) 0; }
.senha-forca-bar-seg { height: 4px; flex: 1; border-radius: 2px; background: var(--bg-surface-elevated); }
.senha-forca-bar-seg.on.danger { background: var(--semantic-danger); }
.senha-forca-bar-seg.on.warning { background: var(--semantic-warning); }
.senha-forca-bar-seg.on.ok { background: var(--semantic-success); }
.senha-forca-label { font-size: var(--text-xs); font-weight: var(--font-semibold); min-height: 16px; }
.senha-forca-label.danger { color: var(--semantic-danger); }
.senha-forca-label.warning { color: var(--semantic-warning); }
.senha-forca-label.ok { color: var(--semantic-success); }
.senha-criterios { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: flex; flex-direction: column; gap: var(--space-1); }
.senha-criterio { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }
.senha-criterio.ok { color: var(--semantic-success); }
.senha-criterio .icon { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------- Documentos (drive-like) ---------- */
.documentos-layout { display: flex; gap: var(--space-8); align-items: flex-start; }
.doc-categories { display: flex; flex-direction: column; gap: var(--space-1); width: 200px; flex-shrink: 0; }
.doc-cat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
}
.doc-cat-item:hover { background: var(--bg-surface-elevated); }
.doc-cat-item.active { background: var(--bg-surface-elevated); color: var(--brand-navy); font-weight: var(--font-semibold); }
.doc-cat-count { font-size: var(--text-2xs); color: var(--text-secondary); }
.doc-main { flex: 1; min-width: 0; }

/* Linha de arquivo no estilo Drive/Dropbox: ícone + nome/meta (categoria ·
   data) numa linha só que quebra sozinha, sem colunas fixas de vencimento/
   status (documento comum não tem nenhum dos dois). */
.drive-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}
.drive-row:last-child { border-bottom: none; }
.drive-row:hover { background: var(--bg-surface-elevated); }
.drive-row-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.drive-row-icon .icon { width: 16px; height: 16px; }
.drive-row-main { flex: 1; min-width: 0; }
.drive-row-nome { margin: 0; font-size: var(--text-base); font-weight: var(--font-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drive-row-meta { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; }
.drive-row-cat { font-size: var(--text-2xs); color: var(--text-secondary); background: var(--bg-surface-elevated); padding: 2px 8px; border-radius: 100px; white-space: nowrap; }
.drive-row-date { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }
.drive-row-kebab { flex-shrink: 0; }

/* ---------- Documentos agrupados por Ano / Mês / Dia ---------- */
.date-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}
.date-group-header:hover { background: var(--bg-surface-elevated); }
.date-group-header:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: -2px; }
.date-group-header.year, .date-group-header.client { font-size: var(--text-lg); font-weight: var(--font-bold); margin-top: var(--space-3); }
.date-group-header.month { font-size: var(--text-base); font-weight: var(--font-semibold); margin-left: var(--space-5); }
.date-group-header.day { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-secondary); margin-left: var(--space-8); cursor: default; }
.date-group-chevron { display: flex; flex-shrink: 0; transition: transform 0.15s ease; color: var(--text-secondary); }
.date-group-chevron .icon { width: 14px; height: 14px; }
.date-group-header.collapsed .date-group-chevron { transform: rotate(-90deg); }
.date-group-count {
  margin-left: auto;
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  background: var(--bg-surface-elevated);
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
}
.date-group-body.month-body { margin-left: var(--space-5); }
.date-group-body.day-body { margin-left: var(--space-8); }
.date-group-body.collapsed { display: none; }
@media (max-width: 640px) {
  .date-group-header.month { margin-left: var(--space-3); }
  .date-group-header.day { margin-left: var(--space-5); }
  .date-group-body.month-body { margin-left: var(--space-3); }
  .date-group-body.day-body { margin-left: var(--space-5); }
}

/* Mesmo agrupamento, mas quando vira uma linha de <table> (painel do admin)
   em vez de um cartão de lista (documentos.html do cliente) — a célula não
   pode manter o padding padrão de td, senão soma com o padding do cabeçalho
   e a linha fica desproporcionalmente alta. */
.date-group-row td { padding: 0; }
.date-group-row.ano .date-group-header, .date-group-row.cliente .date-group-header { background: var(--bg-surface-elevated); }
.date-group-row.mes .date-group-header { background: color-mix(in srgb, var(--bg-surface-elevated) 55%, transparent); }
.date-group-row .date-group-header.year, .date-group-row .date-group-header.month, .date-group-row .date-group-header.client { border-radius: 0; margin-top: 0; }

@media (max-width: 860px) {
  .documentos-layout { flex-direction: column; gap: var(--space-4); }
  .doc-categories { flex-direction: row; overflow-x: auto; white-space: nowrap; width: auto; gap: var(--space-2); padding-bottom: var(--space-2); }
  .doc-cat-item { flex-shrink: 0; }
}

.activity-item.urgent .dot-icon { background: var(--semantic-warning-bg); color: var(--semantic-warning); }

/* ---------- Painel "Precisa de atenção" consolidado (admin) ---------- */
.attention-panel-section + .attention-panel-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-default); }
.attention-panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin: 0 0 10px; }
.upcoming-empty { font-size: 12.5px; color: var(--text-secondary); }

/* ---------- Dashboard layout ---------- */
.dashboard-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.dashboard-main { min-width: 0; container-type: inline-size; container-name: dashmain; }

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 14px;
}

/* ---------- Cliente: faixa de urgência ----------
   Propositalmente NÃO segue o mesmo raio/sombra dos cards do grid —
   precisa parecer estruturalmente diferente, não só "mais um card colorido". */
.urgent-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--semantic-warning);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
[data-theme="dark"] .urgent-banner { background: color-mix(in srgb, var(--semantic-warning) 80%, black); }
.urgent-banner-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.urgent-banner-text { flex: 1; min-width: 0; }
.urgent-banner-text p { margin: 0 0 2px; font-size: 14px; font-weight: 800; color: #FFFFFF; }
.urgent-banner-text span { font-size: 12.5px; color: rgba(255,255,255,0.85); }
.urgent-banner .btn-primary { background: #FFFFFF; color: var(--semantic-warning); flex-shrink: 0; }
.urgent-banner .btn-primary:hover { background: rgba(255,255,255,0.9); }

/* Categoria com algo urgente: peso visual diferente das demais, não só um badge */
.cat-card-urgent { border-color: var(--semantic-warning); border-width: 1.5px; background: var(--semantic-warning-bg); }
.cat-card-urgent .cat-icon { background: var(--bg-surface); color: var(--semantic-warning); }

.unseen-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--semantic-warning);
  background: var(--semantic-warning-bg);
  border-radius: 100px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ---------- Cliente: card de ajuda/contato ---------- */
.help-card { background: var(--bg-surface-elevated); border-style: dashed; }
.help-text { margin: 0 0 14px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.help-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}
.help-contact-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-navy);
  flex-shrink: 0;
}
.help-contact-icon .icon { width: 12px; height: 12px; }
.help-hours { margin: 4px 0 0; font-size: 11.5px; color: var(--text-secondary); }

/* ---------- Cliente: card de ajuda/contato ---------- */
.help-card { background: var(--bg-surface-elevated); border-style: dashed; }
.help-text { margin: 0 0 14px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.help-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}
.help-contact-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-navy);
  flex-shrink: 0;
}
.help-contact-icon .icon { width: 12px; height: 12px; }
.help-hours { margin: 4px 0 0; font-size: 11.5px; color: var(--text-secondary); }

/* Cards inside the main column adapt to the column's real width
   (which shrinks once the sidebar appears) rather than the viewport. */
@container dashmain (max-width: 520px) {
  .page-header-flex > div:last-child { width: 100%; }
  .page-header-flex .btn { flex: 1; }
}

.side-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 20px;
  margin-bottom: 20px;
}
.side-card-head { margin-bottom: 14px; }
.side-card-head h3 { margin: 0; font-size: 14px; font-weight: 700; }

.attention-list { display: flex; flex-direction: column; gap: 10px; }
.attention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg-surface-elevated);
  cursor: pointer;
  transition: background 0.12s ease;
}
.attention-item:hover { background: var(--semantic-warning-bg); }
.attention-item .dot-icon {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--semantic-warning-bg);
  color: var(--semantic-warning);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.attention-item .dot-icon .icon { width: 14px; height: 14px; }
/* Texto cresce pra ocupar o espaço disponível — sem isso a linha inteira
   (fundo, hover) ficava larga mas o conteúdo ficava todo espremido à
   esquerda, com uma faixa vazia enorme à direita até o badge/botão. */
.attention-item-texto { flex: 1; min-width: 0; }
.attention-item .status-badge, .attention-item .cat-attach-btn { flex-shrink: 0; }
/* Vencido é mais grave que vencendo — precisa ler diferente à distância, não
   só no texto. Sem isso os dois casos ficam com o mesmo peso visual (mesmo
   ícone laranja), que é exatamente o tipo de ambiguidade que compromete a
   experiência (um item já vencido não deveria parecer só "mais um aviso"). */
.attention-item.danger:hover { background: color-mix(in srgb, var(--semantic-danger) 12%, var(--bg-surface)); }
.attention-item.danger .dot-icon { background: color-mix(in srgb, var(--semantic-danger) 15%, var(--bg-surface)); color: var(--semantic-danger); }
.attention-item p { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.attention-item span { font-size: 11px; color: var(--text-secondary); }
.attention-empty { font-size: 12.5px; color: var(--text-secondary); padding: 4px 2px; }

/* ---------- Próximos vencimentos: identidade própria (data + prazo), não um feed genérico ---------- */
.due-list { display: flex; flex-direction: column; gap: 8px; }
.due-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease;
}
.due-item:hover { background: var(--bg-surface-elevated); }
.due-item-date {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-surface-elevated);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1.1;
}
.due-item-date strong { font-size: 14px; font-weight: 800; }
.due-item-date span { font-size: 9px; color: var(--text-secondary); text-transform: uppercase; }
.due-item.urgent .due-item-date { border-color: var(--semantic-warning); background: var(--semantic-warning-bg); color: var(--semantic-warning); }
.due-item.danger .due-item-date { border-color: var(--semantic-danger); background: color-mix(in srgb, var(--semantic-danger) 15%, var(--bg-surface)); color: var(--semantic-danger); }
.due-item-info { flex: 1; min-width: 0; }
.due-item-info p { margin: 0 0 2px; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.due-item-info span { font-size: 11px; color: var(--text-secondary); }
.due-item-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--bg-surface-elevated);
  color: var(--text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}
.due-item.urgent .due-item-badge { background: var(--semantic-warning-bg); color: var(--semantic-warning); }
.due-item.danger .due-item-badge { background: color-mix(in srgb, var(--semantic-danger) 15%, var(--bg-surface)); color: var(--semantic-danger); }

.activity-feed { display: flex; flex-direction: column; }
.activity-item {
  display: flex;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border-default);
}
.activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.activity-item .dot-icon {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-surface-elevated);
  color: var(--brand-navy);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.activity-item .dot-icon .icon { width: 13px; height: 13px; }
.activity-item p { margin: 0; font-size: 12.5px; line-height: 1.4; }
.activity-item p strong { font-weight: 700; }
.activity-item span { font-size: 11px; color: var(--text-secondary); }

@media (max-width: 1024px) {
  .dashboard-layout { grid-template-columns: 1fr; }
}

/* ---------- Chart card ---------- */
.chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 28px;
}
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; flex-wrap: wrap; gap: 10px; }
.chart-head h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.chart-head p { margin: 0; font-size: 12px; color: var(--text-secondary); }
.chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Gráfico de linha: receita ao longo do tempo ---------- */
.line-chart-wrap { position: relative; }
.line-chart { width: 100%; height: 200px; display: block; overflow: visible; }
.linha-receita-ponto { transition: r 0.12s ease; cursor: pointer; }
.linha-receita-ponto:hover { r: 5.5; }
.line-chart-tooltip {
  position: absolute;
  display: none;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-default);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  z-index: 5;
}

/* ---------- Barra empilhada: status dos boletos ---------- */
.stacked-bar { display: flex; height: 28px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-surface-elevated); }
.stacked-bar-segment { height: 100%; transition: width 0.4s ease; }
.stacked-bar-segment:not(:last-child) { border-right: 2px solid var(--bg-surface); }

/* ---------- Visão geral: layout dos 2 gráficos lado a lado ---------- */
.dashboard-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1024px) {
  .dashboard-charts-row { grid-template-columns: 1fr; }
}

/* ---------- KPI: variação real vs mês anterior ---------- */
.trend-up { color: var(--semantic-success); font-weight: 700; }
.trend-down { color: var(--semantic-danger); font-weight: 700; }

/* ---------- Visão Geral: visual mais reto/denso, só nesta tela ----------
   Achata só aqui (via custom property em cascata) em vez de mudar
   --radius-md/--radius-lg globais — os mesmos .stat-card/.side-card são
   usados em Clientes/Financeiro/Detalhe, que não foram pedidos pra
   mudar. Remove também o gradiente decorativo do .stat-card, só nesta
   tela — cartão plano, mais denso, sem "cara de template". */
#tab-visao-geral {
  --radius-md: 4px;
  --radius-lg: 6px;
}
#tab-visao-geral .stat-card {
  background: var(--bg-surface);
  padding: 14px 16px;
  gap: 2px;
}
#tab-visao-geral .stat-card-hero { padding: 18px 20px; }
#tab-visao-geral .chart-card { padding: 18px 20px; }
/* Label/valor/tendência/hover viraram regra global (.stat-card etc., acima)
   — aplicada em Financeiro e Configurações também, não só aqui. */

/* ---------- Visão Geral: gráficos com um pouco mais de "dado", sem
   reintroduzir o gradiente decorativo que já foi removido dos cards ---------- */
#tab-visao-geral .chart-head h3 { font-size: 15px; letter-spacing: -0.01em; }
#tab-visao-geral .stacked-bar { height: 34px; border-radius: var(--radius-sm); }
#tab-visao-geral .stacked-bar-segment:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
#tab-visao-geral .stacked-bar-segment:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
#tab-visao-geral .chart-legend span {
  padding: 4px 10px 4px 8px;
  border-radius: 20px;
  background: var(--bg-surface-elevated);
  font-weight: 600;
}
#tab-visao-geral .chart-legend .dot { width: 7px; height: 7px; }

/* ---------- Empty state ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-12) var(--space-5);
  color: var(--text-secondary);
}
.empty-state .icon { width: 18px; height: 18px; margin-bottom: var(--space-3); opacity: 0.7; }
.empty-state h3 { color: var(--text-primary); margin: 0 0 var(--space-1); font-size: var(--text-base); font-weight: var(--font-semibold); }
.empty-state p { margin: 0; font-size: var(--text-sm); max-width: 360px; }

/* ---------- Toast ---------- */
#toast-host { position: fixed; bottom: 24px; left: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 100; }
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--semantic-success);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  animation: fadeUp 0.2s ease both;
  min-width: 240px;
}
.toast .icon { width: 16px; height: 16px; color: var(--semantic-success); flex-shrink: 0; }

/* ---------- Preview modal ---------- */
.preview-card { width: 100%; height: 260px; border-radius: 10px; background: var(--bg-surface-elevated); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--text-secondary); }
.preview-card .icon { width: 48px; height: 48px; }
.btn-loading .icon { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Guarda de sessão (evita mostrar a tela real antes de confirmar login) ---------- */
.auth-guard-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-guard-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--bg-surface-elevated);
  border-top-color: var(--brand-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ---------- Side panel ---------- */
.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 60;
}
.panel-overlay.open { opacity: 1; visibility: visible; }

.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 440px;
  max-width: 92vw;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 61;
  display: flex;
  flex-direction: column;
}
.panel-overlay.open .side-panel { transform: translateX(0); }
/* Drawer do detalhe de Impostos pagos: tabela de 4 colunas não cabe bem
   nos 440px padrão (pensados pra formulário de 1 coluna). */
.side-panel-wide { width: 640px; }
.side-panel.resizing { transition: none; user-select: none; }

.panel-resize-handle {
  position: absolute;
  top: 0;
  left: -3px;
  width: 7px;
  height: 100%;
  cursor: ew-resize;
  z-index: 62;
}
.panel-resize-handle::after {
  content: "";
  position: absolute;
  top: 0; left: 3px;
  width: 1px;
  height: 100%;
  background: transparent;
  transition: background 0.12s ease;
}
.panel-resize-handle:hover::after,
.side-panel.resizing .panel-resize-handle::after {
  background: var(--brand-gold-soft);
  width: 2px;
}

.side-panel-header {
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.panel-title { margin: 0 0 4px; font-size: 18px; font-weight: 800; letter-spacing: -0.2px; }
.panel-subtitle { margin: 0; font-size: 13px; color: var(--text-secondary); }
.side-panel-body {
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1;
}
.side-panel-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.side-panel-footer .btn { flex: 0 0 auto; min-width: 112px; }
/* Secundária com peso reduzido (ghost) para não competir com a ação principal */
.side-panel-footer .btn-secondary {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.side-panel-footer .btn-secondary:hover { background: var(--bg-surface-elevated); border-color: var(--border-default); }

.panel-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-elevated);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.panel-close .icon { width: 16px; height: 16px; }

.panel-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.info-grid .label { margin: 0 0 4px; font-size: 12px; color: var(--text-secondary); }
.info-grid .value { margin: 0; font-size: 14px; font-weight: 600; }

/* Dois campos lado a lado num formulário (ex: Nome/Nome fantasia, E-mail/
   Telefone no painel de Perfil da empresa) — antes era inline style repetido
   sem tratamento de mobile, então em telas estreitas cada campo ficava com
   uns 170px, apertado demais pra digitar e-mail/telefone. */
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ---------- Detalhe do cliente (visão central) ---------- */
/* Botão "Voltar" acima do cabeçalho, não dentro dele — não é uma ação
   sobre o cliente, é navegação de volta pra onde o admin estava. */
.detalhe-voltar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  margin-bottom: 14px;
  border: none;
  background: transparent;
}
.detalhe-voltar-btn .icon { width: 15px; height: 15px; }
/* O detalhe do cliente precisa parecer um lugar diferente da lista, não
   só "a mesma tela com um card diferente dentro" — fundo elevado + padding
   generoso fazem ele se destacar do canvas, igual um "modo foco". */
#tab-detalhe-cliente {
  /* Degradê único, contínuo, ao longo de toda a altura do card — não um
     tom "chapado" por seção (isso virava caixa/card, exatamente o que não
     era pra ser). Diferença quase imperceptível entre os stops: só o
     suficiente pra tirar a sensação de página branca infinita, sem nenhuma
     borda visível entre uma seção e outra. */
  background: linear-gradient(
    180deg,
    var(--bg-surface-elevated) 0%,
    color-mix(in srgb, var(--bg-surface-elevated) 95%, var(--bg-surface) 5%) 45%,
    color-mix(in srgb, var(--bg-surface-elevated) 90%, var(--bg-surface) 10%) 75%,
    var(--bg-surface-elevated) 100%
  );
  border-radius: var(--radius-lg);
  padding: 28px 32px 32px;
}
@media (max-width: 700px) {
  #tab-detalhe-cliente { padding: 20px 16px 24px; }
}
.detalhe-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--brand-navy);
}
.detalhe-header-info { display: flex; flex-direction: column; gap: 4px; }
.detalhe-header-nome-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detalhe-header-nome-row h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.2px; }
.detalhe-header-meta { margin: 0; font-size: 13px; color: var(--text-secondary); }
.detalhe-header-meta-dot { margin: 0 6px; color: var(--border-default); }
/* Indicador de topo — só os 2 números com valor operacional real
   (documentos pendentes, boletos vencidos), como texto, nunca card. */
.detalhe-indicadores { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.detalhe-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Ações destrutivas isoladas do resto por um divisor sutil, em vez de só
   confiar na cor vermelha pra separar — reforça a hierarquia sem precisar
   de mais contraste de cor. */
.detalhe-header-actions-destrutivas {
  display: flex;
  gap: 10px;
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px solid var(--border-default);
}
/* Ação principal do header — compacta e no tom navy da marca: mais peso
   que o "Editar" cinza comum, mas discreta o bastante pra não competir
   com nome/status do cliente ao lado. Outline (não preenchido) e hover
   com um tingimento leve, não uma cor sólida forte. */
.btn-upload-contextual {
  padding: 8px 14px;
  font-size: 13px;
  background: transparent;
  color: var(--brand-navy);
  border: 1px solid var(--brand-navy);
}
.btn-upload-contextual:hover { background: color-mix(in srgb, var(--brand-navy) 10%, transparent); }
.btn-upload-contextual .icon { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .detalhe-header-actions { width: 100%; }
  .detalhe-header-actions .btn { flex: 1 1 auto; }
  .detalhe-header-actions-destrutivas { width: 100%; padding-left: 0; margin-left: 0; border-left: none; }
}

/* Sub-abas do detalhe usam o MESMO componente .status-chip-row/.period-chip
   das sub-abas de Clientes — sem diferença nenhuma, as duas telas liam como
   "a mesma tela". Aqui ganham um tratamento de aba sublinhada (em vez de
   chip/pill), reforçando que é outro modo de navegação. */
#detalhe-subtabs.status-chip-row { gap: 4px; border-bottom: 1px solid var(--border-default); }
#detalhe-subtabs .period-chip {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 6px;
}
#detalhe-subtabs .period-chip:hover { border-color: var(--border-default); color: var(--text-primary); }
#detalhe-subtabs .period-chip.active {
  background: transparent;
  color: var(--brand-navy);
  border-bottom-color: var(--brand-navy);
}
/* Pedido explícito: tirar todo o "fixado" da página — essa nav volta a
   rolar normal junto com o resto do conteúdo, sem grudar no topo.
   "relative" (não "static") de propósito: a barra de progresso de scroll
   (.detalhe-scroll-progress, logo abaixo) é position:absolute e precisa
   de um ancestral posicionado pra se ancorar embaixo desta nav — com
   "static" ela perdia essa referência e ia se pendurar no ancestral
   posicionado mais próximo lá em cima na árvore (ou no body), reaparecendo
   como uma linha solta no meio do conteúdo, bem longe de onde devia ficar.
   "relative" não gruda em lugar nenhum ao rolar (mesmo comportamento visual
   de "static" pro layout), só devolve a referência de posicionamento. */
.detalhe-nav-sticky {
  position: relative;
  background: var(--bg-surface-elevated);
  padding-top: 4px;
}

/* ---------- Detalhe: seções da página única ---------- */
/* scroll-margin-top vai na própria seção (é ela que scrollIntoView() alvo),
   não no título — senão não tem efeito nenhum. Cada seção precisa ler como
   um bloco funcional próprio, não só um <h3> solto em cima de espaço vazio
   — a borda superior marca onde uma seção termina e a próxima começa mesmo
   quando o conteúdo dela é curto (Dados cadastrais, Pendências sem nada
   pendente etc. ficam compactas de propósito, não "flutuando" no meio de
   espaço em branco). */
.detalhe-secao { padding: 32px 0 4px; border-top: 1px solid var(--border-default); scroll-margin-top: 56px; }
.detalhe-secao:first-of-type { padding-top: 24px; border-top: none; }
.detalhe-secao-titulo {
  margin: 0 0 18px;
  padding-bottom: 10px;
  padding-left: 10px;
  border-bottom: 1px solid var(--border-default);
  border-left: 3px solid var(--brand-navy);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.1px;
  color: var(--text-primary);
}
/* Barra de progresso fina dentro da nav sticky — só a peça de JS nova
   desta fase (largura = % de scroll pela página do cliente), discreta,
   sem competir com os chips de navegação. */
.detalhe-scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--border-default);
}
.detalhe-scroll-progress::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--detalhe-scroll-pct, 0%);
  background: var(--brand-navy);
  transition: width 0.1s linear;
}
#detalhe-boletos-period-presets { margin-bottom: 12px; }
.detalhe-financeiro-resumo {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-secondary);
}
.detalhe-financeiro-resumo strong { color: var(--text-primary); font-weight: 700; }
.detalhe-fin-danger { color: var(--semantic-danger) !important; }

/* ---------- Detalhe: Histórico (linha do tempo de eventos) ---------- */
.timeline-list { display: flex; flex-direction: column; }
.timeline-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-default);
  font-size: 13.5px;
  transition: background 0.12s ease;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item:hover { background: var(--bg-surface-elevated); }
.timeline-data { flex-shrink: 0; font-weight: 700; color: var(--text-primary); min-width: 130px; }
.timeline-seta { flex-shrink: 0; color: var(--text-secondary); }
.timeline-texto { color: var(--text-secondary); }

/* Filtro de contexto dentro da seção Documentos do Detalhe — pill preenchida
   (não sublinhado) de propósito, pra não se confundir visualmente com a nav
   de âncoras do topo da página (essa é hierarquia inferior, escopada só a
   esta seção). */
.docs-filtro-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.docs-filtro-chip {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: 100px;
}
.docs-filtro-chip:hover { border-color: var(--brand-navy); color: var(--text-primary); }
.docs-filtro-chip.active { background: var(--brand-navy); border-color: var(--brand-navy); color: #FFFFFF; }
.docs-filtro-count { margin-left: 3px; opacity: 0.85; }

/* ---------- Toolbar (busca + ação em lote) ---------- */
.docs-toolbar { display: flex; gap: 12px; margin-bottom: 14px; }
.docs-search {
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
}
.docs-search span { display: flex; color: var(--text-secondary); flex-shrink: 0; }
.docs-search input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 13.5px;
  color: var(--text-primary);
  font-family: inherit;
}
.docs-search input:focus { outline: none; }
.docs-toolbar #docs-download-all { margin-left: auto; }

/* ---------- Presets de período ---------- */
.period-presets { display: flex; gap: 6px; }
.period-chip {
  border: 1px solid var(--border-default);
  background: var(--bg-surface-elevated);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.period-chip:hover { border-color: var(--brand-navy); }
.period-chip.active { background: var(--brand-navy); border-color: var(--brand-navy); color: #FFFFFF; }

/* ---------- Toggle "Só novidades" ---------- */
.filter-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: 1px;
}
.filter-toggle input { display: none; }
.filter-toggle-track {
  width: 32px; height: 18px;
  border-radius: 100px;
  background: var(--border-default);
  position: relative;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.filter-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform 0.15s ease;
}
.filter-toggle input:checked + .filter-toggle-track { background: var(--brand-navy); }
.filter-toggle input:checked + .filter-toggle-track::after { transform: translateX(14px); }

/* ---------- Status badge (boletos e documentos) ---------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
}
.status-badge.danger { background: color-mix(in srgb, var(--semantic-danger) 15%, var(--bg-surface)); color: var(--semantic-danger); }
.status-badge.warning { background: var(--semantic-warning-bg); color: var(--semantic-warning); }
.status-badge.ok { background: color-mix(in srgb, var(--semantic-success) 15%, var(--bg-surface)); color: var(--semantic-success); }
.status-badge.neutral { background: var(--bg-surface-elevated); color: var(--text-secondary); }

/* ---------- Menu de ações por linha (kebab) ---------- */
.doc-menu-panel, .team-menu-panel {
  width: 210px;
  top: calc(100% + 4px);
}
.doc-menu-panel.open, .team-menu-panel.open { display: block; }

/* ---------- Centro de equipe e acessos ---------- */
.avatar-status-wrap { position: relative; flex-shrink: 0; }
.status-dot-ring {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
  background: var(--text-secondary);
}
.status-dot-ring.online { background: var(--semantic-success); }
.status-dot-ring.offline { background: var(--text-secondary); }

.member-cell { display: flex; align-items: center; gap: 12px; }
.member-cell .avatar { width: 34px; height: 34px; font-size: 13px; }
.member-name-row { display: flex; align-items: center; gap: 6px; }
.member-name-row strong { font-size: 13px; }
.member-email { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }

.role-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
}
.role-badge.proprietario { background: color-mix(in srgb, var(--brand-gold) 18%, var(--bg-surface)); color: var(--brand-gold); }
.role-badge.administrador { background: color-mix(in srgb, var(--brand-navy) 14%, var(--bg-surface)); color: var(--brand-navy); }
.role-badge.colaborador { background: var(--bg-surface-elevated); color: var(--text-secondary); }

.status-line { display: flex; flex-direction: column; gap: 2px; }
.status-line-top { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.status-line-top .dot { width: 7px; height: 7px; border-radius: 50%; }
.status-line span.muted { font-size: 11px; color: var(--text-secondary); }

.twofa-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; }
.twofa-badge.on { color: var(--semantic-success); }
.twofa-badge.off { color: var(--text-secondary); }
.twofa-badge .icon { width: 13px; height: 13px; }

.invite-row td { color: var(--text-secondary); }

.session-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.session-item .dot-icon { width: 28px; height: 28px; }
.session-item-info { flex: 1; min-width: 0; }
.session-item-info p { margin: 0; font-size: 12.5px; font-weight: 600; }
.session-item-info span { font-size: 11px; color: var(--text-secondary); }
.session-current-tag {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--semantic-success);
  background: color-mix(in srgb, var(--semantic-success) 15%, var(--bg-surface));
  border-radius: 100px;
  padding: 2px 7px;
}
.session-revoke-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
}
.session-revoke-btn:hover { background: var(--semantic-warning-bg); color: var(--semantic-danger); }
.session-revoke-btn .icon { width: 13px; height: 13px; }

.danger-zone {
  border: 1px solid color-mix(in srgb, var(--semantic-danger) 30%, var(--border-default));
  border-radius: var(--radius-md);
  padding: 14px;
  background: color-mix(in srgb, var(--semantic-danger) 5%, var(--bg-surface));
}

/* ---------- Filter bar (Documentos enviados) ---------- */
.filter-bar {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.filter-bar-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field label { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
.filter-field .select-like { width: 210px; }

.filter-date-range {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0 10px;
}
.filter-date-range input[type="date"] {
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 13px;
  color: var(--text-primary);
  font-family: inherit;
  width: 124px;
}
.filter-date-range input[type="date"]:focus { outline: none; }
.filter-date-range span { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }

.filter-bar #docs-filter-clear { margin-left: auto; }

.filter-bar-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
}
.filter-bar-summary:empty { display: none; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-navy);
  background: color-mix(in srgb, var(--brand-navy) 8%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--brand-navy) 22%, var(--border-default));
  border-radius: 100px;
  padding: 4px 8px 4px 12px;
}
.filter-chip button {
  border: none;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
}
.filter-chip button:hover { background: color-mix(in srgb, var(--brand-navy) 15%, transparent); }
.filter-chip .icon { width: 11px; height: 11px; }
.filter-results-count { font-size: 12px; color: var(--text-secondary); }

/* Botão que abre/fecha o painel de filtros — o painel em si (.filter-bar)
   começa escondido; só os chips de filtro ativo (.filter-bar-summary) ficam
   sempre visíveis na toolbar, pra dar feedback sem ocupar o espaço da tela
   com campos que a maioria das visitas nem usa. */
.filter-toggle-btn { position: relative; }
.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 6px;
  border-radius: 100px;
  background: var(--brand-navy);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Icon picker (nova categoria) ---------- */
.icon-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.icon-picker-option {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
}
.icon-picker-option .icon { width: 17px; height: 17px; }
.icon-picker-option.selected { border-color: var(--brand-navy); background: var(--bg-surface); color: var(--brand-navy); }

/* ---------- Painel de configuração de categoria ---------- */
.config-panel {
  width: 960px;
  max-width: 94vw;
  max-height: 88vh;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.config-panel-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.config-panel-body { display: flex; flex: 1; min-height: 0; }

.config-tabs {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-default);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.config-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.config-tab .icon { width: 15px; height: 15px; flex-shrink: 0; }
.config-tab:hover { background: var(--bg-surface-elevated); color: var(--text-primary); }
.config-tab.active { background: var(--bg-surface-elevated); color: var(--brand-navy); }
.tab-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--semantic-warning-bg);
  color: var(--semantic-warning);
  border-radius: 100px;
  padding: 1px 6px;
  margin-left: auto;
}

.config-content {
  flex: 1;
  min-width: 0;
  padding: 22px 26px;
  overflow-y: auto;
}
.config-pane { display: none; }
.config-pane.active { display: block; animation: fadeUp 0.15s ease both; }

.config-preview {
  width: 240px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-default);
  padding: 20px;
  overflow-y: auto;
  background: var(--bg-surface-elevated);
}
.preview-label { font-size: 11px; color: var(--text-secondary); margin: 0 0 8px; }
.preview-select { display: flex; align-items: center; gap: 8px; cursor: default; }
.preview-select .icon { width: 15px; height: 15px; color: var(--text-secondary); }

.config-panel-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* Painel de pré-visualização de documento — reaproveita o .config-panel
   (mesmo cartão centralizado já usado em Categoria/Todo o histórico), só
   com o corpo dedicado a mostrar o arquivo de verdade (PDF/imagem) em vez
   de abas de configuração. Alto o suficiente pra um PDF ser lido sem dar
   zoom manual na maioria dos casos. */
.doc-viewer-panel { width: 880px; height: 85vh; }
.doc-viewer-filetabs {
  display: flex;
  gap: 6px;
  padding: 10px 24px 0;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.doc-viewer-stage {
  flex: 1;
  min-height: 0;
  background: var(--bg-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  position: relative;
}
.doc-viewer-stage iframe { width: 100%; height: 100%; border: none; }
.doc-viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.doc-viewer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px;
  text-align: center;
  color: var(--text-secondary);
}
.doc-viewer-empty .icon { width: 40px; height: 40px; }
@media (max-width: 900px) {
  .doc-viewer-panel { width: 100vw; height: 100vh; max-height: 100vh; max-width: 100vw; border-radius: 0; }
}

.field-optional {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: 100px;
  padding: 1px 7px;
  margin-left: 4px;
}
.field-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--text-secondary); }
.config-content textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
.config-content textarea:focus {
  outline: none;
  border-color: var(--brand-navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-navy) 16%, transparent);
}

.icon-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
  margin-bottom: 12px;
}
.icon-search span { display: flex; color: var(--text-secondary); }
.icon-search input { flex: 1; border: none; background: transparent; padding: 9px 0; font-size: 13px; color: var(--text-primary); font-family: inherit; }
.icon-search input:focus { outline: none; }

.color-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.color-swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
}
.color-swatch.selected { border-color: var(--text-primary); }
.color-swatch.selected::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 13px; font-weight: 800; }
.color-swatch[data-color="navy"] { background: #1F2D6E; }
.color-swatch[data-color="gold"] { background: #B8860B; }
.color-swatch[data-color="green"] { background: #1E7A4C; }
.color-swatch[data-color="red"] { background: #B3261E; }
.color-swatch[data-color="purple"] { background: #6B3FA0; }
.color-swatch[data-color="teal"] { background: #137A6B; }
.color-swatch[data-color="gray"] { background: #5B6072; }

.switch-list { display: flex; flex-direction: column; gap: 4px; }
.switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-default);
}
.switch-item:last-child { border-bottom: none; }
.switch-item-text p { margin: 0; font-size: 13px; font-weight: 600; }
.switch-item-text span { font-size: 11.5px; color: var(--text-secondary); }
.switch-item.disabled { opacity: 0.55; }

.filetype-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filetype-chip {
  border: 1px solid var(--border-default);
  background: var(--bg-surface-elevated);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 100px;
  cursor: pointer;
}
.filetype-chip.selected { background: var(--brand-navy); border-color: var(--brand-navy); color: #FFFFFF; }

.future-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--semantic-warning-bg);
  color: var(--semantic-warning);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 20px;
}
.future-banner .icon { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 860px) {
  .config-panel-body { flex-direction: column; overflow-y: auto; }
  .config-tabs { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border-default); }
  .config-preview { width: 100%; border-left: none; border-top: 1px solid var(--border-default); }
}

/* ---------- Category card (aba Categorias) ---------- */
.cat-admin-card { position: relative; }
.cat-admin-card.cat-locked { opacity: 0.75; }
.cat-admin-card.cat-inativa { opacity: 0.6; border-style: dashed; }

.cat-admin-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  background: var(--bg-surface-elevated);
  border-radius: 100px;
  padding: 2px 8px;
}

.cat-admin-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.cat-admin-card:hover .cat-admin-actions { opacity: 1; }
.cat-admin-actions:has(.cat-admin-tag) { opacity: 1; } /* tag "Padrão" sempre visível */

.cat-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.cat-action-btn .icon { width: 13px; height: 13px; }
.cat-action-edit:hover { border-color: var(--brand-navy); color: var(--brand-navy); }
[data-theme="dark"] .cat-action-edit:hover { border-color: var(--brand-gold); color: var(--brand-gold); }
.cat-action-remove:hover { background: var(--semantic-warning-bg); border-color: var(--semantic-danger); color: var(--semantic-danger); }

.cat-lock-hint {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  cursor: help;
}
.cat-lock-hint .icon { width: 13px; height: 13px; }

.cat-icon-editable.clickable { cursor: pointer; }
.cat-icon-editable.clickable:hover { background: var(--bg-surface); box-shadow: 0 0 0 2px var(--brand-navy); }
[data-theme="dark"] .cat-icon-editable.clickable:hover { box-shadow: 0 0 0 2px var(--brand-gold); }

.cat-title-input {
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  width: 100%;
  border: 1px solid var(--brand-navy);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  margin: 0 0 4px;
  background: var(--bg-surface);
  color: var(--text-primary);
}
.cat-title-input:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-navy) 16%, transparent); }

.icon-popover {
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 20;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 10px;
  width: 220px;
}

/* ---------- Tooltip simples (ações bloqueadas) ---------- */
.tooltip-wrap { position: relative; display: inline-flex; }
.tooltip-bubble {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--text-primary);
  color: var(--bg-surface);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  z-index: 10;
}
.tooltip-wrap:hover .tooltip-bubble { display: block; }

/* ---------- Banner de modo leitura ---------- */
.readonly-banner {
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface-elevated);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-secondary);
}
.readonly-banner .icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- Seletor de papel (demo) no menu da conta ---------- */
.role-demo-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 100px;
  padding: 1px 6px;
  margin-left: 6px;
}
.role-check { width: 14px; height: 14px; color: var(--semantic-success); flex-shrink: 0; }
.role-check .icon { width: 14px; height: 14px; }
.role-option { justify-content: flex-start; }

/* ---------- Category groups (client detail panel) ---------- */
.cat-group {
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 14px;
}
.cat-group.sent { border-color: var(--semantic-success); background: color-mix(in srgb, var(--semantic-success) 6%, var(--bg-surface)); }
.cat-group.pending { border-style: dashed; opacity: 0.85; }

.cat-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cat-status-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cat-status-icon .icon { width: 13px; height: 13px; }
.cat-group.sent .cat-status-icon { background: var(--semantic-success); color: #FFFFFF; }
.cat-group.pending .cat-status-icon { background: var(--bg-surface-elevated); color: var(--text-secondary); }
.cat-group-name { font-size: 13px; font-weight: 700; flex: 1; }
.cat-group-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-surface-elevated);
  border-radius: 100px;
  padding: 2px 9px;
}
.cat-group.sent .cat-group-count { color: var(--semantic-success); background: transparent; }

.cat-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-navy);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: 100px;
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.cat-attach-btn:hover { border-color: var(--brand-gold-soft); }
.cat-attach-btn:disabled { opacity: 0.6; cursor: default; }
.cat-attach-btn .icon { width: 13px; height: 13px; }

/* ---------- Skeleton loading ---------- */
.skeleton { background: linear-gradient(90deg, var(--bg-surface-elevated) 25%, var(--border-default) 50%, var(--bg-surface-elevated) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Page header (wraps on mobile) ---------- */
.page-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}
.page-header-flex > div:last-child {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* =====================================================
   RESPONSIVE — TABLET & MOBILE
   ===================================================== */
@media (max-width: 1024px) {
  .main { padding: 32px 24px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .card-grid-hero { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .card-grid-archive { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Sidebar de navegação vira barra inferior fixa — mesmo breakpoint já usado
   pelo config-panel (860px) pra colapsar layouts de múltiplas colunas. */
@media (max-width: 860px) {
  .nav-sidebar { display: none; }
  .nav-bottom {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);
    z-index: 60;
    padding: var(--space-1) var(--space-2);
  }
  .main { padding-bottom: 80px; }
}

@media (max-width: 640px) {
  /* iOS dá zoom automático ao focar qualquer campo com font-size abaixo de
     16px — acontecia em TODOS os formulários (login, perfil, upload,
     filtros de data) porque os campos usam 13-14px no resto do site.
     16px aqui não muda a aparência em telas grandes (só se aplica no
     mobile), só evita esse zoom indesejado a cada toque num campo. */
  .field input, .field textarea, .select-like, .docs-search input,
  input[type="date"], input[type="email"], input[type="password"], input[type="text"] {
    font-size: 16px;
  }

  .main { padding: 20px 16px 80px; }
  .topbar { padding: 12px 16px; }
  .brand-sub { display: none; }
  .user-chip span { display: none; }
  .topbar-actions { gap: 8px; }
  .page-title { font-size: 20px; }

  .stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-value { font-size: 21px; }
  .stat-card { padding: 14px; }


  .kpi-row { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .kpi-tile { padding: var(--space-4); }
  .kpi-value { font-size: var(--text-lg); }

  .card-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card-grid-hero { grid-template-columns: 1fr; gap: 12px; }
  .card-grid-archive { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-card { padding: 16px; }
  .cat-card-hero { padding: 20px; }

  .tabs { overflow-x: auto; white-space: nowrap; }

  /* Sub-abas do Detalhe do cliente (Dados cadastrais/Boletos e Financeiro/
     Documentos/Pendências/Histórico) são 5 rótulos — em telas estreitas
     isso quebrava em 2-3 linhas (herdava o flex-wrap do .status-chip-row
     genérico) e comia espaço vertical logo no topo da página. Mesmo
     tratamento de scroll horizontal que .tabs/.config-tabs já usam. */
  #detalhe-subtabs.status-chip-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #detalhe-subtabs .period-chip { flex-shrink: 0; }

  /* Tabelas viram cartões empilhados em vez de forçar scroll horizontal —
     cada <td> já recebe um atributo data-label (definido em admin.html) que
     vira o rótulo à esquerda via ::before, então nenhuma linha fica "sem
     contexto" só porque o cabeçalho da coluna sumiu de vista. */
  .table-card { overflow-x: visible; }
  .table-card table { min-width: 0; }
  .table-card thead { display: none; }
  .table-card tbody { display: block; }
  .table-card tr {
    display: block;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 10px;
  }
  .table-card tbody tr:last-child { margin-bottom: 0; }
  .table-card tbody tr td { border-bottom: none; }
  .table-card td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    text-align: right;
    width: auto;
  }
  .table-card td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    text-align: left;
    flex-shrink: 0;
  }
  /* Última coluna é sempre a ação (botão/kebab/select) — sem rótulo, alinhada à direita.
     width:100% sobrescreve o truque de coluna estreita "width:1%" do modo
     desktop (table.table-clients td:last-child) — em modo cartão a linha
     inteira deve ficar disponível, senão o botão fica espremido. */
  .table-card td:last-child, table.table-clients td:last-child { justify-content: flex-end; white-space: normal; width: 100%; }
  .table-card td:last-child::before { display: none; }

  .modal, .login-card { max-width: 92vw; width: 92vw; }
  .modal { padding: 22px; }

  .info-grid { grid-template-columns: 1fr; }
  .field-grid-2 { grid-template-columns: 1fr; }
  .side-panel { width: 100vw; max-width: 100vw; }
  .side-panel-header, .side-panel-body, .side-panel-footer { padding-left: 18px; padding-right: 18px; }

  .doc-row { flex-wrap: wrap; }
  .doc-row .btn { margin-left: auto; }

  .login-card { padding: 32px 24px; }

  /* Dropdown (notificações/conta) — largura fixa de 300px podia estourar a
     borda da tela em celulares estreitos; passa a caber dentro da viewport. */
  .dropdown-panel { width: calc(100vw - 32px); max-width: 320px; }

  /* Filtros do admin (Documentos enviados / Administradores): campos de
     210px fixos quebravam linha mas ficavam desalinhados — agora ocupam
     100% da largura, um por linha. */
  .filter-bar-row { flex-direction: column; align-items: stretch; }
  .filter-field { width: 100%; }
  .filter-field .select-like { width: 100%; }
  .filter-bar #docs-filter-clear, .filter-bar #team-filter-clear { margin-left: 0; }
  .period-presets { width: 100%; }
  .period-chip { flex: 1; text-align: center; }
  .filter-date-range { flex-wrap: wrap; }
  .filter-date-range input[type="date"] { flex: 1; width: auto; min-width: 100px; }

  /* Banner de boleto urgente: em telas estreitas o botão desce pra própria linha
     em vez de espremer o texto. */
  .urgent-banner { flex-wrap: wrap; }
  .urgent-banner .btn-primary { width: 100%; }

  /* Alvo de toque mínimo pros botões-ícone (bell, kebab, avatar-upload etc.) */
  .icon-btn { width: 40px; height: 40px; }
  /* .upload-file-remove (X de cada arquivo selecionado em Enviar Documento)
     era 24x24 — bom o suficiente pra mouse, pequeno demais pra dedo. */
  .upload-file-remove { width: 36px; height: 36px; }
}

@media (max-width: 420px) {
  .stats-row { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .card-grid-hero { grid-template-columns: 1fr; }
  .card-grid-archive { grid-template-columns: 1fr; }
  .topbar-actions .user-chip span { display: none; }

  /* Calendário mini: mantém a grade de 7 colunas (não vira lista), só reduz
     a escala das células pra não ficar apertado em telas bem estreitas. */
  .cal-cell { height: 22px; }
  .cal-daynum { width: 18px; height: 17px; font-size: 10px; }
  .calendar-mini-head span { min-width: 60px; font-size: 10.5px; }
  .icon-btn-sm { width: 24px; height: 24px; }

  /* Busca + "Mais filtros"/"Filtros" disputando espaço numa linha só ficava
     apertado demais nesse tamanho de tela — cada um ganha a linha inteira. */
  .docs-toolbar { flex-direction: column; align-items: stretch; }
  .docs-toolbar .btn { width: 100%; justify-content: center; }
}