/* =========================================================================
   FIDELIS — Sistema de design
   Tokens (cores, tipografia, espacamento, raios, sombras, movimento)
   + componentes base. Consumido junto ao Tailwind (CDN).
   ========================================================================= */

:root {
  /* ---- Marca (azul cobalto, sobrio e premium) ---- */
  --brand-50:  #eef4ff;
  --brand-100: #d9e6ff;
  --brand-200: #b9d2ff;
  --brand-300: #8bb4ff;
  --brand-400: #5a8dfb;
  --brand-500: #356bf3;
  --brand-600: #2455e0;
  --brand-700: #1d43c4;
  --brand-800: #1e3ba0;
  --brand-900: #1d377d;
  --brand-950: #14224c;

  /* ---- Neutros / superficies ---- */
  --bg:            #f5f7fb;
  --surface:       #ffffff;
  --surface-2:     #f8fafc;
  --border:        #e8ecf2;
  --border-strong: #d8e0ea;
  --text:          #0e1729;
  --text-muted:    #59637a;
  --text-subtle:   #8b94a7;

  /* ---- Sidebar (ink) ---- */
  --sidebar-from: #111c33;
  --sidebar-to:   #0a1120;

  /* ---- Semantica de atencao ---- */
  --alto-bg: #fef2f2;  --alto-fg: #b42318;  --alto-ring: #fecdca; --alto-dot: #f04438;
  --medio-bg:#fffaeb;  --medio-fg:#b54708;  --medio-ring:#fedf89; --medio-dot:#f79009;
  --baixo-bg:#ecfdf3;  --baixo-fg:#067647;  --baixo-ring:#abefc6; --baixo-dot:#17b26a;

  /* ---- Tipografia ---- */
  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .875rem; --fs-base: 1rem;
  --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem;

  /* ---- Raios ---- */
  --r-sm: .5rem; --r: .75rem; --r-lg: 1rem; --r-xl: 1.25rem; --r-2xl: 1.5rem; --r-full: 9999px;

  /* ---- Sombras (frias, calibradas) ---- */
  --shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.06);
  --shadow-md: 0 4px 8px -2px rgb(16 24 40 / 0.08), 0 2px 4px -2px rgb(16 24 40 / 0.05);
  --shadow-lg: 0 12px 28px -6px rgb(16 24 40 / 0.14), 0 4px 10px -4px rgb(16 24 40 / 0.06);
  --shadow-glow: 0 0 0 4px rgb(53 107 243 / 0.12);

  /* ---- Movimento ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .18s;
}

/* ---- Base ---- */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  letter-spacing: -0.011em;
  color: var(--text);
  background-color: var(--bg);
  /* profundidade sutil: brilhos frios quase imperceptiveis */
  background-image:
    radial-gradient(60rem 60rem at 100% -10%, rgb(53 107 243 / 0.05), transparent 55%),
    radial-gradient(50rem 50rem at -10% 110%, rgb(53 107 243 / 0.045), transparent 55%);
  background-attachment: fixed;
}
h1, h2, h3, .font-display { font-family: var(--font-display); letter-spacing: -0.02em; }

::selection { background: rgb(53 107 243 / 0.18); }

/* ---- Foco acessivel (anel de marca nitido; segue a cor de destaque do tema) ---- */
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-500); border-radius: var(--r-sm); }
/* Botoes/links ja com fundo proprio ficam com anel simples (sem "buraco" da superficie). */
.btn:focus-visible, a.btn:focus-visible { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--brand-500); }

/* ---- Transicao padrao em interativos ---- */
button, a, input, select, textarea, summary, [role='button'], .card-interactive {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: var(--dur);
  transition-timing-function: var(--ease);
}

/* =========================================================================
   Componentes
   ========================================================================= */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.card-interactive:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--r); font-weight: 600; font-size: var(--fs-md);
  padding: .625rem 1rem; cursor: pointer; white-space: nowrap; user-select: none;
}
.btn:active { transform: scale(.975); }
.btn-primary {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
  color: #fff; box-shadow: var(--shadow-xs), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--brand-600), var(--brand-700)); box-shadow: var(--shadow-md); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn-primary:disabled:active { transform: none; }
.btn-ghost {
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.btn-danger {
  background: linear-gradient(180deg, #f2544b, #d92d20); color: #fff;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.btn-danger:hover { background: linear-gradient(180deg, #d92d20, #b42318); box-shadow: var(--shadow-md); }
.btn-sm { padding: .4rem .75rem; font-size: var(--fs-sm); border-radius: var(--r-sm); }

.input {
  width: 100%; border: 1px solid var(--border-strong); border-radius: var(--r);
  padding: .625rem .75rem; font-size: var(--fs-md); color: var(--text); background: var(--surface);
}
.input::placeholder { color: var(--text-subtle); }
.input:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgb(53 107 243 / 0.14); }

.section-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }

/* Estado vazio reutilizavel (icone + titulo + apoio + CTA opcional) */
.empty-state { text-align: center; padding: 3.5rem 2rem; }
.empty-state .es-icon { margin: 0 auto .875rem; height: 3.5rem; width: 3.5rem; border-radius: var(--r-lg);
  display: grid; place-items: center; background: var(--surface-2); color: var(--text-subtle); }
.empty-state .es-title { font-weight: 600; color: var(--text-muted); }
.empty-state .es-sub { font-size: var(--fs-sm); color: var(--text-subtle); margin-top: .25rem; }

/* Chip de status (ativo/inativo) e ponto pulsante para "vivo" */
.dot-pulse { position: relative; }
.dot-pulse::after { content: ''; position: absolute; inset: -3px; border-radius: var(--r-full);
  border: 2px solid currentColor; opacity: .4; animation: pulse-ring 1.8s var(--ease) infinite; }
@keyframes pulse-ring { 0% { transform: scale(.8); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }

/* Pill de nivel de atencao */
.badge-nivel { display: inline-flex; align-items: center; gap: .375rem; border-radius: var(--r-full);
  padding: .25rem .625rem; font-size: var(--fs-xs); font-weight: 600; border: 1px solid; }
.badge-nivel .dot { height: .375rem; width: .375rem; border-radius: var(--r-full); }
.nivel-alto  { background: var(--alto-bg);  color: var(--alto-fg);  border-color: var(--alto-ring); }
.nivel-alto  .dot { background: var(--alto-dot); box-shadow: 0 0 0 3px rgb(240 68 56 / 0.15); }
.nivel-medio { background: var(--medio-bg); color: var(--medio-fg); border-color: var(--medio-ring); }
.nivel-medio .dot { background: var(--medio-dot); }
.nivel-baixo { background: var(--baixo-bg); color: var(--baixo-fg); border-color: var(--baixo-ring); }
.nivel-baixo .dot { background: var(--baixo-dot); }

/* Badge de departamento */
.badge-dep { display: inline-flex; align-items: center; border-radius: var(--r-sm);
  background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100);
  padding: .125rem .5rem; font-size: var(--fs-xs); font-weight: 600; }

/* Avatar com iniciais */
/* Pilulas de prioridade por departamento (cores solidas). Definidas aqui (nao via
   bg-*-500 do Tailwind) porque o Play CDN JIT pode nao gerar a tempo classes de cor
   que so aparecem em conteudo injetado dinamicamente, deixando o fundo transparente. */
.pill-alto  { background-color: #f04438 !important; color: #fff !important; }
.pill-medio { background-color: #f59e0b !important; color: #fff !important; }
.pill-baixo { background-color: #10b981 !important; color: #fff !important; }

/* Toggle switch (liga/desliga) — mais elegante que a checkbox nativa em configuracoes.
   Definido aqui (nao via utilitarios) p/ funcionar sempre e no tema escuro. */
.switch { position: relative; display: inline-flex; width: 2.5rem; height: 1.4rem; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong);
  transition: background-color .18s var(--ease); pointer-events: none; }
.switch .track::before { content: ""; position: absolute; height: 1.05rem; width: 1.05rem; left: .175rem; top: .175rem;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .25); transition: transform .18s var(--ease); }
.switch input:checked + .track { background: var(--brand-600); }
.switch input:checked + .track::before { transform: translateX(1.1rem); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px rgb(53 107 243 / 0.28); }
.switch input:disabled + .track { opacity: .5; cursor: not-allowed; }

/* Chips de filtro por status (ex.: honorarios: Todas/Pendentes/Pagas) */
.chip-st { padding: .25rem .7rem; border-radius: 999px; font-weight: 600; font-size: .8rem;
  color: var(--text-muted); background: transparent; transition: all .15s var(--ease); }
.chip-st:hover { background: var(--surface-2); }
.chip-st.chip-on { background: var(--brand-600); color: #fff; }

/* Quadro kanban do Onboarding. VIVE AQUI (nao em <style> inline no onboarding.html):
   a SPA troca so o <body> ao navegar pelo menu e descarta o <head> da pagina — regras
   inline sumiriam e as colunas empilhavam (viravam blocos). No style.css elas persistem. */
.kb-board { display: flex; gap: 1rem; align-items: flex-start; }
.kb-col { flex: 1 1 0; min-width: 12rem; max-width: 17rem; display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-xl); }
.kb-col.drag-over { border-color: var(--brand-500); box-shadow: 0 0 0 2px var(--brand-500) inset; }
.kb-col.drag-over .kb-drop { background: color-mix(in srgb, var(--brand-500) 8%, transparent); }
.kb-drop { flex: 1; min-height: 5rem; padding: .5rem; border-radius: 0 0 var(--r-xl) var(--r-xl); transition: background-color .15s; }
.kb-card { cursor: grab; background: var(--surface); }
.kb-card:active { cursor: grabbing; }
.kb-card.dragging { opacity: .4; }
@media (max-width: 560px) { .kb-col { min-width: 14rem; } }

.avatar { display: grid; place-items: center; color: #fff; font-weight: 700;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgb(255 255 255 / 0.18); }

/* =========================================================================
   Animacoes / micro-interacoes
   ========================================================================= */
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.animate-fade-up { animation: fade-up .4s var(--ease) both; }

/* Troca fluida de aba/secao (re-disparada via Fidelis.animateIn) */
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view-enter { animation: view-in .28s var(--ease) both; }
@keyframes view-fade { from { opacity: 0.25; } to { opacity: 1; } }
.view-fade { animation: view-fade .22s var(--ease) both; }
.stagger > * { animation: fade-up .45s var(--ease) both; }
.stagger > *:nth-child(1){ animation-delay: .02s; }
.stagger > *:nth-child(2){ animation-delay: .06s; }
.stagger > *:nth-child(3){ animation-delay: .10s; }
.stagger > *:nth-child(4){ animation-delay: .14s; }
.stagger > *:nth-child(5){ animation-delay: .18s; }
.stagger > *:nth-child(6){ animation-delay: .22s; }

@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.animate-pop { animation: pop .28s var(--ease) both; }

@keyframes shimmer { 100% { background-position: -200% 0; } }
.skeleton { background: linear-gradient(90deg, #eef1f6 25%, #e2e7ef 37%, #eef1f6 63%);
  background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--r); }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- Barra de rolagem discreta ---- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: var(--r-full); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }

summary::-webkit-details-marker { display: none; }

kbd { font-family: var(--font-sans); }

/* Campo da busca: sem anel de foco (o proprio palette ja e a caixa de busca; o
   anel global seria cortado no topo pelo overflow-hidden do card). */
#cmdk-input:focus, #cmdk-input:focus-visible { outline: none; box-shadow: none; }

/* Teclas do rodape da busca (command palette). */
.cmdk-hint {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: .35rem; background: #fff;
  box-shadow: 0 0 0 1px var(--slate-200, #e2e8f0);
  color: var(--slate-500, #64748b); font-size: 10px; font-weight: 600; line-height: 1;
}

/* Reveal suave: esconde ate o JS montar o shell, depois faz fade-in. */
body { transition: opacity 0.2s var(--ease); }
body[data-cloak] { opacity: 0; }

/* Transicao fluida entre paginas (Chrome/Edge). Cross-fade curto; degrada sem efeito
   em navegadores sem suporte. O fundo critico (inline no <head>) evita flash branco. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
  animation-timing-function: var(--ease);
}

/* Sidebar sempre ocupa a altura da viewport no desktop (nao acompanha paginas altas). */
@media (min-width: 1024px) {
  .fds-sidebar { height: 100vh; }
  .fds-sidebar nav { overflow-y: auto; }
}

/* =========================================================================
   Temizacao: utilitarios de marca roteados por variavel (mudam com a cor de destaque)
   ========================================================================= */
.bg-brand-600 { background-color: var(--brand-600) !important; }
.hover\:bg-brand-700:hover { background-color: var(--brand-700) !important; }
.text-brand-600 { color: var(--brand-600) !important; }
.text-brand-700 { color: var(--brand-700) !important; }
.border-brand-600 { border-color: var(--brand-600) !important; }

/* =========================================================================
   Dark mode (classe .dark no <html>) — remapeia tokens + utilities comuns
   ========================================================================= */
.dark {
  --bg: #0b1120; --surface: #121c31; --surface-2: #0e1626;
  --border: #1e293b; --border-strong: #2a3a52;
  --text: #e7ecf3; --text-muted: #9aa7bd; --text-subtle: #6b7890;
  --alto-bg: #3a1416; --alto-fg: #fda4a0; --alto-ring: #7f1d1d;
  --medio-bg: #3a2a0e; --medio-fg: #fcd9a0; --medio-ring: #78350f;
  --baixo-bg: #0f2e20; --baixo-fg: #86efac; --baixo-ring: #14532d;
}
.dark body {
  background-color: var(--bg);
  background-image:
    radial-gradient(60rem 60rem at 100% -10%, rgb(53 107 243 / 0.09), transparent 55%),
    radial-gradient(50rem 50rem at -10% 110%, rgb(53 107 243 / 0.07), transparent 55%);
}
.dark .bg-white { background-color: var(--surface) !important; }
.dark .bg-slate-50 { background-color: var(--surface-2) !important; }
.dark .bg-slate-100 { background-color: #1a2437 !important; }
.dark [class*="bg-slate-50/"] { background-color: var(--surface-2) !important; }
.dark [class*="bg-white/"] { background-color: rgb(18 28 49 / 0.75) !important; }
.dark .text-slate-900 { color: var(--text) !important; }
.dark .text-slate-800 { color: #d7deea !important; }
.dark .text-slate-700 { color: #c2cbdb !important; }
.dark .text-slate-600 { color: #aab6c9 !important; }
.dark .text-slate-500 { color: var(--text-muted) !important; }
.dark .text-slate-400 { color: var(--text-subtle) !important; }
.dark .text-slate-300 { color: #55627a !important; }
/* Cores de acento (numeros/rotulos coloridos): os tons 600/700 sao escuros demais
   sobre fundo escuro. No dark, clareia para manter contraste legivel. */
.dark .text-rose-700, .dark .text-rose-600 { color: #fb7185 !important; }
.dark .text-rose-500 { color: #fda4af !important; }
.dark .text-amber-700, .dark .text-amber-600 { color: #fbbf24 !important; }
.dark .text-amber-500 { color: #fcd34d !important; }
.dark .text-emerald-700, .dark .text-emerald-600 { color: #34d399 !important; }
.dark .text-emerald-500 { color: #6ee7b7 !important; }
.dark .text-sky-700, .dark .text-sky-600 { color: #38bdf8 !important; }
.dark .text-brand-700, .dark .text-brand-600 { color: #8fabff !important; }
.dark .text-brand-800 { color: #b3c6ff !important; }
.dark .border-slate-100 { border-color: var(--border) !important; }
.dark .border-slate-200 { border-color: var(--border-strong) !important; }
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
.dark .hover\:bg-slate-50:hover { background-color: var(--surface-2) !important; }
.dark .hover\:bg-slate-100:hover { background-color: #1a2437 !important; }
.dark .bg-brand-50 { background-color: rgb(53 107 243 / 0.16) !important; }
.dark .bg-rose-50 { background-color: rgb(240 68 56 / 0.15) !important; }
.dark .bg-amber-50 { background-color: rgb(247 144 9 / 0.15) !important; }
.dark .bg-emerald-50 { background-color: rgb(23 178 106 / 0.15) !important; }
.dark .skeleton { background: linear-gradient(90deg, #141d30 25%, #1b2740 37%, #141d30 63%); background-size: 200% 100%; }
.dark kbd { background-color: #1a2437 !important; color: var(--text-subtle) !important; }
/* Controles nativos (checkbox, radio, date, select nativo, scrollbar) seguem o tema escuro. */
.dark { color-scheme: dark; }
/* Bordas/anéis/fundos claros ainda usados em utilitarios crus (dropzones, faixas, trilhas). */
.dark .border-slate-300 { border-color: var(--border-strong) !important; }
.dark .bg-slate-200 { background-color: #1f2b42 !important; }
.dark .bg-slate-300 { background-color: #26344f !important; }
.dark .ring-slate-200, .dark [class*="ring-slate-200/"] { --tw-ring-color: var(--border-strong) !important; }
.dark .ring-slate-900\/5, .dark [class*="ring-black/"] { --tw-ring-color: rgb(255 255 255 / 0.08) !important; }

/* =========================================================================
   Impressao (global) — precisa viver no style.css, NAO no <head> de cada
   pagina: o app e uma SPA e o _load() so troca o <body>, descartando o
   <head> da pagina navegada. Regras de @media print embutidas no HTML de
   relatorios.html/relatorio.html sumiam ao chegar via menu (SPA), fazendo
   a impressao sair como um "print da tela", uma pagina so. Aqui elas
   persistem em qualquer rota.
   ========================================================================= */
@media print {
  /* chrome do app (sidebar, topbar, overlays fixos, botoes) nao vai ao papel */
  #sidebar, #topbar, #sidebar-backdrop, #toasts, #cmdk, #fd-help, .no-print { display: none !important; }
  /* solta html/body e toda a cadeia flex+overflow do shell, senao tudo fica
     preso a uma unica pagina (h-screen + overflow-hidden + a <main> que rola) */
  html, body {
    background: #fff !important; height: auto !important; min-height: 0 !important;
    max-height: none !important; overflow: visible !important;
  }
  #shell, #shell > div, main, main > div, #conteudo, #folha, #ficha {
    display: block !important; height: auto !important; min-height: 0 !important;
    max-height: none !important; overflow: visible !important; position: static !important;
    flex: none !important;
  }
  main { padding: 0 !important; }
  main > div { max-width: none !important; }
  .overflow-x-auto { overflow: visible !important; }
  /* animacoes com transform/opacity podem falsear o snapshot de impressao */
  *, ::before, ::after { animation: none !important; transition: none !important; }
  /* tabela da carteira: na tela tem min-width p/ scroll; no papel precisa caber */
  table.tbl-carteira { min-width: 0 !important; width: 100% !important; font-size: 10px !important; }
  table.tbl-carteira th, table.tbl-carteira td { padding: 4px 6px !important; }
  thead { display: table-header-group; }              /* cabecalho repete por pagina */
  tr, .keep, .stat-box { break-inside: avoid; page-break-inside: avoid; }
  .quebra-antes { break-before: page; }
  a { color: inherit !important; text-decoration: none !important; }
  @page { margin: 1.1cm; }
}