/* =============================================================================
   PELE DO SISTEMA — o gerador vestido com a gramática visual do rbfd-sistema
   -----------------------------------------------------------------------------
   ADITIVA, como a anterior. Entra no index.html DEPOIS do style.css, no lugar
   exato onde estava a linha da skin-rbfd.css:

       <link rel="stylesheet" href="style.css">
       <link rel="stylesheet" href="pele-sistema.css">   <-- só esta linha

   PARA DESFAZER: troque esta linha de volta por `skin-rbfd.css` e, no index.html,
   remova o bloco <header class="topo"> (está marcado por comentário) devolvendo o
   #user-chip e o botão #nav-avisos ao menu lateral, de onde eles vieram. O arquivo
   antigo continua em disco, intacto, e o index original está em .backup-moldura/.

   POR QUE ESTA PELE EXISTE. O escritório abre o sistema de processos o dia
   inteiro; o gerador era outra casa — rail navy, barra diagonal, campo sem
   borda, botão sem fundo. Aqui os tokens, as formas e os pesos são OS MESMOS do
   `rbfd-sistema/public/estilo.css`: nenhuma cor foi escolhida de novo.

   COMO ELA ALCANÇA TANTA COISA COM POUCO. O style.css do app consome variáveis
   (--accent, --panel, --line…). Remapear os tokens no bloco 1 já re-veste a
   maior parte das telas; do bloco 2 em diante só está o que o padrão do sistema
   desenha de forma DIFERENTE — moldura, botão, campo, tabela, selo.

   O QUE ELA NÃO TOCA. O texto do contrato (a formatação é a do modelo
   importado), o portal do comprador (revisao.html tem folha própria) e o
   comportamento da skin-rbfd.js, que continua carregada: etapas do contrato,
   "próximo passo", painéis do detalhe, aviso em cartão. Aquele arquivo injeta o
   próprio CSS e não depende deste.
   ============================================================================= */

/* ============================ 1. TOKENS ============================
   À esquerda, o nome que o app já usa; à direita, o valor do sistema de
   processos. É este bloco que faz o grosso da troca. */
:root {
  /* marca e superfícies — iguais aos do rbfd-sistema */
  --navy: #193243;  --navy-700: #22425a;  --navy-600: #33586f;
  --brand-deep: #0f2231;  --brand-soft: #2f4d62;
  --surface: #ffffff;  --surface-2: #f8fafb;  --bg2: #e8eef3;
  --faint: #65747f;

  /* funcionais: os mesmos nomes e valores do sistema e da gestão financeira */
  --pos: #3B6D11;  --neg: #A32D2D;
  --over: #b5503a;  --today: #9b6e23;  --track: #3f7a6f;  --done: #90a0aa;

  /* forma */
  --r-lg: 20px;  --r-md: 14px;  --r-sm: 10px;  --pill: 999px;
  --shadow-sm: 0 1px 2px rgba(25,50,67,.06);
  --shadow-md: 0 1px 2px rgba(25,50,67,.05), 0 5px 14px -8px rgba(25,50,67,.20);
  --shadow-alto: 0 1px 2px rgba(25,50,67,.05), 0 10px 30px -12px rgba(25,50,67,.18);
  --altura-topo: 56px;  --largura-lateral: 216px;

  /* ---- os tokens que o app já consumia, remapeados ---- */
  --bg: #f4f6f7;
  --panel: #ffffff;
  --ink: #1b2a36;
  --muted: #5b6b77;
  --line: #e7ebee;
  --line-strong: #dde3e7;
  --accent: #193243;
  --accent-ink: #0f2231;
  --accent-soft: #e8eef3;
  --danger: #A32D2D;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(25,50,67,.06);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* 13px é o corpo do sistema de processos. O app vinha em 15px: a diferença
   parece pequena escrita, mas é ela que faz uma tabela de contratos caber na
   tela sem virar cartaz. */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px; line-height: 1.5; background: var(--bg); color: var(--ink);
}
.num, .ct-num, .ct-data, .ct-cod { font-variant-numeric: tabular-nums; }

/* ============================ 2. MOLDURA ============================
   A barra atravessa a janela e o menu desce por baixo dela — o arranjo que o
   sistema adotou em 29/08/2026. O <header class="topo"> vem do index.html. */
.app {
  display: grid;
  grid-template-columns: var(--largura-lateral) minmax(0, 1fr);
  grid-template-areas: "barra barra" "lado principal";
  /* a sobra vai toda para o conteúdo: sem isto, numa tela curta a grade
     distribui a diferença entre as duas linhas e o conteúdo desce sozinho */
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

header.topo {
  grid-area: barra; position: sticky; top: 0; z-index: 60;
  background: var(--surface); border-bottom: 1px solid rgba(25,50,67,.10);
  height: var(--altura-topo); display: flex; align-items: center; gap: 16px;
  padding: 0 18px;
}
/* O canto esquerdo tem a largura do menu, para o conteúdo começar na mesma
   vertical em que a marca termina. */
.topo-canto {
  flex: none; width: max(var(--largura-lateral), 152px);
  display: flex; align-items: center; gap: 10px; padding-right: 12px;
}
.topo-marca img { display: block; height: 40px; width: auto; }
.topo-nome { font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.topo-onde { font-size: 11.5px; color: var(--muted); }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }

/* O SINO, no canto direito da barra — o lugar dele no sistema de processos.
   Antes ele era um item do menu, porque este app não tinha barra de cima; agora
   tem. O botão e o contador continuam com os mesmos ids: o ui.js abre a tela e o
   avisos.js escreve o número sem saber que o sino mudou de endereço. */
.topo-dir .botao-icone {
  position: relative; width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: none; border-radius: var(--r-sm); color: var(--muted); cursor: pointer;
  transition: color .12s, background .12s;
}
.topo-dir .botao-icone:hover { color: var(--navy); background: rgba(25,50,67,.06); }
.topo-dir .botao-icone.ativo { color: var(--navy); background: var(--bg2); }
.sino-conta {
  position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: var(--pill); background: var(--over); color: #fff;
  font-size: 9.5px; font-weight: 700; display: grid; place-items: center;
}
.sino-conta[hidden] { display: none; }

/* o título do app sai da lateral: quem identifica a casa agora é a barra */
.brand { display: none; }

.sidebar {
  grid-area: lado; background: var(--surface); border-right: 1px solid var(--line);
  padding: 10px 10px 24px; gap: 0; position: sticky; top: var(--altura-topo);
  height: calc(100vh - var(--altura-topo)); overflow-y: auto;
  display: flex; flex-direction: column;
}
/* O NAV TOMA A ALTURA QUE SOBRA — é isso que empurra Configurações para o pé.
   Com `flex: 0 0 auto` ele tinha a altura dos itens, e o `margin-top: auto` do
   item de pé não tinha espaço nenhum para gastar: Configurações ficava colada
   no último item do menu, com o separador cruzando o nome de cima. */
.side-nav { gap: 1px; flex: 1 1 auto; min-height: 0; }
.side-nav-pe { margin-top: auto; padding-top: 9px; }
.nav-s {
  padding: 14px 10px 5px; font-size: 9.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
}
.nav-s:first-child { padding-top: 4px; }
.side-nav-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  font-size: 12.5px; font-weight: 400; color: var(--muted);
  background: none; border: none; border-radius: var(--r-sm); padding: 8px 10px;
  cursor: pointer; transition: background .12s, color .12s;
}
.side-nav-item svg { flex: none; color: var(--faint); opacity: 1; }
.side-nav-item:hover { background: var(--surface-2); color: var(--ink); transform: none; }
.side-nav-item:hover svg { color: var(--muted); }
.side-nav-item.ativo { background: var(--navy); color: #fff; font-weight: 500; }
.side-nav-item.ativo svg { color: #fff; }
.side-nav-item:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 2px; }
/* a barra diagonal da pele anterior não existe neste desenho: quem marca o
   item aberto é o retângulo navy. A skin-rbfd.js continua montando o trilho —
   ele só fica fora de cena. A regra é mais específica que a que ela injeta. */
.side-nav .skin-trilho { display: none; }
.side-nav-item.ativo::after { display: none; }
.badge, .side-nav-item .badge {
  margin-left: auto; min-width: 19px; text-align: center; padding: 1px 6px;
  border-radius: var(--pill); background: var(--bg2); color: var(--muted);
  font-size: 10px; font-weight: 600;
}
.side-nav-item.ativo .badge { background: rgba(255,255,255,.18); color: #fff; }
.side-nav-pe::before { opacity: .12; }

.sidebar-label {
  padding: 14px 10px 5px; margin: 0; font-size: 9.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
}
#lista-modelos { gap: 6px; padding: 0 4px; }
.modelo-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; gap: 2px; box-shadow: none;
}
.modelo-item:hover { border-color: var(--line-strong); background: var(--surface-2); }
.modelo-item.ativo { border-color: var(--navy-600); background: var(--bg2); }
.mi-nome { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.mi-desc { font-size: 11px; color: var(--muted); }

/* o usuário sobe para a barra (o index.html move o #user-chip para lá) */
.topo-dir .user-chip {
  margin: 0; flex-direction: column; align-items: flex-end; gap: 0;
  line-height: 1.25; padding-left: 12px; border-left: 1px solid var(--line);
}
.topo-dir .user-chip .uc-nome { font-size: 12px; font-weight: 600; color: var(--ink); }
.topo-dir .user-chip .uc-sair { margin: 0; font-size: 10.5px; color: var(--muted); text-decoration: underline; }
.topo-dir .user-chip .uc-sair:hover { color: var(--navy); }
.sidebar-foot { padding: 16px 10px 0; font-size: 10.5px; color: var(--faint); line-height: 1.5; }

.main { padding: 20px 22px 48px; max-width: 1500px; width: 100%; margin: 0 auto; }

/* ============================ 3. CABEÇALHOS DE TELA ============================ */
.rev-topo h2, .form-head h2 {
  font-size: 17px; font-weight: 600; color: var(--navy); letter-spacing: 0; margin: 0 0 3px;
}
.rev-sub, .form-head p { font-size: 11.5px; color: var(--muted); }
.rev-vazio { font-size: 12px; color: var(--faint); }
.sec-t2, .assist-head, .cfg-h {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint);
}
.bloco h3 {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 14px;
}
.muted { color: var(--muted); }

/* ============================ 4. CARTÕES ============================
   Nem tudo é cartão: a borda e a sombra marcam objeto separado. Cartão pousado
   na página usa a sombra leve; o que flutua (modal, menu) usa a alta. */
.bloco, .card, .rev-saida, .assist, .forma, .ct-tabwrap, .rev-card, .cfg-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.bloco, .rev-saida, .assist { padding: 18px 20px; }
.rev-card { padding: 14px 16px; transition: border-color .12s, box-shadow .12s; }
.rev-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.rc-tit { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rc-sub { font-size: 11.5px; color: var(--muted); }
.rc-data { font-size: 10.5px; color: var(--faint); }
.ct-dados-box, .ct-passar, .ct-link {
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
}
.m-row2 .k {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint);
}
.m-row2 .v { font-size: 12.5px; color: var(--ink); }
.ed-modal, .av-modal, .ed-editor {
  border-radius: var(--r-md); box-shadow: var(--shadow-alto); border: 1px solid var(--line-strong);
}

/* ============================ 5. BOTÕES ============================
   Ação principal: navy sólido. Secundária: branca com fio. O sistema não tem
   botão-texto — o que parece link é link. */
.btn-primary, .lg-btn, .ed-editor .btn-p, .cfg-acao {
  font-family: inherit; font-size: 12px; font-weight: 500; padding: 7px 14px;
  border-radius: var(--r-sm); background: var(--navy); color: #fff;
  border: 1px solid var(--navy); cursor: pointer; box-shadow: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.btn-primary:hover, .lg-btn:hover, .ed-editor .btn-p:hover, .cfg-acao:hover { background: var(--brand-deep); }
.btn-primary:disabled { opacity: .45; cursor: default; }
/* a barra diagonal que entrava no hover sai junto com a pele anterior */
.btn-primary::before, .ed-editor .btn-p::before { content: none; }

.btn-secondary, .btn-ghost, .ct-mini, .ct-restaurar, .mini {
  font-family: inherit; font-size: 12px; font-weight: 500; padding: 7px 14px;
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); cursor: pointer;
}
.btn-secondary:hover, .btn-ghost:hover, .ct-mini:hover, .ct-restaurar:hover, .mini:hover {
  background: var(--surface-2); border-color: var(--navy-600);
}
.mini, .ct-mini { font-size: 11px; padding: 4px 11px; border-radius: var(--pill); color: var(--muted); }

.btn-danger, .link-danger, .ct-del-1 {
  font-family: inherit; font-size: 12px; font-weight: 500; padding: 7px 14px;
  border-radius: var(--r-sm); background: var(--surface); color: var(--neg);
  border: 1px solid var(--line-strong); cursor: pointer;
}
.btn-danger:hover, .link-danger:hover, .ct-del-1:hover { border-color: var(--neg); background: rgba(163,45,45,.05); }

.link-back {
  background: none; border: none; padding: 0; color: var(--muted);
  font-size: 11.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.link-back:hover { color: var(--navy); text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 2px; }

.actionbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.rs-botoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================ 6. CAMPOS ============================
   Borda inteira, e não só o filete de baixo: o campo tem de parecer um lugar
   onde se escreve, inclusive antes de receber o foco. */
input, select, textarea {
  font-family: inherit; font-size: 12.5px; font-weight: 400; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface-2); padding: 8px 10px;
  transition: border-color .12s, background .12s;
}
input:hover, select:hover, textarea:hover { border-color: var(--navy-600); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--navy); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(25,50,67,.09);
}
input::placeholder, textarea::placeholder { color: #a8b3bb; }
label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); gap: 5px;
}
.gc-sel { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.gc-sel-nota { font-size: 11px; color: var(--faint); }
.ct-fin, .ri-fund input, .ctl-row input {
  font-size: 11.5px; padding: 6px 9px; border-radius: var(--r-sm); background: var(--surface);
}

/* ============================ 7. TABELA E LISTA ============================ */
.ct-tabwrap { overflow-x: auto; }
.ct-tab { width: 100%; border-collapse: collapse; font-size: 12px; }
.ct-tab th, .ct-tab thead th {
  background: rgba(25,50,67,.04); color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-align: left; padding: 9px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--line-strong);
}
.ct-tab td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ct-tr { transition: background .12s; }
.ct-tr:hover { background: var(--surface-2); }
.ct-tr.sel { background: var(--bg2); }
.ct-c1 { font-weight: 600; color: var(--ink); }
.ct-codmini, .ct-data, .ct-resp { font-size: 11px; color: var(--faint); }
/* o título da coluna é um BOTÃO dentro do <th> (é ele que ordena) — quem pinta
   maiúscula e espaçamento é esta regra, não a célula */
.ct-th {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: none; border: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.ct-th:hover { color: var(--navy); text-decoration: none; }
.ct-seta { font-size: 8px; color: var(--faint); }
.ct-cbox { width: 34px; }
.ct-cbox input { accent-color: var(--navy); cursor: pointer; }
/* a coluna de ação aparece no hover da linha: em repouso a tabela fica limpa,
   e "Excluir" não fica piscando em todas as linhas ao mesmo tempo */
.ct-tab .ct-acao > * { opacity: 0; transition: opacity .12s; }
.ct-tr:hover .ct-acao > *, .ct-tab .ct-acao > *:focus { opacity: 1; }
.ct-del-1 { font-size: 11px; padding: 4px 11px; border-radius: var(--pill); }
.ct-filtrow td { background: var(--surface-2); border-bottom: 1px solid var(--line-strong); padding: 7px 8px; }
.ct-barra { margin-bottom: 14px; align-items: center; }
.ct-filtros { gap: 7px; margin: 0; }
.ct-selbar {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  color: var(--navy); font-size: 12px; box-shadow: var(--shadow-md);
}

/* chips de filtro — os "marcadores" do sistema */
.ct-fchip {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--pill);
  padding: 5px 12px; font-size: 11.5px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.ct-fchip:hover { border-color: var(--navy-600); color: var(--ink); background: var(--surface); }
.ct-fchip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.ct-fn { background: none; color: var(--faint); font-size: 10.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ct-fchip.on .ct-fn { color: rgba(255,255,255,.72); }
.ct-flix { border-style: dashed; }
.ct-flix.on { background: var(--done); border-color: var(--done); }
.ct-vista { border: 1px solid var(--line-strong); border-radius: var(--pill); overflow: hidden; }
.ct-vbtn { font-size: 11.5px; font-weight: 500; color: var(--muted); padding: 5px 13px; }
.ct-vbtn.on { background: var(--navy); color: #fff; }

/* ============================ 8. SITUAÇÃO ============================
   Selo em pílula, uma cor por etapa. É o que deixa varrer a carteira sem ler:
   as cores são as funcionais do sistema, não uma escala nova. */
.ct-badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--pill);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  background: rgba(144,160,170,.16); color: var(--done);
}
.ct-badge.st-rascunho { background: rgba(144,160,170,.16); color: var(--done); }
.ct-badge.st-em_revisao { background: rgba(63,122,111,.13); color: var(--track); }
.ct-badge.st-em_analise { background: rgba(155,110,35,.15); color: var(--today); }
.ct-badge.st-aguardando_construtora { background: rgba(181,80,58,.12); color: var(--over); }
.ct-badge.st-pronta { background: rgba(31,111,156,.12); color: #1f6f9c; }
.ct-badge.st-assinada { background: rgba(59,109,17,.10); color: var(--pos); }
.ct-badge.ct-urgente { background: rgba(163,45,45,.09); color: var(--neg); }
.rc-tags span {
  background: rgba(144,160,170,.16); color: var(--muted); border-radius: var(--pill);
  font-size: 10.5px; font-weight: 600; padding: 3px 10px;
}
.rc-tags .ok { background: rgba(59,109,17,.10); color: var(--pos); }
.rc-tags .pend { background: rgba(155,110,35,.15); color: var(--today); }
.ct-cod { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; }
.ct-ver { background: var(--bg2); color: var(--navy); border-radius: var(--r-sm); font-weight: 700; font-size: 11px; }

/* ============================ 9. PASSOS DO PREENCHIMENTO ============================
   As abas em pílula do sistema. O ✓ do passo pronto vira a cor funcional. */
.pw-barra { display: flex; gap: 5px; flex-wrap: wrap; padding: 12px 0; }
.pw-passo {
  font-size: 11.5px; font-weight: 500; color: var(--muted);
  background: none; border: 1px solid transparent; border-radius: var(--pill);
  padding: 6px 14px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
}
.pw-passo:hover { background: var(--surface); color: var(--ink); border-color: var(--line); }
.pw-passo.atual { background: var(--navy); color: #fff; border-color: var(--navy); }
.pw-passo .pw-n {
  width: 17px; height: 17px; border-radius: var(--pill); display: grid; place-items: center;
  background: var(--bg2); border: none; color: var(--muted); font-size: 10px; font-weight: 700;
}
.pw-passo.atual .pw-n { background: rgba(255,255,255,.2); color: #fff; }
.pw-passo.feito .pw-n { background: rgba(59,109,17,.12); color: var(--pos); }
.pw-passo.atual.feito .pw-n { background: rgba(255,255,255,.2); color: #fff; }
.pw-rodape { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); }
.pw-rodape .pw-conta { font-size: 11px; color: var(--faint); margin-right: auto; }

/* ============================ 10. ANÁLISE E ENVIO ============================ */
.rev-item, .al-item, .ri-head { border-radius: var(--r-md); }
.rev-item, .al-item { border: 1px solid var(--line); background: var(--surface); box-shadow: none; }
.ri-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border-radius: var(--pill); padding: 2px 8px;
}
.ri-badge.b-sug { background: rgba(31,111,156,.12); color: #1f6f9c; }
.ri-badge.b-com { background: var(--bg2); color: var(--muted); }
.ri-status { font-size: 11px; font-weight: 600; }
.ri-status.s-pendente { color: var(--faint); }
.ri-status.s-escalada { color: var(--today); }
.ri-redline del { color: var(--neg); }
.ri-redline ins { color: var(--pos); background: rgba(59,109,17,.08); text-decoration: none; padding: 0 2px; }
.rs-aviso {
  border: none; border-left: 3px solid var(--today); background: rgba(155,110,35,.07);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 11px 14px;
  font-size: 11.5px; color: var(--ink); line-height: 1.55; box-shadow: none;
}
.ct-aviso-retorno {
  border-left: 3px solid var(--track); background: rgba(63,122,111,.08);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 11px 14px; font-size: 11.5px;
}
.rs-selo { font-size: 11px; color: var(--pos); font-weight: 600; }
.rs-selo.pend { color: var(--today); }
.status { font-size: 11.5px; color: var(--muted); }
.status.ok { color: var(--pos); }
.status.erro { color: var(--neg); }

/* rastreio do envio: o ponto marcado é verde-lousa (a cor de "em curso" do
   sistema), e o que ainda não aconteceu fica no cinza-azulado — não no bege da
   paleta anterior, que sobrava aqui */
.rt-step { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 5px 0; }
.rt-dot {
  width: 18px; height: 18px; font-size: 10px; font-weight: 700;
  background: var(--bg2); color: var(--faint);
}
.rt-step.ok .rt-dot { background: var(--track); color: #fff; }
.rt-l { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.rt-step:not(.ok) .rt-l { color: var(--muted); }
.rt-w { margin-left: auto; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rt-envios { margin-left: 28px; }
.rt-envio {
  display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 12px;
}
.rt-envio .re-nome { font-size: 12px; font-weight: 600; color: var(--ink); }
.rt-envio .re-qt { color: var(--muted); font-size: 11px; }
.re-em, .rt-envio .re-em { margin-left: auto; font-size: 10.5px; color: var(--faint); }
.rev-item { border-left: 3px solid var(--line-strong); box-shadow: var(--shadow-sm); }
.ctl-t { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--navy); }
.ctl-est { font-size: 11px; color: var(--muted); line-height: 1.55; }
.ctl-ok { color: var(--pos); font-weight: 600; }
.ct-link-novo { border-color: var(--track); }

/* ============================ 11. LOGIN ============================
   O portão do sistema: fundo navy e a marca completa em branco — a única
   versão que o escritório tem dela. */
.login-gate { background: var(--navy); }
.lg-card {
  background: none; border: none; box-shadow: none; color: #fff;
  max-width: 340px; padding: 0;
}
.lg-logo {
  font-size: 0; line-height: 0; height: 58px; margin: 0 auto 18px; display: block;
  background: url("marca/RBFD_completo_branco.png") no-repeat center / contain;
}
.lg-sub { color: #a9bcc9; font-size: 12.5px; margin: 0 0 26px; }
.lg-btn {
  width: 100%; justify-content: center; background: #fff; color: var(--navy);
  border: none; padding: 11px; font-size: 13px;
}
.lg-btn:hover { background: var(--bg2); color: var(--navy); }
.login-msg { color: #a9bcc9; font-size: 12px; }
.login-msg.erro { color: #f0b8b0; }
.lg-nota { color: #8ea5b4; font-size: 11.5px; }

/* ============================ 12. INJETADOS EM TEMPO DE EXECUÇÃO ============================
   O assinatura.js (.asg-*) e o home.js (.hm-*) criam <style> DEPOIS desta
   folha. Para vencer o empate de especificidade, as regras deles levam o
   prefixo `body` — mesmo truque que a pele anterior usava. */
/* CARTÃO É O CONTEÚDO, NÃO A SEÇÃO. `.hm-sec` é só o agrupador de "Fila de
   trabalho", "Carteira por etapa" e companhia: dar borda e fundo a ele punha
   caixa dentro de caixa e fazia o título parecer uma faixa colada no alto do
   quadro. O rótulo agora fica solto sobre a página, como no sistema, e quem tem
   borda é o quadro de baixo. */
body .asg { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
body .hm-sec { background: none; border: none; border-radius: 0; box-shadow: none; padding: 0; margin-bottom: 24px; }
body .hm-sec-h { padding: 0 2px; margin-bottom: 10px; }
/* o cabeçalho DENTRO do quadro ("Precisa de ação", "Pendente externo") fica sem
   fundo: separa por um fio, que basta */
body .hm-q-h {
  background: none; color: var(--faint);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
}
body .hm-q.nossa .hm-q-h { color: var(--muted); }
body .hm-q { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); }
body .hm-q-n { background: var(--bg2); color: var(--navy); border-radius: var(--pill); font-size: 10.5px; }
body .hm-q.externa .hm-q-n:not(:empty) { background: rgba(155,110,35,.15); color: var(--today); }
body .asg-selo, body .asg-doc-status {
  border-radius: var(--pill); font-size: 10.5px; font-weight: 600; padding: 3px 10px;
  background: var(--bg2); color: var(--navy);
}
body .asg-status { font-size: 11.5px; color: var(--muted); }
body .asg-status.erro { color: var(--neg); }
body .hm-sec-h h3, body .hm-titulo {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); background: none; padding: 0;
}

/* ---- as barras diagonais da pele anterior ----
   Aquele desenho vinha do ângulo do logotipo e atravessava a interface: trilho
   do menu, marcador do item aberto, micro-rótulo antes de cada título, pontos
   da régua de etapas. A skin-rbfd.js ainda injeta essas regras (ela cuida de
   outras coisas e continua carregada); aqui elas saem de cena, e o que marca
   estado passa a ser cor e peso, como no sistema. */
.side-nav .skin-trilho, .skin-trilho { display: none !important; }
.bloco h3::before, .sec-t2::before, .rt-card h3::before,
body .hm-sec-h h3::before, .sidebar-label::before,
.skin-orient .lbl.sec::before, .skin-vista .lbl::before { content: none !important; }
body .hm-num { color: var(--navy); font-variant-numeric: tabular-nums; }
body .hm-vazio { color: var(--faint); font-size: 11.5px; background: none; border: none; }
/* o bege da paleta antiga sobrevive em literais dentro dos estilos injetados —
   trilhos de barra, listras e realces. Aqui eles passam para o cinza-azulado. */
body .hm-fu-barra, body .hm-ac-barra { background: var(--bg2); }
body .hm-fu-fill, body .hm-ac-fill { background: var(--navy); }
body .hm-fu-n, body .hm-vn { background: var(--bg2); color: var(--muted); font-weight: 600; }
body .hm-fi:hover, body .hm-ac:hover { background: var(--surface-2); }
body .hm-fi-acao {
  background: var(--bg2); color: var(--navy); border-radius: var(--pill);
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
}
body .hm-kpi { border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
body .hm-kpi.destaque { background: var(--bg2); border-color: var(--line-strong); }
body .hm-k-num { font-size: 24px; font-weight: 600; letter-spacing: -.3px; color: var(--navy); }
body .hm-k-lab { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--faint); }
/* o marcador em barras diagonais do estado vazio era da pele anterior */
.rev-vazio::before, body .hm-vazio::before { content: none; }

/* ============================ 13. TELAS ESTREITAS ============================ */
@media (max-width: 1040px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "barra" "lado" "principal"; }
  .sidebar {
    position: static; height: auto; border-right: none; border-bottom: 1px solid var(--line);
    padding: 8px 10px;
  }
  .side-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .side-nav-pe { margin-top: 0; }
  .side-nav-pe::before { display: none; }
  .nav-s, .sidebar-foot { display: none; }
  .side-nav-item { width: auto; }
  #grupo-modelos { display: none; }
  .topo-canto { width: auto; }
}
@media (max-width: 620px) {
  .main { padding: 16px; }
  .topo-nome, .topo-onde { display: none; }
  .ct-tabwrap { overflow-x: auto; }
}