/* ═══ LS Sacramento — linguagem visual ═══════════════════════════════════════════
   Marinho + dourado da LS. Títulos em serifa (Libre Baskerville) com filete dourado, texto em Plus Jakarta Sans.
   Cartões com cabeçalho e quadrado dourado-claro para o ícone, KPIs com ícone de 44px e número grande, raio 14px,
   sombra tingida, fundo levemente quente, tabelas com cabeçalho pequeno em caixa alta, listas com bloco de data,
   esteira numerada com linha de ligação e fichas clicáveis, menu lateral sólido com filete dourado no item ativo.
   Cada área (Comercial / Operacional / Gestão) tem um acento discreto por cima da paleta. */
:root {
  color-scheme: light;
  --ground: #F4F2EE; --surface: #FFFFFF; --surface-2: #F8F6F1; --surface-3: #EFEBE3; --line: #E6E1D7; --line-forte: #CFC7B8;
  --ink: #1D2230; --ink-soft: #666C7A; --ink-faint: #9AA0AD;
  --navy: #1B2A4A; --navy-2: #26396A; --gold: #B88E4A; --gold-soft: #F5ECD9; --gold-ink: #8A672C; --gold-grad: linear-gradient(135deg, #ECD39C 0%, #C9A05A 45%, #A47A36 100%);
  --accent: #26396A; --accent-2: #3B5390; --accent-ink: #FFFFFF; --accent-soft: #E6EAF4;
  --ok: #23784A; --ok-bg: #E6F2EB; --warn: #A2650E; --warn-bg: #FBF0DC; --bad: #B3261E; --bad-bg: #FBE8E6; --info: #2F4E8E; --info-bg: #E6EAF4;
  --side: #1B2A4A; --side-2: #243A66; --side-ink: #D7DDEA; --side-soft: rgba(255,255,255,.06);
  --shadow: 0 1px 2px rgba(27,42,74,.05), 0 6px 20px rgba(27,42,74,.07); --shadow-lg: 0 24px 60px -18px rgba(27,42,74,.45);
  --display: "Libre Baskerville", Baskerville, Georgia, serif; --body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --r: 14px;
  --c-s1: #26396A; --c-s2: #B88E4A; --c-s3: #5B8C6E; --c-s4: #C77B4A; --c-s5: #7A6BA8; --c-s6: #4F8FA8;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --ground: #0F131C; --surface: #171C28; --surface-2: #1E2433; --surface-3: #27304A; --line: #2B3346; --line-forte: #3C465E;
  --ink: #EAEDF3; --ink-soft: #AAB2C3; --ink-faint: #7B8498; --gold: #D4B06F; --gold-soft: #2E2619; --gold-ink: #E2C48C;
  --accent: #9DB4E6; --accent-2: #7F99D2; --accent-ink: #0F131C; --accent-soft: #1F2A45;
  --ok: #5FC08B; --ok-bg: #15291F; --warn: #E4A64A; --warn-bg: #2E2413; --bad: #F08078; --bad-bg: #331A1A; --info: #9DB4E6; --info-bg: #1F2A45;
  --side: #0B1020; --side-2: #15203A; --shadow: 0 1px 2px rgba(0,0,0,.35); --shadow-lg: 0 24px 60px -18px rgba(0,0,0,.8);
  --c-s1: #9DB4E6; --c-s2: #D4B06F; --c-s3: #8DB396; --c-s4: #E09B6E; --c-s5: #A79BD0; --c-s6: #7FB7CC;
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0F131C; --surface: #171C28; --surface-2: #1E2433; --surface-3: #27304A; --line: #2B3346; --line-forte: #3C465E;
  --ink: #EAEDF3; --ink-soft: #AAB2C3; --ink-faint: #7B8498; --gold: #D4B06F; --gold-soft: #2E2619; --gold-ink: #E2C48C;
  --accent: #9DB4E6; --accent-2: #7F99D2; --accent-ink: #0F131C; --accent-soft: #1F2A45;
  --ok: #5FC08B; --ok-bg: #15291F; --warn: #E4A64A; --warn-bg: #2E2413; --bad: #F08078; --bad-bg: #331A1A; --info: #9DB4E6; --info-bg: #1F2A45;
  --side: #0B1020; --side-2: #15203A; --shadow: 0 1px 2px rgba(0,0,0,.35); --shadow-lg: 0 24px 60px -18px rgba(0,0,0,.8);
  --c-s1: #9DB4E6; --c-s2: #D4B06F; --c-s3: #8DB396; --c-s4: #E09B6E; --c-s5: #A79BD0; --c-s6: #7FB7CC;
}
* { box-sizing: border-box }
html, body { margin: 0; min-height: 100% }
body { background: var(--ground); color: var(--ink); font: 14px/1.5 var(--body); -webkit-font-smoothing: antialiased }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; line-height: 1.15; font-weight: 600; letter-spacing: .2px }
h1 { font-size: clamp(26px, 3vw, 36px); line-height: 1.05 } h2 { font-size: 19px } h3 { font-size: 15.5px }
p { margin: 0 } a { color: var(--accent); text-decoration: none } a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px }
svg { width: 18px; height: 18px; flex: none }
button, input, select, textarea { font: inherit; color: inherit } button { cursor: pointer }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
.muted { color: var(--ink-soft) } .faint { color: var(--ink-faint) } .small { font-size: 13px } .xs { font-size: 12px } .mono { font-family: var(--mono) } .num { font-variant-numeric: tabular-nums } .b { font-weight: 700 }
.nowrap { white-space: nowrap } .right { text-align: right } .grow { flex: 1 } .hide { display: none !important } .mt { margin-top: 8px } .ok { color: var(--ok) } .bad { color: var(--bad) } .warn { color: var(--warn) }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap } .row.between { justify-content: space-between } .row.top { align-items: flex-start } .row.g6 { gap: 6px }
.col { display: flex; flex-direction: column; gap: 12px } .col.g6 { gap: 6px } .col.g20 { gap: 20px } .col.g2 { gap: 2px }
.grid { display: grid; gap: 18px } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)) } .g5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.g21 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) } .g12 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) }
@media (max-width: 1100px) { .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .g21, .g12 { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 720px) { .g2, .g3, .g4, .g5 { grid-template-columns: minmax(0, 1fr) } }

/* termo simples × jurídico */
.tj { display: inline-flex; flex-direction: column; gap: 1px; max-width: 100%; white-space: normal }
.tj .j { font-size: 11.5px; color: var(--ink-faint); font-style: italic } .tj .j::before { content: "no processo: "; font-style: normal }
body.voc-simples .tj .j { display: none }

/* ── casca: menu lateral sólido ── */
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .22s ease }
aside.menu { background: var(--side); color: var(--side-ink); padding: 22px 14px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow: visible }
aside.menu .recolher { position: absolute; top: 34px; right: -13px; width: 26px; height: 26px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--side-2); color: var(--gold); border: 1px solid rgba(184,142,74,.5); box-shadow: 0 2px 8px rgba(0,0,0,.3); z-index: 5 }
aside.menu .recolher:hover { color: #fff } aside.menu .recolher svg { width: 14px; height: 14px; transition: transform .22s ease }
.marca { display: flex; align-items: center; gap: 12px; padding: 0 6px 18px }
.marca .mk { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--gold-grad); color: #1B2A4A; font: 700 17px var(--display); letter-spacing: 1px }
.marca-txt b { display: block; font: 600 15px/1.1 var(--display); letter-spacing: 2.2px; text-transform: uppercase; color: #fff }
.marca-txt small { display: block; color: var(--gold); font: 600 9.5px/1.2 var(--body); letter-spacing: 3.2px; text-transform: uppercase; margin-top: 4px }
nav.itens { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin }
nav.itens .sec { font: 700 10px/1 var(--body); letter-spacing: 2.2px; text-transform: uppercase; color: #8A93A8; padding: 16px 12px 7px }
nav.itens a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--side-ink); text-decoration: none; font-weight: 500; font-size: 13.5px; white-space: nowrap; min-width: 0 }
nav.itens a .rot { overflow: hidden; text-overflow: ellipsis }
nav.itens a:hover { background: var(--side-soft); color: #fff; text-decoration: none }
nav.itens a.on { background: var(--side-2); color: #fff; box-shadow: inset 3px 0 0 var(--gold) } nav.itens a.on svg { color: var(--gold) }
nav.itens a .cont { margin-left: auto; background: var(--gold-grad); color: #1B2A4A; font: 800 11px/1.6 var(--body); padding: 0 7px; border-radius: 99px; flex: none }
nav.itens a .cont.bad { background: #D9534A; color: #fff }
/* rodapé do menu: preferência e usuário, cada um na sua linha, sem quebrar */
.eu { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(184,142,74,.22) }
.eu .voc { padding: 4px 8px 0 } .eu .voc label { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #9AA3B8; cursor: pointer; line-height: 1.3 } .eu .voc input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--gold) }
.usuario { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 4px 0 }
.usuario .av { width: 36px; height: 36px; border-radius: 50%; background: var(--gold-grad); color: #1B2A4A; font: 700 13px var(--body); display: grid; place-items: center; flex: none }
.usuario .quem { min-width: 0; line-height: 1.25 } .usuario .quem b { display: block; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .usuario .quem small { display: block; color: #9AA3B8; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.usuario .acoes-eu { display: flex; gap: 2px } .usuario .ic-bt { background: none; border: 0; color: #9AA3B8; padding: 6px; border-radius: 8px; display: grid; place-items: center } .usuario .ic-bt:hover { color: #fff; background: var(--side-soft) } .usuario .ic-bt svg { width: 17px; height: 17px }
.shell.recolhido { grid-template-columns: 76px minmax(0, 1fr) } .shell.recolhido aside.menu { padding: 22px 10px 14px } .shell.recolhido aside.menu .recolher svg { transform: rotate(180deg) }
.shell.recolhido .marca { justify-content: center; padding: 0 0 14px } .shell.recolhido .marca-txt, .shell.recolhido nav.itens .sec, .shell.recolhido .rot, .shell.recolhido .usuario .quem, .shell.recolhido .eu .voc { display: none }
.shell.recolhido nav.itens a { justify-content: center; padding: 10px 0; position: relative } .shell.recolhido nav.itens a .cont { position: absolute; top: 1px; right: 4px; margin: 0; padding: 0 5px; font-size: 9.5px; line-height: 15px }
.shell.recolhido .usuario { grid-template-columns: 1fr; justify-items: center; gap: 4px } .shell.recolhido .usuario .acoes-eu { flex-direction: column }
main { padding: 30px 36px 70px; min-width: 0; display: flex; flex-direction: column; gap: 22px }
.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-right: 56px }
.topo h1::after { content: ""; display: block; width: 56px; height: 1.5px; background: var(--gold-grad); margin-top: 12px }
.topo > div:first-child { flex: 1 1 380px; min-width: 0 } .topo > .row { flex: 0 1 auto; justify-content: flex-end }
.topo .sub { font-size: 14px; color: var(--ink-soft); margin-top: 8px; max-width: 70ch }
.busca-global { position: relative; width: min(340px, 100%) }
.busca-global input { border-radius: 99px; padding: 10px 16px 10px 38px; height: 42px; border: 1px solid var(--line-forte); background: var(--surface); width: 100% }
.busca-global svg { position: absolute; left: 13px; top: 12px; width: 17px; height: 17px; color: var(--ink-faint) }
.busca-global .res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); z-index: 30; max-height: 360px; overflow: auto; padding: 6px }
.busca-global .res a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink) } .busca-global .res a:hover, .busca-global .res a.sel { background: var(--surface-2) }
#botao-tema { position: fixed; top: 16px; right: 18px; z-index: 20; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-forte); background: var(--surface); color: var(--gold-ink); box-shadow: var(--shadow); display: grid; place-items: center }
#botao-tema svg { width: 19px; height: 19px }
@media (max-width: 900px) {
  .shell, .shell.recolhido { grid-template-columns: minmax(0, 1fr) } aside.menu .recolher { display: none } aside.menu { position: static; height: auto; padding: 12px 14px }
  .shell.recolhido .rot { display: inline } .shell.recolhido .marca-txt { display: block } .marca { padding-bottom: 8px } nav.itens { flex-direction: row; overflow-x: auto } nav.itens .sec { display: none }
  .eu { flex-direction: row; align-items: center; flex-wrap: wrap; border-top: 0 } .usuario { padding: 0 } main { padding: 20px 16px 60px } .topo { padding-right: 0 }
}

/* ── cartões: cabeçalho com ícone em quadrado dourado-claro ── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.card > .cab, .card > h2:first-child { margin: -18px -20px 2px; padding: 15px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.card > h2:first-child, .card > .cab h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; min-width: 0; justify-content: flex-start }
.tabela td:first-child { min-width: 160px }
.card .ico { width: 30px; height: 30px; border-radius: 8px; background: var(--gold-soft); color: var(--gold-ink); display: inline-grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgba(184,142,74,.18) } .card .ico svg { width: 16px; height: 16px }
.card .ico.bad { background: var(--bad-bg); color: var(--bad) } .card .ico.warn { background: var(--warn-bg); color: var(--warn) } .card .ico.ok { background: var(--ok-bg); color: var(--ok) }
.card.tight { padding: 12px 16px; gap: 10px } .card.tight > .cab { margin: -12px -16px 2px; padding: 10px 16px }
.card a:not(.btn):not(.kpi):not(.ficha) { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(184,142,74,.45) } .card a:not(.btn):not(.kpi):not(.ficha):hover { border-bottom-color: var(--gold); color: var(--gold-ink); text-decoration: none }
.card a.link-ouro, .link-ouro { color: var(--gold-ink); font-weight: 700; font-size: 13px; border-bottom: 0 !important } .link-ouro::after { content: " →" }
.eyebrow { font: 700 10.5px/1 var(--body); letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold-ink) }
/* KPI: ícone 44px à esquerda, número grande, rótulo em uma linha */
.kpi { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "ic n" "ic q" "ic s"; column-gap: 14px; row-gap: 1px; align-items: center; align-content: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px 20px; text-decoration: none; color: inherit; text-align: left; min-width: 0 }
a.kpi, button.kpi { cursor: pointer; transition: transform .15s, border-color .15s } a.kpi:hover, button.kpi:hover { transform: translateY(-2px); border-color: var(--gold); text-decoration: none }
.kpi .kico { grid-area: ic; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-ink); display: grid; place-items: center; align-self: start; margin-top: 2px; box-shadow: inset 0 0 0 1px rgba(184,142,74,.18); font: 700 13px var(--body) } .kpi .kico svg { width: 22px; height: 22px }
.kpi.ok .kico { background: var(--ok-bg); color: var(--ok) } .kpi.warn .kico { background: var(--warn-bg); color: var(--warn) } .kpi.bad .kico { background: var(--bad-bg); color: var(--bad) } .kpi.info .kico { background: var(--navy); color: var(--gold) }
.kpi .n { grid-area: n; font: 700 30px/1 var(--body); letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .kpi.bad .n { color: var(--bad) }
.kpi .q { grid-area: q; font: 600 12.5px/1.3 var(--body); margin-top: 5px; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .kpi .s { grid-area: s; font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.kpi:not(:has(.kico)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "q" "n" "s" }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--ink-faint) } .dot.ok { background: var(--ok) } .dot.warn { background: var(--warn) } .dot.bad { background: var(--bad) }
.pill, .selo { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1.5 var(--body); padding: 3px 10px; border-radius: 99px; white-space: nowrap; background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line) }
.pill.ok, .selo.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent } .pill.warn, .selo.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent } .pill.bad, .selo.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent } .pill.info, .selo.info { background: var(--info-bg); color: var(--info); border-color: transparent } .pill.acc, .selo.acc { background: var(--gold-soft); color: var(--gold-ink); border-color: transparent }
.chip { font: 600 11.5px/1.6 var(--body); padding: 1px 9px; border-radius: 99px; background: var(--surface-2); color: var(--ink-soft); white-space: nowrap; display: inline-flex; gap: 5px; align-items: center; border: 1px solid var(--line) }
.chip.acc { background: var(--gold-soft); color: var(--gold-ink); border-color: transparent } .chip.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent } .chip.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent } .chip.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent } .chip.info { background: var(--info-bg); color: var(--info); border-color: transparent }
.vazio { padding: 22px; border: 1.5px dashed var(--line-forte); border-radius: 12px; color: var(--ink-soft); text-align: center }
.aviso { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 600 }
.erro-box { background: var(--bad-bg); color: var(--bad); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 600 }
.info-box { background: var(--info-bg); color: var(--info); border-radius: 10px; padding: 10px 14px; font-size: 13.5px }
.previa { background: var(--gold-soft); color: var(--ink); border-radius: 10px; padding: 12px 14px; font-size: 13.5px }
.nota-pdf { border-left: 3px solid var(--gold); background: var(--surface-2); border-radius: 0 10px 10px 0; padding: 10px 14px; font-size: 13px; color: var(--ink-soft) } .nota-pdf b { color: var(--ink) }
.card > .confirmar, .card > .eyebrow, .card > .chip, .card > .pill { align-self: flex-start }
.confirmar { font: 700 10px/1 var(--body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--warn); background: var(--warn-bg); border-radius: 99px; padding: 4px 8px; vertical-align: middle }

/* ── botões e campos ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line-forte); background: var(--surface); border-radius: 99px; padding: 8px 14px; font: 700 13px/1.4 var(--body); text-decoration: none; color: var(--ink); white-space: nowrap }
.btn:hover { border-color: var(--gold); text-decoration: none } .btn svg { width: 15px; height: 15px }
.btn.pri { background: var(--navy); border-color: var(--navy); color: #fff } .btn.pri:hover { filter: brightness(1.15) }
:root[data-theme="dark"] .btn.pri { background: var(--gold-grad); color: #1B2A4A; border-color: transparent }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.pri { background: var(--gold-grad); color: #1B2A4A; border-color: transparent } }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-soft) } .btn.ghost:hover { background: var(--surface-2); color: var(--ink) }
.btn.sm { padding: 5px 10px; font-size: 12px } .btn.bad { color: var(--bad) } .btn.ouro { background: var(--gold-grad); color: #1B2A4A; border: 0 } .btn[disabled] { opacity: .5; pointer-events: none }
.link { all: unset; cursor: pointer; color: var(--gold-ink); font-weight: 700; font-size: 13px } .link:hover { text-decoration: underline; text-underline-offset: 3px }
/* menu "⋯" para ações secundárias */
.mais { position: relative; display: inline-block } .mais > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 99px; border: 1px solid var(--line-forte); background: var(--surface); cursor: pointer; color: var(--ink-soft) } .mais > summary::-webkit-details-marker { display: none } .mais > summary:hover { border-color: var(--gold); color: var(--ink) }
.mais.sm > summary { width: 28px; height: 28px } .mais > summary svg { width: 16px; height: 16px }
.mais .menu-mais { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 40; display: flex; flex-direction: column }
.mais .menu-mais button, .mais .menu-mais a { all: unset; cursor: pointer; display: flex; gap: 9px; align-items: center; padding: 9px 12px; border-radius: 8px; font: 600 13px var(--body); color: var(--ink); white-space: nowrap } .mais .menu-mais button:hover, .mais .menu-mais a:hover { background: var(--surface-2); text-decoration: none }
.mais .menu-mais button.bad { color: var(--bad) } .mais .menu-mais hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0 } .mais .menu-mais svg { width: 15px; height: 15px; color: var(--ink-soft) }
input, select, textarea { background: var(--surface); border: 1px solid var(--line-forte); border-radius: 10px; padding: 9px 12px; width: 100%; min-width: 0 }
textarea { resize: vertical; min-height: 80px } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft) }
.campo { display: flex; flex-direction: column; gap: 5px } .campo > label { font: 700 12.5px var(--body) } .campo .ajuda { font-size: 12.5px; color: var(--ink-soft) } .campo.erro input, .campo.erro select, .campo.erro textarea { border-color: var(--bad) }
.campo-senha { position: relative } .campo-senha input { padding-right: 44px } .campo-senha .olho { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--ink-soft); padding: 6px; border-radius: 8px; display: grid; place-items: center } .campo-senha .olho:hover { color: var(--ink); background: var(--surface-2) }
.campos2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px } .campos3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px } @media (max-width: 560px) { .campos2, .campos3 { grid-template-columns: 1fr } }
.check { display: flex; gap: 9px; align-items: flex-start; cursor: pointer } .check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--navy); flex: none }
.checklist { display: flex; flex-direction: column; gap: 6px } .checklist label { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13.5px } .checklist label:has(input:checked) { background: var(--ok-bg); border-color: transparent } .checklist input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--ok); flex: none }
.filtros { display: flex; gap: 6px; flex-wrap: wrap } .filtros button, .filtros a.btn { all: unset; cursor: pointer; border-radius: 99px; border: 1px solid var(--line-forte); background: var(--surface); font: 600 12.5px var(--body); padding: 7px 14px; display: inline-flex; gap: 6px; align-items: center; color: var(--ink) }
.filtros button .n, .filtros a .n { font-family: var(--mono); font-size: 11px; opacity: .7 } .filtros button.on, .filtros a.pri { background: var(--navy); border-color: var(--navy); color: #fff } .filtros button:focus-visible { outline: 2px solid var(--gold) }
:root[data-theme="dark"] .filtros button.on, :root[data-theme="dark"] .filtros a.pri { background: var(--gold-grad); color: #1B2A4A; border-color: transparent }
.barra-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; box-shadow: var(--shadow) }
.barra-filtros input, .barra-filtros select { width: auto; height: 38px } .barra-filtros input { min-width: 200px; flex: 1 }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin }
.abas button { all: unset; cursor: pointer; padding: 10px 14px; font: 600 13.5px var(--body); color: var(--ink-soft); border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center }
.abas button.on { color: var(--ink); border-bottom-color: var(--gold) } .abas button .n { font-family: var(--mono); font-size: 11px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 0 7px }

/* ── listas, bloco de data, tabelas ── */
.lista { display: flex; flex-direction: column }
.lista > .it { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 10px; margin: 0 -10px; border-radius: 10px; box-shadow: 0 -1px 0 var(--line) }
.lista > .it:first-child { box-shadow: none } .lista > .it:hover { background: var(--surface-2) } .lista > .it .dot { margin-top: 0 }
.lista > .it.com-data { grid-template-columns: 50px minmax(0, 1fr) auto }
.lista .tit { font-weight: 600; line-height: 1.3 } .lista .dir { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right }
.lista .dir .row { justify-content: flex-end }
@media (max-width: 640px) { .lista > .it { grid-template-columns: 10px minmax(0, 1fr) } .lista .dir { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap } }
.data-bloco { width: 50px; flex: none; text-align: center; border-radius: 10px; padding: 5px 0; background: var(--surface-2); border: 1px solid var(--line); line-height: 1.1 }
.data-bloco b { display: block; font-size: 17px; font-weight: 800 } .data-bloco small { font-size: 10.5px; text-transform: uppercase; color: var(--ink-soft); font-weight: 700 }
.data-bloco.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn) } .data-bloco.warn small { color: var(--warn) } .data-bloco.bad { background: var(--bad-bg); border-color: transparent; color: var(--bad) } .data-bloco.bad small { color: var(--bad) } .data-bloco.ok { background: var(--ok-bg); border-color: transparent; color: var(--ok) } .data-bloco.ok small { color: var(--ok) }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px }
.tabela th { text-align: left; font: 700 11px var(--body); letter-spacing: .6px; text-transform: uppercase; color: var(--ink-soft); background: var(--surface-2); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap }
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top } .tabela tr:last-child td { border-bottom: 0 } .tabela tr.clic { cursor: pointer } .tabela tr.clic:hover td { background: var(--surface-2) }
.rolagem { overflow-x: auto }
.casos { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden }
.casos > a { display: grid; grid-template-columns: 10px minmax(170px, 1.1fr) minmax(200px, 1.5fr) minmax(210px, 1.5fr) 110px; gap: 16px; align-items: center; padding: 14px 18px; text-decoration: none; color: inherit; border-top: 1px solid var(--line); border-left: 4px solid transparent }
.casos > a:first-child { border-top: 0 } .casos > a:hover { background: var(--surface-2); text-decoration: none } .casos > a.bad { border-left-color: var(--bad) } .casos > a.warn { border-left-color: var(--warn) } .casos > a.ok { border-left-color: var(--ok) }
.casos .nm { font: 600 15.5px/1.2 var(--display) } .casos .dias { font-size: 12px; color: var(--ink-soft); text-align: right } .casos .dias b { font-size: 17px; color: var(--ink); display: block; font-variant-numeric: tabular-nums }
@media (max-width: 900px) { .casos > a { grid-template-columns: 10px minmax(0, 1fr); gap: 6px 12px } .casos > a > :nth-child(n+3) { grid-column: 2 } .casos .dias { text-align: left } }
.avc { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--navy); color: var(--gold); font: 600 14px var(--display); letter-spacing: 1px; box-shadow: inset 0 0 0 1.5px rgba(184,142,74,.55) }
.avc.sm { width: 28px; height: 28px; font-size: 11px } .avc.lg { width: 58px; height: 58px; font-size: 22px } .quem-av { display: flex; gap: 12px; align-items: center; min-width: 0 } .quem-av > .col { flex: 1; min-width: 0 }
.card { container-type: inline-size }
@container (max-width: 600px) { .lista > .it { grid-template-columns: 10px minmax(0, 1fr) } .lista > .it.com-data { grid-template-columns: 50px minmax(0, 1fr) } .lista .dir { grid-column: 2; align-items: center; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 6px 10px } }

/* ── esteira: etapas numeradas com linha de ligação e fichas clicáveis ── */
.esteira { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: 0; padding: 6px 0 2px }
.esteira .col-e { padding: 0 8px; position: relative; min-width: 0 }
.esteira .col-e .cab-e { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-bottom: 12px; text-decoration: none; color: inherit }
.esteira .col-e .num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--body); background: var(--navy); color: #fff; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--surface) }
.esteira .col-e:nth-child(even) .num { background: var(--gold-grad); color: #1B2A4A }
.esteira .col-e::before { content: ""; position: absolute; top: 17px; left: 0; right: 0; height: 2px; background: var(--line) }
.esteira .col-e:first-child::before { left: 50% } .esteira .col-e:last-child::before { right: 50% }
.esteira .col-e .nome { font: 700 10.5px/1.25 var(--body); text-transform: uppercase; letter-spacing: 1.2px; min-height: 27px; overflow-wrap: anywhere }
.esteira .col-e .qtd { font-size: 12px; color: var(--ink-soft) } .esteira .col-e .qtd b { color: var(--ink); font-size: 15px }
.esteira .col-e.on .nome { color: var(--gold-ink) } .esteira .col-e.on .num { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--gold) }
.ficha { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 9px 10px; margin-bottom: 7px; cursor: pointer; font: inherit; color: inherit; transition: .15s; text-decoration: none; min-width: 0 }
.ficha:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none }
.ficha b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .ficha small { color: var(--ink-soft); font-size: 11.5px; display: block; line-height: 1.3 }
.ficha.bad { border-left: 3px solid var(--bad) } .ficha.warn { border-left: 3px solid var(--warn) }
.vazio-etapa { border: 1.5px dashed var(--line); border-radius: 10px; height: 44px }
.esteira .mais-fichas { font-size: 11.5px; color: var(--ink-soft); text-align: center; display: block; padding: 4px }
@media (max-width: 1300px) { .esteira { grid-template-columns: repeat(min(var(--cols, 8), 4), minmax(0, 1fr)); row-gap: 18px } .esteira .col-e:nth-child(4n)::before { right: 50% } .esteira .col-e:nth-child(4n+1)::before { left: 50% } }
@media (max-width: 720px) { .esteira { grid-template-columns: repeat(2, minmax(0, 1fr)) } .esteira .col-e::before { display: none } }
/* trilha de fases (processo), compacta */
.trilho-fases { display: flex; padding: 14px 6px 10px; overflow-x: auto; scrollbar-width: thin }
.trilho-fases .passo { flex: 1; min-width: 88px; text-align: center; position: relative }
.trilho-fases .passo::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0 } .trilho-fases .passo:first-child::before { display: none }
.trilho-fases .passo .c { width: 32px; height: 32px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center; font: 700 13px var(--body); position: relative; z-index: 1; background: var(--surface); border: 2px solid var(--line-forte); color: var(--ink-faint) }
.trilho-fases .passo.feito .c { background: var(--navy); border-color: var(--navy); color: #fff } .trilho-fases .passo.feito::before, .trilho-fases .passo.atual::before { background: var(--navy) }
.trilho-fases .passo.atual .c { background: var(--gold-grad); border-color: transparent; color: #1B2A4A; box-shadow: 0 0 0 5px var(--gold-soft) }
.trilho-fases .passo span { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); display: block; line-height: 1.25; padding: 0 4px } .trilho-fases .passo.atual span { color: var(--ink); font-weight: 800 }
.trilho-fases .passo small { display: block; font-size: 10.5px; color: var(--ink-faint); margin-top: 2px }
/* passos numerados em lista (fluxos do PDF) */
.passos { list-style: none; margin: 0; padding: 0; counter-reset: p } .passos li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); counter-increment: p }
.passos li:first-child { border-top: 0 } .passos li::before { content: counter(p); width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 12.5px/28px var(--body); text-align: center } .passos li:nth-child(even)::before { background: var(--gold-grad); color: #1B2A4A }
.passos li b { display: block } .passos li small { color: var(--ink-soft); display: block; font-size: 12.5px; margin-top: 2px } .passos li .quem { font-size: 11.5px; color: var(--gold-ink); font-weight: 700; text-transform: uppercase; letter-spacing: .8px }

/* ── ficha do caso ── */
.hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 24px; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap }
.hero h1 { font-size: 28px } .hero h1::after { content: none } .hero h1 a { color: inherit; text-decoration: none }
.hero-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px } .hero-stats .st { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; min-width: 104px }
.hero-stats .st span { font: 700 10px/1.2 var(--body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-ink) } .hero-stats .st b { font: 700 14.5px var(--body) } .hero-stats .st.bad { background: var(--bad-bg) } .hero-stats .st.bad b { color: var(--bad) }
.hero .acoes-hero { display: flex; flex-direction: column; align-items: flex-end; gap: 10px } .hero .acoes-hero .row { justify-content: flex-end }
.jornada { display: flex; gap: 0; overflow-x: auto; padding: 6px 4px 2px; counter-reset: etapa; scrollbar-width: thin }
.jornada .pt { flex: 1; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 92px; font: 600 11.5px/1.25 var(--body); color: var(--ink-soft) }
.jornada .pt::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0 } .jornada .pt:first-child::before { display: none }
.jornada .bar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-forte); display: grid; place-items: center; position: relative; z-index: 1; font: 700 13px var(--body); color: var(--ink-faint) } .jornada .bar::after { counter-increment: etapa; content: counter(etapa) }
.jornada .pt.feito .bar { background: var(--navy); border-color: var(--navy); color: #fff } .jornada .pt.feito .bar::after { content: "✓" } .jornada .pt.feito::before, .jornada .pt.agora::before { background: var(--navy) }
.jornada .pt.agora .bar { background: var(--gold-grad); border-color: transparent; color: #1B2A4A; box-shadow: 0 0 0 5px var(--gold-soft) } .jornada .pt.agora { color: var(--ink); font-weight: 800 }
.proximo { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px 20px; display: flex; flex-direction: column; gap: 10px }
.proximo .o { font: 600 21px/1.2 var(--display) } .proximo .q { color: var(--ink-soft) } .proximo .q b { color: var(--ink) }
.linha-tempo { list-style: none; margin: 0; padding: 0 } .linha-tempo li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px }
.linha-tempo li:first-child { border-top: 0 } .linha-tempo time { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); padding-top: 2px } .linha-tempo li.estornado { opacity: .5 } .linha-tempo li.estornado .tt { text-decoration: line-through } .linha-tempo .nota { color: var(--ink-soft); font-size: 13px }
.msg { background: var(--surface-2); border-left: 4px solid #25D366; border-radius: 4px 12px 12px 4px; padding: 12px 14px; white-space: pre-wrap; font-size: 14px } .msg.entrada { border-left-color: var(--gold) }
.fatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 16px; margin: 0 } .fatos div { display: flex; flex-direction: column; gap: 2px; min-width: 0 } .fatos dt { font-size: 12px; color: var(--ink-soft) } .fatos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere }
.capa { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 18px; padding: 12px 14px; background: var(--surface-2); border-radius: 12px; margin: 0 } .capa dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700 } .capa dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere }
pre.pacote { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font: 12.5px/1.5 var(--mono); white-space: pre-wrap; max-height: 360px; overflow: auto; margin: 0 }

/* ── funil, barras, gráficos ── */
.funil { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px }
.etapa { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); min-width: 0; text-decoration: none; color: inherit; border: 1px solid var(--line) } .etapa .q { font-size: 12.5px; color: var(--ink-soft) } .etapa .n { font: 700 28px/1.05 var(--body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.etapa.on { outline: 2px solid var(--gold) } a.etapa:hover { border-color: var(--gold); text-decoration: none }
.barra .lbl { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px } .trilho { height: 10px; border-radius: 6px; background: var(--surface-2); position: relative; margin-top: 6px; overflow: hidden } .trilho .f { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--gold) } .trilho .f.bad { background: var(--bad) } .trilho .f.warn { background: var(--warn) } .trilho .f.ok { background: var(--ok) }
.barras { display: flex; flex-direction: column; gap: 12px }
.colunas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; height: 170px; padding-top: 8px; border-bottom: 1px solid var(--line) }
.colunas .cm { display: flex; gap: 2px; align-items: flex-end; justify-content: center; height: 100%; position: relative } .colunas .b { width: min(16px, 42%); border-radius: 4px 4px 0 0; min-height: 2px } .colunas .b.s1 { background: var(--c-s1) } .colunas .b.s2 { background: var(--c-s2) } .colunas .b.s3 { background: var(--c-s3) }
.rotulos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; font-size: 11px; color: var(--ink-soft); text-align: center; margin-top: 4px }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--ink-soft) } .legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px } .legenda i.s1 { background: var(--c-s1) } .legenda i.s2 { background: var(--c-s2) } .legenda i.s3 { background: var(--c-s3) }
.cont { display: flex; flex-direction: column; gap: 8px } .cont .linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center } .cont .tr { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden } .cont .tr i { display: block; height: 100%; background: var(--navy); border-radius: 0 4px 4px 0 }
.big { font: 700 34px/1 var(--body); font-variant-numeric: tabular-nums } .big.ok { color: var(--ok) } .big.warn { color: var(--warn) } .big.bad { color: var(--bad) }
.pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px }
.mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px } .mini div { background: var(--surface-2); border-radius: 10px; padding: 7px 9px; display: flex; flex-direction: column } .mini b { font: 700 19px var(--body); font-variant-numeric: tabular-nums } .mini span { font-size: 11.5px; color: var(--ink-soft) } .mini .bad b { color: var(--bad) } .mini .warn b { color: var(--warn) }
.gargalo { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line) } .gargalo:first-child { border-top: 0 }
.gargalo .num { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 700 14px var(--body) } .gargalo:nth-child(even) .num { background: var(--gold-grad); color: #1B2A4A }
.gargalo .medida { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 150px; text-align: right } .gargalo .medida .v { font: 700 24px/1 var(--body); font-variant-numeric: tabular-nums } .gargalo .medida .v.ok { color: var(--ok) } .gargalo .medida .v.bad { color: var(--bad) } .gargalo .medida .v.warn { color: var(--warn) } .gargalo .medida small { color: var(--ink-soft); font-size: 11.5px }
.gargalo .onde { font-size: 11.5px; color: var(--gold-ink); font-weight: 700; text-transform: uppercase; letter-spacing: .8px }
.meta-dia { display: flex; flex-direction: column; gap: 6px } .meta-dia .lbl { display: flex; justify-content: space-between; font-size: 13px } .meta-dia .lbl b { font-variant-numeric: tabular-nums }

/* ── calendário ── */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface) }
.calendario .dsem { font: 700 11px var(--body); letter-spacing: 1px; text-transform: uppercase; padding: 8px; color: var(--ink-soft); background: var(--surface-2); text-align: center }
.calendario .dia { min-height: 104px; min-width: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 12px } .calendario .dia:nth-child(7n+1) { border-left: 0 }
.calendario .dia .n { font-family: var(--mono); font-size: 12px; color: var(--ink-soft) } .calendario .dia.hoje { box-shadow: inset 0 0 0 2px var(--gold) } .calendario .dia.fora { background: var(--surface-2); opacity: .55 }
.calendario .dia.sem { background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 6px, var(--surface-2) 6px, var(--surface-2) 12px) } .calendario .motivo { font-size: 10.5px; color: var(--ink-soft); font-style: italic; line-height: 1.2 }
.calendario .ev { border-radius: 5px; padding: 2px 6px; font-size: 11.5px; line-height: 1.3; text-decoration: none; color: var(--ink); background: var(--surface-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer }
.calendario .ev.prazo { background: var(--bad-bg); color: var(--bad); font-weight: 600 } .calendario .ev.ato { background: var(--info-bg); color: var(--info); font-weight: 600 } .calendario .ev.intim { background: var(--warn-bg); color: var(--warn) } .calendario .ev.tarefa { color: var(--ink-soft) }
@media (max-width: 760px) { .calendario .dia { min-height: 60px } .calendario .ev { font-size: 10px } }

/* ── modal, toast ── */
.sobre { position: fixed; inset: 0; background: rgba(13,18,30,.5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 60; backdrop-filter: blur(2px) }
.modal { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px }
.modal.larga { width: min(860px, 100%) } .modal h2 { font-size: 22px } .modal form { display: flex; flex-direction: column; gap: 14px }
.modal .rodape { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: -22px; background: var(--surface); padding: 12px 0 2px; align-items: center }
.modal .rodape .mais { margin-right: auto }
.escolhas { display: grid; gap: 10px } .escolhas button { all: unset; cursor: pointer; border: 1px solid var(--line-forte); border-radius: 12px; padding: 13px 16px; display: flex; flex-direction: column; gap: 3px } .escolhas button:hover { border-color: var(--gold); background: var(--gold-soft) } .escolhas button b { font-size: 15px }
#toast { position: fixed; right: 22px; bottom: 24px; z-index: 90; display: none; gap: 8px; align-items: center; background: var(--navy); color: #fff; padding: 11px 20px; border-radius: 12px; font-weight: 600; box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px) }
#toast svg { color: var(--gold); width: 18px; height: 18px } #toast.erro { background: var(--bad); color: #fff } #toast.erro svg { color: #fff }

/* ── login: lado marinho com marca e filete dourado, formulário à direita ── */
.login { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; background: var(--ground); color: var(--ink) }
.login .lado { background: var(--navy); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden }
.login .lado::before { content: ""; position: absolute; inset: auto -20% -30% -20%; height: 60%; background: radial-gradient(ellipse at center, rgba(184,142,74,.18), transparent 60%) }
.login .lado .mk { width: 92px; height: 92px; border-radius: 24px; display: grid; place-items: center; background: var(--gold-grad); color: #1B2A4A; font: 700 36px var(--display); letter-spacing: 2px; position: relative }
.login .lado h2 { font: 600 30px/1.1 var(--display); letter-spacing: 3px; text-transform: uppercase; margin-top: 22px } .login .lado h2::after { content: ""; display: block; width: 56px; height: 1.5px; background: var(--gold-grad); margin: 14px auto 0 }
.login .lado .lema { font: 500 11px/1.4 var(--body); letter-spacing: 3px; text-transform: uppercase; color: #B4BDCD; margin-top: 14px }
.login .lado .principio { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 26px } .login .lado .principio span { border-radius: 99px; padding: 6px 12px; font-size: 12px; font-weight: 700 }
.login .caixa { padding: 40px clamp(20px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 20px } .login .caixa > * { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto }
.login .entrar { font: 600 34px/1.1 var(--display) } .login .entrar::after { content: ""; display: block; width: 56px; height: 1.5px; background: var(--gold-grad); margin-top: 12px } .login .sub-entrar { color: var(--ink-soft); font-size: 13.5px }
.login form { display: flex; flex-direction: column; gap: 14px } .login .entrar-bt { background: var(--gold-grad); color: #1B2A4A; border: 0; border-radius: 99px; padding: 12px; font-weight: 800; justify-content: center; font-size: 14px } .login .err { color: var(--bad); font-weight: 600 }
.login .rodape-login { font-size: 12px; color: var(--ink-faint) }
@media (max-width: 860px) { .login { grid-template-columns: 1fr } .login .lado { padding: 28px 20px } .login .lado .principio { display: none } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }
@media print { aside.menu, #botao-tema, .nao-imprimir, .busca-global { display: none !important } .shell { display: block } body { background: #fff } .card, .kpi { box-shadow: none } }

/* ── Três espaços: acento discreto de cada área sobre a paleta ──────────── */
:root { --area: var(--gold); --area-ink: var(--gold-ink); --area-soft: var(--gold-soft) }
.shell[data-area="comercial"] { --area: #C8902E; --area-ink: #8A5F14; --area-soft: #F7EAD2 }
.shell[data-area="operacional"] { --area: #3B6EC9; --area-ink: #2A4F93; --area-soft: #E0E9F9 }
.shell[data-area="gestao"] { --area: #2E7D5B; --area-ink: #1F5A41; --area-soft: #DDEFE6 }
:root[data-theme="dark"] .shell[data-area] { --area-ink: var(--area); --area-soft: rgba(255,255,255,.08) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shell[data-area] { --area-ink: var(--area); --area-soft: rgba(255,255,255,.08) } }
.area-topo { margin: 2px 2px 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border-left: 3px solid var(--area); display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.area-rotulo { font: 700 9.5px/1 var(--body); letter-spacing: 2.6px; text-transform: uppercase; color: #8A93A8 }
.area-nome b { font: 600 21px/1.1 var(--display); color: #fff; letter-spacing: .3px }
.area-nome select { background: transparent; border: 0; color: #fff; font: 600 20px/1.1 var(--display); padding: 0; width: 100%; cursor: pointer } .area-nome select option { color: #1D2230; font: 500 14px var(--body) }
/* Seletor de área dos sócios */
.area-topo:has(.area-bt) { position: relative; padding: 0; background: none }
.area-bt { all: unset; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); cursor: pointer; transition: background .15s }
.area-bt:hover, .area-bt[aria-expanded="true"] { background: rgba(255,255,255,.09) }
.area-bt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
.area-bt .area-nome { display: flex; align-items: center; gap: 8px }
.area-chev { width: 15px; height: 15px; margin-left: auto; color: var(--gold); transform: rotate(90deg); transition: transform .15s }
.area-bt[aria-expanded="true"] .area-chev { transform: rotate(-90deg) }
.area-menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(10,20,40,.28); padding: 6px; display: flex; flex-direction: column; gap: 2px }
.area-menu.hide { display: none }
.area-op { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--ink) }
.area-op:hover, .area-op:focus-visible { background: var(--surface-2, rgba(0,0,0,.04)) }
.area-op.on { background: var(--gold-soft, #F6EEDD) }
.area-op b { font: 600 15px/1.15 var(--display) } .area-op small { font-size: 11px; color: var(--ink-soft); line-height: 1.25 }
.area-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center }
.area-ic svg { width: 16px; height: 16px }
.area-ic[data-area="comercial"] { background: #F7EAD2; color: #8A5F14 } .area-ic[data-area="operacional"] { background: #E0E9F9; color: #2A4F93 } .area-ic[data-area="gestao"] { background: #DDEFE6; color: #1F5A41 }
.area-ok { width: 16px; height: 16px; margin-left: auto; color: var(--gold) }
.shell.recolhido .area-bt { padding: 8px 4px; align-items: center } .shell.recolhido .area-chev { display: none } .shell.recolhido .area-menu { left: 0; right: auto; width: 240px }
.area-sub { font-size: 11.5px; color: #B4BDCD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.shell.recolhido .area-topo { padding: 8px 4px; align-items: center; border-left: 0; border-top: 3px solid var(--area) } .shell.recolhido .area-rotulo, .shell.recolhido .area-sub { display: none } .shell.recolhido .area-nome b, .shell.recolhido .area-nome select { font-size: 11px }
.topo .area-tag { display: inline-block; font: 700 10.5px/1 var(--body); letter-spacing: 2px; text-transform: uppercase; color: var(--area-ink); background: var(--area-soft); border-radius: 99px; padding: 5px 10px; margin-bottom: 10px }
aside.menu .recolher { color: var(--area); border-color: var(--area) } nav.itens a.on { box-shadow: inset 3px 0 0 var(--area) } nav.itens a.on svg { color: var(--area) }
.chip.area-comercial, .area-comercial { background: #F7EAD2; color: #8A5F14; border-color: transparent } .chip.area-operacional, .area-operacional { background: #E0E9F9; color: #2A4F93; border-color: transparent } .chip.area-gestao, .area-gestao { background: #DDEFE6; color: #1F5A41; border-color: transparent }
.entrega { border: 1px solid var(--line); border-left: 4px solid var(--area); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--surface) }
.entrega.devolvida { border-left-color: var(--bad) } .entrega.recebida { border-left-color: var(--ok); opacity: .85 }
.entrega .rota { font: 700 11px/1 var(--body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-soft) }
.bloco-area { border-top: 4px solid var(--area) }
.bloco-area[data-area="comercial"] { --area: #C8902E } .bloco-area[data-area="operacional"] { --area: #3B6EC9 } .bloco-area[data-area="gestao"] { --area: #2E7D5B }

/* ── produção com Claude, protocolo, produtividade ── */
.editor-peca { width: 100%; min-height: 320px; font: 13px/1.55 var(--mono); padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-forte); background: var(--surface); resize: vertical; white-space: pre-wrap }
.editor-peca.gerando { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft) }
.versoes { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto } .versoes button { all: unset; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px } .versoes button:hover { border-color: var(--gold) } .versoes button.on { background: var(--gold-soft); border-color: transparent }
.uso-ia { display: flex; gap: 10px 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft) } .uso-ia b { color: var(--ink) }
.grafico { width: 100%; height: auto; display: block } .resumo-protocolo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 16px; padding: 12px 14px; background: var(--surface-2); border-radius: 12px } .resumo-protocolo dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700 } .resumo-protocolo dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere }
.modo-radio { display: grid; gap: 8px } .modo-radio label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer } .modo-radio label:has(input:checked) { border-color: var(--gold); background: var(--gold-soft) } .modo-radio input { margin-top: 3px; accent-color: var(--navy); width: 16px; height: 16px; flex: none }
.modal.xl { width: min(1100px, 100%) } .duas-colunas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px } @media (max-width: 860px) { .duas-colunas { grid-template-columns: 1fr } }

/* ═══ Rodada de 09/11/2026 — chat, TV, arrastar no funil, rodízio, documentos, portal, correções visuais ═══ */
/* correção: os botões de opção do modal "Protocolar" herdavam a altura/largura dos inputs e ficavam fora da linha do texto */
.modo-radio input, .checklist input, .check input, input[type="radio"], input[type="checkbox"] { width: 16px; height: 16px; min-width: 0; padding: 0; margin: 0; border-radius: 0; flex: none; vertical-align: middle }
.modo-radio label { align-items: flex-start } .modo-radio input { margin-top: 3px } .modo-radio label > span { display: block; line-height: 1.45 }
.checklist label.fixa { background: var(--gold-soft); border-color: transparent } .checklist label.fixa input { accent-color: var(--gold) }
/* tela cheia (TV): sem menu, sem busca */
body.tela-cheia .shell { grid-template-columns: minmax(0, 1fr) } body.tela-cheia aside.menu { display: none } body.tela-cheia main { padding: 22px 32px 40px; gap: 18px } body.tela-cheia #botao-tema { display: none }
.tv-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap } .tv-cab h1 { font-size: clamp(28px, 3.2vw, 44px) } .tv-cab h1::after { content: ""; display: block; width: 56px; height: 1.5px; background: var(--gold-grad); margin-top: 10px } .tv-cab .sub { color: var(--ink-soft); margin-top: 8px }
.tv-relogio { display: flex; flex-direction: column; align-items: flex-end; gap: 2px } .tv-relogio b { font: 700 42px/1 var(--body); letter-spacing: -1px; font-variant-numeric: tabular-nums } .tv-relogio span { font-size: 13px; color: var(--ink-soft) } .tv-relogio .btn { margin-top: 6px; opacity: .5 } .tv-relogio .btn:hover { opacity: 1 }
.tv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px } .tv-bloco { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0 } .tv-bloco.larga { grid-column: span 2 } .tv-bloco.destaque { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow) }
.tv-bloco h2 { display: flex; align-items: center; gap: 8px; font-size: 18px } .tv-bloco h3 { font-size: 14px; color: var(--ink-soft) }
.tv-meta { display: flex; align-items: baseline; gap: 10px } .tv-meta .n { font: 800 72px/1 var(--body); letter-spacing: -2px; font-variant-numeric: tabular-nums; color: var(--navy) } :root[data-theme="dark"] .tv-meta .n { color: var(--gold) } .tv-meta .de { font-size: 18px; color: var(--ink-soft) }
.trilho.grande { height: 18px; border-radius: 9px } .trilho.grande .f { border-radius: 9px; transition: width .8s ease }
.tv-funil { display: flex; flex-direction: column; gap: 6px } .tv-funil .etapa { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); margin-left: calc(var(--i) * 6px); margin-right: calc(var(--i) * 6px) } .tv-funil .etapa .n { font: 700 24px/1 var(--body); font-variant-numeric: tabular-nums } .tv-funil .etapa .q { font-size: 13px; color: var(--ink-soft) }
.tv-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column } .tv-rank li { display: grid; grid-template-columns: 30px 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line) } .tv-rank li:first-child { border-top: 0 } .tv-rank li.pausa { opacity: .55 } .tv-rank .pos { font: 700 18px var(--display); color: var(--gold-ink); text-align: center } .tv-rank li:first-child .pos { color: var(--gold) } .tv-rank .big { font: 800 28px/1 var(--body); font-variant-numeric: tabular-nums } .tv-rank .big small { font-size: 14px; color: var(--ink-faint); font-weight: 600 } .tv-rank .right { align-items: flex-end }
.tv-rank-pts { list-style: none; margin: 0; padding: 0 } .tv-rank-pts li { display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line) } .tv-rank-pts li:first-child { border-top: 0 } .tv-rank-pts .pos { font: 700 14px var(--display); color: var(--gold-ink) } .tv-rank-pts .pts { font: 700 16px var(--body); color: var(--ok) } .tv-rank-pts .pts.bad { color: var(--bad) }
.tv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px } .tv-lista li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 6px 10px; background: var(--surface-2); border-radius: 8px } .tv-lista small { color: var(--ink-faint); width: 100% } .tv-lista.small li { padding: 4px 8px; font-size: 13px }
.tv-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px } .tv-kpi { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column } .tv-kpi .n { font: 800 34px/1 var(--body); font-variant-numeric: tabular-nums } .tv-kpi .q { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px } .tv-kpi .s { font-size: 11.5px; color: var(--ink-faint) } .tv-kpi.bad .n { color: var(--bad) } .tv-kpi.warn .n { color: var(--warn) } .tv-kpi.ok .n { color: var(--ok) }
.tv-dias { display: flex; gap: 4px; align-items: flex-end; height: 70px; margin-top: 6px } .tv-dias .dia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px } .tv-dias .dia i { display: block; width: 100%; background: var(--gold); border-radius: 4px 4px 0 0; opacity: .85 } .tv-dias .dia span { font-size: 10px; color: var(--ink-faint) }
.tv-premios { display: flex; flex-direction: column; gap: 8px } .tv-premio { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px } .tv-premio.ok { background: var(--ok-bg) }
.premio-prog { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px } .premio-prog.ok { background: var(--ok-bg) }
.tabela tr.eu td { background: var(--gold-soft) }
@media (max-width: 1100px) { .tv-grid { grid-template-columns: minmax(0, 1fr) } .tv-bloco.larga { grid-column: auto } }
/* celebração: confete + cartão, sem palavrão */
.tv-celebra { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(27,42,74,.55); backdrop-filter: blur(3px); animation: tv-in .4s ease } @keyframes tv-in { from { opacity: 0 } to { opacity: 1 } }
.tv-celebra-box { background: var(--surface); border-radius: 22px; padding: 40px 56px; text-align: center; box-shadow: var(--shadow-lg); border: 2px solid var(--gold); max-width: 720px; animation: tv-pop .6s cubic-bezier(.2,1.4,.4,1) } .tv-celebra-box h1 { font-size: clamp(32px, 4vw, 52px); margin: 10px 0 } .tv-celebra-box p { font-size: 18px; color: var(--ink-soft) } @keyframes tv-pop { from { transform: scale(.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.confete { position: absolute; inset: 0; overflow: hidden; pointer-events: none } .confete i { position: absolute; top: -12px; width: 10px; height: 16px; border-radius: 2px; animation: cai 3.2s linear infinite; opacity: .95 } @keyframes cai { 0% { transform: translateY(-20px) rotate(0) } 100% { transform: translateY(110vh) rotate(720deg) } }
/* chat */
.chat-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 560px; height: calc(100vh - 220px); padding: 0; overflow: hidden } .chat-lista { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0 } .chat-busca { padding: 10px } .convs { overflow: auto; flex: 1 }
.conv { all: unset; display: flex; gap: 10px; align-items: flex-start; width: 100%; box-sizing: border-box; padding: 10px 12px; cursor: pointer; border-top: 1px solid var(--line) } .conv:hover { background: var(--surface-2) } .conv.on { background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold) } .conv > .col { flex: 1; min-width: 0 } .conv .ult { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.chat-thread { display: flex; flex-direction: column; min-height: 0 } .chat-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap }
.chat-msgs { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, var(--surface-2), var(--surface)) }
.balao { max-width: 72%; padding: 9px 12px; border-radius: 14px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; white-space: pre-wrap; word-break: break-word } .balao.entrada { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-top-left-radius: 4px } .balao.saida { align-self: flex-end; background: #DCF3E2; color: #1D2230; border-top-right-radius: 4px } :root[data-theme="dark"] .balao.saida { background: #1F3B2C; color: var(--ink) }
.balao .meta { font-size: 10.5px; color: var(--ink-faint); align-self: flex-end } .balao .anexo { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 13px; padding: 4px 8px; background: rgba(0,0,0,.05); border-radius: 8px }
.chat-composer { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px } .chat-composer textarea { min-height: 64px }
.link { all: unset; cursor: pointer; color: var(--gold-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px }
.iframe-card iframe { width: 100%; height: calc(100vh - 230px); min-height: 520px; border: 0; border-radius: 10px; background: var(--surface-2) }
/* arrastar no funil */
.esteira .ficha[draggable="true"] { cursor: grab } .esteira .ficha.arrastando { opacity: .4 } .esteira .col-e.solta { outline: 2px dashed var(--gold); outline-offset: 4px; border-radius: 10px; background: var(--gold-soft) }
/* rodízio */
.rodizio { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px } .sdr { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line) } .sdr.pausa { border-color: var(--warn); background: var(--warn-bg) } .sdr.fora { opacity: .6 }
.ia-leitura { background: var(--info-bg); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px }
/* portal do cliente */
body.portal { background: var(--ground) } .portal-wrap { max-width: 880px; margin: 0 auto; padding: 18px 16px 60px } .portal-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0 18px; flex-wrap: wrap } .portal-topo .marca { display: flex; align-items: center; gap: 10px } .portal-topo .mk { width: 40px; height: 40px; border-radius: 10px; background: var(--navy); color: var(--gold); display: grid; place-items: center; font: 700 15px var(--display) } .portal-topo .marca-txt { display: flex; flex-direction: column } .portal-topo .marca-txt b { font-family: var(--display) } .portal-topo small { color: var(--ink-soft); font-size: 12px }
.portal-main { display: flex; flex-direction: column; gap: 18px } .portal-sit .grande { font: 600 20px/1.35 var(--display); margin: 4px 0 } .portal-mov { background: var(--surface-2); border-left: 3px solid var(--gold); border-radius: 4px 12px 12px 4px; padding: 10px 14px; display: flex; flex-direction: column; gap: 3px } .portal-caso.enc { opacity: .7 } .portal-login .lado { background: var(--navy) }
.portal details summary { cursor: pointer } .portal .tj .j::before { content: "no processo: " }

/* prazos processuais: prazo interno × data fatal; listas roláveis da visualização única */
.prazo-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.prazo-caixa { border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border: 1px solid var(--line) }
.prazo-caixa small { font: 700 11px/1 var(--body); letter-spacing: .6px; text-transform: uppercase; color: var(--ink-soft) } .prazo-caixa b { font: 700 24px/1.15 var(--body); font-variant-numeric: tabular-nums } .prazo-caixa span { font-size: 12.5px; color: var(--ink-soft) }
.prazo-caixa.interno { background: var(--warn-bg); border-color: transparent } .prazo-caixa.interno b { color: var(--warn) }
.prazo-caixa.fatal { background: var(--bad-bg); border-color: transparent } .prazo-caixa.fatal b { color: var(--bad) }
.pz-rolo { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface) }
.pz-linha { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-bottom: 1px solid var(--line) } .pz-linha:last-child { border-bottom: 0 } .pz-linha .cresce { flex: 1; min-width: 0 } .pz-linha > .xs.nowrap { padding-top: 2px; min-width: 68px }
.calendario .ev.fatal { background: var(--bad); color: #fff; font-weight: 700 }
@media (max-width: 760px) { .prazo-par { grid-template-columns: 1fr } }