/* ─── Tab Pills ───────────────────────────────────────── */
.tar-tabs {
  display: inline-flex;
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
}
.tar-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 18px;
  border: none; background: transparent; cursor: pointer;
  border-radius: 7px;
  font-size: .875rem; font-weight: 500;
  color: var(--text-muted, #64748b);
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.tar-tab:hover { background: rgba(255,255,255,.7); color: var(--text); }
.tar-tab.active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
  font-weight: 600;
}
.tar-tab svg { width: 15px; height: 15px; }

/* ─── Cards ───────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
}

.card-header-left { display: flex; flex-direction: column; }
.card-title  { font-size: .9375rem; font-weight: 600; }
.card-subtitle { font-size: .8125rem; color: var(--text-2); margin-top: .2rem; }

.card-body { padding: 1.5rem; }
.card-body-sm { padding: 1.25rem; }
.card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
}

/* Stat Card */
.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1.375rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.stat-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .75rem; }

.stat-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-icon.blue   { background: var(--primary-muted); color: var(--primary); }
.stat-icon.green  { background: var(--success-bg);    color: var(--success); }
.stat-icon.yellow { background: var(--warning-bg);    color: var(--warning); }
.stat-icon.red    { background: var(--danger-bg);     color: var(--danger); }
.stat-icon.purple { background: #f5f3ff;              color: #7c3aed; }

.stat-label { font-size: .8125rem; color: var(--text-2); font-weight: 500; }
.stat-value { font-size: 1.625rem; font-weight: 700; color: var(--text); line-height: 1; margin-top: .375rem; }
.stat-value-sm { font-size: 1.25rem; }
.stat-sub   { font-size: .75rem; color: var(--text-3); margin-top: .375rem; }
.stat-sub b { color: var(--text-2); }

/* Calc Card (config derived values) */
.calc-card {
  border-radius: var(--radius);
  border: 1px solid;
  padding: 1.125rem 1.25rem;
}
.calc-card.blue   { background: var(--primary-muted); border-color: var(--primary-light); }
.calc-card.green  { background: var(--success-bg);    border-color: var(--success-border); }
.calc-card.yellow { background: var(--warning-bg);    border-color: var(--warning-border); }
.calc-card.purple { background: #f5f3ff;              border-color: #ddd6fe; }

.calc-card-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.calc-card-value { font-size: 1.5rem; font-weight: 700; margin: .25rem 0; line-height: 1; }
.calc-card-desc  { font-size: .75rem; opacity: .75; line-height: 1.4; }
.calc-card.blue   .calc-card-label, .calc-card.blue   .calc-card-value, .calc-card.blue   .calc-card-desc { color: #1e40af; }
.calc-card.green  .calc-card-label, .calc-card.green  .calc-card-value, .calc-card.green  .calc-card-desc { color: #065f46; }
.calc-card.yellow .calc-card-label, .calc-card.yellow .calc-card-value, .calc-card.yellow .calc-card-desc { color: #92400e; }
.calc-card.purple .calc-card-label, .calc-card.purple .calc-card-value, .calc-card.purple .calc-card-desc { color: #4c1d95; }

/* ─── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5625rem 1.125rem;
  font-size: .875rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t), color var(--t);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(37,99,235,.2);
}
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 2px 6px rgba(37,99,235,.35); }

.btn-secondary {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--surface-2); color: var(--text); border-color: #cbd5e1; }

.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn-danger:hover { background: #dc2626; }

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-sm { padding: .375rem .75rem; font-size: .8125rem; }
.btn-lg { padding: .75rem 1.5rem; font-size: .9375rem; }

.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn-icon {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}

/* ─── Forms ───────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .375rem; }

.form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-2);
}
.form-label .required { color: var(--danger); margin-left: 2px; }

.form-control {
  width: 100%;
  padding: .5625rem .875rem;
  font-size: .9375rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
  line-height: 1.5;
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.form-control.error { border-color: var(--danger); }
.form-control:focus.error { box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.form-control::placeholder { color: var(--text-3); }
.form-control:disabled { background: var(--surface-2); cursor: not-allowed; opacity: .7; }

.form-hint { font-size: .75rem; color: var(--text-3); }
.form-error { font-size: .75rem; color: var(--danger); }

.input-group { display: flex; }
.input-group .input-addon {
  display: flex;
  align-items: center;
  padding: 0 .875rem;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  font-size: .875rem;
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.input-group .input-addon:first-child {
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.input-group .input-addon:last-child {
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.input-group .form-control {
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.input-group .form-control:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .form-control:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.form-row { display: grid; gap: 1rem; }
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }

select.form-control { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.25rem;
}
/* O <select> fechado já herdava --surface/--text certos (dark ou light,
   dependendo do escopo). A LISTA que abre ao clicar é um popup nativo
   à parte, renderizado pelo navegador por cima de tudo — sem isso, ela
   ignorava o tema da página e sempre abria no branco padrão do
   navegador, com o texto claro (pensado pra fundo escuro) quase
   invisível em cima. Chrome/Edge/Firefox respeitam background/color
   direto no <option> pra estilizar essa lista.
   IMPORTANTE: usar --bg (sólido), não --surface (translúcido, ~5%
   branco) — mesma lição do painel da sidebar/drawer de preview: esse
   popup não tem um "fundo de página" sólido pintado atrás dele pra a
   translucidez compor contra, então --surface renderiza quase todo
   branco (fundo nativo do popup + 5% de branco por cima = ~branco). */
select.form-control option,
select.form-control optgroup {
  background: var(--bg);
  color: var(--text);
}

/* ─── Badges ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .6875rem; font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 99px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-blue   { background: var(--primary-muted);  color: var(--primary);  border-color: var(--primary-light); }
.badge-green  { background: var(--success-bg);     color: var(--success);  border-color: var(--success-border); }
.badge-yellow { background: var(--warning-bg);     color: var(--warning);  border-color: var(--warning-border); }
.badge-red    { background: var(--danger-bg);      color: var(--danger);   border-color: var(--danger-border); }
.badge-gray   { background: var(--surface-2);      color: var(--text-2);   border-color: var(--border); }
.badge-purple { background: #f5f3ff;               color: #7c3aed;         border-color: #ddd6fe; }

.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ─── Progress Bar ────────────────────────────────────── */
.progress-wrap { display: flex; flex-direction: column; gap: .375rem; }
.progress-bar-track {
  height: 8px; background: var(--surface-2);
  border-radius: 99px; overflow: hidden;
  border: 1px solid var(--border);
}
.progress-bar-fill {
  height: 100%; border-radius: 99px;
  background: var(--primary);
  transition: width .4s ease;
}
.progress-bar-fill.green  { background: var(--success); }
.progress-bar-fill.yellow { background: var(--warning); }
.progress-bar-fill.red    { background: var(--danger); }
.progress-meta { display: flex; justify-content: space-between; font-size: .75rem; color: var(--text-3); }

/* ─── Alerts / Banners ────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: .875rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: .875rem;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-title { font-weight: 600; margin-bottom: .2rem; }
.alert-blue   { background: var(--info-bg);    border-color: var(--info-border);    color: #1e40af; }
.alert-green  { background: var(--success-bg); border-color: var(--success-border); color: #065f46; }
.alert-yellow { background: var(--warning-bg); border-color: var(--warning-border); color: #92400e; }
.alert-red    { background: var(--danger-bg);  border-color: var(--danger-border);  color: #991b1b; }

/* ─── Table ───────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.data-table th {
  text-align: left;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  padding: .75rem 1rem;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  background: var(--surface-2);
}
table.data-table th:first-child { border-radius: var(--radius-sm) 0 0 0; }
table.data-table th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }
table.data-table td {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: var(--surface-2); }
table.data-table .col-num  { text-align: right; font-variant-numeric: tabular-nums; }
table.data-table .col-actions { text-align: right; width: 80px; }

/* ─── Divider ─────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); margin: 1.5rem 0; }
.divider-label {
  display: flex; align-items: center; gap: .75rem;
  font-size: .75rem; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 1.5rem 0;
}
.divider-label::before, .divider-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ─── Empty State ─────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem 1.5rem; text-align: center; color: var(--text-3);
}
.empty-state svg { width: 48px; height: 48px; margin-bottom: 1rem; opacity: .4; }
.empty-state h3 { font-size: 1rem; font-weight: 600; color: var(--text-2); margin-bottom: .5rem; }
.empty-state p  { font-size: .875rem; max-width: 320px; line-height: 1.6; }

/* ─── Toast ───────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  display: flex; flex-direction: column; gap: .625rem;
  z-index: 9999; pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem 1.25rem;
  background: var(--toast-bg); color: var(--toast-text);
  border: 1px solid var(--toast-border);
  border-left: 4px solid;
  border-radius: 1.25rem; box-shadow: var(--shadow-lg);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  pointer-events: all; width: 24rem; max-width: calc(100vw - 3rem);
  animation: toastIn .25s ease;
}
.toast.success { border-left-color: var(--toast-success); }
.toast.error   { border-left-color: var(--toast-danger); }
.toast.warning { border-left-color: var(--toast-warning); }
.toast.info    { border-left-color: var(--toast-info); }

.toast svg     { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: .0625rem; }
.toast.success svg { color: var(--toast-success); }
.toast.error   svg { color: var(--toast-danger); }
.toast.warning svg { color: var(--toast-warning); }
.toast.info    svg { color: var(--toast-info); }

.toast-body  { flex: 1; min-width: 0; }
.toast-title { font-size: .8125rem; font-weight: 600; color: var(--toast-text); line-height: 1.4; }
.toast-desc  { font-size: .75rem; font-weight: 400; color: var(--toast-text-muted); line-height: 1.5; margin-top: .125rem; }

.toast-out { animation: toastOut .25s ease forwards; }

@keyframes toastIn  { from { opacity:0; transform: translateX(1rem); } to { opacity:1; transform:none; } }
@keyframes toastOut { from { opacity:1; transform:none; } to { opacity:0; transform: translateX(1rem); } }

/* ─── Separator / Section ─────────────────────────────── */
.section-title {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin-bottom: 1rem;
}

/* ─── Year history table ──────────────────────────────── */
.year-row-chip {
  display: inline-flex; align-items: center; gap: .375rem;
  background: var(--primary-muted); color: var(--primary);
  font-size: .75rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: var(--radius-sm);
  border: 1px solid var(--primary-light);
}
.year-row-current { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ─── Login specific ──────────────────────────────────── */
.login-form-title { font-size: 1rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--text-2); }
.login-error {
  background: var(--danger-bg); border: 1px solid var(--danger-border);
  color: #991b1b; border-radius: var(--radius-sm);
  padding: .625rem .875rem; font-size: .8125rem;
  display: flex; align-items: center; gap: .5rem;
}
/* Dentro da tela de login (Design System Nova), o alerta usa os tokens
   semânticos de perigo do próprio tema dark/light do card glass. */
.login-page .login-error {
  width: 100%; box-sizing: border-box;
  background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.35);
  color: #FF6B6B; border-radius: var(--nova-radius-sm);
  padding: .625em .875em; font-size: .8125em; margin-bottom: 0;
}
.login-page.light .login-error { background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.30); color: #DC2626; }
.login-page .login-error svg { flex: none; }

/* ─── Modal ───────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(2px);
  animation: fadeIn .18s ease;
}
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 500px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  animation: slideUp .22s ease;
}
.modal-body { overflow-y: auto; flex: 1 1 auto; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 1rem; font-weight: 700; }
.modal-close {
  width: 30px; height: 30px;
  border: none; background: none; cursor: pointer;
  border-radius: var(--radius-sm); color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t);
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-body   { padding: 1.5rem; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: .75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

@keyframes fadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:none } }

/* Bug corrigido: .modal (sem overlayClass) usava var(--surface)/var(--surface-2),
   que no tema dark são translúcidos (rgba(255,255,255,.05/.035)) — pensados pra
   cards em fluxo normal, sentados sobre o --bg sólido já pintado atrás dentro de
   uma página. O modal não está em fluxo normal: é sobreposto (via .modal-overlay
   position:fixed) por cima de QUALQUER tela por trás, sem blur forte o bastante
   pra disfarçar (.modal-overlay só tem blur(2px)) — o conteúdo de trás vazava
   visualmente através do card, parecendo transparente/quebrado. Mesma família de
   bug já documentada pro drawer de preview do Comunicado e popup do <select>.
   Corrigido com fundo sólido dedicado (mesma cor elevada de sidebar/topbar). */
html.dark .modal        { background: #0E1421; }
html.dark .modal-footer { background: #10182A; }

/* Modais - Design System Nova Promotora (glass, escopo isolado via opts.overlayClass).
   O scrim (fundo por trás do card) fica escuro nos dois temas de propósito
   — é uma camada de "dimming", não faz sentido ela virar clara. Só as
   variáveis do CARD (--bg/--surface/--text/etc.) trocam por tema. */
.modal-overlay.modal-dark-glass {
  background: rgba(8,11,18,.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

html.dark .modal-overlay.modal-dark-glass {
  --bg: #080B12;
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);
}

html.light .modal-overlay.modal-dark-glass {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);
}

.modal-overlay.modal-dark-glass .modal {
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.modal-overlay.modal-dark-glass .btn-primary { box-shadow: none; }
html.dark  .modal-overlay.modal-dark-glass .btn-primary:hover { box-shadow: 0 .5rem 1.25rem rgba(61,123,255,.35); }
html.light .modal-overlay.modal-dark-glass .btn-primary:hover { box-shadow: 0 .5rem 1.25rem rgba(43,98,214,.25); }
.modal-overlay.modal-dark-glass .alert-blue   { color: var(--info); }
.modal-overlay.modal-dark-glass .alert-red    { color: var(--danger); }
.modal-overlay.modal-dark-glass .alert-yellow { color: var(--warning); }
.modal-overlay.modal-dark-glass .login-error { color: var(--danger); }
.modal-overlay.modal-dark-glass *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ─── Calendário ──────────────────────────────────────── */

/* Grid anual: 4 colunas */
.cal-anual-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 1280px) { .cal-anual-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  900px) { .cal-anual-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  600px) { .cal-anual-grid { grid-template-columns: 1fr; } }

/* Card de mês */
.cal-mes-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
  overflow: hidden;
  min-height: 160px;
  display: flex; flex-direction: column;
}
.cal-mes-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: #cbd5e1;
}
.cal-mes-atual  { border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.cal-mes-passado { opacity: .7; }

.cal-mes-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem .625rem;
  border-bottom: 3px solid transparent;
}
.cal-mes-nome { font-size: .9375rem; font-weight: 700; color: var(--text); }
.cal-mes-actions { display: flex; align-items: center; gap: .375rem; }

.cal-count-badge {
  color: #fff; font-size: .6875rem; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
  line-height: 1.4;
}
.cal-add-btn {
  width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-3); transition: background var(--t), color var(--t), border-color var(--t);
  flex-shrink: 0;
}
.cal-add-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.cal-add-btn svg  { width: 13px; height: 13px; }

.cal-mes-body { padding: .625rem 1rem .875rem; flex: 1; }

.cal-chip {
  display: flex; align-items: center; gap: .375rem;
  font-size: .75rem; color: var(--text-2);
  padding: .2rem 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-chip-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.cal-chip-mais {
  font-size: .6875rem; color: var(--text-3);
  font-weight: 600; padding: .2rem 0; padding-left: 1rem;
}
.cal-empty {
  font-size: .75rem; color: var(--text-3);
  font-style: italic; margin-top: .25rem;
}

/* Vista mensal */
.cal-mensal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; gap: 1rem;
}
.cal-mensal-titulo {
  font-size: 1.25rem; font-weight: 700;
  display: flex; align-items: center;
}

.cal-mensal-lista { display: flex; flex-direction: column; gap: .875rem; }

/* Card de entrada */
.cal-entrada-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t);
}
.cal-entrada-card:hover { box-shadow: var(--shadow-md); }
.cal-entrada-barra { width: 5px; flex-shrink: 0; }
.cal-entrada-body  { flex: 1; padding: 1rem 1.25rem; min-width: 0; }
.cal-entrada-top   { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .375rem; }
.cal-entrada-nome  { font-size: .9375rem; font-weight: 600; }
.cal-entrada-meta  { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .375rem; }
.cal-meta-item     { display: flex; align-items: center; gap: .3rem; font-size: .8125rem; color: var(--text-2); }
.cal-meta-item svg { width: 13px; height: 13px; }
.cal-entrada-obs   { font-size: .8125rem; color: var(--text-2); line-height: 1.5; padding: .5rem .75rem; background: var(--surface-2); border-radius: var(--radius-sm); border-left: 3px solid var(--border); margin-top: .5rem; }

/* Vista lista */
.cal-lista-grupo  { padding: 1.25rem 1.5rem 1rem; }
.cal-lista-mes-header {
  display: flex; align-items: center; gap: .75rem;
  border-left: 4px solid;
  padding-left: .75rem;
  margin-bottom: .75rem;
}
.cal-lista-mes-nome { font-size: 1rem; font-weight: 700; }

/* Textarea */
textarea.form-control {
  resize: vertical;
  min-height: 80px;
  line-height: 1.6;
}

/* ─── Gestão de Ações ─────────────────────────────────── */

/* Grid de cards */
.gestao-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1280px) { .gestao-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  720px) { .gestao-grid { grid-template-columns: 1fr; } }

/* Card de ação */
.gestao-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--t);
  display: flex; flex-direction: column;
}
.gestao-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--primary-light); }

.gestao-card-top  { height: 5px; flex-shrink: 0; }
.gestao-card-body { padding: 1.125rem 1.25rem; flex: 1; display: flex; flex-direction: column; }

.gestao-card-nome {
  font-size: 1rem; font-weight: 700;
  color: var(--text);
  margin-bottom: .375rem; line-height: 1.3;
}

.gestao-card-resp {
  display: flex; align-items: center; gap: .3rem;
  font-size: .8125rem; color: var(--text-2); margin-bottom: .25rem;
}
.gestao-card-resp svg { width: 13px; height: 13px; }

.gestao-card-divider { height: 1px; background: var(--border); margin: .875rem 0; }

/* Detalhe — header */
.gestao-detalhe-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.gestao-detalhe-nome {
  font-size: 1.25rem; font-weight: 700;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Tabs do detalhe */
.gestao-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.gestao-tab {
  display: flex; align-items: center; gap: .4rem;
  padding: .625rem 1.125rem;
  border: none; background: none; cursor: pointer;
  font-size: .875rem; font-weight: 500;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--t), border-color var(--t);
  white-space: nowrap;
}
.gestao-tab:hover { color: var(--text-2); }
.gestao-tab.active { color: var(--primary); border-color: var(--primary); font-weight: 600; }
.gestao-tab svg { width: 15px; height: 15px; }

.gestao-tab-body { padding-bottom: 2rem; }

/* ─── Encerramento / Relatório ────────────────────────── */

.enc-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem;
}

/* Bloco do relatório */
.enc-relatorio {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 1000px;
}

/* Cabeçalho */
.enc-cabecalho {
  background: var(--sidebar-bg);
  padding: 1.5rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
}
.enc-cabecalho-brand { display: flex; align-items: center; gap: 1rem; }
.enc-brand-icon {
  width: 44px; height: 44px; background: var(--primary);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.enc-brand-icon svg { width: 22px; height: 22px; color: #fff; }
.enc-brand-title { font-size: 1.125rem; font-weight: 700; color: #fff; }
.enc-brand-sub   { font-size: .75rem; color: var(--sidebar-text); margin-top: 2px; }
.enc-cabecalho-meta { text-align: right; }
.enc-meta-item { font-size: .75rem; color: var(--sidebar-text); }

/* Nome da ação */
.enc-acao-header { padding: 1.5rem 2rem 1rem; }
.enc-acao-nome   { font-size: 1.625rem; font-weight: 800; color: var(--text); margin-bottom: .75rem; }
.enc-acao-info   { display: flex; gap: .625rem; flex-wrap: wrap; }
.enc-info-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8125rem; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: .25rem .75rem; border-radius: 99px;
}
.enc-info-chip svg { width: 13px; height: 13px; }
.enc-finalizada { background: var(--success-bg) !important; color: var(--success) !important; border-color: var(--success-border) !important; }

.enc-divider { height: 1px; background: var(--border); margin: 0 2rem; }

/* Seções */
.enc-secao { padding: 1.5rem 2rem; }
.enc-secao-titulo {
  display: flex; align-items: center; gap: .5rem;
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-3); margin-bottom: 1.25rem;
}
.enc-secao-titulo svg { width: 15px; height: 15px; }

/* Orçamento cards */
.enc-orc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 1rem; }
@media (max-width:900px) { .enc-orc-grid { grid-template-columns: repeat(2,1fr); } }

.enc-orc-card  { border-radius: var(--radius); border: 1.5px solid; padding: 1rem 1.125rem; }
.enc-orc-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .65; }
.enc-orc-valor { font-size: 1.375rem; font-weight: 800; margin: .25rem 0; line-height: 1; }
.enc-orc-sub   { font-size: .75rem; opacity: .7; }

.enc-orc-blue   { background: var(--primary-muted); border-color: var(--primary-light); color: #1e40af; }
.enc-orc-purple { background: #f5f3ff; border-color: #ddd6fe; color: #4c1d95; }
.enc-orc-green  { background: var(--success-bg);  border-color: var(--success-border); color: #065f46; }
.enc-orc-red    { background: var(--danger-bg);   border-color: var(--danger-border);  color: #991b1b; }
.enc-orc-yellow { background: var(--warning-bg);  border-color: var(--warning-border); color: #92400e; }

/* Destaques economia/excedente */
.enc-destaque-row { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.enc-destaque {
  flex: 1; min-width: 220px;
  border-radius: var(--radius); padding: 1.125rem 1.25rem;
  border: 2px solid;
}
.enc-destaque-label { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .375rem; }
.enc-destaque-valor { font-size: 2rem; font-weight: 800; line-height: 1; }
.enc-destaque-sub   { font-size: .8125rem; margin-top: .375rem; opacity: .8; }
.enc-destaque-green { background: var(--success-bg); border-color: var(--success); color: #065f46; }
.enc-destaque-red   { background: var(--danger-bg);  border-color: var(--danger);  color: #991b1b; }

/* Indicadores */
.enc-ind-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
@media (max-width:900px) { .enc-ind-grid { grid-template-columns: 1fr; } }

.enc-ind-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.enc-ind-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: .375rem; }
.enc-ind-valor { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.enc-ind-sub   { font-size: .75rem; color: var(--text-3); margin-top: .25rem; }
.enc-ind-detalhe { margin-top: .75rem; border-top: 1px solid var(--border); padding-top: .75rem; }
.enc-ind-row { display: flex; justify-content: space-between; font-size: .8125rem; padding: .2rem 0; }
.enc-ind-row-total { font-weight: 700; border-top: 1px solid var(--border); padding-top: .375rem; margin-top: .375rem; }

/* Lições aprendidas */
.enc-licoes-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
@media (max-width: 768px) { .enc-licoes-grid { grid-template-columns: 1fr; } }

.enc-licao-card { border-radius: var(--radius); border-left: 4px solid; padding: 1rem 1.25rem; }
.enc-licao-titulo { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.enc-licao-texto  { font-size: .875rem; line-height: 1.6; color: var(--text-2); }

.enc-licao-green  { background: var(--success-bg); border-color: var(--success); }
.enc-licao-green  .enc-licao-titulo { color: #065f46; }
.enc-licao-red    { background: var(--danger-bg);  border-color: var(--danger); }
.enc-licao-red    .enc-licao-titulo { color: #991b1b; }
.enc-licao-yellow { background: var(--warning-bg); border-color: var(--warning); }
.enc-licao-yellow .enc-licao-titulo { color: #92400e; }
.enc-licao-blue   { background: var(--info-bg);    border-color: var(--info); }
.enc-licao-blue   .enc-licao-titulo { color: #1e40af; }

/* Rodapé */
.enc-rodape {
  background: var(--surface-2); border-top: 1px solid var(--border);
  padding: 1rem 2rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  font-size: .75rem; color: var(--text-3);
}

.enc-vazio { font-size: .875rem; color: var(--text-3); font-style: italic; padding: .5rem 0; }

/* Opção de nova categoria no dropdown */
.fin-cat-nova-opt { color: var(--primary); font-weight: 600; border-top: 1px solid var(--border); }
.fin-cat-nova-opt svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* ─── Origens de recursos (despesa) ────────────────────── */
.origens-box { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.origem-row { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.origem-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: .85rem; font-weight: 600; }
.origem-saldo { font-size: .78rem; font-weight: 400; }
.origem-total-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--bg); border-top: 1px solid var(--border); font-size: .9rem; font-weight: 600; }
.origem-total-val { font-size: 1.1rem; font-weight: 700; color: var(--primary); }

/* Card clicável no dashboard */
.stat-card-clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.stat-card-clickable:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-1px); }

/* Grid de 5 colunas */
.grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

/* ─── Modal largo ──────────────────────────────────────── */
.modal-wide { width: min(1400px, 98vw) !important; max-width: 1400px !important; }

/* ─── Detalhe da tarefa — abas ──────────────────────────── */
.tar-det-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 16px; }
.tar-det-tab  { background: none; border: none; padding: 8px 16px; font-size: .9rem; font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 4px 4px 0 0; transition: color .15s, border-color .15s; }
.tar-det-tab:hover  { color: var(--primary); }
.tar-det-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tar-chat-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; border-radius: 99px; font-size: .7rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; }

/* ─── Detalhe corpo ─────────────────────────────────────── */
.tar-det-corpo { padding-bottom: 8px; }
.tar-det-grid  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.tar-det-item  { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
.tar-det-item-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 4px; }
.tar-det-item-valor { font-size: .9rem; font-weight: 600; }
.tar-det-bloco { margin-top: 12px; }
.tar-det-bloco-label { font-size: .78rem; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.tar-det-bloco-texto { font-size: .88rem; line-height: 1.6; white-space: pre-wrap; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }

/* ─── Chat ──────────────────────────────────────────────── */
.tar-chat-wrap  { display: flex; flex-direction: column; height: 420px; }
.tar-chat-lista { flex: 1; overflow-y: auto; padding: 4px 0 12px; display: flex; flex-direction: column; gap: 14px; }
.tar-chat-vazio { color: var(--text-muted); font-size: .88rem; text-align: center; margin: auto; padding: 32px 0; }
.tar-chat-msg   { display: flex; gap: 10px; align-items: flex-start; }
.tar-chat-msg.proprio { flex-direction: row-reverse; }
.tar-chat-avatar { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: #fff; }
.tar-chat-balao  { max-width: 78%; }
.tar-chat-msg.proprio .tar-chat-balao { align-items: flex-end; display: flex; flex-direction: column; }
.tar-chat-meta   { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tar-chat-msg.proprio .tar-chat-meta { flex-direction: row-reverse; }
.tar-chat-nome   { font-size: .8rem; font-weight: 700; }
.tar-chat-hora   { font-size: .73rem; color: var(--text-muted); }
.tar-chat-texto  { background: var(--surface); border: 1px solid var(--border); border-radius: 0 12px 12px 12px; padding: 8px 12px; font-size: .875rem; line-height: 1.5; word-break: break-word; }
.tar-chat-msg.proprio .tar-chat-texto { background: #eff6ff; border-color: #bfdbfe; border-radius: 12px 0 12px 12px; }
.tar-chat-input-row { display: flex; gap: 8px; align-items: flex-end; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 4px; }
.tar-chat-input { flex: 1; resize: none; font-size: .875rem; line-height: 1.5; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--surface); color: var(--text); outline: none; }
.tar-chat-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.tar-chat-send  { white-space: nowrap; align-self: flex-end; }

/* ─── Módulo Usuários ───────────────────────────────────── */
.usr-avatar { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: #fff; }
.usr-section-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 14px; margin-top: 4px; }
.usr-perm-box   { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.usr-perm-title { font-size: .82rem; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.usr-perm-title svg { width: 14px; height: 14px; color: var(--primary); }
.usr-perm-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.usr-perm-item  { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; font-size: .78rem; }
.usr-perm-item svg { width: 12px; height: 12px; color: var(--success); }

/* ─── Modal de tarefa ──────────────────────────────────── */
.tar-modal-section-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 14px; margin-top: 4px; }
.tar-readonly-field { background: var(--bg); color: var(--text-3); font-size: .82rem; font-style: italic; min-height: 38px; display: flex; align-items: center; cursor: default; }

/* ─── Botões rápidos de tarefa ──────────────────────────── */
.tar-btn-iniciar  { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; font-size: .78rem; padding: 3px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.tar-btn-iniciar:hover  { background: #dbeafe; }
.tar-btn-concluir { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; font-size: .78rem; padding: 3px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.tar-btn-concluir:hover { background: #dcfce7; }
.tar-btn-quick    { font-size: .75rem; padding: 3px 8px; opacity: .55; cursor: default; white-space: nowrap; }

/* ─── Multi-select de responsáveis ─────────────────────── */
.resp-multiselect { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.resp-options {
  display: flex; flex-direction: column;
  max-height: 160px; overflow-y: auto;
  padding: .5rem;
  gap: .25rem;
  background: var(--surface);
}
.resp-option {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem;
  border-radius: 6px;
  font-size: .875rem;
  cursor: pointer;
  transition: background .12s;
}
.resp-option:hover { background: var(--bg); }
.resp-option input[type="checkbox"] { accent-color: var(--primary); width: 15px; height: 15px; flex-shrink: 0; }
.resp-option span { flex: 1; }
.resp-del {
  background: none; border: none; cursor: pointer; padding: 2px;
  border-radius: 50%; display: flex; align-items: center; flex-shrink: 0;
  color: var(--text-3); transition: background .12s, color .12s;
}
.resp-del:hover { background: rgba(255,107,107,.16); color: var(--danger); }
.resp-del svg { width: 12px; height: 12px; }
.resp-add-row {
  display: flex; gap: .5rem; align-items: center;
  padding: .5rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.resp-add-row .form-control { flex: 1; font-size: .8125rem; padding: .35rem .6rem; }

/* ─── Calendário — seletor de ano ───────────────────────── */
.cal-ano-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .2rem .25rem;
}
.cal-ano-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: .3rem .4rem;
  border-radius: 6px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  transition: background .15s, color .15s;
}
.cal-ano-btn:hover { background: var(--bg); color: var(--primary); }
.cal-ano-btn svg   { width: 16px; height: 16px; }
.cal-ano-label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  padding: 0 .5rem;
  min-width: 3rem;
  text-align: center;
}

/* ─── Calendário — lista de sugestões ───────────────────── */
.cal-sug-list {
  display: none;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.cal-sug-item {
  padding: .6rem 1rem;
  font-size: .875rem;
  color: var(--text);
  cursor: pointer;
  transition: background .12s;
}
.cal-sug-item:hover { background: var(--bg); }
.fin-cat-item { display: flex; align-items: center; gap: .5rem; }
.fin-cat-item span { flex: 1; }
.fin-cat-del {
  background: none; border: none; cursor: pointer; padding: 2px;
  border-radius: 50%; display: flex; align-items: center; flex-shrink: 0;
  color: var(--text-3); transition: background .12s, color .12s;
}
.fin-cat-del:hover { background: rgba(255,107,107,.16); color: var(--danger); }
.fin-cat-del svg { width: 12px; height: 12px; }

/* ─── Dashboard Executivo ───────────────────────────────── */
.dash-section-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .75rem;
  margin-top: .25rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}

.stat-card-top { display: flex; justify-content: space-between; align-items: flex-start; }

.stat-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-icon svg { width: 20px; height: 20px; }
.stat-icon.blue  { background: #eff6ff; color: var(--primary); }
.stat-icon.green { background: #f0fdf4; color: var(--success); }
.stat-icon.red   { background: #fef2f2; color: var(--danger);  }
.stat-icon.yellow{ background: #fffbeb; color: var(--warning); }

/* Dashboard - Design System Nova Promotora (escopo isolado).
   Reskin visual aplicado so dentro de .dashboard-page; sidebar e topbar
   permanecem sempre escuras (chrome fixo), independente do tema.

   PROVA DE CONCEITO do tema claro/escuro de verdade (App.toggleTema(),
   classe em <html>): as variáveis viram DUAS declarações, uma por tema,
   e tudo que já usava var(--xxx) nas regras derivadas abaixo continua
   igual — não precisa duplicar HTML/JS, só a declaração das variáveis. */
html.dark .dashboard-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);
}

html.light .dashboard-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);
}

.dashboard-page {
  /* "sangra" para preencher o container #main-content por trás
     (cancela o padding do .main-content em vez de flutuar como
     um retângulo colorido sobre o fundo do container) */
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));
}

.dashboard-page .card,
.dashboard-page .stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
html.dark .dashboard-page .stat-card:hover,
html.dark .dashboard-page .stat-card-clickable:hover { box-shadow: 0 .75rem 1.75rem rgba(0,0,0,.35); border-color: rgba(255,255,255,.16); }
html.light .dashboard-page .stat-card:hover,
html.light .dashboard-page .stat-card-clickable:hover { box-shadow: 0 .75rem 1.75rem rgba(16,24,42,.12); border-color: #C7D0E0; }

/* Ícones dos KPIs e texto de alerta usam hex fixo no resto do app (pensados
   pro tema claro original) — só sobrescreve no tema ESCURO; no claro, as
   regras base (.stat-icon.*/.alert-* em components.css) já servem certas. */
html.dark .dashboard-page .stat-icon.blue   { background: rgba(61,123,255,.16);  color: var(--primary); }
html.dark .dashboard-page .stat-icon.green  { background: rgba(74,222,128,.16);  color: var(--success); }
html.dark .dashboard-page .stat-icon.red    { background: rgba(255,107,107,.16); color: var(--danger);  }
html.dark .dashboard-page .stat-icon.yellow { background: rgba(251,191,36,.16);  color: var(--warning); }
html.dark .dashboard-page .stat-icon.purple { background: rgba(61,123,255,.16);  color: var(--primary); }

html.dark .dashboard-page .alert-blue   { color: var(--info); }
html.dark .dashboard-page .alert-green  { color: var(--success); }
html.dark .dashboard-page .alert-yellow { color: var(--warning); }
html.dark .dashboard-page .alert-red    { color: var(--danger); }

.dashboard-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.dashboard-page .btn-primary { box-shadow: none; }
html.dark .dashboard-page .btn-primary:hover  { box-shadow: 0 .5rem 1.25rem rgba(61,123,255,.35); }
html.light .dashboard-page .btn-primary:hover { box-shadow: 0 .5rem 1.25rem rgba(43,98,214,.25); }
.dashboard-page a { color: var(--primary); }

.dashboard-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 1280px) { .dashboard-page .cols-5 { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 768px)  { .dashboard-page .cols-5 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px)  { .dashboard-page .cols-5 { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .dashboard-page * { transition: none !important; }
}

/* Envios (listagem) - Design System Nova Promotora (escopo isolado).
   Mesma receita do .dashboard-page (ver CLAUDE.md), agora com par
   html.dark/html.light em vez de só escuro. */
html.dark .envios-lista-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);

  --status-rascunho-bg: rgba(255,255,255,.08);  --status-rascunho-color: var(--text-2);
  --status-enviado-bg: rgba(74,222,128,.14);    --status-enviado-color: var(--success);
  --status-cancelado-bg: rgba(255,107,107,.14); --status-cancelado-color: var(--danger);

  /* Status de destinatário (Esteira, que reaproveita este wrapper) */
  --dstatus-aguardando_resposta-bg: rgba(111,155,255,.14);    --dstatus-aguardando_resposta-color: var(--info);
  --dstatus-lembrete_enviado-bg: rgba(251,191,36,.14);        --dstatus-lembrete_enviado-color: var(--warning);
  --dstatus-respondido-bg: rgba(74,222,128,.14);              --dstatus-respondido-color: var(--success);
  --dstatus-encerrado_sem_resposta-bg: rgba(255,107,107,.14); --dstatus-encerrado_sem_resposta-color: var(--danger);
}

html.light .envios-lista-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);

  --status-rascunho-bg: rgba(16,24,42,.06);   --status-rascunho-color: var(--text-2);
  --status-enviado-bg: rgba(21,128,61,.10);   --status-enviado-color: var(--success);
  --status-cancelado-bg: rgba(220,38,38,.10); --status-cancelado-color: var(--danger);

  --dstatus-aguardando_resposta-bg: rgba(43,98,214,.10);   --dstatus-aguardando_resposta-color: var(--info);
  --dstatus-lembrete_enviado-bg: rgba(180,83,9,.10);       --dstatus-lembrete_enviado-color: var(--warning);
  --dstatus-respondido-bg: rgba(21,128,61,.10);            --dstatus-respondido-color: var(--success);
  --dstatus-encerrado_sem_resposta-bg: rgba(220,38,38,.10); --dstatus-encerrado_sem_resposta-color: var(--danger);
}

.envios-lista-page {
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));
}

.envios-lista-page .card,
.envios-lista-page .stat-card { background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); }
html.dark .envios-lista-page .stat-card:hover,
html.dark .envios-lista-page .stat-card-clickable:hover { box-shadow: 0 .75rem 1.75rem rgba(0,0,0,.35); border-color: rgba(255,255,255,.16); }
html.light .envios-lista-page .stat-card:hover,
html.light .envios-lista-page .stat-card-clickable:hover { box-shadow: 0 .75rem 1.75rem rgba(16,24,42,.12); border-color: #C7D0E0; }

html.dark .envios-lista-page .stat-icon.blue   { background: rgba(61,123,255,.16);  color: var(--primary); }
html.dark .envios-lista-page .stat-icon.green  { background: rgba(74,222,128,.16);  color: var(--success); }
html.dark .envios-lista-page .stat-icon.red    { background: rgba(255,107,107,.16); color: var(--danger);  }
html.dark .envios-lista-page .stat-icon.yellow { background: rgba(251,191,36,.16);  color: var(--warning); }

.envios-lista-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.envios-lista-page .btn-primary { box-shadow: none; }
html.dark  .envios-lista-page .btn-primary:hover { box-shadow: 0 .5rem 1.25rem rgba(61,123,255,.35); }
html.light .envios-lista-page .btn-primary:hover { box-shadow: 0 .5rem 1.25rem rgba(43,98,214,.25); }
.envios-lista-page a { color: var(--primary); }
.envios-lista-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .envios-lista-page * { transition: none !important; }
}

/* Usuarios (listagem) - Design System Nova Promotora (escopo isolado). */
html.dark .usuarios-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);
}

html.light .usuarios-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);
}

.usuarios-page {
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));
}

.usuarios-page .card,
.usuarios-page .stat-card { background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); }
html.dark  .usuarios-page .stat-card:hover { box-shadow: 0 .75rem 1.75rem rgba(0,0,0,.35); border-color: rgba(255,255,255,.16); }
html.light .usuarios-page .stat-card:hover { box-shadow: 0 .75rem 1.75rem rgba(16,24,42,.12); border-color: #C7D0E0; }

html.dark .usuarios-page .stat-icon.blue   { background: rgba(61,123,255,.16);  color: var(--primary); }
html.dark .usuarios-page .stat-icon.green  { background: rgba(74,222,128,.16);  color: var(--success); }
html.dark .usuarios-page .stat-icon.red    { background: rgba(255,107,107,.16); color: var(--danger);  }
html.dark .usuarios-page .stat-icon.yellow { background: rgba(251,191,36,.16);  color: var(--warning); }
html.dark .usuarios-page .stat-icon.purple { background: rgba(61,123,255,.16);  color: var(--primary); }

.usuarios-page .badge-gray { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); padding: .15rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
html.dark  .usuarios-page .perfil-card-native { background: rgba(61,123,255,.08); }
html.light .usuarios-page .perfil-card-native { background: rgba(43,98,214,.06); }

.usuarios-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.usuarios-page .btn-primary { box-shadow: none; }
html.dark  .usuarios-page .btn-primary:hover { box-shadow: 0 .5rem 1.25rem rgba(61,123,255,.35); }
html.light .usuarios-page .btn-primary:hover { box-shadow: 0 .5rem 1.25rem rgba(43,98,214,.25); }
.usuarios-page a { color: var(--primary); }
.usuarios-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .usuarios-page * { transition: none !important; }
}

/* Grupos (listagem) - Design System Nova Promotora (escopo isolado). */
html.dark .grupos-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);
}

html.light .grupos-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);
}

.grupos-page {
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));
}

.grupos-page .card, .grupos-page .stat-card { background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); }

.grupos-page .badge-success, .grupos-page .badge-danger, .grupos-page .badge-info, .grupos-page .badge-warning { color: inherit; }
.grupos-page .badge-success { color: var(--success); }
.grupos-page .badge-danger  { color: var(--danger); }
.grupos-page .badge-info    { color: var(--info); }
.grupos-page .badge-warning { color: var(--warning); }

.grupos-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.grupos-page .btn-primary { box-shadow: none; }
html.dark  .grupos-page .btn-primary:hover { box-shadow: 0 .5rem 1.25rem rgba(61,123,255,.35); }
html.light .grupos-page .btn-primary:hover { box-shadow: 0 .5rem 1.25rem rgba(43,98,214,.25); }
.grupos-page a { color: var(--primary); }
.grupos-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .grupos-page * { transition: none !important; }
}

/* Formularios (listagem) - Design System Nova Promotora (escopo isolado). */
html.dark .formularios-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);
}

html.light .formularios-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);
}

.formularios-page {
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));
}

.formularios-page .card, .formularios-page .stat-card { background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); }
.formularios-page .badge-success { color: var(--success); }
.formularios-page .badge-warning { color: var(--warning); }
.formularios-page .badge-danger  { color: var(--danger); }
.formularios-page .badge-info    { color: var(--info); }
.formularios-page .badge-gray { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); padding: .15rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }

.formularios-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.formularios-page .btn-primary { box-shadow: none; }
html.dark  .formularios-page .btn-primary:hover { box-shadow: 0 .5rem 1.25rem rgba(61,123,255,.35); }
html.light .formularios-page .btn-primary:hover { box-shadow: 0 .5rem 1.25rem rgba(43,98,214,.25); }
.formularios-page a { color: var(--primary); }
.formularios-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .formularios-page * { transition: none !important; }
}

/* Esteira (listagem) - Design System Nova Promotora (escopo isolado). */
html.dark .esteira-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);

  --dest-status-aguardando_resposta-bg: rgba(111,155,255,.14);    --dest-status-aguardando_resposta-color: var(--info);
  --dest-status-lembrete_enviado-bg: rgba(251,191,36,.14);        --dest-status-lembrete_enviado-color: var(--warning);
  --dest-status-respondido-bg: rgba(74,222,128,.14);              --dest-status-respondido-color: var(--success);
  --dest-status-encerrado_sem_resposta-bg: rgba(255,107,107,.14); --dest-status-encerrado_sem_resposta-color: var(--danger);
}

html.light .esteira-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);

  --dest-status-aguardando_resposta-bg: rgba(43,98,214,.10);    --dest-status-aguardando_resposta-color: var(--info);
  --dest-status-lembrete_enviado-bg: rgba(180,83,9,.10);        --dest-status-lembrete_enviado-color: var(--warning);
  --dest-status-respondido-bg: rgba(21,128,61,.10);             --dest-status-respondido-color: var(--success);
  --dest-status-encerrado_sem_resposta-bg: rgba(220,38,38,.10); --dest-status-encerrado_sem_resposta-color: var(--danger);
}

.esteira-page {
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));

  /* Status de envio legado (_statusBadge() em esteira.js) — a maioria só
     delega pra tokens já theme-aware; "rascunho" é a exceção porque não
     tem um token cinza-neutro pronto (ver html.dark/html.light abaixo). */
  --status-rascunho-bg: var(--surface-2);               --status-rascunho-color: var(--text-2);
  --status-agendado-bg: var(--info-bg);                 --status-agendado-color: var(--info);
  --status-pronto_para_envio-bg: var(--primary-muted);  --status-pronto_para_envio-color: var(--primary);
  --status-em_andamento-bg: var(--success-bg);          --status-em_andamento-color: var(--success);
  --status-concluido-bg: var(--success-bg);             --status-concluido-color: var(--success);
  --status-cancelado-bg: var(--danger-bg);              --status-cancelado-color: var(--danger);
}

.esteira-page .card, .esteira-page .stat-card { background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); }
html.dark .esteira-page .stat-icon.blue   { background: rgba(61,123,255,.16);  color: var(--primary); }
html.dark .esteira-page .stat-icon.green  { background: rgba(74,222,128,.16);  color: var(--success); }
html.dark .esteira-page .stat-icon.red    { background: rgba(255,107,107,.16); color: var(--danger);  }
html.dark .esteira-page .stat-icon.yellow { background: rgba(251,191,36,.16);  color: var(--warning); }

.esteira-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.esteira-page .btn-primary { box-shadow: none; }
.esteira-page a { color: var(--primary); }
.esteira-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .esteira-page * { transition: none !important; }
}

/* Aniversarios (listagem) - Design System Nova Promotora (escopo isolado). */
html.dark .aniversarios-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);
}

html.light .aniversarios-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);
}

.aniversarios-page {
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));
}

.aniversarios-page .card, .aniversarios-page .stat-card { background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); }
html.dark .aniversarios-page .stat-icon.blue { background: rgba(61,123,255,.16); color: var(--primary); }
.aniversarios-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.aniversarios-page .btn-primary { box-shadow: none; }
.aniversarios-page a { color: var(--primary); }
.aniversarios-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .aniversarios-page * { transition: none !important; }
}

/* Comunicados (listagem) - Design System Nova Promotora (escopo isolado). */
html.dark .comunicados-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);
}

html.light .comunicados-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);
}

.comunicados-page {
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));
}

.comunicados-page .badge-success { color: var(--success); }
.comunicados-page .badge-warning { color: var(--warning); }
.comunicados-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.comunicados-page .btn-primary { box-shadow: none; }
.comunicados-page a { color: var(--primary); }
.comunicados-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .comunicados-page * { transition: none !important; }
}

/* Relatorios - Design System Nova Promotora (escopo isolado). */
html.dark .relatorios-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);
}

html.light .relatorios-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);
}

.relatorios-page {
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));
}

.relatorios-page .card, .relatorios-page .stat-card { background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); }
html.dark .relatorios-page .stat-icon.blue   { background: rgba(61,123,255,.16);  color: var(--primary); }
html.dark .relatorios-page .stat-icon.green  { background: rgba(74,222,128,.16);  color: var(--success); }
html.dark .relatorios-page .stat-icon.red    { background: rgba(255,107,107,.16); color: var(--danger);  }
html.dark .relatorios-page .stat-icon.yellow { background: rgba(251,191,36,.16);  color: var(--warning); }
.relatorios-page .badge-green { color: var(--success); }
.relatorios-page .badge-red   { color: var(--danger); }
.relatorios-page .badge-gray  { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); padding: .15rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }

.relatorios-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.relatorios-page .btn-primary { box-shadow: none; }
.relatorios-page a { color: var(--primary); }
.relatorios-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .relatorios-page * { transition: none !important; }
}

/* Assinaturas (listagem) - Design System Nova Promotora (escopo isolado). */
html.dark .assinaturas-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);
}

html.light .assinaturas-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);
}

.assinaturas-page {
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));
}

.assinaturas-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.assinaturas-page .btn-primary { box-shadow: none; }
.assinaturas-page a { color: var(--primary); }
.assinaturas-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .assinaturas-page * { transition: none !important; }
}

/* Calendario - Design System Nova Promotora (escopo isolado). */
html.dark .calendario-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);
}

html.light .calendario-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);
}

.calendario-page {
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));
}

.calendario-page .card, .calendario-page .stat-card, .calendario-page .cal-mes-card, .calendario-page .cal-entrada-card {
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
}
html.dark .calendario-page .stat-icon.blue   { background: rgba(61,123,255,.16);  color: var(--primary); }
html.dark .calendario-page .stat-icon.green  { background: rgba(74,222,128,.16);  color: var(--success); }
html.dark .calendario-page .stat-icon.purple { background: rgba(61,123,255,.16);  color: var(--primary); }
.calendario-page .badge-gray { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); padding: .15rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }

.calendario-page .btn-secondary { background: var(--surface); color: var(--text-2); border-color: var(--border); }
.calendario-page .btn-secondary:hover { background: var(--surface-2); color: var(--text); }
.calendario-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.calendario-page .btn-primary { box-shadow: none; }
.calendario-page a { color: var(--primary); }
.calendario-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .calendario-page * { transition: none !important; }
}

/* Gestao de Acoes (lista) - Design System Nova Promotora (escopo isolado). */
html.dark .gestao-lista-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);
}

html.light .gestao-lista-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);
}

.gestao-lista-page {
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));
}

.gestao-lista-page .card, .gestao-lista-page .stat-card, .gestao-lista-page .gestao-card {
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.gestao-lista-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.gestao-lista-page .btn-primary { box-shadow: none; }
.gestao-lista-page a { color: var(--primary); }
.gestao-lista-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .gestao-lista-page * { transition: none !important; }
}

/* Gestao de Acoes (detalhe/editor) - Design System Nova Promotora (escopo isolado). */
html.dark .gestao-detalhe-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);
}

html.light .gestao-detalhe-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);
}

.gestao-detalhe-page {
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));
}

.gestao-detalhe-page .card, .gestao-detalhe-page .stat-card {
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
}
html.dark .gestao-detalhe-page .stat-icon.blue   { background: rgba(61,123,255,.16);  color: var(--primary); }
html.dark .gestao-detalhe-page .stat-icon.green  { background: rgba(74,222,128,.16);  color: var(--success); }
html.dark .gestao-detalhe-page .stat-icon.red    { background: rgba(255,107,107,.16); color: var(--danger);  }
html.dark .gestao-detalhe-page .stat-icon.yellow { background: rgba(251,191,36,.16);  color: var(--warning); }

.gestao-detalhe-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.gestao-detalhe-page .btn-primary { box-shadow: none; }
.gestao-detalhe-page a { color: var(--primary); }
.gestao-detalhe-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .gestao-detalhe-page * { transition: none !important; }
}

/* Configuracoes - Design System Nova Promotora (escopo isolado). */
html.dark .config-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);
}

html.light .config-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);
}

.config-page {
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));
}

.config-page .card { background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); }

html.dark  .config-page .calc-card.purple { background: rgba(61,123,255,.16); border-color: rgba(61,123,255,.35); }
html.light .config-page .calc-card.purple { background: rgba(43,98,214,.10); border-color: rgba(43,98,214,.30); }
.config-page .calc-card.blue   .calc-card-label, .config-page .calc-card.blue   .calc-card-value, .config-page .calc-card.blue   .calc-card-desc { color: var(--primary); }
.config-page .calc-card.green  .calc-card-label, .config-page .calc-card.green  .calc-card-value, .config-page .calc-card.green  .calc-card-desc { color: var(--success); }
.config-page .calc-card.yellow .calc-card-label, .config-page .calc-card.yellow .calc-card-value, .config-page .calc-card.yellow .calc-card-desc { color: var(--warning); }
.config-page .calc-card.purple .calc-card-label, .config-page .calc-card.purple .calc-card-value, .config-page .calc-card.purple .calc-card-desc { color: var(--primary); }

.config-page .alert-blue { color: var(--info); }
.config-page .alert-red  { color: var(--danger); }
.config-page .badge-blue { color: var(--primary); }
.config-page .badge-red  { color: var(--danger); }

.config-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.config-page .btn-primary { box-shadow: none; }
.config-page a { color: var(--primary); }
.config-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .config-page * { transition: none !important; }
}

/* Colaboradores (Importacao) - Design System Nova Promotora (escopo isolado). */
html.dark .colaboradores-page {
  --bg: #080B12;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.10);
  --text: #EEF2F8;
  --text-1: var(--text);
  --text-2: #9AA6BA;
  --text-3: #5D6880;

  --primary: #3D7BFF;
  --primary-dark: #2E63DB;
  --primary-light: rgba(61,123,255,.16);
  --primary-muted: rgba(61,123,255,.10);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,.12);
  --success-border: rgba(74,222,128,.30);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,.12);
  --warning-border: rgba(251,191,36,.30);
  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,.12);
  --danger-border: rgba(255,107,107,.30);
  --info: #6F9BFF;
  --info-bg: rgba(111,155,255,.12);
  --info-border: rgba(111,155,255,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.40);
}

html.light .colaboradores-page {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --border: #D9DFEA;
  --text: #10182A;
  --text-1: var(--text);
  --text-2: #4A586E;
  --text-3: #8A93A6;

  --primary: #2B62D6;
  --primary-dark: #1F4FB8;
  --primary-light: rgba(43,98,214,.14);
  --primary-muted: rgba(43,98,214,.08);

  --success: #15803D;
  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.28);
  --warning: #B45309;
  --warning-bg: rgba(180,83,9,.10);
  --warning-border: rgba(180,83,9,.28);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,.10);
  --danger-border: rgba(220,38,38,.28);
  --info: #2B62D6;
  --info-bg: rgba(43,98,214,.10);
  --info-border: rgba(43,98,214,.28);

  --shadow-sm: 0 1px 2px rgba(16,24,42,.06);
  --shadow-md: 0 8px 20px rgba(16,24,42,.08);
  --shadow-lg: 0 16px 32px rgba(16,24,42,.10);
}

.colaboradores-page {
  margin: -1.75rem -2rem -3rem;
  padding: 1.75rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: calc(100vh - var(--header-h));
}

.colaboradores-page .import-colunas { color: var(--info); }
.colaboradores-page .erros-titulo, .colaboradores-page .erro-linha { color: var(--warning); }
.colaboradores-page .erro-msg { color: var(--text-2); }
.colaboradores-page .badge-success { color: var(--success); }
.colaboradores-page .badge-info    { color: var(--info); }
.colaboradores-page .badge-danger  { color: var(--danger); }
.colaboradores-page .badge-warning { color: var(--warning); }

.colaboradores-page .btn-ghost:hover { background: var(--surface); color: var(--text); }
.colaboradores-page .btn-primary { box-shadow: none; }
.colaboradores-page a { color: var(--primary); }
.colaboradores-page *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .colaboradores-page * { transition: none !important; }
}

/* ─── Módulo Colaboradores ──────────────────────────────── */

/* Toolbar de página */
.page-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.toolbar-left  { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 0; }
.toolbar-right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

/* Busca */
.search-box {
  position: relative;
  display: flex; align-items: center;
  flex: 1; max-width: 380px;
}
.search-icon {
  position: absolute; left: .75rem;
  color: var(--text-3); display: flex; align-items: center; pointer-events: none;
}
.search-icon svg { width: 15px; height: 15px; }
.search-input {
  width: 100%;
  padding: .5rem .875rem .5rem 2.25rem;
  font-size: .875rem; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.10); }
.search-input::placeholder { color: var(--text-3); }

/* Barra de filtros */
.filter-bar {
  display: flex; align-items: center; gap: .625rem;
  flex-wrap: nowrap; margin-bottom: 1rem; overflow-x: auto;
}
.filter-bar .form-control { font-size: .8125rem; padding: .4rem .75rem; height: auto; flex: 1; min-width: 120px; }
.filter-bar select.form-control { min-width: 120px; max-width: none; }
.filter-bar input.form-control { flex: 1.5; }

/* Info de resultado */
.table-info {
  font-size: .8125rem; color: var(--text-3);
  margin-bottom: .625rem;
}

/* Table wrapper com scroll */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }

/* Ordenação */
.th-sort { cursor: pointer; user-select: none; }
.th-sort:hover { color: var(--text-2); }
.th-sort-ativo { color: var(--primary) !important; }
.th-sort span { display: inline-flex; align-items: center; vertical-align: middle; }

/* Badges de status */
.badge-success { background: var(--success-bg); color: #065f46; border-color: var(--success-border); }
.badge-danger  { background: var(--danger-bg);  color: #991b1b; border-color: var(--danger-border); }
.badge-info    { background: var(--info-bg);    color: #1e40af; border-color: var(--info-border); }
.badge-warning { background: var(--warning-bg); color: #92400e; border-color: var(--warning-border); }

/* Código badge */
.code-badge {
  display: inline-block;
  font-family: monospace; font-size: .8rem; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px; color: var(--text-2);
}

/* E-mail link */
.email-link { color: var(--primary); font-size: .8125rem; }
.email-link:hover { text-decoration: underline; }

/* Paginação */
.paginacao {
  display: flex; align-items: center; justify-content: center;
  gap: .25rem; padding: 1rem 0;
}
.pag-ellipsis { font-size: .875rem; color: var(--text-3); padding: 0 .25rem; }

/* Seção de importação */
.import-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.section-desc { font-size: .875rem; color: var(--text-2); margin-bottom: 1.25rem; }

/* Drop zone */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
  background: var(--surface-2);
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--primary);
  background: var(--primary-muted);
}
.drop-zone-icon { display: flex; justify-content: center; margin-bottom: .75rem; color: var(--text-3); }
.drop-zone-icon span { width: 40px; height: 40px; }
.drop-zone-text { font-size: .9375rem; color: var(--text-2); margin-bottom: .375rem; }
.drop-zone-hint { font-size: .8125rem; color: var(--text-3); }

/* Info de colunas esperadas */
.import-colunas {
  margin-top: 1rem;
  padding: .75rem 1rem;
  background: var(--info-bg); border: 1px solid var(--info-border);
  border-radius: var(--radius-sm);
  font-size: .8125rem; color: #1e40af; line-height: 1.6;
}

/* Preview cabeçalho */
.preview-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem;
}
.preview-header .section-title { margin-bottom: 0; font-size: .9375rem; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600; }

/* Resumo cards */
.preview-resumo {
  display: flex; gap: .875rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.resumo-card {
  flex: 1; min-width: 110px;
  border-radius: var(--radius); border: 1.5px solid;
  padding: .875rem 1rem; text-align: center;
}
.resumo-num   { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.resumo-label { font-size: .75rem; font-weight: 600; margin-top: .25rem; opacity: .75; }
.resumo-total     { background: var(--surface-2);      border-color: var(--border);          color: var(--text-2); }
.resumo-novos     { background: var(--success-bg);     border-color: var(--success-border);  color: #065f46; }
.resumo-atualizados { background: var(--info-bg);      border-color: var(--info-border);     color: #1e40af; }
.resumo-inativos  { background: var(--danger-bg);      border-color: var(--danger-border);   color: #991b1b; }
.resumo-erros     { background: var(--warning-bg);     border-color: var(--warning-border);  color: #92400e; }

/* Erros de validação */
.preview-erros {
  background: var(--warning-bg); border: 1px solid var(--warning-border);
  border-radius: var(--radius); padding: 1rem; margin-bottom: 1.25rem;
}
.erros-titulo { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .875rem; color: #92400e; margin-bottom: .75rem; }
.erros-lista  { display: flex; flex-direction: column; gap: .375rem; max-height: 200px; overflow-y: auto; }
.erro-item    { display: flex; align-items: baseline; gap: .625rem; font-size: .8125rem; }
.erro-linha   { font-weight: 700; color: #92400e; white-space: nowrap; }
.erro-msg     { color: #78350f; }

/* Ações do preview */
.preview-acoes { display: flex; align-items: center; gap: .75rem; padding-top: 1rem; flex-wrap: wrap; }

/* Histórico */
.historico-section { margin-top: 1.5rem; }
.historico-section .section-title { font-size: .875rem; font-weight: 600; color: var(--text-2); text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: .5rem; margin-bottom: .875rem; }
.filename-badge {
  display: inline-block;
  font-size: .75rem; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge-cell { vertical-align: middle; }
.empty-state-sm { font-size: .875rem; color: var(--text-3); padding: 1.5rem 0; text-align: center; }
.text-center { text-align: center; }

/* Utilitários de margem/padding */
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }

/* Colaboradores — tabs usando padrão do sistema */
.col-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
}
.col-tab {
  display: flex; align-items: center; gap: .4rem;
  padding: .625rem 1.25rem;
  border: none; background: none; cursor: pointer;
  font-size: .875rem; font-weight: 500;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--t), border-color var(--t);
  white-space: nowrap;
}
.col-tab:hover { color: var(--text-2); }
.col-tab.active { color: var(--primary); border-color: var(--primary); font-weight: 600; }
.col-tab svg { width: 15px; height: 15px; }

/* ─── Impressão ────────────────────────────────────────── */
@media print {
  .sidebar, .top-header, .enc-toolbar,
  .no-print, #toast-container, #modal-overlay { display: none !important; }

  .main-area { margin-left: 0 !important; }
  .main-content { padding: 0 !important; }
  body { background: #fff !important; }

  .enc-relatorio {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
  }

  .enc-cabecalho { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .enc-orc-card, .enc-destaque, .enc-licao-card, .enc-ind-card {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .progress-bar-fill {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  .enc-secao { page-break-inside: avoid; }
  table.data-table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
}

/* ─── Permissões RBAC ───────────────────────────────────── */
.perm-select-all { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 2px solid var(--border); margin-bottom: 12px; font-weight: 700; font-size: .9rem; }
.perm-modulo     { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.perm-mod-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg); cursor: pointer; user-select: none; font-weight: 600; font-size: .875rem; }
.perm-mod-header:hover { background: var(--border); }
.perm-mod-arrow  { margin-left: auto; font-size: .75rem; transition: transform .2s; }
.perm-mod-arrow.open { transform: rotate(180deg); }
.perm-mod-body   { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 14px; }
.perm-mod-body.collapsed { display: none; }
.perm-mod-body label { display: flex; align-items: center; gap: 6px; font-size: .83rem; cursor: pointer; white-space: nowrap; }
.perm-mod-body input[type=checkbox] { cursor: pointer; }
.perfil-card {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.perfil-card:last-child { border-bottom: none; }
.perfil-card-native { background: #f0f7ff; }
.perfil-card-inactive { opacity: .6; }
.perfil-card-header { display: none; }
.perfil-card-title  {
  font-weight: 600; font-size: .9375rem;
  display: flex; align-items: center; gap: 8px;
  min-width: 180px;
}
.perfil-card-desc   { font-size: .82rem; color: var(--text-muted); flex: 1; }
.perfil-card-footer { display: flex; align-items: center; gap: 16px; margin-left: auto; white-space: nowrap; }

/* ─── @Menção dropdown ──────────────────────────────────── */
.mencao-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}
.mencao-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: .875rem;
  transition: background var(--t);
}
.mencao-item:hover { background: var(--surface-2); }
.mencao-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.mencao-tag {
  background: var(--primary-muted);
  color: var(--primary);
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
  font-size: .875em;
}

/* ─── Sino de notificações ──────────────────────────────── */
.notif-bell {
  position: relative;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--topbar-text-muted);
  transition: background var(--t), color var(--t);
}
.notif-bell:hover { background: rgba(255,255,255,.08); color: #fff; }
.notif-bell svg   { width: 18px; height: 18px; }
.notif-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  background: var(--danger);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  pointer-events: none;
}
.notif-badge-inline {
  background: var(--danger);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ─── Drawer lateral de notificações ────────────────────── */
.notif-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 490;
  backdrop-filter: blur(1px);
}
.notif-overlay.open { display: block; }

.notif-drawer {
  position: fixed;
  top: 0; right: -420px;
  width: 400px;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transition: right .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.notif-drawer.open { right: 0; }

.notif-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.notif-drawer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
}
.notif-drawer-actions {
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.notif-lista {
  flex: 1;
  overflow-y: auto;
}
.notif-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  color: var(--text-3);
  font-size: .9rem;
  flex: 1;
}
.notif-item {
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  transition: background var(--t);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-2); }
.notif-item.lida  { opacity: .65; }
.notif-item-topo  { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.notif-item-dot   {
  width: 8px; height: 8px; flex-shrink: 0; margin-top: 5px;
  border-radius: 50%; background: var(--primary);
}
.notif-item-corpo  { flex: 1; min-width: 0; }
.notif-item-titulo { font-size: .83rem; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.notif-item-tarefa { font-size: .79rem; color: var(--primary); display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.notif-item-trecho { font-size: .79rem; color: var(--text-2); font-style: italic; margin-bottom: 4px; }
.notif-item-hora   { font-size: .73rem; color: var(--text-3); }
.notif-item-btns   { display: flex; align-items: center; gap: 4px; padding-left: 18px; }

/* ─── Highlight de mensagem no chat ─────────────────────── */
.tar-chat-msg-highlight {
  animation: msgHighlight 2.5s ease forwards;
}
@keyframes msgHighlight {
  0%   { background: var(--primary-muted); border-radius: 8px; }
  70%  { background: var(--primary-muted); border-radius: 8px; }
  100% { background: transparent; }
}

/* ─── Editor HTML (Comunicados / Assinaturas) ────────────── */
.html-editor-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.html-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.editor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-2);
  transition: background var(--t), color var(--t);
}
.editor-btn:hover { background: var(--border); color: var(--text); }
.editor-btn svg { width: 14px; height: 14px; }
.editor-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}
.editor-select {
  height: 28px;
  font-size: .75rem;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.html-editor {
  min-height: 320px;
  max-height: 640px;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--text);
  outline: none;
}
.html-editor:empty::before {
  content: 'Escreva o conteúdo aqui…';
  color: var(--text-3);
}
.html-editor img { max-width: 100%; height: auto; }
.view-conteudo img { max-width: 100%; height: auto; }
.view-conteudo { line-height: 1.75; font-size: .9375rem; color: var(--text); }
.view-assinatura { line-height: 1.6; font-size: .875rem; color: var(--text-2); }
.table-info { font-size: .8125rem; color: var(--text-2); margin-bottom: .5rem; }

/* ─── Tabs ───────────────────────────────────────────────── */
.tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--border); }
.tab-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem 1rem; font-size: .875rem; font-weight: 500;
  color: var(--text-2); background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  cursor: pointer; border-radius: 4px 4px 0 0; transition: color .15s;
}
.tab-btn:hover { color: var(--text); background: var(--surface-2,#f4f5f6); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ─── Form Builder (Formulários) ─────────────────────────── */
.frm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1rem 1rem .75rem;
  margin-bottom: .75rem;
  transition: box-shadow .15s, border-color .15s;
}
.frm-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.frm-card.drag-over { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb,.5),0.15); }
.frm-grip {
  cursor: grab; color: var(--text-3); padding: .25rem .2rem;
  flex-shrink: 0; margin-top: .25rem;
}
.frm-grip:active { cursor: grabbing; }
.frm-opcoes { margin-bottom: .75rem; }
.badge-gray { background: #e5e7eb; color: #374151; padding: .15rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }

/* ─── Form grid ──────────────────────────────────────────── */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* ─── Estoque — Tabela com header fixo e paginação ──────────────────────────── */
.estoque-page {
  display: flex;
  flex-direction: column;
}
.estoque-page .table-wrap {
  max-height: 1000px;
  overflow-y: scroll;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding-right: 220px;
  margin-right: -220px;
}
.estoque-page .pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
  background: var(--surface);
  border-radius: 0 0 var(--radius) var(--radius);
}
.estoque-page .pagination-info {
  font-size: 0.8125rem;
  color: var(--text-2);
  margin: 0 1rem;
}

/* Status badges */
.badge-disponivel { background: rgba(34,197,94,0.15); color: #22c55e; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.badge-inativo { background: rgba(107,114,128,0.15); color: #6b7280; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.badge-parcial { background: rgba(202,138,4,0.15); color: #ca8a04; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.badge-total { background: rgba(234,88,12,0.15); color: #ea580c; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.estoque-page table.data-table {
  width: 100%;
  border-collapse: collapse;
}
.estoque-page table.data-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.estoque-page table.data-table thead th {
  padding: 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
}
.estoque-page table.data-table tbody tr {
  border-bottom: 1px solid var(--border);
}
.estoque-page table.data-table tbody td {
  padding: 0.75rem;
}