/* 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-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-left: 10px; }
.lateral-recolher {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--menu-ink); cursor: pointer;
}
.lateral-recolher:hover { background: var(--surface-2); border-color: var(--menu-borda); color: var(--ink); }

/* menu recolhido (01/10/2026): so os icones, numa faixa estreita; a escolha
   fica guardada no navegador (farol-menu). No celular o menu ja e uma faixa
   horizontal, entao o botao nem aparece. */
@media (min-width: 821px) {
  html[data-menu="recolhido"] .lateral { width: 64px; padding-left: 8px; padding-right: 8px; }
  html[data-menu="recolhido"] .lateral-cabeca { flex-direction: column; padding: 0; gap: 10px; }
  html[data-menu="recolhido"] .lateral a > span,
  html[data-menu="recolhido"] .escritorio { display: none; }
  html[data-menu="recolhido"] .lateral a { justify-content: center; padding-left: 0; padding-right: 0; }
  html[data-menu="recolhido"] .nav-grupo { font-size: 0; padding: 0; margin: 8px 6px; border-top: 1px solid var(--menu-borda); }
  html[data-menu="recolhido"] .lateral-recolher svg { transform: rotate(180deg); }
}
@media (max-width: 820px) { .lateral-recolher { display: none; } }
.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.
   08/10/2026 (auditoria #50): o menu aberto ocupava meia tela em toda pagina. Agora, ate 820px,
   fica fechado num botao "Menu" (base.html) e, aberto, quebra em linhas como no celular. */
@media (max-width: 820px) {
  .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%; }
  .lateral-cabeca { width: 100%; padding-left: 0; }
  .lateral:not(.aberta) > :not(.lateral-cabeca) { display: none; }
}
.lateral-menu-celular { display: none; }
@media (max-width: 820px) {
  .lateral-menu-celular { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 14px;
    font-weight: 600; background: var(--surface); color: var(--ink); border: 1px solid var(--menu-borda);
    border-radius: var(--radius-sm); }
  .lateral-menu-celular:hover, .lateral.aberta .lateral-menu-celular { background: var(--surface-2); color: var(--ink); }
}

/* ================= 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:not([type]), 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; }
.grupo-teses { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 18px; letter-spacing: -.01em; color: var(--ink); margin: 28px 0 4px; }
.grupo-teses::before { content: "✓"; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--good); color: #fff; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.grupo-teses .diag-meta { flex-basis: 100%; margin: 0 0 0 38px; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 400; color: var(--ink-soft); }
.botao-reforma { display:inline-flex; align-items:center; gap:8px; }
.botao-reforma small { font-size:11.5px; font-weight:600; background:rgba(255,255,255,.18); padding:2px 8px; border-radius:999px; }
.linha-empresa-cidade { font-size:13px; color:var(--ink-soft); margin-left:10px; font-weight:600; }
.botao-reforma-topo { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.botao-reforma-topo .diag-meta { margin:0; }
@media (max-width: 700px) { .botao-reforma-topo { margin-left:0; align-items:flex-start; } }
.depende-cliente { flex-basis: 100%; font-size: 12px; color: var(--warn); margin-top: 2px; }
.bloco-perguntas { margin: 40px -8px 8px; padding: 20px 20px 22px; border-radius: 12px; background: var(--warn-soft); border: 1px solid var(--warn); }
.bloco-perguntas-titulo { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; letter-spacing: -.01em; color: var(--ink); }
.bloco-perguntas-titulo::before { content: "?"; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--warn); color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.bloco-perguntas-sub { margin: 6px 0 16px 38px; font-size: 13.5px; color: var(--ink-soft); }
.bloco-perguntas .pergunta-cliente { background: var(--surface); }
.perguntas-cliente { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; margin-top: 0; }
.pergunta-cliente { border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 8px; padding: 14px 16px; background: var(--surface-2); }
.pergunta-cliente-titulo { font-weight: 650; font-size: 14px; margin: 0 0 6px; }
.pergunta-cliente-tese { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--border); }
.pergunta-cliente-tese a { color: var(--ink); }
.pergunta-cliente-tese a:hover { color: var(--accent); }
.pergunta-cliente-tese form { margin: 0; flex-shrink: 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; }
/* 08/10/2026 (auditoria #46): 1fr = minmax(auto, 1fr) crescia com o conteudo e a pagina
   ficava mais larga que o celular; minmax(0, 1fr) prende a coluna na largura da tela */
@media (max-width: 900px) { .tese-colunas { grid-template-columns: minmax(0, 1fr); } }
/* 08/10/2026 (auditoria #46): a fonte da norma aparece como endereco inteiro (https://www.planalto...)
   e, sem quebrar, alargava a coluna - em 1024 px a Reforma tributaria ia a 1.247px */
.diag-meta a { overflow-wrap: anywhere; }

/* ================= 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 ================= */
/* 08/10/2026 (auditoria #12 das sobras): saiu uma linha solta ("padding...; }") sem seletor que
   fazia o navegador descartar a regra .prazo-vencido logo abaixo */

/* 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;
    /* 08/10/2026 (auditoria #46): em inline-flex o endereco comprido (lei no Planalto) nao
       quebrava e alargava a pagina */
    overflow-wrap: anywhere;
  }
  /* 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; }
/* 04/10/2026: passos da primeira semana que ja foram feitos */
.guia-contagem { font-size: 14px; font-weight: 500; color: var(--ink-soft); margin-left: 6px; }
.guia-passos li.feito a { border-color: var(--good); background: var(--good-soft); }
.guia-passos li.feito .guia-num { background: var(--good); color: var(--surface); }


/* 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; }
}
/* 08/10/2026 (auditoria #37, #48): Clientes - a tabela tinha 1.550px numa area de 685px e "Em andamento"
   e "Oportunidades" ficavam fora da tela. Agora CNPJ e cidade vao sob o nome e as celulas quebram
   linha; no celular cada informacao do cartao vem com o rotulo (o titulo da coluna some) */
.tabela-clientes td { white-space: normal; vertical-align: top; }
.tabela-clientes td:first-child { min-width: 200px; }
.tabela-clientes th:first-child { width: 36%; }
.tabela-clientes th:last-child { width: 40%; }
.tabela-clientes .pill { white-space: normal; }
@media (max-width: 700px) {
  .tabela-clientes td[data-label]::before { content: attr(data-label); display: block; flex-basis: 100%; margin: 4px 0 2px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
}

/* 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; }
  /* 08/10/2026 (auditoria #50, #51): o "padding: 24px 36px" de cima vencia o do celular e comia
     72px da tela de 375px; aqui a margem volta a ser a do celular */
  .lateral { padding: 10px 16px; }
  .app > main { padding: 18px 16px 60px; }
}

/* ---- 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; } }

/* ---- 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; overflow-y: hidden; }
.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); }
/* 05/10/2026 (Luis: "nao parece ter duas abas, tem que estar muito atento"): abas das
   ferramentas, de Clientes e de Parceria viram botoes em pilula; a ativa vem cheia */
.abas.abas-grupo { display: flex; width: fit-content; max-width: 100%; gap: 4px; padding: 4px; margin: 0 0 20px;
  background: var(--neutral-pill-soft); border: 1px solid var(--border); border-radius: 999px; }
.abas-grupo a { border: none; margin: 0; border-radius: 999px; padding: 8px 18px; color: var(--ink-soft); }
.abas-grupo a:hover { background: var(--surface); color: var(--accent); }
.abas-grupo a.ativa { background: var(--accent); color: var(--surface); box-shadow: 0 1px 3px rgba(16, 32, 45, .25); }
.abas-grupo a.ativa .abas-num { color: inherit; opacity: .75; }
/* 08/10/2026 (auditoria #51, #83, #109): no celular e em 1024 px as abas nao cabiam - cada uma
   quebrava em 2 a 4 linhas (a ativa virava um "ovo") e as ultimas sumiam atras de uma rolagem.
   Agora a aba que nao cabe desce inteira para a linha de baixo (o texto so quebra se a aba
   sozinha for mais larga que a tela, em celular de 320px); o canto de 22px e pilula numa
   linha e cartao arredondado em duas */
.abas.abas-grupo { flex-wrap: wrap; overflow: visible; border-radius: 22px; }

/* "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; }


/* teste gratis: tese fora do teste mostra a lista borrada (dado falso, ver _borrar) */
.linha-borrada { filter: blur(5px); user-select: none; pointer-events: none; }

/* planos: chave anual/mensal (so CSS - o radio marcado decide o que aparece) */
.ciclos > input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.ciclo-troca { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); margin: 0 0 18px; }
.ciclo-troca label { padding: 8px 18px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-soft); }
.ciclo-selo { font-size: 11px; font-weight: 700; color: var(--good); margin-left: 4px; }
#ciclo-anual:checked ~ .ciclo-troca label[for=ciclo-anual],
#ciclo-mensal:checked ~ .ciclo-troca label[for=ciclo-mensal] { background: var(--accent); color: #fff; }
#ciclo-anual:checked ~ .ciclo-troca label[for=ciclo-anual] .ciclo-selo { color: #fff; }
#ciclo-anual:checked ~ .planos .so-mensal, #ciclo-mensal:checked ~ .planos .so-anual { display: none; }
#ciclo-anual:focus-visible ~ .ciclo-troca label[for=ciclo-anual],
#ciclo-mensal:focus-visible ~ .ciclo-troca label[for=ciclo-mensal] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* painel do usuario no canto superior direito */
.menu-usuario { position: relative; }
.botao-planos { margin-left: auto; background: #1a56c4; color: #fff !important; font-weight: 700; font-size: 13.5px; padding: 8px 16px; border-radius: 999px; text-decoration: none !important; box-shadow: 0 2px 8px rgba(11,61,145,.25); }
.botao-planos:hover { filter: brightness(1.1); }
.menu-usuario > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario > summary::marker { content: ""; }
.menu-usuario > summary::before, .menu-usuario[open] > summary::before { content: none; display: none; }
.menu-usuario-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.menu-usuario-lista { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 250px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; }
.menu-usuario-lista a, .menu-usuario .menu-usuario-lista button.sair { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14px; background: none; border: 0; }
.menu-usuario-lista a:hover, .menu-usuario .menu-usuario-lista button.sair:hover { background: var(--accent-soft); text-decoration: none; }
.menu-usuario-cab { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; font-size: 12.5px; color: var(--ink-soft); }
.menu-usuario-cab strong { color: var(--ink); font-size: 14px; }
@media (max-width: 640px) { .menu-usuario-nome { display: none; } }

/* Minha assinatura (redesenho 22/09/2026) */
.assin-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; padding: 28px 30px; border-radius: 16px; margin-bottom: 26px; color: #fff; background: linear-gradient(135deg, #0b3d91 0%, #1a5fd0 100%); box-shadow: 0 12px 32px rgba(11,61,145,.22); }
.assin-hero-teste { background: linear-gradient(135deg, #0b3d91 0%, #6b3fd4 100%); }
.assin-hero-vencida { background: linear-gradient(135deg, #7a1f1f 0%, #c2410c 100%); }
.assin-hero h1 { color: #fff; margin: 6px 0 8px; font-size: 30px; line-height: 1.15; }
.assin-sub { color: rgba(255,255,255,.9); margin: 0; font-size: 15px; max-width: 560px; }
.assin-sub strong { color: #fff; }
.assin-etiqueta { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.18); padding: 4px 10px; border-radius: 999px; }
.assin-barra { margin-top: 16px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; max-width: 460px; }
.assin-barra span { display: block; height: 100%; background: #fbbf24; border-radius: 999px; }
.assin-uso { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 16px 18px; }
.assin-uso-titulo { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.85); }
.assin-uso-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.assin-uso-numeros strong { display: block; font-size: 26px; color: #fff; line-height: 1.1; }
.assin-uso-numeros span { font-size: 12px; color: rgba(255,255,255,.85); }
.assin-uso-nota { margin: 10px 0 0; font-size: 12.5px; color: rgba(255,255,255,.85); }
.assin-titulo-planos { margin: 4px 0 12px; }
.assin-garantias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.assin-garantias > div { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--surface); }
.assin-garantias strong { display: block; font-size: 14px; color: var(--ink); }
.assin-garantias strong::before { content: "✓ "; color: var(--good); }
.assin-garantias span { font-size: 12.5px; color: var(--ink-soft); }
.assin-reembolso { margin-top: 22px; }
@media (max-width: 860px) {
  .assin-hero { grid-template-columns: 1fr; padding: 22px 18px; }
  .assin-hero h1 { font-size: 24px; }
  .assin-garantias { grid-template-columns: 1fr 1fr; }
}

/* barra de progresso das pesquisas */
.progresso { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(8,14,22,.45); backdrop-filter: blur(2px); }
.progresso[hidden] { display: none; }
.progresso-cartao { width: min(440px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.progresso-titulo { margin: 0 0 12px; font-weight: 700; font-size: 16px; color: var(--ink); }
.progresso-trilho { height: 10px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.progresso-trilho span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #1a56c4, #4f8df0); transition: width .15s linear; }
.progresso-linha { display: flex; justify-content: space-between; margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
.progresso-linha span:last-child { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.progresso-nota { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); }

/* volta da Lastlink depois de pagar */
.assin-pago { border: 2px solid #1a56c4; border-radius: 14px; padding: 22px 24px; margin-bottom: 22px; background: var(--surface); }
.assin-pago h2 { margin: 0 0 6px; }
.assin-pago-ok { border-color: var(--good); }
.assin-pago .progresso-trilho { margin: 14px 0 8px; }
.assin-pago-barra { display: block; height: 100%; width: 35%; border-radius: 999px; background: linear-gradient(90deg, #1a56c4, #4f8df0); animation: assin-vai 1.4s ease-in-out infinite; }
@keyframes assin-vai { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

/* pagina de quem chega pelo anuncio (tenants/comece.html): um caminho so */
.cm { max-width: 560px; margin: 0 auto; padding-bottom: 90px; }
.cm-passos { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; }
.cm-passos li { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted, #6b7785); }
.cm-passos b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--border, #e3e8ef); color: inherit; font-size: 12px; flex: none; }
.cm-passos li.ativo { color: var(--text, #16202a); }
.cm-passos li.ativo b { background: #fbbf24; color: #0a1a33; }
.cm-passos li.feito b { background: #1a7f37; color: #fff; }
.cm-capa { background: radial-gradient(110% 80% at 90% 0%, #1a5fd0 0%, rgba(26,95,208,0) 55%), linear-gradient(165deg, #0a1a33 0%, #0b2f6e 60%, #0b3d91 100%);
  color: #fff; border-radius: 22px; padding: 26px 20px 22px; box-shadow: 0 18px 44px rgba(10,26,51,.28); }
.cm-chip { display: inline-block; background: rgba(251,191,36,.16); border: 1.5px solid rgba(251,191,36,.6); color: #fbbf24; font-weight: 700; font-size: 13px; padding: 4px 12px; border-radius: 999px; }
.cm-capa h1 { color: #fff; font-size: 30px; line-height: 1.1; letter-spacing: -.025em; margin: 12px 0 18px; }
.cm-capa h1 em, .cm-cadastro h2 em { font-style: normal; color: #fbbf24; }
.cm-busca { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
.cm-busca select { font-size: 17px; padding: 14px 12px; border-radius: 12px; border: 0; min-width: 0; background: #fff; color: #16202a; }
.cm-busca select:disabled { opacity: .55; }
.cm-botao { grid-column: 1 / -1; display: block; width: 100%; border: 0; border-radius: 14px; padding: 16px; font-size: 18px; font-weight: 800;
  background: #fbbf24; color: #0a1a33; cursor: pointer; box-shadow: 0 6px 0 #c98f0a; transition: transform .08s, box-shadow .08s; text-align: center; }
.cm-botao:hover { background: #fcc84a; text-decoration: none; }
.cm-botao:active { transform: translateY(3px); box-shadow: 0 3px 0 #c98f0a; }
.cm-atalhos-titulo { margin: 16px 0 8px; font-size: 13px; color: #b8cbef; }
.cm-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-atalhos a { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); padding: 8px 13px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.cm-atalhos a:hover { background: rgba(255,255,255,.22); text-decoration: none; }
.cm-resultado { text-align: center; margin: 22px 0 6px; scroll-margin-top: 12px; }
.cm-numero { font-size: 72px; font-weight: 900; letter-spacing: -.04em; line-height: 1; margin: 0; color: #d9892a; font-variant-numeric: tabular-nums; }
.cm-legenda { font-size: 18px; line-height: 1.35; margin: 8px 0 4px; }
.cm-mais { margin: 0 0 14px; color: var(--muted, #6b7785); font-size: 15px; }
.cm-trancado { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--border, #e3e8ef); background: var(--surface, #fff); }
.cm-borrado { filter: blur(5px); user-select: none; pointer-events: none; text-align: left; }
.cm-linha { padding: 14px 16px; border-bottom: 1px solid var(--border, #e3e8ef); display: flex; flex-direction: column; gap: 3px; font-size: 15px; }
.cm-linha span { font-size: 13px; color: var(--muted, #6b7785); }
.cm-cadeado { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(10,26,51,.35); color: #fff; font-weight: 800; font-size: 18px; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.cm-cadeado span { font-size: 34px; }
.cm-cadeado:hover { text-decoration: none; background: rgba(10,26,51,.45); }
.cm-cadastro { margin-top: 22px; background: var(--surface, #fff); border: 2px solid #fbbf24; border-radius: 22px; padding: 22px 20px; scroll-margin-top: 12px; }
.cm-cadastro h2 { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.cm-cadastro h2 em { color: #d9892a; }
.cm-garantias { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: 10px 0 14px; font-size: 14px; font-weight: 600; }
.cm-garantias li::before { content: "✓ "; color: #1a7f37; font-weight: 900; }
.cm-sub { margin: 0 0 12px; color: var(--muted, #6b7785); font-size: 15px; }
.cm-form .campo { margin-bottom: 12px; }
.cm-form input, .cm-form select { font-size: 17px; padding: 13px 12px; border-radius: 12px; width: 100%; }
.cm-form .linha-aceite { font-size: 13px; margin: 4px 0 16px; }
.cm-entrar { text-align: center; margin: 14px 0 0; font-size: 14px; }
.cm-video { margin-top: 26px; text-align: center; }
.cm-video h2 { font-size: 20px; }
.cm-video video { width: 100%; max-height: 80vh; border-radius: 16px; background: #0a1a33; aspect-ratio: 9 / 16; }
.cm-form input[type=radio], .cm-form input[type=checkbox] { width: auto; padding: 0; flex: none; }
.cm-video .cm-video-pc { display: none; aspect-ratio: 16 / 9; max-height: none; }
@media (min-width: 700px) { .cm-video .cm-video-cel { display: none; } .cm-video .cm-video-pc { display: block; } }
@media (min-width: 1040px) { .cm-video { width: 960px; margin-left: calc(50% - 480px); } }
.cm-fixo { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; background: #fbbf24; color: #0a1a33; font-weight: 800; font-size: 17px;
  text-align: center; padding: 15px; border-radius: 14px; box-shadow: 0 10px 30px rgba(10,26,51,.35); transition: transform .2s, opacity .2s; }
.cm-fixo:hover { text-decoration: none; }
.cm-fixo.escondido { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (min-width: 700px) { .cm-capa { padding: 34px 32px; } .cm-capa h1 { font-size: 38px; } .cm-fixo { left: 50%; right: auto; transform: translateX(-50%); width: 480px; }
  .cm-fixo.escondido { transform: translate(-50%, 140%); } }

/* avisos ao advogado que sairam de dentro da peca (29/09/2026) */
.notas-advogado ul { margin: 6px 0 0 18px; padding: 0; }
.notas-advogado li { margin: 4px 0; }
.acoes-empresa .link-discreto { font-size: 13px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; align-self: center; }
.acoes-empresa .link-discreto:hover { color: var(--accent); }

/* 30/09/2026: cartoes de numeros (Resumo do mes) - a classe era usada e nunca tinha sido definida */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.numeros .numero { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.numeros .numero strong { display: block; font-size: 26px; line-height: 1.1; }
.numeros .rotulo { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

/* ---- etapas do caso: contrato -> procuracao -> documentos -> peticao -> distribuida (30/09/2026) ---- */
.etapas { list-style: none; padding: 0; margin: 10px 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.etapa { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
.etapa.feita { border-color: var(--good); background: var(--good-soft); }
.etapa-marca { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 700; background: var(--neutral-pill-soft); color: var(--ink-soft); }
.etapa.feita .etapa-marca { background: var(--good); color: #fff; }
.etapa-nome { font-weight: 600; }
.etapa-acao form { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.etapa-acao input { width: 5.5em; padding: 4px 6px; }
.etapa-acao button { padding: 4px 10px; }
.caso-etapas { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.caso-etapas:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.caso-etapas-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }


/* documentos do escritorio: dados, papel e textos (30/09/2026) */
.passos-doc { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.passos-doc a { border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px;
  text-decoration: none; color: var(--ink-soft); background: var(--surface); font-weight: 600; font-size: 14px; }
.passos-doc a.feito { border-color: var(--good); color: var(--good); background: var(--good-soft); }
.sem-borda { border: 0; padding: 0; margin: 0; min-width: 0; }
#dados .campo { margin-bottom: 14px; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
label.check { display: flex; gap: 6px; align-items: center; font-weight: 400; margin-top: 6px; }
label.check input { width: auto; }
.tabela-advogados { width: 100%; border-collapse: collapse; }
.tabela-advogados th { text-align: left; font-size: 13px; color: var(--ink-soft); padding: 4px 6px 4px 0; }
.tabela-advogados td { padding: 3px 6px 3px 0; }
.tabela-advogados input { width: 100%; }
.texto-doc { border-top: 1px solid var(--border); padding: 14px 0 10px; }
.texto-doc:first-of-type { border-top: 0; }
.texto-doc-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.recibo-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.recibo-linha input, .recibo-linha select { padding: 4px 6px; width: auto; }

/* contrato, procuracao e recibo: Preparar e Documentos do escritorio (01/10/2026) */
.pv-folha { background: #fff; color: #1d2329; font-family: Georgia, "Times New Roman", serif; font-size: 12.5px;
  line-height: 1.55; padding: 30px 32px; border-radius: 4px; box-shadow: 0 2px 14px rgba(16, 32, 45, .16);
  transition: opacity .15s; }
.pv-folha.carregando { opacity: .55; }
/* 08/10/2026 (auditoria #47): a linha de assinatura (40 "_") nao quebrava e alargava a pagina no celular */
.pv-folha { overflow-wrap: anywhere; }
.pv-folha p { margin: 0 0 9px; text-align: justify; }
.pv-folha .pv-titulo { font-weight: 700; text-align: left; margin-top: 14px; }
.pv-folha .pv-centro { text-align: center; }
.pv-folha mark { background: #fff1a8; color: inherit; padding: 0 2px; border-radius: 2px; }
.ps-mais { margin-top: 14px; }
.ps-mais summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: 14px; }
.ps-mais .ps-campos { margin-top: 12px; }
.receita-barra { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 14px 38px; }
.receita-estado { font-size: 13px; color: var(--ink-soft); }
.receita-estado.ok { color: var(--good); }
.receita-estado.erro { color: var(--bad); }
.socios { margin: 0 0 14px 38px; }
.socios-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.socio { background: var(--surface); color: var(--ink); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 7px 12px; text-align: left; display: flex; flex-direction: column; font-size: 13.5px; }
.socio small { color: var(--ink-faint); font-size: 11.5px; }
.socio:hover { border-color: var(--accent); background: var(--accent-soft); }
.socio.ativo { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.escr-resumo { margin: 0 0 12px 38px; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.advs-check { display: flex; flex-direction: column; gap: 6px; margin-left: 38px; }
.advs-check small { color: var(--ink-faint); }
.ps-sec > .ps-campos, .ps-sec > .seg, .ps-sec > .ps-mais, .ps-sec > .ps-rot { margin-left: 38px; }
@media (max-width: 560px) { .ps-sec > .ps-campos, .ps-sec > .seg, .ps-sec > .ps-mais, .ps-sec > .ps-rot,
  .receita-barra, .socios, .escr-resumo, .advs-check { margin-left: 0; } }
.com-botao { display: flex; gap: 8px; }
.com-botao input { flex: 1; min-width: 0; }
.ps-campos input.uf { min-width: 0; max-width: 6em; text-transform: uppercase; }
.lista-adv { display: flex; flex-direction: column; gap: 8px; margin-left: 38px; }
.adv-linha { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 36px; gap: 8px; }
.adv-linha input, .recibo-linha input { min-width: 0; }
.adv-tirar { background: none; border: 1px solid var(--border); color: var(--ink-faint); border-radius: 8px; padding: 0;
  font-size: 18px; line-height: 1; }
.adv-tirar:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
#adv-mais { margin-left: 38px; }
@media (max-width: 560px) { .lista-adv, #adv-mais { margin-left: 0; } .adv-linha { grid-template-columns: 1fr 36px; }
  .adv-linha input[name=adv_oab] { grid-column: 1; } }
.textos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.texto-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.texto-card details { margin-top: 10px; }
.texto-card summary { cursor: pointer; font-size: 13.5px; color: var(--accent); font-weight: 600; }
.personalizar { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--beam-soft); border: 1px solid var(--beam); border-radius: var(--radius); padding: 16px 20px; margin: 0 0 18px; }
.personalizar p { margin: 2px 0 8px; color: var(--ink-soft); font-size: 14px; }
.personalizar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-soft); }
.personalizar li.ok { color: var(--good); font-weight: 600; }
.botao-etapa { display: inline-block; border: 1px solid var(--border-forte); border-radius: var(--radius-sm); padding: 4px 12px;
  font-size: 13.5px; font-weight: 600; color: var(--accent); background: var(--surface); text-decoration: none; }
.botao-etapa:hover { border-color: var(--accent); background: var(--accent-soft); }
.linha-peca.do-escritorio { background: var(--good-soft); box-shadow: inset 3px 0 0 var(--good); }
.legenda-escritorio { background: var(--good-soft); color: var(--good); font-weight: 600; padding: 0 4px; border-radius: 3px; }
.ps-grade.doc-grade { grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr); }
/* 08/10/2026 (auditoria #47): minmax(0, 1fr), senao a previa do documento alargava a coluna no celular */
@media (max-width: 1080px) { .ps-grade.doc-grade { grid-template-columns: minmax(0, 1fr); } }

/* SUPORTE fixo no pe do menu lateral (01/10/2026) */
.lateral-rodape .nav-suporte { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--menu-borda); color: var(--menu-ink-forte); font-weight: 650; letter-spacing: .04em; font-size: 13px; text-decoration: none; }
.lateral-rodape .nav-suporte:hover, .lateral-rodape .nav-suporte.ativo { background: var(--menu-bg-2); border-color: var(--beam); text-decoration: none; }
.lateral-rodape .nav-suporte svg { width: 16px; height: 16px; flex-shrink: 0; }
.lateral-rodape .nav-guia { display: flex; align-items: center; gap: 10px; padding: 6px 12px; margin-bottom: 6px; color: var(--menu-ink); font-size: 13px; text-decoration: none; }
.lateral-rodape .nav-guia:hover { color: var(--menu-ink-forte); text-decoration: none; }
.lateral-rodape .nav-guia svg { width: 16px; height: 16px; flex-shrink: 0; }

/* diretorio de profissionais (01/10/2026): compilacao publica, sem ranking */
.dir { width: 100%; }
.dir-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dir-topo h1 { margin: 0 0 6px; }
.dir-topo p { margin: 0; color: var(--ink-soft); max-width: 640px; }
.dir-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.dir-filtros input, .dir-filtros select { width: auto; min-width: 0; flex: 1 1 160px; }
.dir-tipos { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; gap: 3px; }
.dir-tipos label { position: relative; cursor: pointer; }
.dir-tipos input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dir-tipos span { display: block; padding: 7px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.dir-tipos input:checked + span { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.dir-tipos input:focus-visible + span { outline: 2px solid var(--accent); }
.dir-nota { font-size: 12.5px; color: var(--ink-faint); margin: 12px 2px 16px; }
.dir-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.dir-cartao { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.dir-cartao:hover { border-color: var(--accent); transform: translateY(-1px); }
.dir-foto { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 18px; }
.dir-foto img { width: 100%; height: 100%; object-fit: cover; }
.dir-foto-grande { width: 112px; height: 112px; font-size: 34px; }
.dir-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dir-info strong { font-size: 15.5px; }
.dir-meta { font-size: 13px; color: var(--ink-soft); margin: 0; }
.dir-selo { color: var(--good); font-weight: 600; white-space: nowrap; }
.dir-areas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.dir-areas span { font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; color: var(--ink-soft); }
.dir-areas-grande span { font-size: 13px; padding: 4px 11px; }
.dir-areas span.tese { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.dir-convite { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 24px; padding: 16px 18px;
  border: 1px dashed var(--border-forte); border-radius: 14px; font-size: 14px; }
.dir-convite span { color: var(--ink-soft); flex: 1 1 260px; }
.dir-pagina { max-width: 860px; margin: 0 auto; }
.dir-perfil-topo { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.dir-perfil-topo h1 { margin: 0 0 6px; }
.dir-contatos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.dir-pagina .painel h2 { font-size: 16px; margin: 0 0 10px; }
.dir-texto { margin: 0; line-height: 1.6; }
.dir-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 16px; }
.dir-lista { margin: 0; padding-left: 18px; line-height: 1.7; }
.dir-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; margin-left: 38px; }
.ps-mais .dir-checks { margin: 10px 0 0; }
.dir-foto-edicao { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.dir-regras { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; font-size: 13.5px; }
.dir-regras ul { list-style: none; padding: 0; margin: 10px 0; line-height: 1.8; }
@media (max-width: 560px) { .dir-checks { margin-left: 0; } .dir-grade { grid-template-columns: 1fr; } }
@media (max-width: 1080px) { .ps-previa.dir-lado { order: 2; max-width: none; } }

/* faixa de valor no diagnostico (01/10/2026) */
.form-faturamento { margin: 0 0 12px; align-items: flex-end; }
.form-faturamento .diag-meta { flex-basis: 100%; margin: 0; }
.faixa-valor { margin: 6px 0 0; font-size: 14px; }
.faixa-valor .diag-meta { margin-left: 6px; }

/* telefone clicavel nas listas (04/10/2026): ligar ou WhatsApp */
a.whats { font-size: 12px; font-weight: 650; color: #128c7e; margin-left: 2px; }
/* 05/10/2026: avisar o cliente de um andamento importante (casos/templatetags/farol.avisar_cliente) */
.avisar-cliente { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
/* 05/10/2026: proxima acao do caso e "conferido no tribunal" (casos/detalhe.html) */
form.proxima-acao { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; padding: 8px 12px;
  border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: 14px; }
form.proxima-acao.atrasada { border: 1px solid var(--warn); background: var(--warn-soft); }
form.proxima-acao input, form.conferir-and input { width: auto; }
form.proxima-acao input[type=text] { flex: 1 1 240px; min-width: 0; }
form.proxima-acao details { display: inline-flex; gap: 6px; align-items: center; }
/* 05/10/2026: ficha do cliente em abas (casos/cliente.html) */
.ficha-topo { padding: 18px 20px; }
.ficha-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.ficha-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; }
.ficha-editar { font-size: 12.5px; margin-left: 6px; }
.ficha-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.ficha-mudou ul { margin: 6px 0 0; padding-left: 18px; }
.ficha-acoes { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; }
.ficha-sub { font-size: 15px; margin: 6px 0 8px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.ficha-sub:not(:first-of-type) { margin-top: 22px; }
.ficha-cadastro { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ficha-processos { list-style: none; margin: 0 0 12px; padding: 0; }
.ficha-processos li { padding: 10px 0; border-bottom: 1px solid var(--border); line-height: 1.5; }
.ficha-processos li:last-child { border-bottom: 0; }
.recibo-dobra { margin-top: 10px; font-size: 13.5px; }
.recibo-dobra summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.ficha-cadastro .campo-largo { grid-column: 1 / -1; }
.ficha-perigo { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
@media (max-width: 700px) { .ficha-cadastro { grid-template-columns: 1fr; } }
/* 05/10/2026: pagina do processo para o cliente - controles no caso */
form.link-cliente { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; font-size: 13.5px; }
form.link-cliente input[type=text] { width: auto; flex: 1 1 260px; min-width: 0; font-size: 12px; }
/* 05/10/2026: comparativo Simples x Presumido x Real (screening/regimes.html), refeito no
   mesmo dia a pedido do Luis: abre calculado, recalcula sozinho, cara de produto */
.rg-layout { display: grid; grid-template-columns: minmax(290px, 340px) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1000px) { .rg-layout { grid-template-columns: 1fr; } }
.rg-painel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-sm); position: sticky; top: 14px; }
@media (max-width: 1000px) { .rg-painel { position: static; } }
.rg-tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; margin: 0 0 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.rg-tipo { position: relative; margin: 0; }
.rg-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.rg-tipo span { display: block; padding: 7px 4px; border-radius: 999px; text-align: center; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft); transition: background .15s, color .15s; }
.rg-tipo input:checked + span { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.rg-tipo input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rg-campo { padding: 12px 0 10px; border-bottom: 1px solid var(--border); }
.rg-ajustes .rg-campo:last-child, .rg-campo:last-of-type { border-bottom: 0; }
.rg-campo-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rg-campo-topo label, .rg-rotulo { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink);
  text-transform: none; letter-spacing: 0; }
.rg-rotulo { display: block; margin-bottom: 6px; }
.rg-entrada { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.rg-entrada input[type=text] { width: 112px; min-width: 0; padding: 5px 8px; text-align: right;
  font-size: 15px; font-weight: 700; color: var(--ink); }
.rg-entrada input.rg-curto { width: 64px; }
.rg-entrada input::placeholder { color: var(--ink-faint); font-weight: 600; opacity: 1; }
.rg-range { display: block; width: 100%; margin: 10px 0 0; padding: 0; border: 0; background: none;
  accent-color: var(--accent); cursor: pointer; }
.rg-ajuda { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-faint); }
.rg-ajustes { margin-top: 6px; }
.rg-ajustes > summary { cursor: pointer; padding: 8px 0; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.rg-ajustes select { width: 100%; min-width: 0; }
.rg-dica-form { margin: 12px 0 0; font-size: 12px; color: var(--ink-faint); }
.rg-empresa { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: -6px 0 16px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.rg-empresa span { font-size: 13px; color: var(--ink-soft); }
.rg-resultado { min-width: 0; transition: opacity .15s; }
.rg-carregando { opacity: .55; }
.rg-manchete { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px;
  padding: 20px 22px; border: 1px solid var(--good); border-radius: var(--radius);
  background: linear-gradient(135deg, var(--good-soft) 0%, var(--surface) 75%); }
.rg-manchete-neutra { border-color: var(--border); background: var(--surface); }
.rg-kicker { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--good); }
.rg-manchete-neutra .rg-kicker { color: var(--ink-faint); }
.rg-manchete h2 { margin: 0 0 6px; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
.rg-economia { margin: 0; font-size: 16px; color: var(--ink-soft); }
.rg-economia strong { color: var(--good); }
.rg-atual { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--border-forte); font-size: 14.5px; }
.rg-manchete .botao-secundario { flex: none; }
.rg-comparativo { padding: 6px 20px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm); }
.rg-linha { display: grid; grid-template-columns: 190px minmax(0, 1fr) 170px; gap: 6px 16px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--border); }
.rg-nome { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rg-nome strong { font-size: 15px; }
.rg-selo { padding: 2px 9px; border-radius: 999px; background: var(--good); color: var(--surface);
  font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.rg-a-mais { font-size: 12.5px; font-weight: 700; color: var(--bad); }
.rg-trilho { height: 16px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rg-barra { display: flex; height: 100%; border-radius: 999px; overflow: hidden; transition: width .35s ease; }
.rg-barra span { display: block; height: 100%; transition: width .35s ease; }
.rg-das { background: var(--good); }
.rg-ir { background: var(--accent); }
.rg-pis { background: #6c8fb3; }
.rg-inss { background: var(--beam); }
.rg-local { background: var(--ink-faint); }
.rg-valor-total { text-align: right; }
.rg-valor-total strong { display: block; font-size: 20px; letter-spacing: -.01em; }
.rg-valor-total span { display: block; font-size: 12px; color: var(--ink-faint); }
.rg-melhor .rg-valor-total strong { color: var(--good); }
.rg-fora { opacity: .6; }
.rg-fora-texto { grid-column: 2 / -1; margin: 0; font-size: 13px; color: var(--ink-faint); }
.rg-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none;
  font-size: 12.5px; color: var(--ink-soft); }
.rg-legenda li { display: flex; align-items: center; gap: 6px; }
.rg-legenda i { width: 10px; height: 10px; border-radius: 3px; }
@media (max-width: 640px) {
  .rg-linha { grid-template-columns: 1fr auto; }
  .rg-trilho { grid-column: 1 / -1; grid-row: 2; }
  .rg-fora-texto { grid-column: 1 / -1; }
  .rg-manchete { flex-direction: column; }
}
.rg-dica { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--beam); border-radius: var(--radius-sm);
  background: var(--beam-soft); font-size: 14px; line-height: 1.5; }
.rg-conta { margin-top: 14px; }
.rg-conta > summary { cursor: pointer; padding: 6px 0; font-size: 14px; font-weight: 600; color: var(--accent); }
.rg-conta-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 8px; }
.rg-conta-colunas > div { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.rg-conta h4 { margin: 0 0 8px; font-size: 14px; }
.rg-nota { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-faint); }
.regime-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.regime-tabela th { text-align: left; font-weight: 400; color: var(--ink-soft); padding: 4px 8px 4px 0; }
.regime-tabela td { text-align: right; padding: 4px 0; white-space: nowrap; }
.regime-total th, .regime-total td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--border); padding-top: 8px; }
.rg-rodape { margin: 20px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
.regimes-fund { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.rg-botao-relatorio { flex: none; }
/* 05/10/2026: clientes pela OAB (casos/clientes_oab.html) */
.oab-form { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.oab-form .campo { margin: 0; }
.oab-form input[type=text] { width: 170px; }
.oab-form select { width: auto; min-width: 90px; }
.oab-andamento .progresso-trilho span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .4s; }
.oab-resumo h2 { margin: 0 0 6px; }
.oab-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.oab-tabela td { vertical-align: top; }
.oab-tabela input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; }
.oab-ja { opacity: .6; }
.oab-incertas { margin-top: 16px; }
.oab-incertas summary { cursor: pointer; }
/* 05/10/2026 (item F): mandar ao cliente por link e ver quando ele abriu (casos/_link_cliente.html) */
.link-envio { background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin: 12px 0; max-width: 960px; }
.link-envio-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.link-envio-linha input[type=text] { flex: 1 1 280px; min-width: 0; font-size: 13px; }
.link-envio-status { margin: 8px 0 0; font-size: 14px; }
/* 05/10/2026: "Seu diagnostico na internet" em destaque no topo de Possiveis clientes (pedido do Luis).
   Cores fixas: o azul do JusFarol com texto branco fica legivel no tema claro e no escuro */
.diag-vitrine { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 28px; align-items: center;
  background: linear-gradient(135deg, #14496b 0%, #0e3752 100%); color: #fff; border-radius: 14px;
  padding: 22px 26px; margin: 0 0 22px; box-shadow: 0 8px 24px -12px rgba(16, 32, 45, .5); }
.diag-vitrine h2 { color: #fff; font-size: 24px; margin: 6px 0 6px; }
.diag-vitrine p { margin: 0; color: rgba(255, 255, 255, .9); font-size: 14.5px; line-height: 1.5; }
.diag-vitrine strong { color: #fff; }
.diag-vitrine-selo { display: inline-block; background: #d9892a; color: #fff; font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.diag-vitrine-link input[type=text] { width: 100%; font-size: 14px; background: #fff; color: #16202a; border: 0; }
.diag-vitrine-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.diag-vitrine-botoes button, .diag-vitrine-botoes a { background: #fff; color: #14496b; border: 0; font-weight: 700;
  font-size: 14px; padding: 9px 14px; border-radius: 8px; text-decoration: none; cursor: pointer; }
.diag-vitrine-botoes a { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .4); }
.diag-vitrine-botoes button:hover, .diag-vitrine-botoes a:hover { filter: brightness(.95); text-decoration: none; }
.diag-vitrine-numeros { font-size: 14px !important; }
@media (max-width: 900px) { .diag-vitrine { grid-template-columns: 1fr; } }
/* 05/10/2026 (pedido do Luis): o Inicio em tres abas - Achar clientes, Sua semana, Empresas no momento certo */
.inicio-abas { margin-bottom: 22px; }
.inicio-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  border-radius: 999px; background: var(--accent); color: var(--surface); font-size: 12px; font-weight: 700; line-height: 1; }
.inicio-abas a.ativa .inicio-badge { background: var(--surface); color: var(--accent); }
.inicio-badge-beam, .inicio-abas a.ativa .inicio-badge-beam { background: var(--beam); color: #fff; }
.inicio-cartao { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px;
  margin: 0 0 18px; box-shadow: 0 6px 20px -14px rgba(16, 32, 45, .35); }
.inicio-cartao h2 { margin: 0; font-size: 21px; }
.inicio-cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.inicio-cartao-topo p { margin: 4px 0 0; }
.semana-progresso { min-width: 200px; text-align: right; font-size: 14px; color: var(--ink-soft); }
.semana-trilho { display: block; height: 8px; border-radius: 999px; background: var(--neutral-pill-soft); margin-top: 6px; overflow: hidden; }
.semana-trilho span { display: block; height: 100%; border-radius: 999px; background: var(--good); }
.semana-grupo { margin: 18px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.semana-mes { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; color: var(--ink-soft); }
.inicio-vazio { text-align: center; padding: 26px 10px 12px; }
.inicio-vazio strong { display: block; font-size: 17px; margin-bottom: 4px; }
.inicio-vazio-icone { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--good-soft); color: var(--good); font-size: 22px; font-weight: 800; margin-bottom: 10px; }
/* aba Empresas no momento certo (item E, casos/momento.py) */
.momento-pedir { text-align: center; padding: 34px 28px; border-top: 4px solid var(--beam); }
.momento-pedir h2 { font-size: 24px; margin: 8px 0; }
.momento-pedir > p { max-width: 640px; margin: 0 auto 18px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.momento-pedir-icone .icone { width: 40px; height: 40px; color: var(--beam); }
.momento-pedir .momento-form { justify-content: center; max-width: 680px; margin: 0 auto; }
.momento-form { display: flex; flex-wrap: wrap; gap: 8px; }
.momento-form input[type=text] { flex: 1 1 320px; min-width: 0; font-size: 15px; padding: 11px 14px; }
.momento-dica { margin: 8px 0 0; }
.momento-pedir .momento-dica { max-width: 680px; margin: 10px auto 0; }
.momento-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px !important; }
.momento-chip { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.momento-trocar { font-size: 13px; margin-left: 4px; }
.momento-trocar-caixa { margin: 12px 0 4px; padding: 14px; background: var(--surface-2); border-radius: 10px; }
/* 19/10/2026: filtro 30 | 60 | 90 dias do momento certo */
.momento-janelas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 14px 0 0; font-size: 13.5px; }
.momento-janelas span { color: var(--ink-faint); margin-right: 2px; }
.momento-janelas a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-soft); text-decoration: none; }
.momento-janelas a:hover { border-color: var(--accent); color: var(--accent); }
.momento-janelas a.ativa { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.momento-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 16px 0 14px; }
.momento-numero { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 2px solid var(--border); border-radius: 12px; padding: 14px 16px;
  font-weight: 400; transition: border-color .15s, box-shadow .15s; }
.momento-numero:hover { background: var(--surface); color: var(--ink); border-color: var(--border-forte); }
.momento-n { font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.momento-rotulo { font-size: 15px; font-weight: 650; }
.momento-quando { font-size: 12px; color: var(--ink-faint); }
.momento-abriu .momento-n { color: var(--good); }
.momento-saiu_simples .momento-n { color: var(--beam); }
.momento-entrou_divida .momento-n { color: var(--bad); }
.momento-numero.ativo.momento-abriu { border-color: var(--good); background: var(--good-soft); }
.momento-numero.ativo.momento-saiu_simples { border-color: var(--beam); background: var(--beam-soft); }
.momento-numero.ativo.momento-entrou_divida { border-color: var(--bad); background: var(--bad-soft); }
.momento-lista { list-style: none; padding: 0; margin: 0 0 8px; }
.momento-lista li { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border); }
.momento-lista li:last-child { border-bottom: 0; }
.momento-empresa { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.momento-valor { text-align: right; font-weight: 750; color: var(--bad); white-space: nowrap; }
.momento-valor small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-faint); }
@media (max-width: 600px) { .momento-lista li { flex-wrap: wrap; } .momento-valor { text-align: left; } .semana-progresso { text-align: left; } }
.oab-tabela td.oab-teses { white-space: normal; min-width: 240px; }
.oab-tabela td.oab-teses .pill { white-space: normal; display: inline-block; margin: 0 4px 4px 0; line-height: 1.3; }
/* 05/10/2026: Sua semana no Inicio (casos/semana.py), com destaque e bolinha de feito */
.sua-semana { background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius);
  padding: 16px 20px; margin: 0 0 22px; }
.semana-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.semana-topo h2 { margin: 0; }
.semana-contagem { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.semana-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.semana-lista li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.45; }
.semana-lista li:last-child { border-bottom: 0; }
.semana-lista form { margin: 0; flex: none; }
.semana-lista a.semana-texto { color: var(--ink); font-weight: 600; flex: 1; }
.semana-lista li.semana-info a.semana-texto { font-weight: 400; color: var(--ink-soft); }
button.bolinha, .bolinha { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px;
  padding: 0; margin-top: 1px; border-radius: 50%; border: 2px solid var(--border-forte); background: var(--surface);
  color: transparent; font-size: 13px; line-height: 1; }
button.bolinha:hover, button.bolinha:focus-visible { border-color: var(--good); background: var(--good-soft); color: var(--good); }
.bolinha.marcada { background: var(--good); border-color: var(--good); color: #fff; }
.semana-lista li.feito { color: var(--ink-faint); }
.semana-lista li.feito .semana-texto { flex: 1; text-decoration: line-through; }
.semana-quem { flex: none; font-size: 12.5px; }
.semana-tudo { margin: 8px 0 0; color: var(--good); font-weight: 600; }
form.conferir-and { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--ink-soft); }

/* plano de prospeccao (04/10/2026): etapas no topo e o formulario do cartao */
.etapas-prospeccao { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 12px; }
.etapa-chip { padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--ink-soft); font-size: 13px; text-decoration: none; }
.etapa-chip strong { color: var(--ink); margin-left: 3px; }
.etapa-chip:hover { border-color: var(--accent); text-decoration: none; }
.etapa-chip.ativo { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.etapa-hoje { border-color: var(--beam); }
.pill-retomar { background: var(--beam); color: #23180a; }
form.prospeccao { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 10px 0 4px;
  padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
form.prospeccao .campo { margin: 0; }
form.prospeccao .campo-largo { flex: 1 1 260px; }
form.prospeccao input[type=text] { width: 100%; }

/* lista de movimentacoes / processos contra o cliente (Processos e ficha do cliente; 04/10/2026) */
.lista-mov { list-style: none; margin: 8px 0 0; padding: 0; }
.lista-mov li { display: grid; grid-template-columns: 88px 1fr; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.lista-mov li:first-child { border-top: none; }
.lista-mov .mov-data { color: var(--ink-soft); font-size: 13px; }
.lista-mov .celula-meta { grid-column: 2; }
.lista-mov .mov-importante .mov-texto { font-weight: 650; }

/* 06/10/2026 (Luis: "a parte Processos eu acho muito feia... reformular por inteiro"):
   Acompanhamento processual em abas (casos/processos.html), nos cartoes do Inicio */
.acp-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.acp-topo > div { flex: 1 1 420px; }
.acp-topo .botao-cheio { flex: none; margin-top: 6px; }
.acp-abas { margin-bottom: 22px; }
.acp-painel .inicio-cartao-topo { align-items: center; }
.acp-painel .inicio-cartao-topo > div:first-child { flex: 1 1 380px; }
.acp-abas a { white-space: nowrap; }
.acp-badge-neutro { background: var(--neutral-pill-soft); color: var(--ink-soft); }
.acp-abas a.ativa .acp-badge-neutro { background: var(--surface); color: var(--accent); }
.acp-badge-bad, .acp-abas a.ativa .acp-badge-bad { background: var(--bad); color: #fff; }
.acp-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.acp-lista > li { display: flex; align-items: flex-start; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--border); }
.acp-lista > li:last-child { border-bottom: 0; }
.acp-data { flex: none; width: 50px; display: flex; flex-direction: column; align-items: center; padding: 6px 0 5px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); line-height: 1.1; }
.acp-data strong { font-size: 20px; font-weight: 800; color: var(--ink); }
.acp-data span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.acp-corpo { flex: 1; min-width: 0; }
.acp-linha1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.acp-dono { font-weight: 700; color: var(--ink); }
.acp-numero { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.acp-texto { margin: 4px 0 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.acp-importante .acp-data { background: var(--beam-soft); border-color: var(--beam); }
.acp-importante .acp-texto { color: var(--ink); font-weight: 600; }
.acp-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px;
  border-radius: 999px; background: var(--beam-soft); color: var(--beam); }
.acp-tag-ok { background: var(--good-soft); color: var(--good); }
.acp-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 8px; }
.acp-acoes form { margin: 0; }
.acp-acoes .avisar-cliente, .acp-pagina-botoes .avisar-cliente { display: inline; margin: 0; font-size: 13px; }
.acp-acoes form.conferir-and { margin: 0; }
.acp-ok { font-size: 13px; color: var(--good); font-weight: 600; }
.acp-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.acp-filtros button { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-size: 13.5px; font-weight: 600; }
.acp-filtros button b { margin-left: 4px; color: var(--ink); }
.acp-filtros button:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.acp-filtros button.ativo { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.acp-rodape { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-faint); }
/* aba Processos */
.acp-novo > summary { cursor: pointer; font-size: 17px; font-weight: 700; list-style: none; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; }
.acp-novo > summary::-webkit-details-marker { display: none; }
.acp-novo > summary::before, .acp-procs details > summary::before { content: none; display: none; }
.acp-novo > summary .diag-meta { font-size: 13px; font-weight: 400; margin-left: auto; }
.acp-mais { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 19px; line-height: 1; }
.acp-novo[open] > summary { margin-bottom: 14px; }
.acp-novo .form-colar-processos { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.acp-novo .form-colar-processos .campo { margin: 0; flex: 1 1 220px; }
.acp-novo .form-colar-processos .campo-largo { flex-basis: 100%; }
.acp-novo textarea, .acp-novo select, .acp-novo input[type=text] { width: 100%; }
.acp-ligar { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.acp-ligar > summary { cursor: pointer; font-weight: 600; color: var(--accent); margin-bottom: 10px; }
.acp-busca { flex: 0 1 280px; min-width: 0; padding: 9px 14px; border-radius: 999px; }
.acp-procs > li { display: block; padding: 0; }
.acp-procs details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  padding: 14px 6px; border-radius: 8px; }
.acp-procs details > summary::-webkit-details-marker { display: none; }
.acp-procs details > summary:hover { background: var(--surface-2); }
.acp-procs details > summary::after { content: "›"; flex: none; display: inline-block; font-size: 22px; color: var(--ink-faint); transition: transform .15s; }
.acp-procs details[open] > summary::after { transform: rotate(90deg); }
.acp-proc-nome { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acp-proc-ultimo { flex: 1 1 45%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.acp-ultimo-texto { font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.acp-chip { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--neutral-pill-soft); color: var(--ink-soft); }
.acp-chip-novo { background: var(--good-soft); color: var(--good); }
.acp-chip-parado { background: var(--warn-soft); color: var(--warn); }
.acp-proc-detalhe { padding: 4px 6px 16px 18px; }
.acp-links-proc { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.acp-links-proc .botao-link { font-size: 13px; padding: 0; }
.acp-link-fraco { color: var(--ink-faint); }
.acp-cnj-aviso { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--ink); font-size: 14px; }
.acp-proc-botoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.acp-proc-botoes form { margin: 0; }
/* aba Prazos */
.acp-agenda { flex: none; }
.semana-grupo span { font-weight: 600; margin-left: 4px; }
.acp-grupo-atrasado { color: var(--bad); }
.acp-grupo-semana { color: var(--beam); }
.acp-prazo-atrasado .acp-data { background: var(--bad-soft); border-color: var(--bad); }
.acp-prazo-atrasado .acp-data strong { color: var(--bad); }
.acp-prazo-semana .acp-data { background: var(--beam-soft); border-color: var(--beam); }
.acp-tipo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; }
.acp-tipo-prazo { background: var(--bad-soft); color: var(--bad); }
.acp-tipo-acao { background: var(--accent-soft); color: var(--accent); }
.acp-prazos form { margin: 0; flex: none; align-self: center; }
/* quadro Empresas vigiadas (06/10/2026, Luis: "ta feio, quero algo mais bonito"): anel com o uso,
   campo de CNPJ em destaque, empresas em cartoezinhos; teto cheio = plano de cima ou pacote */
.acp-vigiados { flex: none; min-width: 210px; text-align: right; font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.acp-vigiados strong { color: var(--ink); font-size: 16px; }
.acp-vigiados:hover { text-decoration: none; color: var(--accent); }
.acp-vig-topo { display: flex; align-items: center; gap: 22px; }
.acp-anel { --p: 0; flex: none; width: 96px; height: 96px; border-radius: 50%; display: grid; place-content: center;
  text-align: center; line-height: 1.05;
  background: radial-gradient(closest-side, var(--surface) 78%, transparent 79%),
              conic-gradient(var(--good) calc(var(--p) * 1%), var(--neutral-pill-soft) 0); }
.acp-anel-cheio { background: radial-gradient(closest-side, var(--surface) 78%, transparent 79%),
                  conic-gradient(var(--beam) calc(var(--p) * 1%), var(--neutral-pill-soft) 0); }
.acp-anel strong { font-size: 28px; font-weight: 800; color: var(--ink); }
.acp-anel span { font-size: 12.5px; font-weight: 600; color: var(--ink-faint); }
.acp-vig-texto h2 { margin: 0 0 4px; font-size: 21px; }
.acp-vig-texto p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; max-width: 640px; }
.acp-vig-form { margin: 20px 0 0; padding: 16px 18px; border-radius: 12px; background: var(--accent-soft); }
.acp-vig-form label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--accent); }
.acp-vig-campo { display: flex; gap: 10px; align-items: stretch; }
.acp-vig-campo textarea { flex: 1; min-width: 0; min-height: 46px; resize: vertical; font-size: 15px; padding: 11px 14px;
  border-radius: 10px; font-family: var(--font-mono); }
.acp-vig-campo button { flex: none; padding: 0 26px; }
.acp-vig-pessoa { margin-top: 12px; }
.acp-vig-pessoa > summary { cursor: pointer; font-size: 13.5px; font-weight: 650; color: var(--accent); margin-bottom: 8px; }
.acp-vig-pessoa input[type=text] { flex: 1 1 260px; min-width: 0; font-size: 15px; padding: 11px 14px; border-radius: 10px; }
.acp-vig-pessoa input.acp-vig-cpf { flex: 0 1 180px; font-family: var(--font-mono); }
.acp-vig-pessoa .diag-meta { margin: 8px 0 0; }
.acp-vig-mais { margin-top: 20px; }
.acp-vig-mais > p { margin: 0 0 14px; }
.acp-vig-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.acp-vig-opcao { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px;
  border: 2px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink-soft);
  font-size: 13.5px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.acp-vig-opcao:hover { border-color: var(--accent); text-decoration: none; box-shadow: 0 6px 18px -12px rgba(16, 32, 45, .5); }
.acp-vig-opcao strong { color: var(--ink); font-size: 16px; }
.acp-vig-n { font-size: 24px; font-weight: 800; color: var(--accent); letter-spacing: -.01em; }
.acp-vig-opcao.recomendada { border-color: var(--accent); background: var(--accent-soft); }
.acp-vig-selo { position: absolute; top: -11px; left: 14px; padding: 3px 10px; border-radius: 999px; background: var(--beam);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.acp-vig-grade { list-style: none; margin: 20px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; }  /* 08/10/2026 (auditoria #26): min() - no celular o cartao de 320px passava da tela */
.acp-vig-grade li { display: flex; align-items: center; gap: 12px; padding: 11px 10px 11px 14px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface-2); }
.acp-vig-ponto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); }
.acp-vig-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acp-vig-nome a { font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.acp-vig-nome small { font-size: 12px; color: var(--ink-faint); }
.acp-vig-grade form { margin: 0; }
button.acp-vig-tirar { background: none; border: none; color: var(--ink-faint); font-size: 19px; line-height: 1; padding: 3px 7px; border-radius: 7px; }
button.acp-vig-tirar:hover { background: var(--bad-soft); color: var(--bad); }
button.acp-vig-tirar:disabled { opacity: .3; cursor: not-allowed; background: none; color: var(--ink-faint); }
/* 08/10/2026 (auditoria #26): texto corrido, nao flex - em flex o "×" virava um item e caia sozinho numa linha */
.acp-vig-trocas { margin: 22px 0 0; font-size: 14px; color: var(--ink-soft); line-height: 1.9; }
.acp-vig-trocas .diag-meta { display: block; margin: 0; line-height: 1.4; }
.acp-vig-trocas-n { padding: 3px 10px; border-radius: 999px; background: var(--good-soft); color: var(--good); font-weight: 700; font-size: 13px; }
.acp-vig-trocas-n.esgotadas { background: var(--warn-soft); color: var(--warn); }
.acp-vig-trocas + .acp-vig-grade { margin-top: 10px; }
/* contato da empresa (da Receita ou do escritorio), "Mensagens prontas" e "Editar contato" (06/10/2026) */
.acp-vig-grade li { flex-direction: column; align-items: stretch; gap: 8px; }
.acp-vig-cab { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acp-contato { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; color: var(--ink-soft); }
.acp-contato-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acp-contato-item em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--beam); background: var(--beam-soft); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.acp-sem-contato { color: var(--bad); }
.acp-contato-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.acp-vig-grade .acp-contato { padding-left: 21px; }
.acp-contra .acp-contato { flex-direction: row; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; }
.acp-contra .acp-contato-botoes { margin-top: 8px; }
.acp-menu { position: relative; }
.acp-menu > summary { list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent);
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); white-space: nowrap; }
.acp-menu > summary::-webkit-details-marker { display: none; }
.acp-menu > summary::before { content: none; display: none; }
.acp-menu > summary:hover, .acp-menu[open] > summary { border-color: var(--accent); background: var(--accent-soft); }
.acp-menu-caixa { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 350px; max-width: calc(100vw - 48px);
  display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 16px 36px -14px rgba(16, 32, 45, .45); }
.acp-msg strong { display: block; margin-bottom: 4px; font-size: 13.5px; color: var(--ink); }
.acp-msg p { margin: 0 0 6px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px;
  line-height: 1.45; color: var(--ink-soft); }
.acp-msg-links { font-size: 13px; }
.acp-msg-nota { margin: 0; }
.acp-contato-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.acp-contato-form input { font-size: 14px; padding: 8px 10px; }
.acp-contato-form p { margin: 0; }
.acp-contato-form button { align-self: flex-start; }
.acp-vig-outros { margin-top: 16px; }
.acp-vig-outros > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.acp-vig-outros ul { list-style: none; margin: 8px 0 0; padding: 0; }
.acp-vig-outros li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--border); font-size: 14px; }
.acp-vig-outros form { margin: 0; }
@media (max-width: 600px) {
  .acp-vig-topo { flex-direction: column; align-items: flex-start; gap: 14px; }
  .acp-vig-campo { flex-direction: column; }
  .acp-vig-campo button { padding: 11px; }
  .acp-vigiados { text-align: left; }
  /* 08/10/2026 (auditoria #26): em coluna a base do flex (260px, 180px, 96px) virava ALTURA:
     Nome e CPF ficavam gigantes */
  .acp-vig-campo > *, .acp-vig-campo > .acp-vig-uf, .acp-vig-pessoa input[type=text], .acp-vig-pessoa input.acp-vig-cpf { flex: none; }
}
/* 08/10/2026 (auditoria #26, #75): no celular e no tablet a caixa das mensagens prontas abre
   embaixo do botao, dentro do cartao, em vez de flutuar e passar da borda da tela (vale para as listas) */
@media (max-width: 820px) {
  .acp-menu[open] { flex-basis: 100%; }
  .acp-menu-caixa { position: static; width: auto; max-width: none; margin-top: 6px; }
}
/* aba Pagina do cliente */
.acp-paginas > li { align-items: center; }
.acp-pagina-botoes { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; justify-content: flex-end; }
.acp-pagina-botoes form { margin: 0; }
.acp-aberto { color: var(--good); font-weight: 700; }
@media (max-width: 700px) {
  .acp-abas.abas-grupo { flex-wrap: wrap; width: 100%; border-radius: 16px; overflow: visible; }
  .acp-abas.abas-grupo a { padding: 7px 12px; font-size: 13.5px; }
  .acp-lista > li { gap: 12px; }
  .acp-procs details > summary { flex-wrap: wrap; gap: 8px; }
  .acp-proc-nome, .acp-proc-ultimo { flex-basis: 100%; }
  .acp-procs details > summary::after { display: none; }
  .acp-paginas > li { flex-wrap: wrap; }
  .acp-pagina-botoes { justify-content: flex-start; }
  .acp-busca { flex-basis: 100%; }
  .acp-novo > summary .diag-meta { margin-left: 0; flex-basis: 100%; }
}

/* 07/10/2026: planos com as frases dos anuncios; no computador a tabela e a peca principal */
.plano-antes { margin: 6px 0 2px; font-weight: 700; font-size: 14px; color: var(--accent); }
.so-celular { display: none; }
@media (max-width: 899px) { .so-computador { display: none; } .so-celular { display: block; } }
.comparar { margin: 10px 0 18px; }
.comparar h2 { font-size: 22px; margin: 0 0 12px; }
.comparar-rolagem { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  box-shadow: 0 8px 26px -18px rgba(16, 32, 45, .45); }
.comparar-tabela { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; }
.comparar-tabela th, .comparar-tabela td { padding: 11px 16px; border-bottom: 1px solid var(--border); text-align: center; }
.comparar-tabela tbody th { text-align: left; font-weight: 500; color: var(--ink); width: 44%; line-height: 1.4; }
.comparar-tabela thead th { vertical-align: top; padding: 20px 14px 16px; position: relative; }
.comparar-nome { display: block; font-size: 19px; font-weight: 800; color: var(--ink); }
.comparar-para { display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); margin: 2px 0 8px; min-height: 2.6em; }
.comparar-preco { display: block; font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.comparar-preco small { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.comparar-botao { display: block; margin-top: 10px; font-size: 14px; padding: 9px 10px; border-radius: 10px; text-align: center; }
.comparar-selo { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--beam); color: #fff;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 0 0 8px 8px; }
.comparar-grupo th { text-align: left !important; background: var(--surface-2); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--accent); padding: 9px 16px; }
.comparar-destaque { background: var(--accent-soft); }
.comparar-sim { color: var(--good); font-weight: 800; font-size: 18px; }
.comparar-nao { color: var(--ink-faint); font-size: 18px; }
.vd-comparar { max-width: 1040px; margin: 0 auto 26px; padding: 0 16px; }
.comparar-tabela th { text-transform: none; letter-spacing: normal; }
.comparar-tabela .comparar-grupo th { text-transform: uppercase; letter-spacing: .07em; }
.comparar-anual { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; }
.comparar-tabela { table-layout: fixed; }
.comparar-tabela thead th:first-child { width: 40%; }
.comparar-tabela tbody th { width: auto; }
.comparar-tabela thead th, .comparar-tabela thead th span, .comparar-tabela thead th a { white-space: normal; }
.comparar-tabela thead th .comparar-selo { white-space: nowrap; }
.comparar-tabela thead th { padding-top: 32px; }
/* 07/10/2026: no celular o plano recomendado (Escritorio) vem primeiro */
@media (max-width: 899px) { .planos .plano-destaque { order: -1; } }

/* ===== IA barata (07/10/2026): busca falando, intimacao traduzida, relatorio fiscal ===== */
.ia-selo { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px;
  background:rgba(255,255,255,.14); color:#fff; }
.ia-selo svg { width:12px; height:12px; }

/* busca falando */
.bf { position:relative; overflow:hidden; border-radius:16px; padding:22px 24px 18px; margin-bottom:16px;
  background:linear-gradient(135deg, #0f2739 0%, #14496b 100%); color:#fff;
  box-shadow:0 14px 34px -18px rgba(15,39,57,.65); }
.bf::after { content:""; position:absolute; right:-60px; top:-70px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(217,137,42,.45), transparent 70%); pointer-events:none; }
.bf h2 { margin:8px 0 4px; font-size:21px; color:#fff; text-transform:none; letter-spacing:0; }
.bf p.bf-sub { margin:0 0 14px; color:rgba(255,255,255,.78); font-size:14px; }
.bf-campo { position:relative; display:flex; gap:8px; z-index:1; }
.bf-campo .bf-lupa { position:absolute; left:15px; top:25px; transform:translateY(-50%); width:18px; height:18px; color:#8391a0; }
.bf-campo input { flex:1; min-width:0; height:50px; padding:0 16px 0 44px; font-size:16px; border-radius:12px;
  border:2px solid transparent; background:#fff; color:#16202a; box-shadow:0 2px 0 rgba(0,0,0,.06); }
.bf-campo input:focus { outline:none; border-color:#d9892a; }
.bf-campo button { height:50px; padding:0 22px; border-radius:12px; font-weight:700; font-size:15px;
  background:#d9892a; border-color:#d9892a; color:#fff; white-space:nowrap; }
.bf-campo button:hover { filter:brightness(1.07); background:#d9892a; border-color:#d9892a; }
.bf-exemplos { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; position:relative; z-index:1; }
.bf-exemplos span { font-size:12.5px; color:rgba(255,255,255,.7); align-self:center; }
.bf-exemplos button { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  font-size:12.5px; font-weight:500; padding:5px 12px; border-radius:999px; height:auto; }
.bf-exemplos button:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.45); }
.bf-entendi { margin-top:14px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18); display:flex; flex-wrap:wrap; align-items:center; gap:8px; position:relative; z-index:1; }
.bf-entendi > b { font-size:13px; color:rgba(255,255,255,.85); font-weight:600; margin-right:2px; }
.bf-chip { display:inline-flex; align-items:center; gap:6px; background:#fff; color:#14496b; font-weight:700;
  font-size:13px; padding:5px 11px; border-radius:999px; }
.bf-chip.falta { background:#fbf0e0; color:#7a4a0c; }
.bf-chip small { font-weight:500; color:#6b7c8c; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.bf-entendi .bf-dica { flex-basis:100%; font-size:12.5px; color:rgba(255,255,255,.72); }
.bf-aviso { margin-top:8px; font-size:13px; background:rgba(217,137,42,.22); border:1px solid rgba(217,137,42,.6);
  color:#fff; padding:8px 12px; border-radius:10px; position:relative; z-index:1; }
@media (max-width:640px) { .bf { padding:18px 16px 14px; } .bf-campo { flex-direction:column; } .bf-campo button { width:100%; }
  /* 08/10/2026 (auditoria #49): em coluna o flex:1 (base 0) achatava o campo para 24 px e a lupa caia fora */
  .bf-campo input { flex:none; } }

/* intimacao traduzida */
.ia-resumo { position:relative; display:block; margin:6px 0 8px; padding:10px 14px 10px 16px; border-radius:10px;
  background:linear-gradient(90deg, var(--accent-soft), var(--surface)); border:1px solid var(--border);
  border-left:4px solid var(--beam); box-shadow:0 6px 18px -12px rgba(16,32,45,.45); }
.ia-resumo .ia-rotulo { display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--beam); margin-bottom:3px; }
.ia-resumo .ia-rotulo svg { width:12px; height:12px; }
.ia-resumo .ia-texto { display:block; font-size:15px; font-weight:650; color:var(--ink); line-height:1.4; }
.ia-resumo + .acp-texto, .ia-resumo + span { color:var(--ink-faint); font-size:13px; }

/* relatorio fiscal -> editais */
.rf { position:relative; border-radius:16px; padding:22px 24px; margin:6px 0 22px; overflow:hidden;
  background:linear-gradient(135deg, var(--beam-soft) 0%, var(--surface) 65%); border:1px solid rgba(217,137,42,.35);
  box-shadow:0 14px 34px -22px rgba(153,112,26,.7); }
.rf-topo { display:flex; gap:16px; align-items:flex-start; }
.rf-icone { flex:none; width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:#d9892a; color:#fff; box-shadow:0 8px 18px -8px rgba(217,137,42,.9); }
.rf-icone svg { width:24px; height:24px; }
.rf h2 { margin:0 0 4px; font-size:20px; text-transform:none; letter-spacing:0; color:var(--ink); }
.rf .rf-sub { margin:0; color:var(--ink-soft); font-size:14px; }
.rf-novo { display:inline-block; margin-left:8px; font-size:10.5px; font-weight:800; letter-spacing:.08em;
  padding:2px 8px; border-radius:999px; background:var(--accent); color:#fff; vertical-align:middle; }
.rf-form { margin-top:16px; display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
.rf-drop { position:relative; flex:1; min-width:240px; display:flex; align-items:center; gap:12px; cursor:pointer; padding:14px 16px;
  border:2px dashed rgba(217,137,42,.6); border-radius:12px; background:var(--surface); transition:.15s; }
.rf-drop:hover, .rf-drop.sobre { border-color:#d9892a; background:var(--beam-soft); }
.rf-drop svg { width:26px; height:26px; color:#d9892a; flex:none; }
.rf-drop b { display:block; font-size:14.5px; color:var(--ink); }
.rf-drop small { color:var(--ink-faint); font-size:12.5px; }
.rf-drop input { position:absolute; width:1px; height:1px; opacity:0; }
.rf-form button { padding:0 24px; border-radius:12px; font-weight:700; font-size:15px; min-height:56px; }
.rf-seguro { margin:10px 0 0; font-size:12.5px; color:var(--ink-faint); display:flex; gap:6px; align-items:center; }
.rf-seguro svg { width:14px; height:14px; flex:none; }
.rf-res { margin-top:18px; display:grid; gap:14px; }
.rf-grupo { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); }
.rf-grupo-topo { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.rf-grupo-topo h3 { margin:0; font-size:16.5px; text-transform:none; letter-spacing:0; color:var(--ink); }
.rf-qtd { font-size:13px; color:var(--ink-soft); }
.rf-debito { display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:9px 0; border-top:1px solid var(--border); }
.rf-debito b { font-size:14.5px; } .rf-debito .rf-valor { font-weight:800; font-size:15px; text-align:right; white-space:nowrap; }
.rf-debito small { color:var(--ink-faint); font-size:12.5px; }
.rf-editais { margin-top:12px; display:grid; gap:8px; }
.rf-editais > p { margin:0; font-size:13px; font-weight:700; color:var(--ink-soft); }
.rf-edital { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 12px;
  border-radius:10px; background:var(--good-soft); border:1px solid rgba(31,122,77,.25); }
.rf-edital b { color:var(--good); font-size:14px; } .rf-edital small { display:block; color:var(--ink-soft); font-size:12.5px; }
.rf-edital .rf-prazo { flex:none; font-size:12px; font-weight:800; color:#7a5200; background:#fff3c4; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.rf-nada { padding:10px 12px; border-radius:10px; background:var(--surface-2); color:var(--ink-soft); font-size:13.5px; }
.rf-nota { font-size:12.5px; color:var(--ink-faint); margin:4px 0 0; }
@media (max-width:640px) { .rf { padding:18px 16px; } .rf-form button { width:100%; } .rf-topo { gap:12px; } }

/* 08/10/2026 (teste nuvem #159) */
/* No celular o selo "4 disponiveis" quebrava em duas linhas dentro do botao "Relatorio da
   reforma"; e telefone, e-mail e acoes dos cartoes tinham < 28 px de altura (minimo 40 px). */
.botao-reforma small { white-space: nowrap; }
@media (max-width: 760px) {   /* o <summary> ja tem 40 px (bloco "alvo de toque no celular") */
  .botao-reforma { flex-wrap: wrap; }
  a.prospec-item, .acp-msg-links a, .acp-msg-links .botao-link, .acoes-empresa button, .acoes-empresa a {
    display: inline-flex; align-items: center; min-height: 40px; }
}

/* 14/10/2026 (Luis: telas poluidas): menu "Mais" das empresas nas listas */
.mais-acoes > summary { padding: 5px 12px; font-size: 13px; }
.mais-acoes-caixa { width: 270px; gap: 2px; padding: 6px; }
.mais-acoes-caixa form { margin: 0; }
.mais-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600;
  text-align: left; text-decoration: none; cursor: pointer; }
.mais-item:hover { background: var(--accent-soft); color: var(--ink); text-decoration: none; }
.mais-item small { font-weight: 500; color: var(--ink-soft); font-size: 11.5px; }
.mais-ia { padding: 4px 6px; cursor: default; }
.mais-ia:hover { background: none; }
.mais-ia .ia-botao { width: 100%; text-align: left; }

/* 14/10/2026: diagnostico - perguntas ao cliente em lista, as teses abrem no clique */
.perguntas-cliente:has(.pergunta-linha) { display: flex; flex-direction: column; gap: 6px; }
.pergunta-linha { padding: 10px 14px; }
.pergunta-linha > summary.pergunta-cliente-titulo { margin: 0; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: flex-start; gap: 4px 12px; text-align: left; color: var(--ink); font-weight: 600; }
.pergunta-linha > summary.pergunta-cliente-titulo > span:first-child { flex: 1 1 auto; }
.pergunta-linha > summary .diag-meta { font-weight: 500; white-space: nowrap; }
.pergunta-linha[open] > summary { margin-bottom: 8px; }

/* 14/10/2026: ficha do cliente - uma linha por tese, com as bolinhas do caminho */
.caso-linha > summary { cursor: pointer; list-style: none; padding: 4px 0; }
.caso-linha > summary::-webkit-details-marker { display: none; }
.caso-linha[open] > summary { margin-bottom: 10px; }
.caso-bolinhas { display: inline-flex; gap: 4px; }
.caso-bolinhas span { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--border-forte, #9aa7b3); }
.caso-bolinhas span.feita { background: var(--ok, #1e8a4c); border-color: var(--ok, #1e8a4c); }

.caso-linha + .ficha-sub, .caso-linha ~ .ficha-sub { margin-top: 26px; }

/* 14/10/2026: JusFarol | Minha marca, ao lado do tema */
.topo .tema-troca:has(+ .marca-troca) { margin-right: 0; }
.topo .marca-troca { margin: 0 auto 0 8px; }
.topo .marca-troca button { padding: 5px 10px; }