/* Inter hospedada no proprio servidor (licenca OFL em static/fonts/): nada de
   Google Fonts, que entregaria o IP de cada usuario a um terceiro. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-wght.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-ext-wght.1ad231aac0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Farol Tributário — design system.
   Paleta: azul-noite (confiança/jurídico) + âmbar (o feixe do farol, usado
   só como acento de marca e estado ativo, nunca como cor semântica). */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f9fa;
  --border: #e6eaee;
  --border-forte: #ccd5dd;
  --ink: #16202a;
  --ink-soft: #4d5c6b;
  --ink-faint: #8391a0;

  --accent: #14496b;
  --accent-hover: #0e3752;
  --accent-soft: #e5edf3;

  --beam: #d9892a;
  --beam-soft: #fbf0e0;

  --nav-bg: #0f2739;
  --nav-bg-2: #16344a;
  --nav-ink: #a9bccc;
  --nav-ink-forte: #ffffff;

  --good: #1f7a4d;
  --good-soft: #e2f2e9;
  --warn: #99701a;
  --warn-soft: #f8eed6;
  --bad: #a83232;
  --bad-soft: #f9e5e5;
  --neutral-pill: #64748b;
  --neutral-pill-soft: #eaeef2;

  /* Sombra quase nula de proposito: com fundo branco, painel com sombra vira
     ruido. A separacao e feita por linha fina e por espaco. */
  --shadow-sm: none;
  --shadow: 0 4px 16px -8px rgba(16, 32, 45, .14);
  --radius: 10px;
  --radius-sm: 7px;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;

  --lateral-w: 232px;
}

/* O escuro vale quando o sistema pede E o usuario nao escolheu o claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --bg: #10151a;
    --surface: #171e25;
    --surface-2: #1e262e;
    --border: #2c3841;
    --border-forte: #3b4954;
    --ink: #e8edf1;
    --ink-soft: #aebac5;
    --ink-faint: #7b8894;

    --accent: #7fb0d6;
    --accent-hover: #9ac4e4;
    --accent-soft: #1b2c39;

    --beam: #e2a34a;
    --beam-soft: #2c2113;

    --nav-bg: #0c1620;
    --nav-bg-2: #14232f;

    --good: #5fbc8b;
    --good-soft: #162c21;
    --warn: #cfa54e;
    --warn-soft: #2e2513;
    --bad: #dd7f7f;
    --bad-soft: #331c1c;
    --neutral-pill: #94a3b1;
    --neutral-pill-soft: #232c34;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 22px -8px rgba(0, 0, 0, .6);
  }
}

/* mesma paleta quando a escolha e explicita, em qualquer sistema */
:root[data-tema="escuro"] {
  color-scheme: dark;
    --bg: #10151a;
    --surface: #171e25;
    --surface-2: #1e262e;
    --border: #2c3841;
    --border-forte: #3b4954;
    --ink: #e8edf1;
    --ink-soft: #aebac5;
    --ink-faint: #7b8894;

    --accent: #7fb0d6;
    --accent-hover: #9ac4e4;
    --accent-soft: #1b2c39;

    --beam: #e2a34a;
    --beam-soft: #2c2113;

    --nav-bg: #0c1620;
    --nav-bg-2: #14232f;

    --good: #5fbc8b;
    --good-soft: #162c21;
    --warn: #cfa54e;
    --warn-soft: #2e2513;
    --bad: #dd7f7f;
    --bad-soft: #331c1c;
    --neutral-pill: #94a3b1;
    --neutral-pill-soft: #232c34;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 22px -8px rgba(0, 0, 0, .6);
  }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.22; text-wrap: balance; }
h1 { font-size: 25px; margin: 0 0 6px; letter-spacing: -.02em; font-weight: 650; }
h2 { font-size: 17px; margin: 32px 0 12px; font-weight: 650; letter-spacing: -.01em; }
h3 { font-size: 11.5px; margin: 22px 0 8px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

/* ================= layout ================= */
.app { display: flex; min-height: 100vh; }
.app > main { flex: 1; min-width: 0; padding: 34px 38px 80px; max-width: 1180px; }

.avulso { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; }
.avulso > main { width: 100%; max-width: 380px; }

/* ================= marca ================= */
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca:hover { text-decoration: none; }
.marca-icone { width: 26px; height: 26px; flex: none; }
.marca-icone .feixe { fill: var(--beam); opacity: .34; }
.marca-icone .lanterna { fill: var(--beam); }
.marca-icone .torre, .marca-icone .base { fill: var(--nav-ink-forte); }
.marca-texto { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; color: var(--nav-ink-forte); line-height: 1.1; }
.marca-texto em { display: block; font-style: normal; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--nav-ink); }

.marca-grande { flex-direction: column; text-align: center; gap: 12px; }
.marca-grande .marca-icone { width: 46px; height: 46px; }
.marca-grande .marca-texto { font-size: 22px; color: var(--ink); }
.marca-grande .marca-texto em { font-size: 11.5px; color: var(--ink-faint); }
.marca-grande .marca-icone .torre, .marca-grande .marca-icone .base { fill: var(--accent); }

/* ================= sidebar ================= */
.lateral {
  width: var(--lateral-w);
  flex: none;
  background: var(--nav-bg);
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
  gap: 26px;
  position: sticky;
  top: 0;
  height: 100vh;
  /* o menu cresceu: em janela baixa os itens passavam do fim do fundo escuro.
     Agora a barra rola por dentro, sempre com o fundo inteiro */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.lateral > .marca { padding: 0 10px; }
.lateral nav { display: flex; flex-direction: column; gap: 1px; }
.lateral nav a {
  color: var(--nav-ink);
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: background .12s, color .12s;
}
.lateral nav a:hover { background: var(--nav-bg-2); color: var(--nav-ink-forte); text-decoration: none; }
.lateral nav a.ativo { background: var(--nav-bg-2); color: var(--nav-ink-forte); border-left-color: var(--beam); font-weight: 600; }
.nav-grupo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5c7387;
  padding: 16px 12px 5px;
}

/* janela baixa (notebook): menu mais compacto, cabe sem rolar na maioria */
@media (min-width: 821px) and (max-height: 900px) {
  .lateral { gap: 14px; padding-top: 16px; }
  .lateral nav a { padding: 6px 12px; }
  .nav-grupo { padding: 10px 12px 3px; }
}

.lateral-rodape { margin-top: auto; border-top: 1px solid rgba(255,255,255,.09); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.escritorio { padding: 0 12px; display: flex; flex-direction: column; }
.escritorio-nome { color: var(--nav-ink-forte); font-size: 13px; font-weight: 600; }
.escritorio-trf { color: #5c7387; font-size: 11px; letter-spacing: .04em; }
button.sair {
  width: 100%; background: transparent; border: 1px solid rgba(255,255,255,.16);
  color: var(--nav-ink); font-size: 12.5px; font-weight: 600; padding: 7px 12px;
}
button.sair:hover { background: var(--nav-bg-2); border-color: rgba(255,255,255,.28); color: var(--nav-ink-forte); }

@media (max-width: 820px) {
  .app { flex-direction: column; }
  .lateral { width: auto; height: auto; position: static; flex-direction: row; align-items: center; gap: 16px; padding: 12px 16px; overflow-x: auto; }
  .lateral nav { flex-direction: row; gap: 4px; }
  .lateral nav a { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
  .lateral nav a.ativo { border-left: none; border-bottom-color: var(--beam); }
  .nav-grupo { display: none; }
  .lateral-rodape { margin-top: 0; margin-left: auto; border-top: none; flex-direction: row; align-items: center; }
  .escritorio { display: none; }
  .app > main { padding: 22px 18px 60px; }
}

/* No tablet a lateral vira uma faixa horizontal e cabe. No CELULAR nao: sao 18
   links numa fita de 1.681px dentro de uma tela de 375px, e o advogado rola as
   cegas ate achar "Casos". Aqui a navegacao quebra em linhas - fica mais alta,
   mas tudo aparece de uma vez, que e o que importa num telefone. */
@media (max-width: 560px) {
  .lateral { flex-wrap: wrap; align-items: flex-start; overflow-x: visible;
             gap: 10px; }
  .lateral nav { flex-wrap: wrap; width: 100%; gap: 2px 14px; }
  .lateral nav a { padding: 5px 0; border-bottom-width: 2px; }
  .lateral-rodape { margin-left: 0; width: 100%; }
}

/* ================= cabeçalho de página ================= */
.pagina-topo { margin-bottom: 24px; }
.pagina-topo .subtitulo { margin-bottom: 0; }
.subtitulo { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 20px; max-width: 78ch; }

/* ================= painéis / cards ================= */
.painel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.card-link {
  display: block;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  color: var(--ink);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.card-link:hover { border-color: var(--border-forte); box-shadow: var(--shadow); transform: translateY(-1px); text-decoration: none; }
.card-link .titulo { font-weight: 650; margin-bottom: 5px; font-size: 15px; }
.card-link .desc { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }

/* números de destaque */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0 4px; }
.metrica { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.metrica .valor { font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metrica .rotulo { font-size: 11.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-top: 2px; }

/* ================= formulários ================= */
form.toolbar {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 18px 20px; margin-bottom: 20px;
}
form.toolbar.painel { margin-bottom: 20px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > label { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.campo-largo { flex: 1 1 260px; }
.campo-vertical { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.campo-ajuda { font-size: 12px; color: var(--ink-faint); }

input[type=text], input[type=search], input[type=email], input[type=password], input[type=file], input[type=number], input[type=date], select, textarea {
  font-family: inherit; font-size: 14px; padding: 8px 11px;
  border: 1px solid var(--border-forte); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); min-width: 190px; width: 100%;
}
select { min-width: 160px; }
textarea { min-height: 120px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.checkboxes { display: flex; flex-direction: column; gap: 7px; }
.checkboxes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 6px 16px; }
.checkboxes label, .checkboxes-grade label {
  display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 400; color: var(--ink); cursor: pointer;
}
.checkboxes input, .checkboxes-grade input { flex: none; accent-color: var(--accent); }

button, input[type=submit] {
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 9px 20px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer;
  transition: background .12s;
}
button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.secundario { background: var(--surface); color: var(--accent); border-color: var(--border-forte); }
button.secundario:hover { border-color: var(--accent); background: var(--accent-soft); }
form.inline-btn { display: inline; }
.acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
a.botao-link { font-size: 12.5px; font-weight: 600; }

/* ================= tabelas ================= */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint); padding: 11px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.cnpj, td.numero { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }
td.numero { text-align: right; }
th.numero { text-align: right; }

/* ================= pills ================= */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 10px 4px; border-radius: 100px; white-space: nowrap;
  /* Sem o max-width, um selo de texto longo ("nao confirmado - sem CADASTUR
     Regular · CNAE secundario") media 449px e empurrava a pagina inteira para
     o lado num celular de 375px. */
  max-width: 100%;
}
@media (max-width: 760px) {
  /* no celular o selo quebra em duas linhas em vez de esticar a tela */
  .pill { white-space: normal; }
}
.pill-contatado, .pill-encerrado, .pill-neutro { background: var(--neutral-pill-soft); color: var(--neutral-pill); }
.pill-em_negociacao, .pill-avaliar { background: var(--warn-soft); color: var(--warn); }
.pill-cliente_fechado, .pill-aplicavel { background: var(--good-soft); color: var(--good); }
.pill-processo_ajuizado { background: var(--accent-soft); color: var(--accent); }
.pill-alerta, .pill-desfavoravel { background: var(--bad-soft); color: var(--bad); }
.pill-favoravel { background: var(--good-soft); color: var(--good); }
.pill-dividido { background: var(--warn-soft); color: var(--warn); }
.pill-pendente { background: var(--neutral-pill-soft); color: var(--neutral-pill); }
.pill-marca { background: var(--beam-soft); color: var(--beam); }

/* ================= alertas ================= */
.alerta { border-left: 3px solid; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 13px 17px; margin: 16px 0; font-size: 13.5px; }
.alerta-info { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.alerta-aviso { background: var(--warn-soft); border-color: var(--warn); color: var(--ink); }
.alerta-erro { background: var(--bad-soft); border-color: var(--bad); color: var(--ink); }
.alerta-ok { background: var(--good-soft); border-color: var(--good); color: var(--ink); }
.alerta code { font-family: var(--font-mono); font-size: 12.5px; background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }

/* ================= checklist ================= */
ul.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
ul.checklist li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.marca-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex: none; font-size: 11px;
}
.marca-check.feito { background: var(--good-soft); color: var(--good); }
.marca-check.pendente { background: var(--surface-2); color: var(--ink-faint); border: 1px solid var(--border-forte); }

/* ================= lista de empresas ================= */
.lista-empresas { display: flex; flex-direction: column; gap: 12px; }
.linha-empresa { padding: 16px 20px; margin-bottom: 0; }
.linha-empresa-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.linha-empresa-nome { font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
.linha-empresa-cnpj { color: var(--ink-faint); font-size: 12px; margin-left: 10px; font-family: var(--font-mono); }
details { margin-top: 10px; }
summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸ "; }
details[open] > summary::before { content: "▾ "; }
.detalhes-grid {
  display: grid; grid-template-columns: max-content 1fr; gap: 5px 16px;
  margin: 12px 0 0; font-size: 12.5px;
}
.detalhes-grid dt { color: var(--ink-faint); }
.detalhes-grid dd { margin: 0; color: var(--ink); }

/* ================= diagnóstico ================= */
.diag-item {
  border-left: 3px solid var(--border-forte);
  padding: 12px 0 12px 16px; margin-top: 14px;
}
.diag-item.diag-aplicavel { border-color: var(--good); }
.diag-item.diag-avaliar { border-color: var(--warn); }
.diag-item.diag-nao_aplica { border-color: var(--border); opacity: .6; }
.diag-item-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.diag-tese { font-weight: 650; font-size: 14.5px; }
a.diag-tese { color: var(--ink); }
a.diag-tese:hover { color: var(--accent); }
.diag-status { font-size: 13px; color: var(--ink-soft); margin: 5px 0 0; }
.diag-meta { font-size: 12px; color: var(--ink-faint); margin: 4px 0 0; }

/* ================= utilidades ================= */
.vazio { color: var(--ink-faint); font-style: italic; padding: 26px 0; }
.contagem { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 14px; }
.mono { font-family: var(--font-mono); }

/* ================= mapa de oportunidades ================= */
:root {
  --mapa-1: #dde5ec; --mapa-2: #a8c2d6; --mapa-3: #6e97b8;
  --mapa-4: #3d6b91; --mapa-5: #14496b;
}
/* O escuro vale quando o sistema pede E o usuario nao escolheu o claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --mapa-1: #2b3b47; --mapa-2: #3a5f79; --mapa-3: #4e82a4;
    --mapa-4: #5590b5; --mapa-5: #7fb0d6;
  }
}
.mapa-bloco { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .mapa-bloco { grid-template-columns: 1fr; } }
.mapa-svg { display: flex; flex-direction: column; align-items: center; }
svg.mapa-br { width: 100%; height: auto; max-height: 62vh; }
svg.mapa-br path { transition: fill .15s; }
.mapa-legenda { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-faint); margin-top: 6px; }
.mapa-legenda i { width: 26px; height: 10px; border-radius: 2px; display: inline-block; }
.faixa-1 { background: var(--mapa-1); } .faixa-2 { background: var(--mapa-2); }
.faixa-3 { background: var(--mapa-3); } .faixa-4 { background: var(--mapa-4); }
.faixa-5 { background: var(--mapa-5); }

.mapa-ranking { max-height: 62vh; overflow-y: auto; }
ul.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
ul.barras a { display: grid; grid-template-columns: var(--barra-rotulo, 26px) 1fr auto; align-items: center; gap: 9px; padding: 3px 5px; border-radius: 5px; color: var(--ink); font-size: 12.5px; }
ul.barras a:hover { background: var(--surface-2); text-decoration: none; }
ul.barras .destaque a { background: var(--beam-soft); font-weight: 650; }
.barra-uf { font-weight: 700; font-size: 11.5px; color: var(--ink-soft); }
.barra-trilho { background: var(--surface-2); border-radius: 3px; height: 9px; overflow: hidden; }
.barra-preenche { display: block; height: 100%; min-width: 2px; border-radius: 3px; }
.barra-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--ink-soft); }

/* lista de barras com rotulo longo (nome de tese, nao sigla de UF) */
ul.barras.rotulo-longo { --barra-rotulo: minmax(0, 15em); }
ul.barras.rotulo-longo .barra-uf { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { ul.barras.rotulo-longo { --barra-rotulo: minmax(0, 8em); } }

/* ================= favoritar ================= */
button.favoritar {
  background: none; border: none; padding: 2px 6px; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--border-forte);
  transition: color .12s, transform .08s;
}
button.favoritar:hover { color: var(--beam); transform: scale(1.15); }
button.favoritar.ativo { color: var(--beam); }
button.favoritar.erro { color: var(--bad); }
/* Versao com texto (diagnostico): a estrela sozinha passava despercebida. */
button.favoritar.com-rotulo {
  font-size: 13.5px; font-weight: 700; padding: 7px 12px; color: var(--beam);
  border: 1px solid var(--beam); border-radius: var(--radius-sm);
}
button.favoritar.com-rotulo:hover { transform: none; background: var(--beam); color: #23180a; }
button.favoritar.com-rotulo.ativo { background: var(--beam); color: #23180a; }
.linha-empresa-topo .favoritar { margin-right: 2px; }
td.acao-favoritar { width: 1%; padding-right: 0; }

/* Comparativo MS x acao ordinaria (_via_processual.html) */
.duas-vias { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
.duas-vias > div { border-left: 3px solid var(--beam); padding-left: 12px; }
.duas-vias .checklist li { font-size: 13px; }
.marca-check.contra { background: var(--bad-soft); color: var(--bad); }
@media (max-width: 760px) { .duas-vias { grid-template-columns: 1fr; } }

/* Paginacao das listas de empresas (_paginacao.html) */
.paginacao { display: flex; gap: 16px; align-items: center; justify-content: center;
             margin: 20px 0 4px; font-size: 13.5px; }
.paginacao a { font-weight: 600; }
.paginacao .desabilitado { color: var(--ink-faint); }

/* Consultor (screening/consultor.html) */
.consultor-pergunta { font-weight: 600; color: var(--ink); margin: 0 0 10px;
                      padding-left: 12px; border-left: 3px solid var(--beam); }
.consultor-resposta { margin: 0; font-size: 14.5px; line-height: 1.65; }

/* ================= página de planos =================
   O preço é o que o olho procura primeiro; os três limites vêm logo abaixo
   porque são eles que decidem a troca de plano. */
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
          margin: 4px 0 24px; align-items: start; }
.plano { position: relative; background: var(--surface); border: 1px solid var(--border);
         border-radius: var(--radius); box-shadow: var(--shadow-sm);
         padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.plano-destaque { border-color: var(--beam); box-shadow: 0 0 0 1px var(--beam), var(--shadow);
                  padding-top: 30px; }
.plano-atual { border-color: var(--good); }
.plano-selo { position: absolute; top: -11px; left: 24px; background: var(--beam);
              color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em;
              text-transform: uppercase; padding: 3px 10px 4px; border-radius: 100px; }
.plano-selo-atual { background: var(--good); left: auto; right: 24px; }
.plano-cabeca { display: flex; flex-direction: column; gap: 2px; }
.plano-nome { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.plano-para { font-size: 13px; color: var(--ink-faint); min-height: 40px; }
.plano-preco { margin: 0; display: flex; align-items: baseline; gap: 3px;
               font-size: 38px; font-weight: 700; letter-spacing: -.03em;
               line-height: 1; font-variant-numeric: tabular-nums; }
.plano-moeda { font-size: 16px; font-weight: 600; color: var(--ink-soft); }
.plano-mes { font-size: 14px; font-weight: 500; color: var(--ink-faint); }
.plano-limites { display: flex; gap: 16px; padding: 12px 0;
                 border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.plano-limites > div { display: flex; flex-direction: column; }
.plano-limites strong { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.plano-limites span { font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase;
                      letter-spacing: .05em; font-weight: 600; }
.plano-itens { gap: 9px; }
.plano-itens li { align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.plano-itens .marca-check { margin-top: 2px; }
.plano-item-fora { color: var(--ink-faint); }
.plano-acao { margin-top: auto; text-align: center; padding: 10px 20px;
              border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; }
.botao-cheio { background: var(--accent); color: #fff; border: 1px solid var(--accent);
               display: inline-block; padding: 10px 20px; border-radius: var(--radius-sm);
               font-size: 13.5px; font-weight: 600; }
.botao-cheio:hover { background: var(--accent-hover); text-decoration: none; }
a.botao-secundario { display: inline-block; background: var(--surface); color: var(--accent);
                     border: 1px solid var(--border-forte); padding: 10px 20px;
                     border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; }
a.botao-secundario:hover { border-color: var(--accent); background: var(--accent-soft);
                           text-decoration: none; }

@media (max-width: 900px) { .planos { grid-template-columns: 1fr; } }

/* Guia da tese (_guia_tese.html) */
.guia-blocos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 4px; }
.guia-blocos p { margin: 0; font-size: 13.5px; line-height: 1.6; }
.guia-analogia { font-style: italic; color: var(--ink-soft); }
.guia-perguntas { margin: 12px 0 0; }
.guia-perguntas dt { font-weight: 650; font-size: 13.5px; margin-top: 12px; }
.guia-perguntas dd { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 760px) { .guia-blocos { grid-template-columns: 1fr; } }

/* ================= faixa de escala (início) =================
   O número grande é o argumento de venda; fundo escuro pra ele não competir
   com os painéis brancos do resto da tela. */
.faixa-escala {
  background: var(--nav-bg); border-radius: var(--radius);
  padding: 26px 30px; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.faixa-escala-texto { display: flex; flex-direction: column; gap: 6px; max-width: 56ch; }
.faixa-escala h1 { margin: 0; color: var(--nav-ink-forte); font-size: 25px; }
.faixa-escala p { margin: 0; font-size: 13.5px; color: var(--nav-ink); }
.faixa-selo {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--beam);
}
.faixa-escala-acoes { display: flex; gap: 10px; flex: none; }
.botao-beam, .botao-vazado {
  font-size: 13.5px; font-weight: 600; padding: 10px 20px;
  border-radius: var(--radius-sm); white-space: nowrap;
}
.botao-beam { background: var(--beam); color: #16202a; }
.botao-beam:hover { background: #c57a22; text-decoration: none; }
.botao-vazado { color: var(--nav-ink-forte); border: 1px solid rgba(255,255,255,.22); }
.botao-vazado:hover { background: var(--nav-bg-2); text-decoration: none; }

/* o que exige ação, antes do que é só navegação */
.faixa-acao {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--beam); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 18px 22px; margin-bottom: 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.faixa-acao-texto { display: flex; align-items: center; gap: 14px; }
.faixa-acao-texto svg { width: 20px; height: 20px; flex: none; fill: none;
  stroke: var(--beam); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.faixa-acao-texto strong { display: block; font-size: 14.5px; font-weight: 650; }
.faixa-acao-texto span { font-size: 13px; color: var(--ink-soft); }
.faixa-acao > a { font-size: 13px; font-weight: 600; white-space: nowrap; }

.card-icone { width: 20px; height: 20px; margin-bottom: 10px; display: block;
  fill: none; stroke: var(--accent); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 820px) {
  .faixa-escala, .faixa-acao { flex-direction: column; align-items: flex-start; gap: 18px; }
  .faixa-escala h1 { font-size: 21px; }
}

/* situação da tese logo abaixo do seletor, onde a decisão é tomada */
.linha-maturidade { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                    margin: 0 0 18px; font-size: 13.5px; color: var(--ink-soft); }
.linha-maturidade a { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* estimativa de recuperação (tela do caso) */
.estimativa-valor { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 0; padding: 16px 18px; background: var(--accent-soft);
  border-radius: var(--radius); }
.estimativa-valor .rotulo { font-size: 11.5px; font-weight: 600; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .05em; }
.estimativa-valor strong { font-size: 27px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--accent); }
.estimativa-valor .conta { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
/* estimativa sem lastro documental: visualmente mais fraca, de propósito */
.estimativa-fraca { background: var(--surface-2); }
.estimativa-fraca strong { color: var(--ink-soft); font-size: 23px; }

/* link pra página da tese, no lugar dos painéis explicativos */
.linha-entender { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 20px; font-size: 13px; color: var(--ink-faint); }
.linha-entender svg { width: 15px; height: 15px; flex: none; fill: none;
  stroke: var(--ink-faint); stroke-width: 1.8; stroke-linecap: round; }
.linha-entender a { font-weight: 600; }

/* página da tese */
.tese-porque { font-size: 15px; line-height: 1.6; margin: 0 0 10px; max-width: 74ch; }
.tese-analogia { font-size: 14.5px; margin: 0 0 6px; max-width: 74ch; }
.tese-colunas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
.card-rodape { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .tese-colunas { grid-template-columns: 1fr; } }

/* ================= limpeza =================
   O que deixava o site pesado não era cor, era acúmulo: todo bloco era um
   cartão com borda, sombra e fundo próprio, empilhado sobre fundo cinza. Com
   fundo branco, a separação passa a ser espaço + uma linha fina. */

.painel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 22px 24px;
  margin-bottom: 16px;
}

/* Alerta informativo não precisa de bloco colorido: a barra à esquerda basta.
   O fundo tinto fica só no que é erro de verdade. */
.alerta { padding: 11px 0 11px 15px; margin: 14px 0; background: none; border-radius: 0; }
.alerta-info { border-color: var(--accent); }
.alerta-aviso { border-color: var(--warn); }
.alerta-ok { border-color: var(--good); }
.alerta-erro { background: var(--bad-soft); border-color: var(--bad); padding: 11px 15px;
               border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* métrica: número e rótulo, sem moldura */
.metrica { border: none; background: none; padding: 0; }
.metricas { gap: 28px; margin: 20px 0 6px; }

/* cabeçalho de painel e de seção, no lugar de um h2 solto */
.painel-cabeca { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; }
.painel-cabeca strong { font-size: 14.5px; font-weight: 650; }
.painel-cabeca span { font-size: 12px; color: var(--ink-faint); }
.secao-cabeca { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 32px 0 12px; }
.secao-cabeca h2 { margin: 0; }
.secao-cabeca a { font-size: 13px; font-weight: 600; }

/* cartão de link: sem sombra, a borda escurece no hover */
.card-link { box-shadow: none; }
.card-link:hover { box-shadow: none; border-color: var(--accent); transform: none; }

/* tabela: sem moldura externa, só as linhas internas */
.tabela-wrap { border: none; border-radius: 0; box-shadow: none; }
thead th { background: none; border-bottom: 1px solid var(--border-forte); }
tbody tr:hover { background: var(--surface-2); }

form.toolbar { box-shadow: none; }

/* botão de tema, no pé da sidebar */
.tema-troca { display: flex; gap: 6px; padding: 0 12px; }
.tema-troca button {
  flex: 1; background: transparent; border: 1px solid rgba(255,255,255,.16);
  color: var(--nav-ink); font-size: 11.5px; font-weight: 600; padding: 6px 8px;
  border-radius: var(--radius-sm); cursor: pointer;
}
.tema-troca button:hover { background: var(--nav-bg-2); color: var(--nav-ink-forte);
  border-color: rgba(255,255,255,.28); }
.tema-troca button[aria-pressed="true"] { background: var(--nav-bg-2);
  color: var(--nav-ink-forte); border-color: var(--beam); }

/* ================= barra superior =================
   Canto superior direito é onde se procura controle de conta, e o espaço
   estava vazio. Tema e sessão vivem aqui, não no pé da sidebar. */
.topo { display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  margin: -10px 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.topo-usuario { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.topo .tema-troca { padding: 0; gap: 0; margin-right: auto; }
.topo .tema-troca button {
  flex: none; background: none; border: 1px solid var(--border);
  color: var(--ink-faint); font-size: 11.5px; font-weight: 600;
  padding: 5px 9px; border-radius: 0; margin-left: -1px; min-width: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.topo .tema-troca button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.topo .tema-troca button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.topo .tema-troca button svg { width: 14px; height: 14px; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topo .tema-troca button:hover { color: var(--ink); border-color: var(--border-forte); background: var(--surface-2); }
.topo .tema-troca button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent);
  background: var(--accent-soft); position: relative; z-index: 1; }
.topo button.sair { width: auto; background: none; border: 1px solid var(--border);
  color: var(--ink-soft); font-size: 12.5px; padding: 6px 14px; }
.topo button.sair:hover { border-color: var(--border-forte); background: var(--surface-2); color: var(--ink); }

@media (max-width: 820px) {
  .topo { margin-top: 0; }
  .topo-usuario { display: none; }
}

/* estado clicável no mapa */
.uf-clicavel { cursor: pointer; transition: filter .12s; }
.uf-clicavel:hover { filter: brightness(1.18) saturate(1.2); }
.uf-clicavel:focus-visible { outline: none; stroke: var(--beam); stroke-width: 12000; paint-order: stroke; }
.mapa-alvo { display: contents; }

/* checklist: item que só se marca x item que sobe arquivo */
.item-checklist { align-items: baseline; }
.botao-check {
  width: 19px; height: 19px; min-width: 19px; padding: 0; flex: none;
  border-radius: 5px; font-size: 12px; font-weight: 700; line-height: 1;
  background: var(--surface); border: 1px solid var(--border-forte);
  color: var(--ink-faint); display: inline-flex; align-items: center; justify-content: center;
}
.botao-check:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.botao-check.checado { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.botao-check.checado:hover { background: var(--good-soft); border-color: var(--good); }

/* Barra de progresso ao gerar peca (ver static/js/gerando.js). Indeterminada
   de proposito: a espera e no servidor e nao ha percentual real a mostrar. */
.gerando { margin: 10px 0 4px; }
.gerando-barra {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.gerando-barra span {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: 2px;
  background: var(--accent);
  animation: gerando-desliza 1.1s ease-in-out infinite;
}
.gerando-barra.gerando-fim span {
  width: 100%;
  animation: none;
}
.gerando-etapa {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}
@keyframes gerando-desliza {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(265%); }
}
@media (prefers-reduced-motion: reduce) {
  .gerando-barra span { animation: none; width: 100%; opacity: .55; }
}

/* Explicacao longa da tese (ver explicacoes.py). Coluna estreita de proposito:
   e texto pra ler, nao painel de dados. */
.explicacao > p, .explicacao details > * { max-width: 72ch; }
.explicacao-secao { border-top: 1px solid var(--border); padding: 10px 0; }
.explicacao-secao:last-child { padding-bottom: 0; }
.explicacao-secao > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent); }
.explicacao-secao[open] > summary { margin-bottom: 10px; }
.explicacao-resumo {
  font-size: 15px;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  margin: 0 0 18px;
}
.explicacao h3 {
  font-size: 14px;
  margin: 22px 0 8px;
  color: var(--accent);
}
.explicacao p { margin: 0 0 10px; line-height: 1.65; }
.explicacao-passos { margin: 8px 0 0; padding-left: 20px; }
.explicacao-passos li { margin-bottom: 7px; line-height: 1.55; }

/* Frentes de defesa em execucao fiscal */
.frente { padding: 14px 0; border-top: 1px solid var(--border); }
.frente:first-of-type { border-top: none; padding-top: 4px; }
.frente h3 {
  font-size: 14px;
  margin: 0 0 8px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.frente p { margin: 0 0 8px; line-height: 1.6; max-width: 74ch; }

/* Escolha da tese no teste gratuito: cartao que e um radio grande. O radio
   nativo fica escondido, mas continua sendo ele que recebe foco e teclado. */
.card-escolha { display: block; cursor: pointer; }
.card-escolha input { position: absolute; opacity: 0; width: 0; height: 0; }
.card-escolha-corpo {
  display: block;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  height: 100%;
}
.card-escolha:hover .card-escolha-corpo { border-color: var(--border-forte); }
.card-escolha input:checked + .card-escolha-corpo {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent-soft);
}
.card-escolha input:focus-visible + .card-escolha-corpo {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.card-escolha-corpo .titulo { display: block; font-weight: 600; margin-bottom: 4px; }
.card-escolha-corpo .desc {
  display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 8px;
}
.campo-erro { color: var(--bad); font-size: 13px; margin: 4px 0 0; }

/* Rodape com as politicas. Discreto: e obrigacao legal, nao navegacao. */
.rodape {
  max-width: 1180px;
  margin: 36px auto 24px;
  padding: 14px 22px 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-faint);
  display: flex;
  gap: 8px;
}
.rodape a { color: var(--ink-faint); }
.rodape a:hover { color: var(--accent); }

/* O que o sistema leu dentro de um anexo, sob a linha do documento. */
.linha-leitura > td { background: var(--surface-2, transparent); padding-top: 4px; }
.lista-leitura { list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 18px; }
.lista-leitura li { font-size: .92em; }

/* Tela do caso: status ao lado do titulo em vez de sozinho num painel. */
.caso-cabecalho { display: flex; justify-content: space-between;
  align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.caso-status { min-width: 190px; margin: 0; }
.acoes-peca { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* gerando.js insere a barra logo depois do form; como aqui o pai e flex, ela
   viraria um item espremido ao lado dos botoes. Ocupa a linha inteira. */
.acoes-peca > .gerando { flex-basis: 100%; }

/* Dado secundario dentro da celula: CNPJ e contato sob o nome, "em cobranca"
   sob o valor. Tira colunas da tabela sem tirar informacao da tela. */
.celula-meta { display: block; font-size: 11.5px; color: var(--ink-faint);
  font-weight: 400; margin-top: 2px;
  /* e-mail corporativo longo empurrava a tabela para fora da tela */
  overflow-wrap: anywhere; }
/* nome quebra linha: com o nowrap geral, razão social longa invadia a coluna do município */
.tabela-devedores td:nth-child(2) { min-width: 260px; max-width: 360px; white-space: normal; }
/* .numero nao quebra linha (certo para o valor); a meta embaixo dele pode,
   mas so se faltar espaco de verdade - com max-width a coluna era espremida e
   a meta virava tres linhas mesmo sobrando largura na tabela. */
.tabela-devedores td.numero { min-width: 250px; }
.tabela-devedores td.numero .celula-meta { white-space: normal; }
.linha-resumo { display: flex; justify-content: space-between;
  align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 18px 0 4px; }

/* Competencia que caiu pela prescricao: continua na tabela, apagada. */
.linha-prescrita td { opacity: .55; }

/* ================= apresentacao publica (/) ================= */
/* A pagina de venda usa o mesmo cabecalho do login, mas e longa e larga: o
   .avulso sozinho centraliza verticalmente e corta em 380px. */
.avulso-largo { justify-content: flex-start; padding-top: 34px; }
.avulso-largo > main { max-width: 1060px; }

.capa {
  background: var(--nav-bg); border-radius: var(--radius);
  padding: 34px 34px 30px; margin-bottom: 26px;
}
.capa-texto { display: flex; flex-direction: column; gap: 12px; max-width: 64ch; }
.capa h1 { margin: 0; color: var(--nav-ink-forte); font-size: 28px; line-height: 1.22; }
.capa-chamada { margin: 0; font-size: 15px; color: var(--nav-ink); }
.capa-chamada strong { color: var(--nav-ink-forte); }
.capa .diag-meta { color: var(--nav-ink); opacity: .82; margin: 0; }
.capa-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.secao-titulo { font-size: 17px; margin: 30px 0 12px; }
/* Os quatro passos sao uma sequencia: 3+1 quebrado no meio le mal. Com
   minmax de 200px eles cabem em uma linha so a 1060px, e caem para 2x2 no
   tablet em vez de 3+1. */
.grid-passos { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.avulso-largo .grid-cards h3 { margin: 0 0 6px; font-size: 14.5px; }
.avulso-largo .grid-cards p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

.capa-fecho {
  background: var(--nav-bg); border-radius: var(--radius); padding: 26px 30px;
  margin: 26px 0 10px; display: flex; align-items: center;
  justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.capa-fecho h2 { color: var(--nav-ink-forte); font-size: 19px; }
.capa-fecho p { color: var(--nav-ink); font-size: 13.5px; max-width: 60ch; }

@media (max-width: 760px) {
  .capa, .capa-fecho { padding: 22px 20px; }
  .capa h1 { font-size: 23px; }
}

/* ================= processo e prazos ================= */
  padding: 5px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }

/* O atraso tem de saltar aos olhos: e o unico defeito desta tela que custa
   dinheiro. Cor E rotulo - quem nao distingue vermelho le "em atraso". */
.prazo-vencido { color: var(--bad); font-weight: 600; }  /* usado no painel do dono */
.prazo-vencido a { color: inherit; }

.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 14px;
  border-left: 2px solid var(--border); }
.linha-tempo li { position: relative; padding: 0 0 12px 12px; }
.linha-tempo li::before { content: ""; position: absolute; left: -19px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.linha-tempo-data { display: block; font-size: 11.5px; font-weight: 600;
  color: var(--ink-faint); letter-spacing: .04em; }

/* O cartao estreito do login (.avulso, 380px) servia para TODA pagina de quem
   nao esta logado - inclusive a de precos, com tres planos lado a lado, e a de
   cadastro, com duas colunas. O assinante via essas telas certas (layout .app,
   largo) e o visitante via esmagadas: exatamente ao contrario de quem precisa
   ser convencido. Dai os dois modificadores. */
.avulso-texto { justify-content: flex-start; padding-top: 34px; }
.avulso-texto > main { max-width: 760px; }   /* linha legivel para texto longo */

/* Carteira: a coluna de oportunidades tem ate nove pilulas. Em linha unica ela
   empurrava a tabela para fora da tela. */
.celula-oportunidades { display: flex; flex-wrap: wrap; gap: 4px;
  max-width: 460px; }

/* ================= painel do dono ================= */
.painel-numeros { display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.painel-numeros.compacto { margin: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.numero-cartao { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; display: flex;
  flex-direction: column; gap: 2px; }
.numero-cartao .rotulo { font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); }
.numero-cartao strong { font-size: 26px; line-height: 1.15; }
.numero-cartao .nota { font-size: 12px; color: var(--ink-soft); }
.numero-cartao.destaque { background: var(--nav-bg); border-color: var(--nav-bg); }
.numero-cartao.destaque .rotulo { color: var(--nav-ink); }
.numero-cartao.destaque strong { color: var(--beam); }
.numero-cartao.destaque .nota { color: var(--nav-ink); }

/* A fila do "precisa de voce": alto e o que perde dinheiro hoje. */
.lista-atencao { list-style: none; margin: 0; padding: 0; }
.lista-atencao li { display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0 7px 12px; border-left: 3px solid var(--border);
  border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.lista-atencao li:last-child { border-bottom: none; }
.lista-atencao .atencao-alto { border-left-color: var(--bad); }
.lista-atencao .atencao-medio { border-left-color: var(--beam); }
.lista-atencao span { color: var(--ink-soft); font-size: 13.5px; }

.situacao-vencido { background: var(--bad); color: #fff; }
.situacao-vencendo { background: var(--beam); color: #17232c; }
.situacao-teste { background: var(--accent-soft); color: var(--accent); }
.tabela-escritorios td { vertical-align: top; }
.acoes-painel { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.acoes-painel select { min-width: 92px; }

/* Avisos de tese no topo das telas de prospeccao (maturidade + periodo).
   Antes eram dois paragrafos com margin-top negativa, que se sobrepunham
   quando o primeiro quebrava em duas linhas. */
.avisos-tese { display: flex; flex-direction: column; gap: 8px; max-width: 82ch; }
.avisos-tese p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.avisos-tese .pill { margin-right: 6px; vertical-align: baseline; }

/* Select ainda nao liberado no encadeamento tese -> UF -> municipio. */
.toolbar select:disabled { opacity: .5; cursor: not-allowed; }

/* Faixa "falta escolher a tese" - conta de teste que pulou a escolha. Fica em
   toda tela porque a tela de escolha so era oferecida no cadastro. */
.faixa-escolher-tese {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: var(--beam-soft, #fff4e0); border: 1px solid var(--beam);
  border-radius: var(--radius); padding: 14px 18px; margin: 0 0 22px;
  font-size: 13.5px; line-height: 1.5;
}
.faixa-escolher-tese .botao-beam { flex: none; white-space: nowrap; }

/* ================= guia de execucao fiscal =================
   A tela era uma coluna de 68ch encostada na esquerda. Os cartoes ocupam a
   largura toda da area de conteudo, e cada um mantem a linha curta por dentro
   - que e o que a leitura pede, sem desperdicar a tela. */
.guia-grade {
  display: grid; gap: 16px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.guia-cartao { margin: 0; }
.guia-cartao h3 {
  margin: 0 0 10px; font-size: 14.5px; line-height: 1.4;
  color: var(--accent); text-transform: none; letter-spacing: normal;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.guia-cartao p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.62; }
.guia-cartao p:last-child { margin-bottom: 0; }
.guia-numero {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--beam); color: #1a1206; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
}

/* Linha do tempo do processo: uma faixa, nao uma coluna. */
.guia-linha {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.guia-linha li {
  border-top: 3px solid var(--beam); padding: 12px 14px;
  background: var(--surface); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-sm);
}
.guia-linha strong { display: block; font-size: 13.5px; line-height: 1.35; }
.guia-linha .guia-prazo {
  display: inline-block; margin: 4px 0 8px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--beam);
}
.guia-linha p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }

/* ================= consultor: dois blocos de resposta =================
   O primeiro saiu do catalogo conferido; o segundo, de pesquisa de IA. Eles
   precisam ser visualmente INCONFUNDIVEIS - se o advogado copiar do segundo
   achando que e do primeiro, o produto entregou o defeito que existe pra
   evitar. Dai a borda, o selo e a cor diferentes. */
.bloco-resposta { border-left: 3px solid; padding: 2px 0 2px 14px; margin-top: 14px; }
.bloco-conferido { border-color: var(--good, var(--beam)); }
.bloco-ia { border-color: var(--ink-faint); }
.selo-fonte {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 4px; margin-bottom: 8px;
}
.selo-conferido { background: var(--good-soft, var(--beam-soft)); color: var(--good, var(--beam)); }
.selo-ia { background: var(--border); color: var(--ink-soft); }
.conferir-citacoes {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius);
  background: rgba(128,128,128,.08);
}
.conferir-citacoes .checklist { margin: 8px 0 0; }
.conferir-citacoes .checklist li { font-size: 13px; }
kbd {
  font-family: var(--font-mono); font-size: 11px; padding: 1px 5px;
  border: 1px solid var(--border-forte); border-bottom-width: 2px;
  border-radius: 4px; background: var(--surface);
}
.citacao-falsa { color: var(--bad); font-weight: 600; }
.citacao-falsa .celula-meta { color: var(--bad); font-weight: 400; }

/* Painel do dono: busca e exclusao de escritorio. */
.busca-painel { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.busca-painel input { min-width: 220px; }
.excluir-escritorio { margin-top: 8px; }
.excluir-escritorio summary { font-size: 12px; color: var(--ink-faint); cursor: pointer; }
.excluir-escritorio summary:hover { color: var(--bad); }
.excluir-escritorio input[type="text"] { width: 100%; margin-bottom: 6px; font-size: 12.5px; }
button.perigo {
  background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600;
}
button.perigo:hover { filter: brightness(1.08); }

/* Material da primeira conversa (roteiro + apresentacao), na carteira e no caso. */
.abordagem-acoes {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border);
  /* dentro de .acoes, que e flex: sem isto o bloco vira mais um item na
     mesma linha e a estrela de favoritar fica pendurada do lado dos botoes */
  flex-basis: 100%;
}
.abordagem-rotulo {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-faint);
}

/* ================= alvo de toque no celular =================
   Medido em 15/09/2026 num aparelho de 375px: o <summary> ("Onde ajuizar",
   "Ver detalhes") tinha 19px de altura, e os links de navegacao 18px. No dedo
   isso vira erro de clique - o usuario toca, nao abre, e conclui que o site
   esta travado. No mouse 19px basta; no dedo, nao.

   So no celular: no desktop o alvo pequeno nao atrapalha e mexer no espacamento
   estragaria a densidade das telas de lista. */
@media (max-width: 760px) {
  summary {
    min-height: 40px;
    display: flex; align-items: center;
    /* area de toque maior sem empurrar o layout: o padding vertical some na
       margem negativa, entao o bloco continua ocupando o mesmo espaco */
    padding: 10px 0; margin: -10px 0;
  }
  .tema-troca button { min-height: 36px; }
  header.topo .sair { min-height: 36px; }
  /* link solto de navegacao (voltar, "ver a lista", paginacao, rodape) */
  .paginacao a, .linha-entender a, .voltar, .acoes > a,
  .rodape a, .subtitulo > a:only-child,
  /* telas de 16-17/09: "Voltar e ajustar" e "Editar na pagina da tese" na
     conferencia, e o "apagar" do catalogo do escritorio - mediam 16 a 24px */
  .acoes-peca > a, .diag-meta > a:only-child, button.botao-link {
    display: inline-flex; align-items: center; min-height: 36px;
  }
  /* o check do checklist: 19px no dedo errava o item de cima ou de baixo */
  .botao-check { min-width: 32px; min-height: 32px; }
}

/* Estado vazio que ensina o proximo passo, em vez de so constatar o vazio.
   Usado onde o usuario novo chega antes de ter dado nenhum. */
.vazio-com-saida p { margin: 0 0 10px; font-size: 13.5px; }
.vazio-com-saida .explicacao-passos { margin: 0 0 16px; }
.vazio-com-saida .explicacao-passos li { margin-bottom: 8px; font-size: 13.5px; }

/* Precedentes na conferência da peça. Duas colunas de significado oposto —
   citar e enfrentar — precisam se distinguir sem depender só do título, que
   sai da vista assim que a lista cresce. */
.lista-precedentes { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.lista-precedentes li { margin-bottom: 6px; }
.lista-precedentes.lista-contra li::marker { color: var(--bad); }
.lista-precedentes.lista-favor li::marker { color: var(--good); }

/* Recibo da peça: o que entrou na geração. Lista de definição em duas colunas,
   apertada, porque vive dentro de uma linha de tabela. */
.linha-recibo td { border-top: none; padding-top: 0; }
.recibo { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px;
          margin: 10px 0 4px; font-size: 12.5px; }
.recibo dt { color: var(--ink-soft); }
.recibo dd { margin: 0; }
@media (max-width: 560px) { .recibo { grid-template-columns: 1fr; gap: 1px 0; }
                            .recibo dd { margin-bottom: 7px; } }

/* Selo de contexto no cabeçalho do caso: com que material a peça vai ser
   feita, numa linha só. Antes isso estava espalhado por quatro painéis. */
.selo-contexto { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }

/* Citação que já consta do catálogo conferido — distingue do que veio só da IA. */
.citacao-conhecida .celula-meta { color: var(--good); }

/* Botão com cara de link — ações pequenas dentro de uma lista (apagar item). */
button.botao-link { background: none; border: none; padding: 0 0 0 6px; color: var(--accent);
                    font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: none; }
button.botao-link:hover { text-decoration: underline; background: none; }

/* Prescrição correndo na tela inicial: é aviso de perda, não métrica. */
.painel-prescricao { border-left: 3px solid var(--warn); }

/* Novidades de tese: mudança de jurisprudência que pode mudar a conversa. */
.painel-novidades { border-left: 3px solid var(--accent); }
.novidade + .novidade { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.novidade-titulo { margin: 0 0 4px; }

/* Teses da reforma tributária: selo próprio e faixa explicativa. Cor distinta
   da maturidade de propósito - "reforma" diz de onde a tese vem, não a chance. */
.pill-reforma { background: var(--beam-soft); color: var(--beam); }
.pill-urgente { background: var(--bad-soft); color: var(--bad); font-weight: 700; }
.faixa-reforma { border: 1px solid var(--beam); border-left-width: 4px; background: var(--beam-soft);
                 border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 18px; }
.faixa-reforma p { margin: 0 0 6px; }
.faixa-reforma p:last-child { margin-bottom: 0; }
.faixa-reforma-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Prévia da assinatura em Meus dados: centralizada, como no fecho da peça. */
.assinatura-previa { text-align: center; font-family: Georgia, "Times New Roman", serif; line-height: 1.6; }

/* Número de processo CNJ inteiro na mesma linha (filtro sem_quebrar_processo). */
.sem-quebra { white-space: nowrap; }

/* titulo de painel sem o margin-top padrao do h2 (conferencia da peca) */
.painel-titulo { margin-top: 0; }

/* Aceite dos termos: caixa e texto na mesma linha, texto em caixa normal (o
   laco generico de formulario trata todo rotulo como label de campo). */
.campo > label.linha-aceite { display: flex; align-items: flex-start; gap: 8px; font-size: 13px;
                text-transform: none; letter-spacing: 0; font-weight: 400;
                color: var(--ink); cursor: pointer; }
.linha-aceite input { margin-top: 2px; }

/* Linha do Radar da reforma no catalogo: selo e texto na mesma linha, sem
   encavalar o paragrafo de cima (era margem negativa). */
.linha-radar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
               margin: 4px 0 0; font-size: 13.5px; color: var(--ink-soft); }

/* ================= atalhos em destaque =================
   Pedido do advogado: "botao destacado, algo mais visivel". Usado no menu
   (Criar peticao) e nas telas de carteira (Diagnostico por CNPJ) - as duas
   coisas que o usuario vem fazer e que estavam escondidas no fim da pagina. */
.botao-destaque {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--beam); color: #23180a; border: 1px solid var(--beam);
  padding: 10px 18px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 700;
}
.botao-destaque:hover { filter: brightness(1.06); text-decoration: none; }

.lateral nav a.nav-destaque {
  /* fundo ambar claro: o texto tem de ser escuro, senao fica ilegivel */
  background: var(--beam); color: #23180a; font-weight: 700;
  border-radius: var(--radius-sm); margin: 6px 0; padding-left: 10px;
}
.lateral nav a.nav-destaque:hover, .lateral nav a.nav-destaque.ativo { background: #f5b95c; color: #23180a; }

/* Lista "escolha de quem e a peca": nome a esquerda, botao a direita. */
.lista-escolha { display: flex; flex-direction: column; gap: 8px; }
.escolha-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-sm);
}
.escolha-linha .celula-meta { display: block; }

/* Acao destrutiva: some no meio dos links azuis se nao for vermelha. */
.botao-link.perigo { color: var(--bad); }
.avisos { margin-bottom: 16px; }

/* Aviso flutuante do favoritar (static/js/favoritos.js). */
.aviso-flutuante {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  background: var(--ink); color: var(--surface); padding: 10px 18px;
  border-radius: 999px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s;
}
.aviso-flutuante.aparecendo { opacity: 1; transform: translate(-50%, 0); }
.aviso-flutuante.erro { background: var(--bad); color: #fff; }

/* ================= editor da peca dentro do sistema =================
   Pedido do advogado: ler e ajustar a peticao sem precisar de Word. Cada
   paragrafo e um textarea que cresce sozinho; a "folha" imita o documento. */
.barra-peca {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px;
  position: sticky; top: 0; z-index: 20;
}
.folha {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 38px 46px; box-shadow: var(--shadow-sm);
  max-width: 900px;
}
.linha-peca {
  display: block; width: 100%; border: 1px solid transparent; background: none;
  resize: none; overflow: hidden; color: var(--ink); min-height: 0;
  font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.7;
  padding: 4px 6px; margin: 0 0 6px; border-radius: 4px; text-align: justify;
}
.linha-peca:hover { border-color: var(--border); }
.linha-peca:focus { border-color: var(--accent); outline: none; background: var(--surface-2); }
.linha-titulo { font-weight: 700; text-align: left; margin-top: 18px; }
.linha-centro { text-align: center; font-weight: 700; }
.linha-peca.a-preencher { background: rgba(255, 214, 0, .16); }
@media (max-width: 760px) { .folha { padding: 20px 16px; } }
.linha-vazia { height: 10px; }

/* ================= conferencia da peca: resumo primeiro =================
   Quatro linhas e um botao; o resto fica num <details> logo abaixo. */
.resumo-linhas { display: grid; gap: 8px; margin: 6px 0 14px; }
.resumo-linhas > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px;
                       padding: 8px 0; border-bottom: 1px solid var(--border); }
.resumo-linhas dt { font-size: 12px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: .05em; color: var(--ink-faint); }
.resumo-linhas dd { margin: 0; font-size: 15px; }
.botao-grande { font-size: 16px; padding: 13px 28px; }
.conferencia-completa { margin-top: 6px; }
.conferencia-completa > summary {
  cursor: pointer; font-weight: 600; color: var(--accent); padding: 12px 0;
}
@media (max-width: 560px) { .resumo-linhas > div { grid-template-columns: 1fr; gap: 2px; } }

/* Escolha da via (MS ou acao ordinaria) na conferencia da peca. */
.escolha-via { border: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.escolha-via legend { font-weight: 700; margin-bottom: 6px; }
.opcao-via { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
             border: 1px solid var(--border); border-radius: var(--radius-sm);
             padding: 10px 12px; background: var(--surface); }
.opcao-via:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.opcao-via input { margin-top: 4px; }
.opcao-via .diag-meta { display: block; }

/* Diagnostico em VERMELHO, como o advogado pediu ("botao destacado em
   vermelho, algo mais visivel"). Separado do ambar da peticao: cada acao
   principal tem a sua cor. */
.botao-diagnostico {
  display: inline-flex; align-items: center; gap: 7px;
  background: #c0392b; color: #fff; border: 1px solid #c0392b;
  padding: 10px 18px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 700;
}
.botao-diagnostico:hover { background: #a93226; color: #fff; text-decoration: none; }

/* Botoes pequenos dentro das linhas das tabelas (Clientes e Casos). */
.botao-mini { padding: 5px 10px !important; font-size: 12.5px !important; }
.botao-excluir {
  background: none; color: var(--bad); border: 1px solid var(--bad);
  border-radius: var(--radius-sm); font-weight: 600; cursor: pointer;
}
.botao-excluir:hover { background: var(--bad); color: #fff; }
td.acoes-linha { white-space: nowrap; text-align: right; }
td.acoes-linha .inline-btn { display: inline; margin-left: 6px; }

/* Topo da tela do caso: preparar peticao e diagnostico sem rolar. */
.barra-caso { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; }
/* Em Clientes a coluna de oportunidades ocupa a largura: os dois botoes
   ficam um em cima do outro, senao saiam cortados pela direita. */
td.acoes-empilhadas { white-space: normal; width: 1%; }
td.acoes-empilhadas > * { display: flex; width: 100%; justify-content: center; }
td.acoes-empilhadas .inline-btn { margin: 6px 0 0; }
td.acoes-empilhadas .inline-btn button { width: 100%; }
.celula-oportunidades { max-width: 360px; }
.acoes-cliente { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.acoes-cliente .inline-btn { margin: 0; }
.escolha-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.escolha-acoes select { max-width: 360px; }

/* Aviso de renovacao, nos 7 dias antes de vencer (templates/base.html). */
.faixa-renovar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fdecea; border: 1px solid #e6a39c; color: #7a1f16;
  border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px;
  font-size: 13.5px;
}

/* Guia de primeiro acesso (templates/tenants/home.html): tres passos grandes. */
.guia { background: var(--surface); border: 2px solid var(--beam); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 22px; }
.guia-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.guia-topo h2 { margin: 0; }
.guia-passos { list-style: none; padding: 0; margin: 14px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.guia-passos a { display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: inherit; font-size: 14px; line-height: 1.45; }
.guia-passos a:hover { border-color: var(--beam); text-decoration: none; }
.guia-passos strong { font-size: 16px; }
.guia-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--beam); color: #23180a; font-weight: 800; font-size: 15px; }


/* Selo da tese mais forte no diagnostico, colado ao nome da tese. */
.pill-mais-forte { background: var(--beam); color: #23180a; margin-left: 6px; vertical-align: 2px; }

/* Celular: as listas de Petições, Casos e Clientes viram cartões. Em tabela,
   os botões Abrir/Excluir ficavam fora da tela, atrás de uma rolagem lateral. */
@media (max-width: 700px) {
  table.tabela-cartao thead { display: none; }
  table.tabela-cartao tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
  table.tabela-cartao td { display: block; border: none; padding: 3px 12px; }
  table.tabela-cartao td.acoes-linha { text-align: left; white-space: normal; padding-top: 8px; }
  .linha-peca { text-align: left; }
}

/* Criar peticao: atalho para as pecas ja geradas, em faixa (passava batido). */
a.faixa-geradas {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--accent-soft); border: 2px solid var(--accent); border-radius: var(--radius);
  padding: 14px 18px; margin: 0 0 20px; color: inherit;
}
a.faixa-geradas:hover { text-decoration: none; filter: brightness(1.08); }
.faixa-geradas-icone { font-size: 26px; }
.faixa-geradas-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.faixa-geradas-texto strong { font-size: 16px; }
.faixa-geradas-texto span { font-size: 13.5px; color: var(--ink-soft, inherit); }


/* =====================================================================
   VISUAL 2 (18/09/2026) — pedido do advogado: "muito amador", quer algo
   "que o advogado ja esteja acostumado" (Jusbrasil, MinutaIA). O que esses
   produtos tem em comum e foi aplicado aqui: fundo claro, menu CLARO com
   icone, UMA cor de acao (azul), fonte Inter, cartoes brancos de borda fina,
   pagina na largura toda. Sobrepoe as regras de cima (vem por ultimo).
   ===================================================================== */
:root {
  --bg: #f4f6f9;
  --surface-2: #f7f8fa;
  --border: #e3e7ec;
  --border-forte: #cfd6de;
  --accent: #0b3d91;
  --accent-hover: #082e6e;
  --accent-soft: #eaf0fb;
  --on-accent: #ffffff;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 6px 20px -8px rgba(16, 24, 40, .18);
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lateral-w: 250px;
  --menu-bg: #ffffff;
  --menu-bg-2: #eaf0fb;
  --menu-ink: #3b4450;
  --menu-ink-forte: #0b3d91;
  --menu-borda: #e3e7ec;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --on-accent: #0c1620;
    --menu-bg: #121a21; --menu-bg-2: #1c2a37; --menu-ink: #aebac5;
    --menu-ink-forte: #ffffff; --menu-borda: #25313b;
  }
}
:root[data-tema="escuro"] {
  --on-accent: #0c1620;
  --menu-bg: #121a21; --menu-bg-2: #1c2a37; --menu-ink: #aebac5;
  --menu-ink-forte: #ffffff; --menu-borda: #25313b;
}

body { font-size: 14.5px; letter-spacing: -.005em; }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-weight: 650; }

/* largura toda: o conteudo acompanha a tela; so o texto corrido tem limite */
.app > main { max-width: none; padding: 24px 36px 64px; }

/* ---- menu lateral claro ---- */
.lateral {
  background: var(--menu-bg); border-right: 1px solid var(--menu-borda);
  padding: 18px 12px 14px; gap: 14px;
  scrollbar-color: var(--border-forte) transparent;
}
.lateral .marca-texto { color: var(--ink); }
.lateral .marca-texto em { color: var(--ink-faint); }
.lateral .marca-icone .torre, .lateral .marca-icone .base { fill: var(--accent); }
.lateral nav { gap: 1px; }
.lateral nav a {
  display: flex; align-items: center; gap: 11px;
  color: var(--menu-ink); font-size: 14px; font-weight: 500;
  padding: 7px 10px; border-left: none; border-radius: var(--radius-sm);
}
.lateral nav a:hover { background: var(--surface-2); color: var(--ink); }
.lateral nav a.ativo { background: var(--menu-bg-2); color: var(--menu-ink-forte); font-weight: 600; }
.icone {
  width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.lateral nav a .icone { opacity: .8; }
.lateral nav a.ativo .icone { opacity: 1; }
.nav-grupo { color: var(--ink-faint); font-size: 10.5px; letter-spacing: .08em; padding: 14px 10px 4px; }
.lateral a.nav-destaque {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--on-accent); font-weight: 650; font-size: 14px;
  padding: 10px 12px; border-radius: var(--radius-sm); margin: 0;
}
.lateral a.nav-destaque:hover, .lateral a.nav-destaque.ativo { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.lateral-rodape { border-top: 1px solid var(--menu-borda); }
.escritorio-nome { color: var(--ink); }
.escritorio-trf { color: var(--ink-faint); }
@media (min-width: 821px) and (max-height: 900px) {
  .lateral nav a { padding: 5px 10px; }
  .nav-grupo { padding: 10px 10px 3px; }
}
@media (max-width: 820px) {
  .lateral { border-right: none; border-bottom: 1px solid var(--menu-borda); }
  .lateral nav a .icone { display: none; }
  .lateral a.nav-destaque { flex: none; }
}

/* ---- uma cor de acao so: tudo que era ambar vira o azul principal ---- */
button, input[type=submit] { color: var(--on-accent); }
.botao-destaque, .botao-beam, .botao-cheio {
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
}
.botao-destaque:hover, .botao-beam:hover, .botao-cheio:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); filter: none;
}

/* ---- faixa do inicio: clara, como o resto ---- */
.faixa-escala { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.faixa-escala h1 { color: var(--ink); }
.faixa-escala p { color: var(--ink-soft); }
.faixa-selo { color: var(--accent); }
.botao-vazado { color: var(--accent); border: 1px solid var(--border-forte); background: var(--surface); }
.botao-vazado:hover { background: var(--accent-soft); }

/* ---- cartoes e tabelas ---- */
.painel, .card-link, .metrica { box-shadow: var(--shadow-sm); }
thead th { background: var(--surface-2); }
.faixa-geradas-icone { color: var(--accent); display: inline-flex; }
.faixa-geradas-icone .icone { width: 30px; height: 30px; }
/* tabelas dentro de cartao branco; botoes da ultima coluna quebram linha em
   vez de sair da tela (Casos cortava o "Excluir" em 1280 px) */
.tabela-wrap { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.tabela-wrap table { margin: 0; }
td.acoes-linha { white-space: normal; }
td.acoes-linha > * { margin: 2px 0 2px 6px; }
.app .rodape { max-width: none; margin: 48px 0 0; padding: 14px 0 0; }
.metrica { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }

/* botoes de acao em cada empresa das listas de prospeccao */
.acoes-empresa { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.acoes-empresa .inline-btn { margin: 0; }

/* ---- inicio: a busca e a tela (pedido: sistema mais simples) ---- */
.busca-inicio { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 40px 32px 30px; margin-bottom: 20px; text-align: center; }
.busca-inicio h1 { font-size: 28px; margin: 0 0 8px; }
.busca-inicio p { color: var(--ink-soft); margin: 0 0 20px; font-size: 15px; }
.busca-inicio-form { display: flex; gap: 10px; max-width: 760px; margin: 0 auto; }
.busca-inicio-form input { flex: 1; font-size: 17px; padding: 14px 16px; }
.busca-inicio-form button { font-size: 16px; padding: 0 26px; }
.busca-inicio .busca-inicio-base { font-size: 12.5px; color: var(--ink-faint); margin: 16px 0 0; }
.atalhos-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 22px; }
.atalhos-inicio .icone { width: 26px; height: 26px; color: var(--accent); margin-bottom: 10px; }
@media (max-width: 600px) { .busca-inicio-form { flex-direction: column; } .busca-inicio-form button { padding: 12px; } }

/* "Mais ferramentas": o que nao e o caminho principal, recolhido */
.nav-mais { margin-top: 10px; border-top: 1px solid var(--menu-borda); padding-top: 8px; }
.nav-mais > summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); padding: 7px 10px; border-radius: var(--radius-sm); }
.nav-mais > summary::-webkit-details-marker { display: none; }
.nav-mais > summary::after { content: "▾"; float: right; transition: transform .15s; }
.nav-mais:not([open]) > summary::after { transform: rotate(-90deg); }
.nav-mais > summary:hover { background: var(--surface-2); color: var(--ink); }
.nav-mais a { display: flex; }
@media (max-width: 820px) { .nav-mais { border: none; margin: 0; padding: 0; } }
.nav-mais > summary::before { content: none; display: none; }

/* ---- tela do caso: proximo passo + abas (21/09/2026) ---- */
.proximo-passo { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 18px 22px; margin: 4px 0 20px; font-size: 15px; }
.proximo-passo-rotulo { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.proximo-passo-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 16px; overflow-x: auto; }
.abas button { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--ink-soft); font-weight: 600; font-size: 14.5px; padding: 10px 16px; margin-bottom: -1px; white-space: nowrap; }
.abas button:hover { background: none; color: var(--ink); }
.abas button.ativa { color: var(--accent); border-bottom-color: var(--accent); }
.abas-num { font-size: 12px; font-weight: 600; color: var(--ink-faint); margin-left: 4px; }

/* diagnostico: botao da peca em cada tese; foro em caixa compacta */
.acoes-tese { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 0; }
.diag-item .alerta { font-size: 13px; padding: 8px 12px; }

/* divida ativa: valor em fonte normal (a mono pesava a tabela), acoes sob o nome */
.tabela-devedores td.numero { font-family: var(--font-ui); font-size: 14.5px; font-weight: 650; white-space: nowrap; }
.tabela-devedores td.numero .celula-meta { font-weight: 400; font-size: 12px; }
.tabela-devedores .acoes-empresa { margin: 8px 0 4px; }
.tabela-devedores td:first-child { min-width: 340px; }
.tabela-devedores td:nth-child(2) { min-width: 0; max-width: none; }
.tabela-devedores td.numero { min-width: 0; }
.divida-linha { margin: 6px 0 0; font-size: 15px; }
.acoes-empresa .acoes-empresa { margin: 0; }
/* botao "Escolher arquivo" no mesmo estilo dos botoes secundarios */
input[type=file]::file-selector-button {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--accent);
  background: var(--surface); border: 1px solid var(--border-forte);
  border-radius: var(--radius-sm); padding: 6px 12px; margin-right: 10px; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--accent-soft); border-color: var(--accent); }
.abas-links a { color: var(--ink-soft); font-weight: 600; font-size: 14.5px; padding: 10px 16px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas-links a:hover { color: var(--ink); text-decoration: none; }
.abas-links a.ativa { color: var(--accent); border-bottom-color: var(--accent); }

/* "Mais ferramentas" em destaque (pedido: "cor diferente, pra que saibam que
   tem mais do que o que esta exposto") - ambar, a cor do farol */
.nav-mais > summary { background: var(--beam-soft); color: var(--ink); border: 1px solid var(--beam); }
.nav-mais > summary:hover { background: var(--beam-soft); color: var(--ink); filter: brightness(.97); }
.nav-mais[open] > summary { margin-bottom: 6px; }
.nav-mais-num { display: inline-block; min-width: 20px; text-align: center; font-size: 11px; font-weight: 700;
  background: var(--beam); color: #23180a; border-radius: 10px; padding: 1px 6px; margin-left: 4px; }
.atalho-principal { border-color: var(--accent); background: var(--accent-soft); }

/* por localidade como porta de entrada */
.filtros-avancados { align-self: center; }
.filtros-avancados > summary { font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; }
.filtros-avancados .checkboxes { margin-top: 8px; }
.painel-recolhido > summary { cursor: pointer; list-style: none; margin: 0 !important; }
.painel-recolhido > summary::-webkit-details-marker { display: none; }
.painel-recolhido[open] > summary { margin-bottom: 8px !important; }
.cidades-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cidades-top .card-link { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.cidades-top .titulo { font-weight: 650; }
.painel-recolhido > summary { display: flex; align-items: center; gap: 10px; }
.painel-recolhido > summary strong { flex: 1; text-align: left; color: var(--ink); }
@media (max-width: 820px) {
  .lateral nav { flex-wrap: wrap; }
  .nav-mais { flex-basis: 100%; }
  .nav-mais[open] { display: flex; flex-wrap: wrap; gap: 4px; }
  .nav-mais[open] > summary { flex-basis: 100%; }
}
@media (max-width: 600px) { .cidades-top { grid-template-columns: 1fr 1fr; } }

/* Blocos escuros da apresentacao publica (.capa, .capa-fecho): o azul de acao
   sumia sobre o azul-noite e o selo ficava invisivel. Dentro deles, botao
   branco e contorno branco - o padrao de "hero" que todo mundo reconhece. */
.capa .faixa-selo, .capa-fecho .faixa-selo { color: var(--beam); }
.capa .botao-beam, .capa-fecho .botao-beam { background: #fff; color: #0b3d91; border-color: #fff; }
.capa .botao-beam:hover, .capa-fecho .botao-beam:hover { background: #eaf0fb; color: #0b3d91; }
.capa .botao-vazado, .capa-fecho .botao-vazado { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.capa .botao-vazado:hover, .capa-fecho .botao-vazado:hover { background: rgba(255,255,255,.1); }
/* segunda busca do Inicio: por cidade */
.busca-inicio .busca-inicio-ou { margin: 18px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); }
.busca-inicio .busca-inicio-sub { margin: 0 0 12px; font-size: 14px; }
.busca-cidade select { width: 90px; font-size: 16px; }