/* ===========================================================================
   AI Governance Platform — Design System v3
   Modern enterprise look · dual light / dark mode
   2025 — Vela Latam
   =========================================================================== */

/* ── Light tokens (default) — Vela Latam brand palette ──────────────────── */
:root {
  --bg:           #f4f5f7;   /* Vela off-white — frio-neutro, distinto das superfícies */
  --surface:      #ffffff;
  --surface-2:    #eaecf0;   /* superfície secundária — visualmente distinta do bg */
  --surface-3:    #dde0e6;   /* hover/pressed */
  --ink:          #1a1a1a;   /* Vela --color_1 — quase preto */
  --ink-soft:     #555555;   /* texto secundário legível */
  --ink-muted:    #6b7280;   /* texto suave — escurecido p/ WCAG AA (4.8:1 no branco) */
  --line:         #dde0e6;   /* divisores — alinhados com surface-3 */
  --sidebar:      #1a2535;   /* dark blue-grey — levemente mais claro no tema claro */
  --sidebar-h:    #283448;   /* hover sidebar */
  --sidebar-soft: #8fa3bc;   /* texto secundário na sidebar */
  --accent:       #D8641C;   /* Vela orange — inspired by Dacati */
  --accent-h:     #C55615;   /* hover orange */
  --accent-sub:   #fff4ed;   /* fundo laranja sutil */
  --accent-2:     #9e3f10;   /* laranja profundo — complementar */
  --gold:         #f59e0b;   /* âmbar — mantido para semântica */
  --gold-sub:     #fffbeb;
  --danger:       #ef4444;   /* perigo — vermelho mais vivo, distinto do accent */
  --success:      #22c55e;
  /* gráficos — decisão interna do design system (não existe valor "de mercado" p/ gridline) */
  --chart-grid:   #E0E0E0;
  /* elevações */
  --shadow-sm:    0 1px 2px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.03);
  --shadow:       0 1px 2px rgba(0,0,0,.06), 0 3px 8px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.03);
  --shadow-md:    0 4px 6px rgba(0,0,0,.07), 0 10px 24px rgba(0,0,0,.09), 0 0 0 1px rgba(0,0,0,.03);
  --shadow-lg:    0 10px 15px rgba(0,0,0,.10), 0 24px 56px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.03);
}

/* ── Dark tokens — Vela Latam dark mode ──────────────────────────────────── */
[data-theme="dark"] {
  --bg:           #0E0F12;   /* Dacati-inspired near-black */
  --surface:      #15171C;   /* card surface — slightly lighter */
  --surface-2:    #1D2028;   /* secondary surfaces */
  --surface-3:    #272B35;   /* hover/pressed */
  --ink:          #F0F1F4;
  --ink-soft:     #C4C7D0;   /* melhor leitura em cards escuros */
  --ink-muted:    #8A8E9A;   /* WCAG AA em superfícies dark */
  --line:         #252830;   /* divisores sutis */
  --sidebar:      #090A0D;   /* mais escuro que bg para profundidade */
  --sidebar-h:    #12141A;
  --sidebar-soft: #8A8E9A;
  --accent:       #E87028;   /* laranja quente — inspirado Dacati */
  --accent-h:     #F07F3A;
  --accent-sub:   rgba(232,112,40,.14);
  --accent-2:     #c86010;
  --gold:         #fbbf24;
  --gold-sub:     rgba(251,191,36,.1);
  --danger:       #f87171;
  --success:      #4ade80;
  --chart-grid:   rgba(255,255,255,.08);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.35);
  --shadow:       0 1px 3px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.25);
  --shadow-md:    0 4px 6px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.3);
  --shadow-lg:    0 10px 15px rgba(0,0,0,.4), 0 24px 64px rgba(0,0,0,.45);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  letter-spacing: -.005em;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .25s, color .25s;
}

/* ── Maturity level colors ───────────────────────────────────────────────── */
.level-0       { background: #fef2f2; color: #991b1b; }
.level-1       { background: #fffbeb; color: #92400e; }
.level-2       { background: #eff6ff; color: #1d4ed8; }
.level-3       { background: #f0fdf4; color: #166534; }
.level-pending { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }

[data-theme="dark"] .level-0       { background: rgba(239,68,68,.15);   color: #fca5a5; border: none; }
[data-theme="dark"] .level-1       { background: rgba(245,158,11,.15);  color: #fcd34d; border: none; }
[data-theme="dark"] .level-2       { background: rgba(96,165,250,.15);  color: #93c5fd; border: none; }
[data-theme="dark"] .level-3       { background: rgba(74,222,128,.15);  color: #86efac; border: none; }
[data-theme="dark"] .level-pending { background: rgba(148,163,184,.12); color: #b0bec5; border-color: #4a5568; }

/* ── Overdue row highlight ───────────────────────────────────────────────── */
.row-overdue > td { background: rgba(245,158,11,.07) !important; }
[data-theme="dark"] .row-overdue > td { background: rgba(245,158,11,.12) !important; }

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .65rem; border-radius: 20px;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
}

/* ── Sidebar / navigation ────────────────────────────────────────────────── */
.nav-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .85rem; border-radius: 8px;
  font-weight: 500; font-size: .875rem;
  color: var(--sidebar-soft); cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none; border: none; background: transparent; width: 100%;
}
.nav-link:hover  { background: rgba(255,255,255,.08); color: #fff; }
.nav-link.active {
  background: rgba(216,100,28,.2); color: #fff;
  box-shadow: inset 3px 0 0 var(--accent);
}
[data-theme="dark"] .nav-link.active { background: rgba(232,112,40,.18); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-flat {
  background: var(--surface); border-radius: 14px;
  border: 1px solid var(--line);
  transition: background .25s, border-color .25s;
}
[data-theme="dark"] .card,
[data-theme="dark"] .card-flat { box-shadow: var(--shadow); }

/* ── Chart container — altura fixa previne loop de crescimento do Chart.js ── */
.chart-box { position: relative; width: 100%; height: 240px; }
.chart-box > canvas { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
/* Chart.js insere um <div> wrapper entre .chart-box e o canvas no responsive mode — deve herdar as dimensões */
.chart-box > div { width: 100% !important; height: 100% !important; }

/* ── Toggle switch (liga/desliga) — substitui checkbox booleano ───────────── */
.switch { position: relative; display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; user-select: none; font-size: .9rem; }
.switch > input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 38px; height: 22px; border-radius: 999px; background: var(--line);
  transition: background .2s; flex-shrink: 0; position: relative;
}
.switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.switch > input:checked + .track { background: var(--accent); }
.switch > input:checked + .track::after { transform: translateX(16px); }
.switch > input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Pill de múltipla escolha — substitui checkbox de seleção múltipla ─────── */
.pill-check {
  display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .8rem;
  border-radius: 999px; border: 1px solid var(--line); cursor: pointer;
  font-size: .8rem; font-weight: 600; user-select: none; background: var(--surface);
  transition: background .15s, color .15s, border-color .15s;
}
.pill-check > input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill-check:hover { border-color: var(--accent); }
.pill-check.on { background: var(--accent); color: #fff; border-color: var(--accent); }
/* fallback progressivo p/ navegadores com :has */
.pill-check:has(> input:checked) { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
table.data { width: 100%; border-collapse: collapse; table-layout: auto; }
/* Wrapper padrão: scroll horizontal sem layout shift por scrollbar */
.card.overflow-x-auto, .card.p-0.overflow-x-auto { scrollbar-gutter: stable; }
table.data th {
  text-align: left; font-size: .69rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-muted); font-weight: 700;
  padding: .5rem .75rem; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface); white-space: nowrap;
  z-index: 1; transition: background .25s;
}
table.data td {
  padding: .45rem .75rem; border-bottom: 1px solid var(--line);
  font-size: .78rem; vertical-align: middle; font-variant-numeric: tabular-nums;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover         { background: var(--surface-2); }

/* Variante compacta — mais linhas em tela (iniciativas, ferramentas, SDLC) */
table.data.compact th { font-size: .62rem; padding: .4rem .55rem; letter-spacing: .05em; }
table.data.compact td { font-size: .8rem; padding: .35rem .55rem; }
/* Header clicável de ordenação */
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--accent); }

/* ── Tooltip elegante do nível (hover/focus) ─────────────────────────────── */
.lvl-tip { position: relative; cursor: help; outline: none; }
.lvl-pop {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 230px; text-align: left; white-space: normal;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  padding: .5rem .65rem; font-size: .72rem; font-weight: 400; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: 0; visibility: hidden;
  transition: opacity .15s ease, transform .15s ease; z-index: 60; pointer-events: none;
}
.lvl-pop strong { display: block; margin-bottom: .2rem; color: var(--accent); font-weight: 700; }
.lvl-pop::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--surface);
}
.lvl-tip:hover .lvl-pop, .lvl-tip:focus-visible .lvl-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem 1.1rem; border-radius: 8px;
  font-weight: 600; font-size: .84rem; cursor: pointer;
  transition: background .15s, box-shadow .15s, border-color .15s, opacity .15s, transform .1s;
  border: 1px solid transparent; white-space: nowrap; line-height: 1.4;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(216,100,28,.3), 0 2px 8px rgba(216,100,28,.2);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-h); border-color: var(--accent-h);
  box-shadow: 0 2px 4px rgba(216,100,28,.35), 0 4px 16px rgba(216,100,28,.25);
}
.btn-ghost {
  background: var(--surface); color: var(--ink); border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--surface-3); }
.btn-danger {
  background: var(--surface); color: var(--danger);
  border-color: rgba(239,68,68,.3); box-shadow: var(--shadow-sm);
}
.btn-danger:hover:not(:disabled) { background: rgba(239,68,68,.05); border-color: rgba(239,68,68,.5); }
[data-theme="dark"] .btn-ghost { background: var(--surface-2); border-color: var(--line); }
[data-theme="dark"] .btn-ghost:hover:not(:disabled) { background: var(--surface-3); }
[data-theme="dark"] .btn-danger { border-color: rgba(248,113,113,.3); }
[data-theme="dark"] .btn-danger:hover:not(:disabled) { background: rgba(248,113,113,.1); }
.btn-sm { padding: .32rem .7rem; font-size: .78rem; border-radius: 6px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.input, select.input, textarea.input {
  width: 100%; padding: .55rem .8rem;
  border: 1.5px solid var(--line); border-radius: 8px;
  font-size: .875rem; background: var(--surface); color: var(--ink);
  outline: none; font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input:hover:not(:focus) { border-color: var(--surface-3); background: var(--surface); }
.input:focus {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(216,100,28,.15);
}
[data-theme="dark"] .input,
[data-theme="dark"] select.input,
[data-theme="dark"] textarea.input { background: var(--surface); }
[data-theme="dark"] .input:focus   { box-shadow: 0 0 0 3px rgba(232,112,40,.2); }
label.fld {
  display: block; font-size: .7rem; font-weight: 700;
  color: var(--ink-muted); margin-bottom: .35rem;
  text-transform: uppercase; letter-spacing: .06em;
}

/* ── Range inputs ────────────────────────────────────────────────────────── */
input[type="range"] {
  accent-color: var(--accent); cursor: pointer; height: 4px;
  background: var(--line); border-radius: 4px; outline: none;
  -webkit-appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px; background: var(--line);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); margin-top: -6px; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* ── Checkbox & radio ────────────────────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

/* ── KPI cards ───────────────────────────────────────────────────────────── */
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow);
  transition: background .25s, border-color .25s, box-shadow .2s;
}
.kpi:hover { box-shadow: var(--shadow-md); }
.kpi-label {
  font-size: .69rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-muted); font-weight: 700;
}
.kpi-value {
  font-size: 2.2rem; font-weight: 800; color: var(--ink);
  margin-top: .4rem; line-height: 1.1; letter-spacing: -.04em;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* Dígitos alinhados verticalmente em qualquer número de dado (chart, KPI) — evita "jitter" de largura */
.tnum { font-variant-numeric: tabular-nums; }
.kpi-sub {
  font-size: .73rem; color: var(--ink-muted); margin-top: .25rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* ── Spinner / animations ────────────────────────────────────────────────── */
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.fade-in { animation: fadeIn .2s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ── Toasts ──────────────────────────────────────────────────────────────── */
.toast {
  padding: .75rem 1.1rem; border-radius: 10px; color: #fff;
  font-weight: 500; font-size: .84rem;
  box-shadow: 0 8px 24px rgba(15,23,42,.25); min-width: 240px;
  backdrop-filter: blur(4px);
}
.toast-success { background: rgba(21,128,61,.95); }
.toast-error   { background: rgba(185,28,28,.95); }
.toast-info    { background: rgba(29,78,216,.95);  }

/* ── Segmented control ───────────────────────────────────────────────────── */
.seg {
  display: inline-flex;
  background: var(--surface-2); border: 1.5px solid var(--line);
  border-radius: 10px; padding: 3px; gap: 2px;
  transition: background .25s;
}
.seg button {
  border: none; background: transparent; padding: .4rem 1rem;
  border-radius: 7px; font-size: .83rem; font-weight: 600;
  color: var(--ink-soft); cursor: pointer;
  transition: background .15s, color .15s;
}
.seg button:hover:not(.active) { background: rgba(0,0,0,.04); color: var(--ink); }
.seg button.active {
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 3px rgba(216,100,28,.3);
}
[data-theme="dark"] .seg button:hover:not(.active) { background: rgba(255,255,255,.06); }
[data-theme="dark"] .seg button.active {
  background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(232,112,40,.3);
}

/* ── Question help button ─────────────────────────────────────────────────── */
.q-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: .65rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1;
}
.q-help-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Accordion ───────────────────────────────────────────────────────────── */
.accordion-section {
  border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; margin-bottom: .6rem; background: var(--surface);
  transition: background .25s, border-color .25s;
}
.accordion-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.1rem; background: var(--surface-2);
  cursor: pointer; font-weight: 600; font-size: .9rem;
  transition: background .15s;
}
.accordion-head:hover { background: var(--line); }
[data-theme="dark"] .accordion-head:hover { background: rgba(255,255,255,.06); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(2,6,23,.65); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 40; padding: 1rem;
}
.modal-box {
  background: var(--surface); border-radius: 16px;
  width: 100%; max-width: 720px; max-height: 92vh; overflow: auto;
  box-shadow: var(--shadow-lg);
  animation: modalIn .22s cubic-bezier(.22,.61,.36,1);
  transition: background .25s;
  border: 1px solid var(--line);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* Modal redimensionável (ex.: editor de dados do Finance) — alça no canto inf. direito */
.modal-box.modal-box-resizable {
  width: min(1080px, 94vw); max-width: 96vw;
  min-width: 420px; min-height: 320px;
  resize: both;
}
.modal-box.modal-box-max {
  width: 96vw !important; height: 92vh !important; max-width: 96vw !important;
}
.modal-resize-hint {
  font-size: .66rem; color: var(--ink-muted); text-align: right;
  margin-top: .5rem; opacity: .7;
}
.modal-box.modal-box-max .modal-resize-hint { display: none; }

/* ── Misc components ─────────────────────────────────────────────────────── */
/* chip: tag neutra (status, categoria, etc.) */
.chip {
  font-size: .7rem; padding: .18rem .6rem; border-radius: 6px;
  background: var(--surface-2); color: var(--ink-soft); font-weight: 600;
  border: 1px solid var(--line); letter-spacing: .02em;
}
/* badge: identidade semântica (status colorido) */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .65rem; border-radius: 20px;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
}
.badge-accent {
  background: var(--accent-sub); color: var(--accent); border: 1px solid rgba(216,100,28,.2);
}
.badge-green {
  background: rgba(34,197,94,.12); color: #15803d; border: 1px solid rgba(34,197,94,.25);
}
.badge-red {
  background: rgba(239,68,68,.1); color: #dc2626; border: 1px solid rgba(239,68,68,.2);
}
.badge-realizado {
  background: rgba(2,132,199,.11); color: #0369a1; border: 1px solid rgba(2,132,199,.22);
}
/* Audit Log */
.audit-row:hover { background: var(--surface-2) !important; }
.audit-row.selected { background: var(--accent-sub) !important; }
.audit-diff-changed td { background: rgba(245,158,11,.06); }
.pbar { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pbar > div { height: 100%; background: var(--accent); border-radius: 4px; transition: width .4s ease; }
.truncate-2 {
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Question type pill (builder) ────────────────────────────────────────── */
.qtype-badge {
  font-size: .62rem; padding: .1rem .45rem; border-radius: 4px;
  background: var(--accent-sub); color: var(--accent);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
[data-theme="dark"] .qtype-badge { background: var(--accent-sub); }

/* ── Theme toggle ────────────────────────────────────────────────────────── */
.theme-toggle {
  width: 34px; height: 36px; padding-bottom: 6px; border-radius: 7px;
  border: none; background: transparent;
  color: var(--ink); cursor: pointer; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; transition: background .15s, color .15s;
}
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle-line { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 14px; height: 2px; background: #f59e0b; border-radius: 1px; pointer-events: none; }

/* ── Command palette shortcut pill ──────────────────────────────────────── */
.cmd-shortcut-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-muted); font-size: .72rem; cursor: pointer;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.cmd-shortcut-pill:hover { background: var(--surface); color: var(--ink); }
.cmd-shortcut-pill kbd {
  padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--line); font-size: .65rem;
  font-family: inherit; background: var(--bg);
}

/* ── Language dropdown ───────────────────────────────────────────────────── */
.lang-dd-wrap { position: relative; display: inline-flex; align-items: center; }
.lang-dd-btn {
  display: flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 7px;
  background: transparent; color: var(--ink-soft);
  font-size: .75rem; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.lang-dd-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-muted); }
.lang-dd-btn.open  { background: var(--surface-2); color: var(--ink); border-color: var(--ink-muted); }
.lang-dd-chevron { transition: transform .15s; opacity: .45; }
.lang-dd-btn.open .lang-dd-chevron { transform: rotate(180deg); }
.lang-dd-menu {
  position: absolute; top: calc(100% + 5px); right: 0;
  min-width: 148px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
  z-index: 300; overflow: hidden;
  animation: panel-in .12s ease;
}
.lang-dd-item {
  display: flex; align-items: center; gap: 7px;
  width: 100%; padding: .45rem .75rem;
  border: none; background: none; cursor: pointer;
  font-size: .78rem; font-weight: 500; color: var(--ink-soft);
  text-align: left; font-family: inherit;
  transition: background .1s;
}
.lang-dd-item:hover { background: var(--surface-2); color: var(--ink); }
.lang-dd-item + .lang-dd-item { border-top: 1px solid var(--line); }
.lang-dd-item.active { color: var(--accent); }
.lang-dd-check { width: 12px; font-size: .7rem; color: var(--accent); flex-shrink: 0; }

/* ── Module selector v3 (SAP Fiori + Salesforce Cosmos) ─────────────────── */

/* nav bar */
.ms-nav {
  position: sticky; top: 0; z-index: 20;
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.ms-nav-left  { display: flex; align-items: center; gap: .85rem; }
.ms-nav-right { display: flex; align-items: center; gap: .4rem;  }
.ms-nav-logo  {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .75rem; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.ms-nav-brand   { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.ms-nav-brand b { color: var(--ink); font-weight: 700; }
.ms-nav-btn {
  height: 30px; padding: 0 .65rem; border-radius: 7px;
  border: 1px solid var(--line); background: transparent;
  color: var(--ink-soft); font-size: .75rem; font-weight: 500;
  cursor: pointer; display: flex; align-items: center; gap: .3rem;
  font-family: inherit; transition: background .15s, color .15s;
}
.ms-nav-btn:hover { background: var(--surface-2); color: var(--ink); }
.ms-nav-btn svg   { width: 13px; height: 13px; flex-shrink: 0; }
.ms-nav-divider   { width: 1px; height: 18px; background: var(--line); }
.ms-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #d97706);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #fff; cursor: pointer;
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line);
}

/* page wrapper */
.ms-page { max-width: 700px; margin: 0 auto; padding: 2.5rem 1rem 3rem; }

/* header */
.ms-hdr         { margin-bottom: 1.75rem; }
.ms-greeting    {
  font-size: .8rem; font-weight: 500; color: var(--ink-muted);
  margin-bottom: .3rem; display: flex; align-items: center; gap: .4rem;
}
.ms-greeting-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 5px #22c55e; flex-shrink: 0;
}
.ms-title    { font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -.025em; line-height: 1.2; }
.ms-subtitle { font-size: .84rem; color: var(--ink-soft); margin-top: .4rem; }

/* hero card */
.ms-hero {
  display: block; width: 100%; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  cursor: pointer; transition: box-shadow .2s, transform .2s;
}
.ms-hero:hover { box-shadow: 0 12px 32px rgba(0,0,0,.12); transform: translateY(-2px); }
.ms-hero-top {
  background: linear-gradient(135deg, #1e3a8a, #1d4ed8 60%, #3b82f6);
  padding: 1.4rem 1.6rem;
  display: flex; align-items: flex-start; gap: 1rem;
  position: relative; overflow: hidden;
}
.ms-hero-top::after {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,.06); pointer-events: none;
}
.ms-hero-icon {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
}
.ms-hero-icon svg { width: 22px; height: 22px; }
.ms-hero-body { flex: 1; }
.ms-hero-eyebrow { font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: .25rem; }
.ms-hero-name    { font-size: 1.05rem; font-weight: 700; color: #fff; }
.ms-hero-desc    { font-size: .78rem; color: rgba(255,255,255,.75); margin-top: .2rem; line-height: 1.45; }
.ms-hero-arrow {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.ms-hero:hover .ms-hero-arrow { background: rgba(255,255,255,.22); }
.ms-hero-arrow svg { width: 14px; height: 14px; color: #fff; }
.ms-hero-bottom {
  padding: .9rem 1.6rem;
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.ms-hero-kpi     { display: flex; flex-direction: column; gap: .1rem; }
.ms-hero-kpi-val { font-size: 1.05rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.ms-hero-kpi-lbl { font-size: .68rem; color: var(--ink-muted); font-weight: 500; }
.ms-hero-kpi-sep { width: 1px; background: var(--line); align-self: stretch; }

/* section divider label */
.ms-section {
  display: flex; align-items: center; gap: .6rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .9rem;
}
.ms-section::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* module grid */
.ms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; margin-bottom: 1.75rem; }

/* module cards */
.ms-card {
  display: block; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid transparent;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  cursor: pointer;
  transition: box-shadow .2s, transform .2s, border-left-color .2s;
  animation: module-pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.ms-card:not(.ms-card-inactive):hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  transform: translateY(-3px);
  border-left-color: var(--ms-accent, var(--accent));
}
.ms-card-inactive { opacity: .42; cursor: default; }
.ms-card-inactive:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.ms-card-body { padding: 1.2rem 1.2rem .85rem; }
.ms-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.ms-card-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--ms-icon-bg, var(--accent-sub));
  border: 1px solid var(--ms-icon-border, rgba(0,0,0,.08));
  display: flex; align-items: center; justify-content: center;
}
.ms-card-icon svg { width: 18px; height: 18px; }
.ms-badge        { font-size: .62rem; font-weight: 700; padding: .18rem .55rem; border-radius: 99px; letter-spacing: .04em; }
.ms-badge-active { background: #dcfce7; color: #15803d; }
.ms-badge-soon   { background: var(--surface-2); color: var(--ink-muted); }
[data-theme="dark"] .ms-badge-active { background: rgba(34,197,94,.15); color: #4ade80; }
[data-theme="dark"] .ms-badge-soon   { background: rgba(255,255,255,.06); }
.ms-card-name { font-size: .92rem; font-weight: 700; color: var(--ink); }
.ms-card-desc { font-size: .74rem; color: var(--ink-soft); margin-top: .2rem; line-height: 1.45; }
.ms-stats { display: flex; gap: 1rem; padding: .7rem 1.2rem; border-top: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.ms-stat     { display: flex; flex-direction: column; gap: .05rem; }
.ms-stat-val { font-size: .88rem; font-weight: 700; color: var(--ink); }
.ms-stat-lbl { font-size: .65rem; color: var(--ink-muted); font-weight: 500; }

/* footer */
.ms-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 1.25rem; border-top: 1px solid var(--line); flex-wrap: wrap; gap: .5rem; }
.ms-foot-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; color: var(--ink-muted);
  cursor: pointer; text-decoration: none;
  padding: .3rem .5rem; border-radius: 6px;
  transition: color .15s, background .15s;
}
.ms-foot-link:hover { color: var(--ink-soft); background: var(--surface-2); }
.ms-foot-link svg { width: 13px; height: 13px; }
.ms-foot-tag { font-size: .65rem; color: var(--ink-muted); }
@keyframes module-pop {
  from { opacity: 0; transform: scale(.75) translateY(18px); }
  to   { opacity: 1; transform: scale(1)  translateY(0);     }
}

/* ── Scrollbar (ambos os modos) ──────────────────────────────────────────── */
::-webkit-scrollbar       { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ── Tooltips / empty states ─────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 3rem 1.5rem; color: var(--ink-muted);
}
.empty-state svg { opacity: .35; margin-bottom: .75rem; }
.empty-state p { font-size: .875rem; margin: 0; }

/* ── Focus ring acessível ────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── D2: Skeleton loaders ────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--line)      50%,
    var(--surface-2) 75%
  );
  background-size: 1200px 100%;
  animation: skeleton-shimmer 1.5s infinite linear;
  border-radius: 6px;
  display: block;
}
.skeleton-text  { height: 13px; margin-bottom: 8px; border-radius: 4px; }
.skeleton-title { height: 26px; width: 45%; margin-bottom: 16px; border-radius: 4px; }
.skeleton-card  { height: 110px; border-radius: 12px; margin-bottom: 12px; }
.skeleton-row   { height: 42px; border-radius: 6px; margin-bottom: 5px; }
.skeleton-kpi   { height: 92px; border-radius: 12px; }
.skeleton-short { width: 60%; }
.skeleton-long  { width: 90%; }

/* ── D3: Empty states melhorados ─────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 3.5rem 1.5rem;
  text-align: center; gap: .6rem; color: var(--ink-muted);
}
.empty-state-icon  { font-size: 2.8rem; opacity: .4; line-height: 1; }
.empty-state-title { font-weight: 600; font-size: .92rem; color: var(--ink); opacity: .65; }
.empty-state-sub   { font-size: .78rem; color: var(--ink-soft); max-width: 300px;
                     line-height: 1.55; margin-top: .15rem; }
.empty-state .btn  { margin-top: .9rem; }

/* ── D5: Print / PDF ─────────────────────────────────────────────────────── */
@media print {
  aside, header, .btn, #toast-root, #modal-root,
  .no-print, .nav-link, [data-no-print] { display: none !important; }
  main { padding: 0 !important; margin: 0 !important; }
  body { background: white !important; color: #111 !important; font-size: 11pt; }
  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    page-break-inside: avoid;
    margin-bottom: 12pt;
  }
  canvas { max-width: 100% !important; height: auto !important; }
  h1, h2, h3 { page-break-after: avoid; }
  table { border-collapse: collapse; width: 100%; }
  table th, table td { border: 1px solid #ccc; padding: 4pt 6pt; font-size: 9pt; }
  .print-only { display: block !important; }
}
.print-only { display: none; }

/* ── D6: Barra de progresso do questionário ──────────────────────────────── */
.quest-progress-wrap {
  margin-bottom: 1.25rem;
}
.quest-progress-label {
  display: flex; justify-content: space-between;
  font-size: .71rem; color: var(--ink-soft); margin-bottom: .3rem;
}
.quest-progress-bar {
  height: 5px; background: var(--line); border-radius: 3px; overflow: hidden;
}
.quest-progress-fill {
  height: 100%; background: var(--accent); border-radius: 3px;
  transition: width .35s ease;
  min-width: 4px;
}

/* ── Barra de progresso de importação / desfazer ─────────────────────────── */
.imp-progress { margin: .5rem 0; }
.imp-progress-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .76rem; color: var(--ink-soft); margin-bottom: .35rem;
}
.imp-progress-pct { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.imp-progress-track {
  height: 8px; background: var(--line); border-radius: 5px; overflow: hidden;
}
.imp-progress-fill {
  height: 100%; background: var(--accent); border-radius: 5px;
  transition: width .18s ease; min-width: 0;
}
.imp-progress-fill.imp-progress-done { background: var(--success, #059669); }
.imp-progress-fill.imp-progress-err  { background: var(--danger, #b3261e); }

/* ── D7: Smooth page transitions ─────────────────────────────────────────── */
.page-enter {
  animation: pageEnter .2s ease forwards;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── D1: Mobile / Tablet responsiveness ──────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar vira drawer */
  .erp-sidebar {
    position: fixed; top: 0; left: -17rem; width: 16rem !important;
    height: 100vh; z-index: 100; transition: left .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
  }
  .erp-sidebar.sidebar-open { left: 0; }

  /* Conteúdo ocupa toda a largura */
  main.flex-1 { margin-left: 0 !important; width: 100% !important; }

  /* Padding reduzido */
  .p-6, .p-8 { padding: .9rem !important; }

  /* Grids adaptáveis */
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-cols-3 { grid-template-columns: repeat(1, 1fr) !important; }
  .grid-cols-2 { grid-template-columns: repeat(1, 1fr) !important; }

  /* Tabelas com scroll horizontal */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data   { font-size: .75rem !important; min-width: 540px; }
  table.data td, table.data th { padding: 5px 7px !important; }

  /* Botão hamburguer */
  #mobile-menu-btn { display: flex !important; }
}

/* Botão hamburguer — oculto em desktop */
#mobile-menu-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink);
}
#mobile-menu-btn:hover { background: var(--surface-3); }

/* Overlay do drawer mobile */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 99;
}
.sidebar-overlay.active { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   ERP MODERN SHELL — topnav unificado + tiles Fiori + home por role
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Topnav persistente ─────────────────────────────────────────────────── */
.erp-topnav {
  height: 48px;
  display: flex; align-items: center;
  transition: box-shadow .2s;
  padding: 0 1.1rem; gap: .4rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.erp-topnav-logo {
  display: flex; align-items: center;
  flex-shrink: 0; text-decoration: none; cursor: pointer;
}
.gaia-em { color: var(--accent); font-weight: 700; letter-spacing: .06em; }
.erp-topnav-brand-stack {
  display: flex; flex-direction: column; justify-content: center; gap: 0; line-height: 1;
}
.erp-topnav-brand {
  font-size: .84rem; font-weight: 700; color: var(--ink); white-space: nowrap;
  letter-spacing: -.01em;
}
.erp-topnav-gaia {
  font-size: .62rem; font-weight: 400; color: var(--ink-muted);
  letter-spacing: .02em; white-space: nowrap; margin-top: 1px;
}
.erp-topnav-sep { width: 1px; height: 16px; background: var(--line); margin: 0 .25rem; flex-shrink: 0; }
.erp-topnav-crumb {
  display: flex; align-items: center; gap: .3rem;
  font-size: .76rem; color: var(--ink-soft); list-style: none;
}
.erp-topnav-crumb-sep { opacity: .35; }
.erp-topnav-crumb-cur { color: var(--ink); font-weight: 600; }
.erp-topnav-spacer { flex: 1; }
.erp-topnav-actions { display: flex; align-items: center; gap: .1rem; }
.erp-topnav-btn {
  width: 32px; height: 32px; border-radius: 7px;
  border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); position: relative; flex-shrink: 0;
}
.erp-topnav-btn:hover { background: var(--surface-2); color: var(--ink); }
.erp-topnav-btn svg { width: 16px; height: 16px; }
.erp-notif-badge {
  position: absolute; top: 4px; right: 3px;
  min-width: 14px; height: 14px; border-radius: 99px;
  background: var(--danger); color: #fff;
  font-size: .52rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
  pointer-events: none;
}
.erp-topnav-divider { width: 1px; height: 20px; background: var(--line); margin: 0 .35rem; flex-shrink: 0; }
.erp-topnav-user {
  display: flex; align-items: center; gap: .55rem; padding-left: .4rem;
}
.erp-topnav-user-info { text-align: right; line-height: 1.2; }
.erp-topnav-user-name { font-size: .78rem; font-weight: 600; color: var(--ink); }
.erp-topnav-user-role { font-size: .63rem; color: var(--ink-soft); }
.erp-topnav-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(216,100,28,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: var(--accent); flex-shrink: 0;
}

/* ── ERP shell body (topnav acima, sidebar+conteúdo abaixo) ─────────────── */
.erp-shell-body {
  display: flex; min-height: calc(100vh - 48px);
}
.erp-sidebar-module {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--sidebar-soft);
  padding: .9rem .85rem .55rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: .2rem;
}

/* ── ERP Home / Launchpad ───────────────────────────────────────────────── */
.erp-home {
  max-width: 820px; margin: 0 auto; padding: 2.25rem 1.5rem 3rem;
}
.erp-home-hello { font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: 0 0 .2rem; }
.erp-home-sub   { font-size: .81rem; color: var(--ink-soft); margin: 0 0 2rem; }

/* ── Grupos de tiles (estilo Fiori Horizon) ─────────────────────────────── */
.erp-group { margin-bottom: 1.65rem; }
.erp-group-hdr {
  display: flex; align-items: center; gap: .7rem; margin-bottom: .85rem;
}
.erp-group-label {
  font-size: .63rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-muted); white-space: nowrap;
}
.erp-group-line { flex: 1; height: 1px; background: var(--line); }
.erp-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; }

/* ── Tile base ──────────────────────────────────────────────────────────── */
.erp-tile {
  width: auto; min-width: 0; min-height: 112px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); padding: 13px 13px 11px;
  display: flex; flex-direction: column; justify-content: flex-start;
  cursor: pointer; text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.erp-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(216,100,28,.11), 0 1px 4px rgba(0,0,0,.07);
}
[data-theme="dark"] .erp-tile:hover {
  box-shadow: 0 4px 20px rgba(232,112,40,.18), 0 1px 4px rgba(0,0,0,.3);
}
.erp-tile[draggable="true"] { cursor: grab; user-select: none; }
.erp-tile[draggable="true"]:active { cursor: grabbing; }
.erp-tile.tile-dragging { opacity: .28; transform: scale(.96); pointer-events: none; }
.erp-tile.tile-drag-over { border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(59,130,246,.28); transform: translateY(-2px); }
.erp-tile-dim   { opacity: .42; cursor: default; pointer-events: none; }
.erp-tiles.tiles-dragging .erp-tile-dim { pointer-events: all; }
.erp-tile-icon  {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.erp-tile-icon svg { width: 17px; height: 17px; }
.erp-tile-div { height: 1px; background: var(--line); margin: 9px 0 8px; }
.erp-tile-name { font-size: .81rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.erp-tile-desc { font-size: .68rem; color: var(--ink-soft); margin-top: .12rem; line-height: 1.4; }

/* ── KPI tile (número grande + divisor + nome) ──────────────────────────── */
.erp-tile-kpi-num {
  font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -.03em;
}
.erp-tile-kpi-num .erp-tile-kpi-sub { font-size: .9rem; font-weight: 500; color: var(--ink-soft); }
.erp-tile-kpi-ctx { font-size: .67rem; color: var(--ink-soft); margin-top: .22rem; line-height: 1.35; }
.erp-tile-kpi-div { height: 1px; background: var(--line); margin: .6rem 0 .48rem; }
.erp-tile-kpi-name { font-size: .81rem; font-weight: 700; color: var(--ink); }

/* ── BU Task card (questionário pendente) ───────────────────────────────── */
.erp-task {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 1rem 1.25rem;
  margin-bottom: 1.65rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.erp-task-body { flex: 1; min-width: 180px; }
.erp-task-title { font-size: .88rem; font-weight: 700; color: var(--ink); }
.erp-task-desc  { font-size: .74rem; color: var(--ink-soft); margin-top: .15rem; }
.erp-task-btn {
  padding: .42rem .95rem; border-radius: 7px;
  background: var(--accent); color: #fff;
  font-size: .77rem; font-weight: 600; border: none;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  display: inline-block; font-family: inherit;
}
.erp-task-btn:hover { opacity: .9; }
.erp-task-none {
  font-size: .8rem; color: var(--ink-soft); text-align: center;
  padding: .75rem; border-radius: 8px; background: var(--surface-2);
  margin-bottom: 1.65rem;
}

/* ── Badge "Em breve" ───────────────────────────────────────────────────── */
.erp-badge-soon {
  font-size: .58rem; padding: .14rem .42rem; border-radius: 99px;
  background: var(--surface-2); color: var(--ink-muted);
  border: 1px solid var(--line); margin-left: .32rem;
  vertical-align: middle; font-weight: 600; letter-spacing: .04em;
}

/* ── Mobile adaptations para erp-shell ─────────────────────────────────── */
@media (max-width: 768px) {
  .erp-shell-body aside.w-64 {
    top: 48px !important;
    height: calc(100vh - 48px) !important;
  }
  .erp-topnav-user-info { display: none; }
  .erp-topnav-brand span { display: none; }
  #erp-mobile-btn { display: flex !important; }
}
#erp-mobile-btn { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   AJUSTE 6 — Design modernization refinements
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar nav section headers (CSS class replaces inline style) ───────── */
.nav-section-hdr {
  font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: rgba(160,175,200,.5);
  margin-top: 1.35rem; margin-bottom: .3rem;
  padding: 0 .85rem; display: block;
}
.nav-section-hdr:first-child { margin-top: .5rem; }

/* ── Topnav scroll elevation ─────────────────────────────────────────────── */
.erp-topnav.scrolled {
  box-shadow: 0 2px 8px rgba(0,0,0,.13), 0 1px 0 var(--line);
}
[data-theme="dark"] .erp-topnav.scrolled {
  box-shadow: 0 2px 10px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04);
}

/* ── Sidebar right-edge separation in light mode ─────────────────────────── */
#main-sidebar {
  box-shadow: 2px 0 8px rgba(0,0,0,.06);
}
[data-theme="dark"] #main-sidebar {
  box-shadow: 2px 0 8px rgba(0,0,0,.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ERP SIDEBAR MODERNIZADO — collapsível + badge de módulo + active sólido
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base: largura com transição suave ──────────────────────────────────── */
.erp-sidebar {
  width: 232px;
  transition: width .2s ease;
  overflow-x: hidden;
  overflow-y: hidden;
}
.erp-sidebar.collapsed { width: 52px; }

/* ── Cabeçalho da sidebar: badge + pin ──────────────────────────────────── */
.erp-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .5rem .5rem .6rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  min-height: 52px;
  flex-shrink: 0;
}
.erp-sidebar.collapsed .erp-sidebar-head {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .3rem;
  padding: .5rem 0;
}

/* ── Badge do módulo ────────────────────────────────────────────────────── */
.erp-sidebar-mod-badge {
  display: flex; align-items: center; gap: .55rem;
  overflow: hidden;
}
.erp-sidebar-mod-icon {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  background: color-mix(in srgb, var(--mod-color) 18%, transparent);
  color: var(--mod-color);
}
.erp-sidebar-mod-icon svg { stroke: var(--mod-color); }
.erp-sidebar-mod-name {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--sidebar-soft);
  white-space: nowrap; overflow: hidden;
  transition: opacity .15s, width .2s;
}
.erp-sidebar.collapsed .erp-sidebar-mod-name {
  opacity: 0; width: 0; pointer-events: none;
}

/* ── Botão pin (colapsar / expandir) ────────────────────────────────────── */
.erp-sidebar-pin {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  border: none; background: transparent; cursor: pointer;
  color: var(--sidebar-soft); transition: background .15s, color .15s, transform .2s;
  padding: 0;
}
.erp-sidebar-pin:hover { background: rgba(255,255,255,.1); color: #fff; }
.erp-sidebar.collapsed .erp-sidebar-pin { transform: rotate(180deg); }

/* ── Nav container ──────────────────────────────────────────────────────── */
.erp-sidebar-nav {
  padding: .35rem .4rem;
  overflow-y: auto; overflow-x: hidden;
}

/* ── Links: estado ativo sólido ─────────────────────────────────────────── */
.nav-link.active {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: none;
}
.nav-link.active svg { stroke: #fff; }
[data-theme="dark"] .nav-link.active { background: var(--accent) !important; }

/* ── Links colapsados: só ícone + tooltip ───────────────────────────────── */
.erp-sidebar.collapsed .nav-link {
  justify-content: center;
  padding: .6rem 0;
  position: relative;
}
.erp-sidebar.collapsed .nav-link span { display: none; }
.erp-sidebar.collapsed .nav-link[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%; transform: translateY(-50%);
  background: #1e2736;
  color: #fff; font-size: .78rem; font-weight: 500;
  padding: .3rem .65rem; border-radius: 6px;
  white-space: nowrap; z-index: 300; pointer-events: none;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.erp-sidebar.collapsed .nav-link[data-tip]:hover::before {
  content: '';
  position: absolute;
  left: calc(100% + 4px);
  top: 50%; transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #1e2736;
  z-index: 300; pointer-events: none;
}

/* ── Section divider novo ───────────────────────────────────────────────── */
.nav-section-div {
  display: flex; align-items: center; gap: .55rem;
  margin: 1rem .4rem .25rem; overflow: hidden;
}
.nav-section-lbl {
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: rgba(160,175,200,.45); white-space: nowrap;
  flex-shrink: 0;
}
.nav-section-div::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.07); min-width: 8px;
}
.erp-sidebar.collapsed .nav-section-div { margin: .6rem .4rem; }
.erp-sidebar.collapsed .nav-section-lbl { display: none; }
.erp-sidebar.collapsed .nav-section-div::after { width: 100%; }

/* ── Consistent page header pattern ─────────────────────────────────────── */
.page-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap;
}
.page-hdr-text h2 {
  font-size: 1.2rem; font-weight: 700; color: var(--ink);
  margin: 0 0 .15rem; letter-spacing: -.02em; line-height: 1.25;
}
.page-hdr-text p {
  font-size: .76rem; color: var(--ink-soft); margin: 0;
}
.page-hdr-actions { display: flex; gap: .5rem; flex-shrink: 0; align-items: center; }

/* ── Status dot — inline active/inactive indicator ───────────────────────── */
.status-dot {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600;
}
.status-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.status-dot-on  { color: #15803d; }
.status-dot-on::before  { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,.55); }
.status-dot-off { color: #9ca3af; }
.status-dot-off::before { background: #9ca3af; }
[data-theme="dark"] .status-dot-on  { color: #4ade80; }
[data-theme="dark"] .status-dot-off { color: #6b7280; }

/* ── Table row action buttons ────────────────────────────────────────────── */
.tbl-act {
  font-size: .72rem; font-weight: 600; cursor: pointer;
  padding: .2rem .5rem; border-radius: 5px; border: none;
  background: transparent; font-family: inherit;
  transition: background .12s, color .12s;
}
.tbl-act:hover { background: var(--surface-2); }
.tbl-act-edit    { color: var(--accent); }
.tbl-act-warn    { color: #92400e; }
[data-theme="dark"] .tbl-act-warn { color: #fcd34d; }
.tbl-act-danger  { color: #b91c1c; }
[data-theme="dark"] .tbl-act-danger { color: #fca5a5; }

/* ── Notification badge pulse (when there are items) ─────────────────────── */
@keyframes notif-pulse { 0%, 100% { transform: scale(1); } 55% { transform: scale(1.2); } }
.erp-notif-badge { animation: notif-pulse 3s ease-in-out infinite; }

/* ── Popover wrapper (notification panel + avatar menu) ──────────────────── */
.erp-popover-wrap { position: relative; display: flex; align-items: center; }

/* ── Notification dropdown panel ─────────────────────────────────────────── */
.notif-panel {
  position: absolute; top: 42px; right: 0;
  width: 276px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.07);
  z-index: 200; overflow: hidden;
  animation: panel-in .15s ease;
}
.notif-panel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .85rem .5rem;
  border-bottom: 1px solid var(--line);
}
.notif-panel-title { font-size: .78rem; font-weight: 700; color: var(--ink); }
.notif-panel-close {
  width: 22px; height: 22px; border-radius: 5px; border: none;
  background: transparent; cursor: pointer; color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; transition: background .12s;
}
.notif-panel-close:hover { background: var(--surface-2); }
.notif-panel-body { padding: .65rem .85rem; }
.notif-panel-row {
  display: flex; align-items: flex-start; gap: .55rem; padding: .45rem 0;
}
.notif-panel-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--danger);
  flex-shrink: 0; margin-top: 5px;
  box-shadow: 0 0 5px rgba(239,68,68,.5);
}
.notif-dot-draft { background: var(--gold) !important; box-shadow: 0 0 5px rgba(245,158,11,.5) !important; }
.notif-panel-msg { font-size: .75rem; color: var(--ink); line-height: 1.4; }
.notif-panel-sub { font-size: .67rem; color: var(--ink-soft); margin-top: .1rem; }
.notif-panel-footer {
  padding: .4rem .85rem .6rem;
  border-top: 1px solid var(--line); text-align: center;
}
.notif-panel-cta {
  font-size: .73rem; font-weight: 600; color: var(--accent);
  background: none; border: none; cursor: pointer; font-family: inherit;
  text-decoration: none; display: inline-block;
}
.notif-panel-cta:hover { text-decoration: underline; }
.notif-panel-empty {
  font-size: .76rem; color: var(--ink-soft);
  text-align: center; padding: .35rem 0; margin: 0;
}

/* ── Avatar dropdown menu ────────────────────────────────────────────────── */
.avatar-menu {
  position: absolute; top: 42px; right: 0;
  min-width: 178px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.07);
  z-index: 200; overflow: hidden;
  animation: panel-in .15s ease;
}
.avatar-menu-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .85rem; font-size: .8rem; font-weight: 500;
  color: var(--ink); cursor: pointer; width: 100%;
  border: none; background: transparent; font-family: inherit;
  text-align: left; transition: background .12s;
}
.avatar-menu-item:hover { background: var(--surface-2); }
.avatar-menu-item svg { width: 14px; height: 14px; color: var(--ink-muted); flex-shrink: 0; }
.avatar-menu-item-danger { color: #b91c1c; }
[data-theme="dark"] .avatar-menu-item-danger { color: #fca5a5; }
.avatar-menu-sep { height: 1px; background: var(--line); margin: .2rem 0; }
.erp-topnav-user { cursor: pointer; }
.erp-topnav-user:hover .erp-topnav-avatar {
  background: rgba(216,100,28,.22);
}

/* ── Shared panel enter animation ────────────────────────────────────────── */
@keyframes panel-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes drw-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Drawer (side panel) ─────────────────────────────────────────────────── */
#drawer-root { position: fixed; inset: 0; z-index: 290; pointer-events: none; }
#drawer-root:not(:empty) { pointer-events: all; }
.erp-drawer-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.42);
  animation: drw-fade .15s ease;
}
.erp-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 520px; max-width: 96vw;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -8px 0 48px rgba(0,0,0,.22);
  transform: translateX(102%);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.erp-drawer.open { transform: translateX(0); }
.erp-drawer-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 1.25rem; border-bottom: 1px solid var(--line);
  flex-shrink: 0; background: var(--surface-2);
}
.erp-drawer-hdr-title { font-size: .9rem; font-weight: 600; color: var(--ink); }
.erp-drawer-close {
  background: none; border: none; cursor: pointer;
  color: var(--ink-muted); padding: .2rem .4rem;
  border-radius: .25rem; line-height: 1;
  transition: background .1s, color .1s; display: flex; align-items: center;
}
.erp-drawer-close:hover { background: var(--surface-3); color: var(--ink); }
.erp-drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }

/* ── Command Palette ─────────────────────────────────────────────────────── */
.cmd-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.52);
  z-index: 400; display: flex; align-items: flex-start;
  justify-content: center; padding-top: 13vh;
  animation: drw-fade .1s ease;
}
.cmd-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: .75rem; width: 560px; max-width: 92vw;
  box-shadow: 0 24px 64px rgba(0,0,0,.38); overflow: hidden;
}
.cmd-input-wrap {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--line);
}
.cmd-input-wrap svg { color: var(--ink-muted); flex-shrink: 0; }
.cmd-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: .95rem; color: var(--ink); font-family: inherit;
}
.cmd-input::placeholder { color: var(--ink-muted); }
.cmd-results { max-height: 340px; overflow-y: auto; padding: .3rem 0; }
.cmd-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .45rem 1rem; cursor: pointer; transition: background .08s;
}
.cmd-item:hover, .cmd-item.cmd-active { background: var(--surface-2); }
.cmd-item svg { color: var(--ink-muted); flex-shrink: 0; }
.cmd-item-text { font-size: .875rem; color: var(--ink); flex: 1; }
.cmd-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-muted); font-size: .85rem; }
.cmd-footer {
  padding: .45rem 1rem; border-top: 1px solid var(--line);
  background: var(--surface-2); display: flex; gap: 1.25rem;
}
.cmd-hint { font-size: .67rem; color: var(--ink-muted); display: flex; align-items: center; gap: .3rem; }
.cmd-hint kbd {
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: .2rem; padding: .05rem .3rem;
  font-family: monospace; font-size: .65rem;
}

/* ── Table Density (compact mode) ───────────────────────────────────────── */
body.density-compact table td,
body.density-compact table th { padding: .2rem .45rem !important; font-size: .72rem; }
body.density-compact .tbl-act { padding: .1rem .3rem !important; font-size: .65rem !important; }
body.density-compact .badge,
body.density-compact .chip { padding: .05rem .3rem !important; font-size: .62rem !important; }
body.density-compact .status-dot { width: 7px !important; height: 7px !important; }
#topbar-density.density-on { color: var(--accent); }

/* ── Session Warning Bar ─────────────────────────────────────────────────── */
.session-warn-bar {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid #f59e0b;
  border-radius: .5rem; padding: .6rem 1rem;
  display: flex; align-items: center; gap: .75rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.22); z-index: 500;
  animation: panel-in .2s ease; white-space: nowrap;
}
.session-warn-msg { font-size: .83rem; color: var(--ink); }
.session-warn-count { color: #f59e0b; font-weight: 700; font-variant-numeric: tabular-nums; display: inline-block; min-width: 2.8ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   ERP SUBNAV — barra horizontal de tabs (substitui sidebar lateral)
   ═══════════════════════════════════════════════════════════════════════════ */

.erp-subnav {
  display: flex; align-items: stretch;
  height: 42px; padding: 0 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; overflow-y: hidden;
  flex-shrink: 0; position: sticky; top: 48px; z-index: 40;
  scrollbar-width: none; gap: .25rem;
}
.erp-subnav::-webkit-scrollbar { display: none; }

/* ── Ícone + nome do módulo ─────────────────────────────────────────────── */
.erp-subnav-mod {
  display: flex; align-items: center; gap: .45rem;
  flex-shrink: 0; margin-right: .15rem; align-self: center;
}
.erp-subnav-mod-icon {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  background: color-mix(in srgb, var(--mod-color) 12%, transparent);
}
.erp-subnav-mod-icon svg { stroke: var(--mod-color); }
.erp-subnav-mod-name {
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-muted); white-space: nowrap;
}

/* ── Separador vertical ─────────────────────────────────────────────────── */
.erp-subnav-sep {
  width: 1px; height: 16px; align-self: center;
  background: var(--line); flex-shrink: 0; margin: 0 .35rem;
}

/* ── Container das tabs ─────────────────────────────────────────────────── */
.erp-subnav-tabs {
  display: flex; align-items: stretch; gap: 0; flex: 1;
}

/* ── Tab individual — Fiori underline pattern ───────────────────────────── */
.erp-tab {
  display: flex; align-items: center;
  padding: 0 .85rem;
  font-size: .8rem; font-weight: 500;
  color: var(--ink-muted); white-space: nowrap;
  text-decoration: none; border: none; background: transparent;
  cursor: pointer; transition: color .12s, background .12s;
  font-family: inherit; border-bottom: 2px solid transparent;
  border-radius: 0;
}
.erp-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.erp-tab.active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* ── Dropdown Configuração ▾ ────────────────────────────────────────────── */
.erp-tab-dd-wrap { position: relative; display: flex; }
.erp-tab-dd-trigger { display: flex; align-items: center; gap: .2rem; }
.erp-tab-menu {
  position: fixed; min-width: 210px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: .3rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  z-index: 1000;
}
[data-theme="dark"] .erp-tab-menu {
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.erp-tab-menu-item {
  display: block; padding: .48rem .9rem; border-radius: 6px;
  font-size: .81rem; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; transition: background .11s, color .11s;
  white-space: nowrap;
}
.erp-tab-menu-item:hover { background: var(--surface-2); color: var(--ink); }
.erp-tab-menu-item.active { color: var(--accent); font-weight: 600; }

/* ── Main content full-width ────────────────────────────────────────────── */
.erp-main {
  flex: 1; overflow-x: hidden;
  min-height: calc(100vh - 90px);
}

/* ── Layout body: app é coluna sem sidebar ──────────────────────────────── */
#app {
  display: flex; flex-direction: column; min-height: 100vh;
}

/* Help Drawer */
.help-drawer-content {
  padding: 0 .25rem;
  line-height: 1.65;
  font-size: .85rem;
  color: var(--ink-soft);
}
.help-drawer-content h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 1.25rem 0 .4rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--line);
}
.help-drawer-content h3 {
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  margin: 1rem 0 .3rem;
}
.help-drawer-content p { margin: .4rem 0; }
.help-drawer-content ul { padding-left: 1.25rem; margin: .4rem 0; }
.help-drawer-content li { margin: .2rem 0; }
.help-drawer-content table { width: 100%; border-collapse: collapse; font-size: .8rem; margin: .5rem 0; }
.help-drawer-content th, .help-drawer-content td { padding: .35rem .6rem; border: 1px solid var(--line); text-align: left; }

/* Forecast tabs */
.fct-tab {
  background: none;
  border: none;
  padding: .45rem 1rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.fct-tab:hover { color: var(--ink); }
.fct-tab.fct-tab-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.help-drawer-content th { background: var(--surface-2); font-weight: 600; }
.help-drawer-content code { font-family: monospace; font-size: .8rem; background: var(--surface-2); padding: .1rem .3rem; border-radius: 3px; }
.help-drawer-content strong { color: var(--ink); font-weight: 600; }

/* ── Mobile: esconder nome do módulo, tabs com scroll ───────────────────── */
@media (max-width: 680px) {
  .erp-subnav { padding: 0 .6rem; }
  .erp-subnav-mod-name { display: none; }
  .erp-subnav-sep { display: none; }
  .erp-tab { padding: 0 .6rem; font-size: .75rem; }
}

/* ── Mobile: tabela de pendências → card layout ──────────────────────────── */
@media (max-width: 600px) {
  .table-card-mobile thead { display: none; }
  .table-card-mobile tbody tr {
    display: block; margin-bottom: .6rem;
    border-radius: 10px; border: 1px solid var(--line);
    padding: .55rem .8rem; background: var(--surface);
  }
  .table-card-mobile td {
    display: flex; gap: .5rem; align-items: flex-start;
    padding: .18rem 0; font-size: .82rem; border: none !important;
  }
  .table-card-mobile td::before {
    content: attr(data-label);
    font-size: .67rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--ink-muted);
    min-width: 88px; flex-shrink: 0; margin-top: 2px;
  }
  .table-card-mobile td:first-child { padding-top: .3rem; }
}

/* ── Subnav scroll-fade indicator (CSS-only, sem JS) ─────────────────────── */
.erp-subnav-wrap {
  position: relative; overflow: hidden;
}
.erp-subnav-wrap::after {
  content: ''; pointer-events: none;
  position: absolute; top: 0; right: 0;
  width: 36px; height: 100%;
  background: linear-gradient(to right, transparent, var(--surface));
  opacity: 0; transition: opacity .2s;
}
.erp-subnav-wrap.can-scroll-right::after { opacity: 1; }

/* ── Mobile: touch targets mínimos 44px ─────────────────────────────────── */
@media (max-width: 768px) {
  .btn-sm {
    min-height: 44px;
    padding: .55rem .9rem;
    font-size: .8rem;
  }
  .btn {
    min-height: 44px;
  }
  /* min-height (não height fixa): SVGs com altura própria (radar, rankings longos)
     definem height:auto inline — uma height fixa aqui RECORTAVA o conteúdo. */
  .chart-box { min-height: 140px; height: auto; }
  /* Formulários: inputs mais altos para toque fácil */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], select, textarea {
    min-height: 44px;
    font-size: 16px; /* evita zoom automático do iOS */
  }
}

/* ── 6F: Dark mode polish ────────────────────────────────────────────────── */
[data-theme="dark"] .chip {
  background: rgba(255,255,255,.1);
  color: var(--ink);
  border-color: rgba(255,255,255,.15);
}
[data-theme="dark"] .chip.active {
  background: rgba(232,112,40,.25);
  color: #f9a96a;
  border-color: rgba(232,112,40,.3);
}
[data-theme="dark"] table.data tbody tr:hover,
[data-theme="dark"] table.data-sm tbody tr:hover {
  background: rgba(255,255,255,.05);
}
[data-theme="dark"] select.input,
[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a1a1aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 12px;
  padding-right: 2.2rem;
}
[data-theme="dark"] .input::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--ink-muted);
  opacity: .6;
}
[data-theme="dark"] #modal-root > div,
[data-theme="dark"] #drawer-root > div {
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .pbar {
  background: rgba(255,255,255,.1);
}
[data-theme="dark"] .pbar > div {
  box-shadow: 0 0 6px rgba(232,112,40,.35);
}

/* ── Item 5: Questionnaire section — responsive grid ────────────────────── */
.qa-section-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 230px;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 700px) {
  .qa-section-grid {
    grid-template-columns: 1fr;
  }
  .qa-section-grid > div:last-child {
    position: static !important;
  }
}

/* ── Item 5: BU Dashboard charts — compact on small screens ─────────────── */
@media (max-width: 600px) {
  .chart-box { min-height: 120px; height: auto !important; }
  .kpi-value { font-size: 1.5rem; }
  .grid.grid-cols-2 { grid-template-columns: 1fr; }
  .grid.grid-cols-4 { grid-template-columns: 1fr 1fr; }
  .erp-home { padding: 1.25rem 1rem; }
  .erp-tiles { gap: .75rem; }
  .erp-tile { min-width: 120px; }
}

/* ── Item 8: Autosave indicator — persistent + timestamp ────────────────── */
.qa-autosave-saved {
  font-size: .72rem;
  color: var(--success);
  font-weight: 600;
}

/* ── Item 12: Empty state com CTA ────────────────────────────────────────── */
.empty-state-cta {
  text-align: center;
  padding: 3rem 2rem;
}
.empty-state-cta-icon { font-size: 2.2rem; margin-bottom: .85rem; }
.empty-state-cta-title { font-weight: 700; font-size: .95rem; margin-bottom: .4rem; color: var(--ink); }
.empty-state-cta-sub { color: var(--ink-muted); font-size: .82rem; line-height: 1.5; }
.empty-state-cta-btn { margin-top: 1.2rem; }

/* ── Item 3: Export button badge ─────────────────────────────────────────── */
.btn-export { gap: .35rem; }

/* ── Item 15: Admin completude badge on tile ─────────────────────────────── */
.erp-tile-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--danger);
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 6px;
  line-height: 1.5;
}

/* ── Ranking sort buttons ──────────────────────────────── */
.rk-sb {
  font-size: .68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.rk-sb:hover { background: var(--surface-3); color: var(--ink); }
.rk-sb.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Radar BU chip selector ────────────────────────────── */
.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: .7rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, opacity .12s;
  user-select: none;
}
.rd-chip:hover { border-color: var(--c, var(--accent)); color: var(--ink); }
.rd-chip.active {
  background: color-mix(in srgb, var(--c, var(--accent)) 12%, var(--surface-2));
  border-color: var(--c, var(--accent));
  color: var(--ink);
}
.rd-chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rd-chip-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-chip-score {
  font-size: .62rem;
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--surface-3);
  padding: 0 5px;
  border-radius: 4px;
  flex-shrink: 0;
}
.rd-chip.active .rd-chip-score { background: color-mix(in srgb, var(--c, var(--accent)) 22%, var(--surface-2)); }

/* ── Radar HTML legend ─────────────────────────────────── */
.rd-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  padding: 2px 0;
}
.rd-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .69rem;
  padding: 2px 6px;
  border-radius: 5px;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
  transition: background .1s, opacity .15s;
  white-space: nowrap;
}
.rd-leg-item:hover { background: var(--surface-2); }
/* Non-selected BUs: muted, still clickable to add */
button.rd-leg-item:not(.active) { opacity: 0.38; }
button.rd-leg-item:not(.active):hover { opacity: 0.85; }
/* Selected BUs: full color */
button.rd-leg-item.active .rd-leg-name { font-weight: 600; color: var(--ink); }
/* Avg row: always full opacity, no pointer */
.rd-leg-avg { cursor: default; opacity: 1 !important; }
.rd-leg-swatch {
  width: 10px; height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.rd-leg-dash {
  display: inline-block;
  width: 14px; height: 2px;
  background: repeating-linear-gradient(90deg, #94a3b8 0 4px, transparent 4px 7px);
  flex-shrink: 0;
}
.rd-leg-name { color: var(--ink-muted); font-weight: 500; }
.rd-leg-score {
  font-size: .62rem;
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--surface-2);
  border-radius: 3px;
  padding: 0 3px;
}

/* ── Radar tooltip ─────────────────────────────────────── */
.rd-tip {
  position: fixed;
  pointer-events: none;
  z-index: 200;
  display: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 11px;
  color: var(--ink);
  min-width: 148px;
  box-shadow: 0 4px 18px rgba(0,0,0,.2);
}
.erp-tile { position: relative; }

/* ── Actions Menu ─────────────────────────────────────────── */
.am-root { position: relative; display: inline-block; }
.am-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 7px;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  border: 1px solid var(--line); background: transparent;
  color: var(--ink-muted); cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.am-btn:hover, .am-root.am-open .am-btn {
  border-color: var(--accent); color: var(--ink); background: var(--surface-2);
}
.am-chev { flex-shrink: 0; transition: transform .2s; }
.am-root.am-open .am-chev { transform: rotate(180deg); }
.am-panel {
  display: none; position: absolute; top: calc(100% + 5px); right: 0;
  min-width: 185px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  z-index: 300; overflow: hidden;
  animation: am-in .12s ease;
}
.am-root.am-open .am-panel { display: block; }
@keyframes am-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.am-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 10px 14px;
  font-size: .8rem; font-weight: 500;
  border: none; background: none; cursor: pointer;
  color: var(--ink); text-align: left;
  transition: background .1s;
}
.am-item:hover { background: var(--surface-2); }
.am-item svg { flex-shrink: 0; }
.am-item.am-export svg { color: #22c55e; }
.am-item.am-import svg { color: #818cf8; }
.am-item.am-template svg { color: #f59e0b; }
.am-sep { border: none; border-top: 1px solid var(--line); margin: 3px 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   GAIA — Floating AI Assistant Widget
   ═══════════════════════════════════════════════════════════════════════════ */

/* FAB button */
.gaia-fab {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9998;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(140deg, #c24e14 0%, #e87028 100%);
  box-shadow: 0 4px 20px rgba(194,78,20,.45), 0 1px 4px rgba(0,0,0,.18);
  cursor: grab; touch-action: none; display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
  user-select: none; outline: none;
}
.gaia-fab:hover { transform: scale(1.07); box-shadow: 0 6px 28px rgba(194,78,20,.6); }
.gaia-fab:focus-visible { outline: 2px solid #c24e14; outline-offset: 3px; }
.gaia-fab-active { transform: scale(0.94) !important; }
.gaia-fab-dragging { cursor: grabbing; transition: none !important; }
.gaia-fab-dragging:hover { transform: none; }
@keyframes gaia-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(194,78,20,.4); }
  50%      { box-shadow: 0 4px 32px rgba(194,78,20,.65), 0 0 0 8px rgba(194,78,20,.1); }
}
.gaia-fab { animation: gaia-pulse 3.5s ease-in-out infinite; }
.gaia-fab-active { animation: none !important; }

/* Chat panel */
.gaia-panel {
  position: fixed; bottom: 5.75rem; right: 1.5rem; z-index: 9997;
  width: 400px; max-height: 560px;
  background: var(--surface);
  border: 1px solid rgba(194,78,20,.16);
  border-radius: 18px; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(194,78,20,.12), 0 1px 3px rgba(0,0,0,.08);
  transform: translateY(14px) scale(.97); opacity: 0; pointer-events: none;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
  overflow: hidden;
}
.gaia-panel-open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.gaia-panel, .gaia-panel.gaia-panel-open { transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease, width .2s ease, max-height .2s ease; }
.gaia-panel-expanded { width: 560px; max-height: min(78vh, 760px); }
@media (max-width: 480px) {
  .gaia-panel { width: calc(100vw - 1.5rem); right: .75rem; bottom: 5rem; }
  .gaia-panel-expanded { width: calc(100vw - 1rem); max-height: calc(100vh - 6rem); }
}

/* Header */
.gaia-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 1.125rem .75rem;
  background: linear-gradient(135deg, rgba(194,78,20,.09) 0%, rgba(232,112,40,.06) 100%);
  border-bottom: 1px solid rgba(194,78,20,.12);
  position: relative;
}
.gaia-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #c24e14 0%, #f59e0b 50%, #c24e14 100%);
  background-size: 200% 100%;
  animation: gaia-header-shine 4s ease-in-out infinite;
}
@keyframes gaia-header-shine {
  0%,100% { background-position: 0% 0%; }
  50%      { background-position: 100% 0%; }
}
.gaia-header-left { display: flex; align-items: center; gap: .625rem; }
.gaia-header-icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.gaia-name { font-size: .875rem; font-weight: 700; color: var(--ink); letter-spacing: .015em; }
.gaia-subtitle { font-size: .665rem; color: var(--ink-muted); margin-top: .07rem; letter-spacing: .01em; }
.gaia-header-actions { display: flex; align-items: center; gap: .125rem; }
.gaia-close-btn, .gaia-icon-btn {
  background: none; border: none; cursor: pointer; padding: 5px; border-radius: 7px;
  color: var(--ink-muted); display: flex; align-items: center;
  transition: background .15s, color .15s;
}
.gaia-close-btn:hover, .gaia-icon-btn:hover { background: rgba(194,78,20,.08); color: var(--ink); }

/* Messages */
.gaia-messages {
  flex: 1; overflow-y: auto; padding: 1rem 1rem .625rem;
  display: flex; flex-direction: column; gap: .5rem;
  scroll-behavior: smooth;
}
.gaia-messages::-webkit-scrollbar { width: 3px; }
.gaia-messages::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.gaia-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .625rem; padding: 2rem 1rem; color: var(--ink-muted);
  font-size: .78rem; line-height: 1.6; text-align: center; flex: 1; opacity: .65;
}
.gaia-empty-icon { opacity: .6; }
.gaia-suggestions { display: flex; flex-direction: column; gap: .4rem; width: 100%; max-width: 260px; margin-top: .25rem; opacity: 1; }
.gaia-suggestion-chip {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  padding: .5rem .75rem; font-size: .76rem; line-height: 1.4; color: var(--ink);
  cursor: pointer; text-align: left; transition: background .15s, border-color .15s;
}
.gaia-suggestion-chip:hover { background: rgba(194,78,20,.08); border-color: rgba(194,78,20,.3); }

.gaia-msg { display: flex; gap: .5rem; align-items: flex-end; }
.gaia-msg + .gaia-msg { margin-top: .125rem; }
.gaia-msg-user { flex-direction: row-reverse; }
.gaia-msg-ai .gaia-msg-avatar { flex-shrink: 0; margin-bottom: 1px; }
.gaia-msg-bubble-wrap { display: flex; flex-direction: column; max-width: 82%; }
.gaia-msg-bubble-wrap .gaia-msg-bubble { max-width: 100%; }
.gaia-copy-btn {
  align-self: flex-start; display: flex; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 5px;
  color: var(--ink-muted); opacity: 0; max-height: 0; overflow: hidden; margin-top: 0;
  transition: opacity .15s, max-height .15s, margin-top .15s, background .15s, color .15s;
}
.gaia-msg-ai:hover .gaia-copy-btn, .gaia-copy-btn:focus-visible { opacity: .7; max-height: 20px; margin-top: 3px; }
.gaia-copy-btn:hover { opacity: 1 !important; background: rgba(194,78,20,.08); color: var(--ink); }
.gaia-copy-btn-done { color: var(--success, #059669) !important; opacity: 1 !important; max-height: 20px !important; margin-top: 3px !important; }
.gaia-msg-bubble {
  max-width: 82%; padding: .6rem .875rem; border-radius: 14px;
  font-size: .815rem; line-height: 1.58; word-break: break-word;
}
.gaia-msg-user .gaia-msg-bubble {
  background: linear-gradient(140deg, #c24e14, #e87028); color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 2px 8px rgba(194,78,20,.25);
}
.gaia-msg-ai .gaia-msg-bubble {
  background: var(--surface-2); color: var(--ink);
  border-bottom-left-radius: 5px; border: 1px solid var(--line);
}
.gaia-msg-bubble code {
  background: rgba(0,0,0,.07); padding: 1px 5px; border-radius: 4px;
  font-size: .775rem; font-family: 'Fira Mono',monospace;
}
.gaia-msg-user .gaia-msg-bubble code { background: rgba(255,255,255,.2); }

/* Pending action card */
.gaia-action-card {
  margin-top: .5rem; padding: .625rem .75rem;
  background: rgba(232,112,40,.06); border: 1px solid rgba(232,112,40,.18);
  border-radius: 9px;
}
.gaia-action-desc { font-size: .79rem; color: var(--ink); margin-bottom: .5rem; line-height: 1.45; }
.gaia-action-btns { display: flex; gap: .375rem; }

/* Loading dots */
.gaia-dot-loader { display: inline-flex; align-items: center; gap: 5px; padding: 3px 2px; }
.gaia-dot-loader span {
  width: 5px; height: 5px; border-radius: 50%;
  background: linear-gradient(135deg, #c24e14, #e87028); display: inline-block;
  animation: gaia-bounce .9s ease-in-out infinite;
}
.gaia-dot-loader span:nth-child(2) { animation-delay: .15s; }
.gaia-dot-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes gaia-bounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

/* Footer */
.gaia-footer { padding: .625rem 1rem .875rem; border-top: 1px solid var(--line); background: var(--surface); }
.gaia-char-count { text-align: right; font-size: .64rem; color: var(--ink-muted); margin-top: .25rem; opacity: .7; }
.gaia-char-count-warn { color: #d97706; opacity: 1; font-weight: 600; }
.gaia-hint { font-size: .675rem; color: var(--ink-muted); margin-bottom: .375rem; line-height: 1.4; }
.gaia-input-row { display: flex; gap: .5rem; align-items: flex-end; }
.gaia-input {
  flex: 1; resize: none; border: 1.5px solid var(--line); border-radius: 20px;
  background: var(--surface-2); color: var(--ink); padding: .525rem .875rem;
  font-size: .815rem; line-height: 1.4; outline: none; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  min-height: 38px; max-height: 120px; overflow-y: auto;
}
.gaia-input:focus { border-color: #c24e14; box-shadow: 0 0 0 3px rgba(194,78,20,.1); }
.gaia-input::placeholder { color: var(--ink-muted); }
.gaia-send-btn {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(140deg, #c24e14, #e87028); color: white;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s, transform .2s ease, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(194,78,20,.3);
}
.gaia-send-btn:hover { opacity: .9; transform: scale(1.08); }
.gaia-send-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* Settings panel elements */
.gaia-settings-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.gaia-toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
.gaia-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.gaia-toggle-track {
  position: absolute; inset: 0; border-radius: 12px;
  background: var(--line); transition: background .2s ease;
}
.gaia-toggle-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: white; box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.gaia-toggle input:checked ~ .gaia-toggle-track { background: #c24e14; }
.gaia-toggle input:checked ~ .gaia-toggle-track::after { transform: translateX(20px); }

/* ── Barra de filtros + busca (mkFBar) — adaptativa à largura real ────────
   auto-fit + minmax faz o nº de colunas acompanhar o espaço disponível, sem
   depender de breakpoints: ~7 colunas num monitor largo, 3–4 num notebook,
   2 num tablet e 1 no celular. Antes cada campo tinha min-width fixo em linha
   (5 selects + busca ≈ 1000px mínimos), o que estourava em telas menores. */
.fbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: .55rem .7rem; align-items: end;
  padding: .7rem .8rem; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.fbar > * { min-width: 0; }                       /* permite encolher; evita overflow */
.fbar .fld {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fbar select, .fbar input { width: 100%; min-width: 0; }
.fbar-wide { grid-column: span 2; }               /* campos que pedem mais espaço */
.fbar-actions { display: flex; align-items: flex-end; }
.fbar-actions .btn { width: 100%; white-space: nowrap; }

/* Telas estreitas: a busca e o botão passam a ocupar a linha inteira, e as
   colunas ficam menores para caber 2 por linha em vez de 1. */
@media (max-width: 620px) {
  .fbar { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: .5rem; }
  .fbar-wide, .fbar-actions { grid-column: 1 / -1; }
}

/* ── Visualizador de documento (prévia na tela) ──────────────────────────── */
/* o .modal-box padrão limita a 720px e cortava o visualizador — este modificador
   libera a largura para o conteúdo caber (aplicado no onMount do viewer) */
.modal-box.modal-box-wide {
  max-width: 96vw; width: min(1040px, 96vw); max-height: 94vh; overflow: hidden;
}
.docv { display: flex; flex-direction: column; width: 100%; height: min(86vh, 900px); }
/* maximizado: ocupa a viewport quase inteira (toggle no header do viewer) */
.modal-box.docv-max { width: 97vw; max-width: 97vw; }
.modal-box.docv-max .docv { height: 93vh; }
.docv-search { display: flex; align-items: center; gap: .35rem; }
.docv-search input { width: 170px; padding: .3rem .55rem; font-size: .75rem; }
.docv-search .docv-count { font-size: .68rem; color: var(--ink-muted); min-width: 3.2rem; text-align: center; }
.docv-body mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 .05em; }
.docv-body mark.docv-cur { outline: 2px solid var(--accent); }
@media (max-width: 640px) { .docv-search input { width: 110px; } }
.docv-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.docv-body {
  flex: 1; min-height: 0; padding: .9rem 1.1rem 1.1rem;
  overflow: auto; background: var(--surface-2);
}
.docv-pre {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; line-height: 1.55; color: var(--ink);
}
.docv-msg {
  height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 1rem;
}

/* ── Iniciativas Atrasadas: cards de resumo e distribuição ───────────────── */
.pend-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .6rem; margin-bottom: 1rem;
}
.pend-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: 10px; padding: .6rem .8rem;
}
.pend-card-danger { border-left-color: var(--danger); background: rgba(179, 38, 30, .05); }
.pend-card-warn   { border-left-color: #f59e0b; background: rgba(245, 158, 11, .06); }
.pend-card-ok     { border-left-color: var(--success, #059669); }
.pend-card-lbl { font-size: .66rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .03em; }
.pend-card-val { font-size: 1.4rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.pend-card-danger .pend-card-val { color: var(--danger); }
.pend-card-warn .pend-card-val { color: #b45309; }
.pend-unit { font-size: .8rem; font-weight: 600; color: var(--ink-muted); margin-left: 1px; }
.pend-card-sub {
  font-size: .66rem; color: var(--ink-muted); margin-top: .15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pend-dist { display: flex; flex-direction: column; gap: .3rem; }
.pend-dist-row { display: grid; grid-template-columns: 92px 1fr 28px; align-items: center; gap: .5rem; }
.pend-dist-lbl { font-size: .7rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pend-dist-bar { height: 9px; background: var(--line); border-radius: 5px; overflow: hidden; }
.pend-dist-bar > span { display: block; height: 100%; border-radius: 5px; min-width: 2px; transition: width .25s ease; }
.pend-dist-n { font-size: .72rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.pend-chip {
  display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 20px;
  font-size: .68rem; font-weight: 700; cursor: help;
  background: rgba(245, 158, 11, .16); color: #b45309; border: 1px solid rgba(245, 158, 11, .35);
}

/* ── Usuários & Acessos: KPIs, filtros, chips de acesso ──────────────────── */
.u-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; }
.u-stat {
  display: flex; flex-direction: column; gap: .1rem; text-align: left;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  padding: .6rem .8rem; font: inherit; color: inherit;
}
.u-stat-click { cursor: pointer; transition: border-color .15s, background .15s; }
.u-stat-click:hover { border-color: rgba(194, 78, 20, .4); }
.u-stat-active { border-color: var(--accent); background: rgba(194, 78, 20, .07); }
.u-stat-val { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.u-stat-lbl { font-size: .68rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .03em; }
.u-stat-warn .u-stat-val { color: var(--danger); }
.u-filters {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  padding: .6rem .7rem; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 12px;
}
.u-chip {
  display: inline-block; padding: 1px 8px; margin: 1px 2px 1px 0;
  border-radius: 20px; font-size: .66rem; white-space: nowrap;
  background: rgba(194, 78, 20, .1); color: var(--ink); border: 1px solid rgba(194, 78, 20, .22);
}
.u-chip-danger { background: rgba(179, 38, 30, .1); color: var(--danger); border-color: rgba(179, 38, 30, .3); }

/* ── Formulário de usuário em seções ─────────────────────────────────────── */
.uf-form { display: flex; flex-direction: column; gap: 1.1rem; }
.uf-sec { border: 1px solid var(--line); border-radius: 12px; padding: .85rem .9rem; background: var(--surface); }
.uf-sec-h {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); margin: 0 0 .6rem;
}
.uf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 520px) { .uf-row2 { grid-template-columns: 1fr; } }
.uf-help { font-size: .7rem; color: var(--ink-muted); margin-top: .3rem; line-height: 1.45; }
.uf-err { font-size: .7rem; color: var(--danger); margin-top: .25rem; font-weight: 600; }
.uf-req { color: var(--danger); font-weight: 700; }
.uf-chk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .35rem .8rem; }
.uf-chk-actions { display: flex; gap: .5rem; margin-bottom: .4rem; }
.uf-bulk {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: .68rem; color: var(--accent); text-decoration: underline;
}

/* ── Relatório de consumo da GAIA ─────────────────────────────────────────── */
.gaia-kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .6rem; margin-bottom: 1rem;
}
.gaia-kpi {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: .7rem .85rem;
}
.gaia-kpi-accent { border-color: rgba(194, 78, 20, .35); background: rgba(194, 78, 20, .06); }
.gaia-kpi-label { font-size: .68rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .03em; }
.gaia-kpi-value { font-size: 1.35rem; font-weight: 700; color: var(--ink); margin-top: .15rem; font-variant-numeric: tabular-nums; }
.gaia-kpi-sub { font-size: .66rem; color: var(--ink-muted); margin-top: .2rem; }

.gaia-usage-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: .8rem;
}
.gaia-usage-panel {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface);
}
.gaia-usage-panel-h {
  font-size: .78rem; font-weight: 700; color: var(--ink);
  padding: .5rem .75rem; background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.gaia-usage-scroll { max-height: 260px; overflow-y: auto; }
.gaia-usage-tbl { width: 100%; border-collapse: collapse; font-size: .75rem; }
.gaia-usage-tbl thead th {
  position: sticky; top: 0; background: var(--surface);
  color: var(--ink-muted); font-weight: 600; text-align: left;
  padding: .35rem .6rem; border-bottom: 1px solid var(--line); font-size: .68rem;
}
.gaia-usage-tbl td { padding: .3rem .6rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.gaia-usage-tbl tbody tr:last-child td { border-bottom: none; }
.gaia-usage-tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.gaia-usage-tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gaia-bar-cell { position: relative; display: flex; align-items: center; min-height: 18px; }
.gaia-bar {
  position: absolute; left: 0; top: 1px; bottom: 1px;
  background: rgba(194, 78, 20, .14); border-radius: 4px; z-index: 0;
}
.gaia-bar-lbl { position: relative; z-index: 1; padding: 0 .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }