/* ============================================================================
   GESTOR — Design System (kit de UI compartilhado)
   Base: modelo "Helix" (Emerson) · Alteração: COMPACTO (mais info no centro).
   Fonte única do padrão de interface do sistema Gestor. NÃO duplicar tokens
   nas telas — sempre referenciar este arquivo e usar as classes/variáveis daqui.

   Stack alvo: ASP.NET Core MVC + Views Razor. Este CSS descreve o padrão que as
   Views devem seguir (mesmas classes/tokens). Tailwind é opcional; o essencial
   está aqui em CSS puro para não depender de build.

   Tema: claro por padrão (:root). Escuro por prefers-color-scheme E por
   [data-theme="dark"] (toggle). Um [data-theme="light"] força o claro.
   ============================================================================ */

/* ---- Fonte ---- */
/* @import no HTML: <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet"> */

/* ============================ TOKENS ============================ */
:root {
  /* rampa da marca, aproximada por referência visual do sistema ISS (indigo/roxo-azulado
     do menu lateral — sem hex oficial, extraído de print em 2026-09-07; era #7209b7).
     Ajustada em 2026-09-07 (2ª rodada) para mais saturação/vivacidade, a pedido do Mauricio. */
  --b-950:#0a0730; --b-900:#150d4d; --b-800:#3c1eea; --b-700:#4f36f2;
  --b-600:#654ef6; --b-500:#7d68f8; --b-400:#9885fa; --b-300:#b6a8fc;
  --b-200:#d2c8fd; --b-100:#e9e3fe; --b-50:#f7f5ff;

  /* superfícies e tinta (neutros com leve viés de marca) */
  --c-canvas:#f2eef3; --c-app:#ffffff; --c-card:#ffffff; --c-sunken:#f7f4f8;
  --c-line:#d9d0e0; --c-line-2:#c3b3cb;
  --c-ink:#1c1520; --c-ink-2:#6e6473; --c-ink-3:#a49da8;

  --c-brand:var(--b-800); --c-brand-alt:var(--b-600); --c-on-brand:#ffffff;
  --c-soft:var(--b-100);

  /* semânticos (independentes do accent) */
  --c-ok:#10a95f;  --c-ok-bg:#e8f8ef;
  --c-warn:#b7791f; --c-warn-bg:#fdf3e3;
  --c-bad:#e0484d; --c-bad-bg:#fdecec;
  --c-info:#2f74d0; --c-info-bg:#e9f1fc;

  --ring:rgba(28,21,32,.07);
  --sh-app:0 1px 2px rgba(28,21,32,.04), 0 24px 48px -28px rgba(36,3,44,.20);
  --sh-card:0 1px 2px rgba(28,21,32,.05);
  --sh-pop:0 12px 32px -12px rgba(28,21,32,.28);

  /* escala compacta (a "alteração" pedida) */
  --r-app:16px; --r-card:12px; --r-ctl:9px; --r-pill:999px;
  --fs-base:13px; --fs-sm:12px; --fs-xs:11px; --fs-label:10.5px;
  --gap:12px;              /* respiro padrão entre blocos (era 16) */
  --pad-card:14px;         /* padding interno de card (era 20) */
  --pad-cell:8px 10px;     /* célula de tabela (compacta) */
  --sidebar-w:220px;       /* era 248 */
  --topbar-h:48px;
  --font-sans:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-canvas:#121016; --c-app:#1a171f; --c-card:#1f1b25; --c-sunken:#272231;
    --c-line:#2e2839; --c-line-2:#3d3549;
    --c-ink:#f4f1f6; --c-ink-2:#a49aab; --c-ink-3:#776d80;
    --c-brand:#9885fa; --c-brand-alt:#b6a8fc; --c-on-brand:#0a0730; --c-soft:#241a52;
    --c-ok:#35c17f; --c-ok-bg:#14301f; --c-warn:#e0a33f; --c-warn-bg:#33270f;
    --c-bad:#f0706f; --c-bad-bg:#3a1a1c; --c-info:#6ea8f0; --c-info-bg:#122539;
    --ring:rgba(255,255,255,.08);
    --sh-app:0 24px 48px -30px rgba(0,0,0,.8); --sh-card:none; --sh-pop:0 12px 32px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --c-canvas:#121016; --c-app:#1a171f; --c-card:#1f1b25; --c-sunken:#272231;
  --c-line:#2e2839; --c-line-2:#3d3549;
  --c-ink:#f4f1f6; --c-ink-2:#a49aab; --c-ink-3:#776d80;
  --c-brand:#b878cf; --c-brand-alt:#cfa2df; --c-on-brand:#1c0824; --c-soft:#33203d;
  --c-ok:#35c17f; --c-ok-bg:#14301f; --c-warn:#e0a33f; --c-warn-bg:#33270f;
  --c-bad:#f0706f; --c-bad-bg:#3a1a1c; --c-info:#6ea8f0; --c-info-bg:#122539;
  --ring:rgba(255,255,255,.08);
  --sh-app:0 24px 48px -30px rgba(0,0,0,.8); --sh-card:none; --sh-pop:0 12px 32px -12px rgba(0,0,0,.7);
}

/* ============================ BASE ============================ */
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:var(--c-canvas); color:var(--c-ink);
  font-family:var(--font-sans); font-size:var(--fs-base); line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { letter-spacing:-.02em; margin:0; }
.tnum { font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.muted { color:var(--c-ink-2); } .dim { color:var(--c-ink-3); }
.req { color:var(--c-bad); font-weight:800; margin-left:2px; }
.input.campo-destaque, .select.campo-destaque {
  border-color:var(--c-bad) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c-bad) 18%,transparent);
  animation:gestor-shake .3s;
}
@keyframes gestor-shake { 25%{transform:translateX(-3px);} 75%{transform:translateX(3px);} }
a { color:var(--c-brand); text-decoration:none; } a:hover { text-decoration:underline; }
input,select,button,textarea { font-family:inherit; font-size:inherit; }
::placeholder { color:var(--c-ink-3); }
:focus-visible { outline:2px solid var(--c-brand); outline-offset:2px; border-radius:6px; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:var(--c-line-2); border-radius:8px; }
::-webkit-scrollbar-track { background:transparent; }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none!important; transition-duration:.01ms!important; } }

/* ============================ SHELL ============================
   grid [sidebar | pane] x [conteúdo | barra 40px]; quem rola é cada pane. */
.app { background:var(--c-app); border-radius:var(--r-app); box-shadow:var(--sh-app); overflow:hidden; }
.shell { display:grid; grid-template-columns:auto 1fr; grid-template-rows:1fr 40px; height:calc(100dvh - 24px); }
@media (min-width:640px){ .shell { height:calc(100dvh - 32px); } }

.sidebar {
  grid-row:1/3; grid-column:1; width:var(--sidebar-w); border-right:1px solid var(--c-line);
  display:flex; flex-direction:column; justify-content:space-between; padding:12px 10px; overflow-y:auto;
  transition:width .24s cubic-bezier(.2,.85,.3,1);
  /* leve degradê, no mesmo espírito do menu do ISS (referência visual 2026-09-07) */
  background:linear-gradient(180deg, var(--b-700) 0%, var(--b-900) 100%); color:#fff;
}
.sidebar.collapsed { width:66px; }
.sidebar.collapsed .lbl, .sidebar.collapsed .label { display:none; }
.sidebar.collapsed .navi { justify-content:center; padding-left:0; padding-right:0; }
.sidebar.collapsed .logo, .sidebar.collapsed .userblock { display:none; }
.sidebar.collapsed .sidebar-head { justify-content:center; padding-left:0; padding-right:0; }
.sidebar .label { color:rgba(255,255,255,.6); font-weight:800; }
.sidebar .navi { color:rgba(255,255,255,.85); font-size:13.5px; padding:8.5px 12px; }
.sidebar .navi svg { color:rgba(255,255,255,.65); }
.sidebar .navi:hover { background:rgba(255,255,255,.12); color:#fff; }
.sidebar .navi[aria-current="page"], .sidebar .navi.active { background:rgba(255,255,255,.16); color:#fff; }
.sidebar .navi[aria-current="page"] svg, .sidebar .navi.active svg { color:#fff; }
.sidebar .navi .count { background:rgba(255,255,255,.18); color:#fff; }
.sidebar .icon-btn:hover { background:rgba(255,255,255,.14); color:#fff; }
.sidebar .navgrp + .navgrp { margin-top:16px; }

.pane { grid-column:2; grid-row:1/3; display:flex; flex-direction:column; min-width:0; min-height:0; }
.topbar { flex-shrink:0; display:flex; flex-direction:column; border-bottom:1px solid var(--c-line); }
.topbar-search { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--c-line); }
.topbar-head { min-height:var(--topbar-h); display:flex; flex-direction:column; justify-content:center; padding:8px 14px; }
.content { flex:1; overflow-y:auto; padding:14px; }   /* o CENTRO — denso */
.statusbar {
  grid-column:2; height:40px; /* usada quando shell tem barra própria */
}

/* trilha + título no topbar */
.crumb { display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--c-ink-3); margin:0; }
.crumb b { color:var(--c-ink); font-weight:700; }
.page-title { font-size:15px; font-weight:800; line-height:1.1; }

/* ============================ NAV ============================ */
.navgrp + .navgrp { margin-top:12px; }
.label { font-size:var(--fs-label); font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--c-ink-2); padding:0 10px; }
.navi {
  display:flex; align-items:center; gap:10px; width:100%; padding:7px 11px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:600; color:var(--c-ink-2); background:none; border:0; cursor:pointer;
  transition:background .15s, color .15s; text-align:left;
}
.navi:hover { background:var(--c-sunken); color:var(--c-ink); }
.navi svg { flex:0 0 auto; color:var(--c-ink-3); transition:color .15s; }
.navi[aria-current="page"], .navi.active { background:var(--c-soft); color:var(--c-brand); font-weight:700; }
.navi[aria-current="page"] svg, .navi.active svg { color:var(--c-brand); }
.navi[aria-disabled="true"] { opacity:.42; cursor:not-allowed; }
.navi .count { margin-left:auto; font-size:10px; font-weight:800; border-radius:var(--r-pill); padding:1px 7px; background:var(--c-sunken); color:var(--c-ink-3); }
.navi .count.bad { background:var(--c-bad-bg); color:var(--c-bad); }
.navi .count.warn { background:var(--c-warn-bg); color:var(--c-warn); }

/* ============================ CARDS ============================ */
.card { background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r-card); box-shadow:var(--sh-card); }
.card-pad { padding:var(--pad-card); }
.card-head { display:flex; align-items:center; gap:10px; padding:11px var(--pad-card); border-bottom:1px solid var(--c-line); }
.card-title { font-size:13.5px; font-weight:800; }
.grid { display:grid; gap:var(--gap); }
.grid-2 { grid-template-columns:repeat(2,1fr); } .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-4 { grid-template-columns:repeat(4,1fr); }

/* .row — linha flexível de campos curtos (data, sigla de UF, sexo, tipo sanguíneo…). Diferente de
   .grid-N (colunas IGUAIS, sempre 1/N da largura — sobra vazio depois de um campo estreito), aqui
   cada campo ocupa só a largura que precisa (w-xs/w-sm/w-md) e os campos "livres" (sem w-*)
   crescem pra preencher o resto — sem espaço morto entre eles. Quebra a linha se não couber. */
.row { display:flex; flex-wrap:wrap; gap:var(--gap); }
.row > .field { flex:1 1 200px; min-width:0; }
.field.w-xs { flex:0 0 100px; max-width:100px; }
.field.w-sm { flex:0 0 150px; max-width:150px; }
.field.w-md { flex:0 0 220px; max-width:220px; }
/* .grid-12 — grid de 12 colunas p/ formulários densos com campos de larguras variadas (data,
   sigla, texto longo…) onde as BORDAS DAS COLUNAS precisam bater entre uma linha e a próxima
   (referência: telas de Cadastro de Contribuinte no padrão ISS). Diferente de .row (flex — cada
   campo tem a largura que quiser, mas nada garante alinhar com a linha de cima/baixo), aqui todo
   campo ocupa um múltiplo de 1/12 (.c-2 a .c-12) — como todas as linhas dividem o mesmo container
   na mesma proporção, as bordas coincidem automaticamente, sem precisar ser o mesmo elemento de
   grid. Usar SEMPRE dentro de .grid-12 (nunca dentro de .grid-N ou .row).
   Larguras de referência (card ~1050px): .c-2≈150px, .c-3≈230px, .c-4≈320px, .c-6≈500px. */
.grid-12 { display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); }
.field.c-2 { grid-column:span 2; }
.field.c-3 { grid-column:span 3; }
.field.c-4 { grid-column:span 4; }
.field.c-6 { grid-column:span 6; }
.field.c-8 { grid-column:span 8; }
.field.c-9 { grid-column:span 9; }
.field.c-12 { grid-column:span 12; }
@media (max-width:640px){ .grid-12 { grid-template-columns:repeat(4,1fr); } .grid-12 .field { grid-column:span 4 !important; } }

.split { display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr) 320px; }  /* centro + ficha */
@media (max-width:1100px){ .split { grid-template-columns:1fr; } .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

/* chip de ícone tingido */
.chip { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; }
.chip.brand { background:var(--c-soft); color:var(--c-brand); }
.chip.ok { background:var(--c-ok-bg); color:var(--c-ok); }
.chip.warn { background:var(--c-warn-bg); color:var(--c-warn); }
.chip.bad { background:var(--c-bad-bg); color:var(--c-bad); }
.chip.info { background:var(--c-info-bg); color:var(--c-info); }

/* ============================ KPI / STAT ============================ */
.kpi { border:1px solid var(--c-line); border-radius:var(--r-card); padding:11px 12px; background:var(--c-card); }
.kpi .k-label { font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); }
.kpi .k-value { font-size:22px; font-weight:800; line-height:1.1; margin-top:3px; }
.kpi .k-sub { font-size:var(--fs-xs); color:var(--c-ink-2); margin-top:2px; }

/* ============================ PILLS / BADGES / DELTA ============================ */
.pill { display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-pill); padding:3px 9px; font-size:var(--fs-xs); font-weight:700; white-space:nowrap; }
.pill.ok { background:var(--c-ok-bg); color:var(--c-ok); }
.pill.bad { background:var(--c-bad-bg); color:var(--c-bad); }
.pill.warn { background:var(--c-warn-bg); color:var(--c-warn); }
.pill.info { background:var(--c-info-bg); color:var(--c-info); }
.pill.off { background:var(--c-sunken); color:var(--c-ink-3); }
.pill.brand { background:var(--c-soft); color:var(--c-brand); }
.pill.dot::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }

.delta { display:inline-flex; align-items:center; gap:3px; border-radius:var(--r-pill); padding:2px 7px; font-size:10.5px; font-weight:700; }
.delta.up { background:var(--c-ok-bg); color:var(--c-ok); }
.delta.down { background:var(--c-bad-bg); color:var(--c-bad); }
.delta.flat { background:var(--c-sunken); color:var(--c-ink-3); }

/* prioridade (quadradinho colorido) */
.prio { display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-pill); padding:2px 8px; font-size:10.5px; font-weight:800; }
.prio::before { content:""; width:6px; height:6px; border-radius:2px; background:currentColor; }
.prio.p1 { background:var(--c-bad-bg); color:var(--c-bad); }
.prio.p2 { background:var(--c-warn-bg); color:var(--c-warn); }
.prio.p3 { background:var(--c-soft); color:var(--c-brand); }
.prio.p4 { background:var(--c-sunken); color:var(--c-ink-3); }

/* ============================ BOTÕES / INPUTS ============================ */
.btn { display:inline-flex; align-items:center; gap:7px; border-radius:var(--r-pill); padding:8px 15px; font-size:12.5px; font-weight:700; cursor:pointer; border:1px solid transparent; transition:filter .15s, border-color .15s, color .15s; }
.btn.primary { background:var(--c-brand); color:var(--c-on-brand); }
.btn.primary:hover { filter:brightness(1.08); }
.btn.ghost { background:var(--c-card); border-color:var(--c-line-2); color:var(--c-ink-2); font-weight:600; padding:7px 13px; }
.btn.ghost:hover { border-color:var(--c-ink-3); color:var(--c-ink); }
.btn.sm { padding:5px 10px; font-size:var(--fs-xs); }
.icon-btn { width:34px; height:34px; border-radius:var(--r-pill); display:grid; place-items:center; border:1px solid var(--c-line); color:var(--c-ink-2); background:var(--c-card); cursor:pointer; transition:border-color .15s, color .15s; }
.icon-btn:hover { border-color:var(--c-line-2); color:var(--c-ink); }

.field { display:flex; flex-direction:column; gap:4px; }
.field > label { font-size:var(--fs-xs); font-weight:700; color:var(--c-ink-2); }
.input, .select, textarea.input {
  width:100%; padding:7px 10px; border-radius:var(--r-ctl); border:1px solid var(--c-line-2);
  background:var(--c-card); color:var(--c-ink); font-size:var(--fs-sm);
}
.input:focus, .select:focus { outline:none; border-color:var(--c-brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--c-brand) 15%,transparent); }
.searchbox { display:flex; align-items:center; gap:7px; padding:6px 11px; border-radius:var(--r-pill); border:1px solid var(--c-line-2); background:var(--c-card); color:var(--c-ink-3); }
.searchbox input { border:0; background:none; outline:none; color:var(--c-ink); width:100%; font-size:var(--fs-sm); }

/* busca global do topbar (índice de páginas/ações do sistema) */
.gsearch-results {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r-card);
  box-shadow:var(--sh-pop); max-height:360px; overflow-y:auto; padding:6px;
}
.gsearch-item {
  display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:var(--r-ctl);
  color:var(--c-ink); text-decoration:none;
}
.gsearch-item:hover { background:var(--c-sunken); text-decoration:none; }
.gsearch-item svg { flex:0 0 auto; color:var(--c-ink-3); }
.gsearch-item span { display:flex; flex-direction:column; min-width:0; }
.gsearch-item b { font-size:var(--fs-sm); font-weight:700; }
.gsearch-item small { font-size:var(--fs-xs); color:var(--c-ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gsearch-empty { padding:12px; text-align:center; font-size:var(--fs-sm); color:var(--c-ink-3); }

/* ============================ TABELA (densa) ============================ */
.table-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
table.data thead th { text-align:left; font-size:var(--fs-xs); font-weight:700; color:var(--c-ink-3); padding:8px 10px; border-bottom:1px solid var(--c-line); white-space:nowrap; position:sticky; top:0; background:var(--c-card); }
table.data tbody td { padding:var(--pad-cell); border-bottom:1px solid var(--c-line); vertical-align:middle; }
table.data.dense tbody td { padding:5px 10px; }     /* variante ainda mais compacta */
table.data tbody tr { transition:background .12s; }
table.data tbody tr:hover { background:var(--c-sunken); cursor:pointer; }
table.data tbody tr:last-child td { border-bottom:0; }
.num { text-align:right; font-variant-numeric:tabular-nums; }

/* avatar / iniciais */
.avat { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:9.5px; font-weight:800; background:var(--c-soft); color:var(--c-brand); flex:0 0 auto; }

/* ============================ BARRAS / PROGRESSO / SLA ============================ */
.bar-track { height:6px; border-radius:var(--r-pill); background:var(--c-sunken); overflow:hidden; }
.bar-track > i { display:block; height:100%; border-radius:var(--r-pill); background:var(--c-brand); }
.bar-track > i.ok { background:var(--c-ok); } .bar-track > i.warn { background:var(--c-warn); } .bar-track > i.bad { background:var(--c-bad); }
.meter { display:flex; align-items:center; gap:8px; }
.meter .m-label { width:88px; flex:0 0 auto; font-size:var(--fs-xs); color:var(--c-ink-2); }
.meter .m-val { width:34px; text-align:right; font-size:var(--fs-xs); font-weight:700; font-variant-numeric:tabular-nums; }

/* ============================ TABS / SEGMENTED ============================ */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--c-line); }
.tab { padding:8px 12px; font-size:var(--fs-sm); font-weight:600; color:var(--c-ink-2); border-bottom:2px solid transparent; cursor:pointer; background:none; border-top:0; border-left:0; border-right:0; }
.tab:hover { color:var(--c-ink); }
.tab.active { color:var(--c-brand); border-bottom-color:var(--c-brand); font-weight:800; }
.segmented { display:inline-flex; padding:2px; gap:2px; border-radius:var(--r-pill); background:var(--c-sunken); }
.segmented button { border:0; background:none; padding:5px 12px; border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:700; color:var(--c-ink-2); cursor:pointer; }
.segmented button.active { background:var(--c-card); color:var(--c-brand); box-shadow:var(--sh-card); }

/* ============================ DIVERSOS ============================ */
.divide > * + * { border-top:1px solid var(--c-line); }
.hr { height:1px; background:var(--c-line); border:0; margin:0; }
.stat-inline { display:flex; align-items:baseline; gap:5px; }
.tag { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px; border:1px solid var(--c-line-2); color:var(--c-ink-2); }
.callout { border:1px solid var(--c-line); border-left-width:3px; border-radius:var(--r-ctl); padding:10px 12px; background:var(--c-card); font-size:var(--fs-sm); }
.callout.warn { border-left-color:var(--c-warn); } .callout.bad { border-left-color:var(--c-bad); } .callout.ok { border-left-color:var(--c-ok); } .callout.info { border-left-color:var(--c-info); } .callout.brand { border-left-color:var(--c-brand); }
.empty { text-align:center; color:var(--c-ink-3); font-size:var(--fs-sm); padding:32px 16px; }
.kbd { font-size:10px; font-weight:700; padding:1px 5px; border-radius:5px; border:1px solid var(--c-line-2); color:var(--c-ink-3); }
.mock-badge { position:fixed; right:10px; bottom:6px; z-index:80; font-size:10px; font-weight:700; color:var(--c-ink-3); background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r-pill); padding:2px 9px; }