/* ── Variáveis ───────────────────────────────────────────────────────────────── */
:root {
  --navy:     #25214A;
  --navy-2:   #2e2860;
  --accent:   #73A6D0;
  --accent-s: rgba(115, 166, 208, 0.12);
  --bg:       #0A0A16;
  --surface:  #121224;
  --surface2: #1C1C38;
  --text:     #E8EAF0;
  --text2:    #8890A8;
  --border:   rgba(115, 166, 208, 0.12);
  --border-s: #2A2A44;
  --ok:       #4ade80;
  --erro:     #f87171;

  /* Zona de conteúdo — TEMA CLARO (contraste com a sidebar escura) */
  --c-text:    #243049;                 /* texto principal sobre fundo claro */
  --c-text2:   #5a6a87;                 /* texto secundário */
  --c-accent:  #2563a8;                 /* azul mais fechado p/ contraste no claro */
  --c-surface: #ffffff;                 /* cartões / superfícies */
  --c-border:  rgba(37, 99, 168, 0.16); /* divisórias suaves */
  --c-border-strong: rgba(37, 99, 168, 0.30); /* borda de campo (mais definida) */
  --c-page:    #e8edf4;                 /* fundo sólido da zona clara (cinza-azulado; era #eef1f6) */
  /* Semânticas da ZONA CLARA (AA ~5:1 sobre branco). NÃO confundir com --ok/--erro, que são
     do fundo ESCURO do login/sidebar (lá o vermelho/verde claros contrastam bem). */
  --c-ok:      #15803d;                 /* verde legível no claro   (era --ok #4ade80,  ~1,6:1) */
  --c-erro:    #dc2626;                 /* vermelho legível no claro (era --erro #f87171, ~2,9:1) */
  --c-warn:    #b45309;                 /* âmbar legível no claro    (era #e0a800,       ~2,2:1) */

  --radius:   4px;
  --radius-m: 6px;
  --radius-l: 12px;
  --sw:       220px;
  --sc:       56px;
  --tr:       0.22s;
  --tre:      0.22s cubic-bezier(0.4, 0, 0.2, 1);

  /* Escala de espaçamento (base 4px) — usar no lugar de números soltos p/ ritmo consistente */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Elevação — derivada da sombra navy JÁ usada no arquivo (rgba(15,25,50,·)); nenhuma cor nova */
  --shadow-1: 0 1px 3px   rgba(15, 25, 50, 0.08);  /* repouso: cartões          */
  --shadow-2: 0 4px 14px  rgba(15, 25, 50, 0.12);  /* elevado: hover            */
  --shadow-3: 0 8px 24px  rgba(15, 25, 50, 0.18);  /* popover / dropdown        */
  --shadow-4: 0 20px 60px rgba(15, 25, 50, 0.30);  /* modal                     */

  /* F6 — escala ÚNICA de camadas (substitui os números mágicos que brigavam entre si).
     Dropdown/popover ficam ACIMA do modal de propósito: podem abrir a partir de campo DENTRO
     do modal (ícone/@ nos modais de coluna/condição) e fecham sozinhos ao clicar fora. */
  --z-sticky-conteudo: 6;   /* stepper/rodapé fixos dentro do card                */
  --z-sticky: 10;           /* barra de sub-abas do app                           */
  --z-modal: 400;           /* fundo + caixa dos modais                           */
  --z-dropdown: 500;        /* emoji-pop, autocomplete @                          */
  --z-popover: 550;         /* tooltips (.rg-info, sidebar)                       */
  --z-toast: 600;           /* avisos de sucesso — acima de tudo                  */

  /* R10 D1a — escala tipográfica em px INTEIROS (fim do rem fracionário que borra a 100%) + alturas de UI.
     R11 (2026-07-02): reduzida ~1 nível ("modelo 80%" do Gustavo) — via DESIGN (não zoom, que quebrava o 100vh). */
  --fs-xs:  10px;   /* rótulos uppercase, badges                 */
  --fs-sm:  11px;   /* textos de apoio, small                    */
  --fs-md:  12px;   /* corpo de UI, inputs, células, botões      */
  --fs-lg:  13px;   /* frase-resumo, títulos de campo importantes */
  --fs-xl:  14px;
  --fs-2xl: 17px;
  --lh-ui:    1.3;
  --lh-texto: 1.45;
  --subabas-h: 34px;
}

/* ── Reset / Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* display:flex/grid em componentes sobrescreve o atributo hidden — evitar com !important */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Botões ──────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--tr), box-shadow var(--tr), opacity var(--tr);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* R10 D1a — botão do APP mais compacto; o login mantém a base .btn (regra transversal b) */
.pagina-app .btn { padding: 5px 14px; font-size: var(--fs-md); min-height: 26px; }

.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover:not(:disabled) {
  background: #8fc0dd;
  box-shadow: 0 0 16px rgba(115,166,208,0.30);
}

/* Botão primário na ZONA CLARA (app): fundo --c-accent (#2563a8) destaca 5,4:1 da página
   (era ~2,3:1 com o azul claro do login) + texto branco (dark sobre #2563a8 daria só ~3,2:1). */
.pagina-app .btn-primary { background: var(--c-accent); color: #fff; }
.pagina-app .btn-primary:hover:not(:disabled) {
  background: var(--c-accent);                                /* fallback sólido (sem color-mix) */
  background: color-mix(in srgb, var(--c-accent), #000 12%);  /* escurece de leve quando suportado */
  box-shadow: var(--shadow-2);
}

.btn-secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.btn-secondary:hover:not(:disabled) {
  background: #f0f6fd;
  border-color: var(--c-accent);
}

.btn-perigo {
  background: rgba(248,113,113,0.12);
  color: var(--c-erro);
  border: 1px solid rgba(248,113,113,0.20);
}
.btn-perigo:hover:not(:disabled) { background: rgba(248,113,113,0.20); }

.btn-full { width: 100%; justify-content: center; }

/* ── Campos de formulário ────────────────────────────────────────────────────── */
.campo,
.login-campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.login-campo label {
  font-size: 0.78rem;
  color: var(--text2);
  letter-spacing: 0.02em;
}
/* Rótulos de campo na zona clara — mais legíveis e com peso (linguagem de formulário) */
.campo label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--c-text);   /* rótulo mais legível: --c-text (não o secundário --c-text2) */
  letter-spacing: 0.02em;
}
.campo .rg-subcampo-label {
  display: block;
  margin-top: 10px;
  color: var(--c-text2);
  font-size: .71rem;
}
/* Campos do login — sobre fundo escuro */
.login-campo input {
  padding: 0.58rem 0.75rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-s);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.login-campo input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(115,166,208,0.12);
}

/* Campos do conteúdo — sobre fundo claro */
.campo input, .campo select, .campo textarea {
  padding: 6px 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-m);
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  outline: none;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--c-accent); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.14);
}
.campo textarea {
  resize: vertical;
  min-height: 80px;
}
/* Mensagem (corpo do e-mail / abertura de tabela / linha de lista): confortável de ler e escrever.
   Feedback do dono 2026-07-12 ("não dá nem pra ler a mensagem completa"): ~6 linhas de altura inicial,
   fonte do app (herdada — nada de mono), auto-crescer via JS (rgAutoCrescer) até um teto generoso. */
#rg-corpo, #rg-corpo-tabela, #rg-lista-cabecalho, #rg-lista-cabecalho-grupo, #rg-lista-vazia, #rg-rodape {
  min-height: 9.5em;          /* ~6 linhas na fonte do app */
  line-height: var(--lh-ui);
  font-family: inherit;
  font-size: var(--fs-md);
}
#rg-corpo { min-height: 18em; } /* Texto livre é uma mensagem completa: começa como área de escrita, não como observação curta. */
#rg-lista-linha { min-height: 3.2em; line-height: var(--lh-ui); font-family: inherit; font-size: var(--fs-md); }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238890A8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.campo select option, .campo select optgroup { background: var(--c-surface); color: var(--c-text); }
.campo select optgroup { font-weight: 700; }

/* Layout de formulário em colunas */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 16px;
}

/* ── Componentes genéricos (usados a partir da Etapa 4) ──────────────────────── */

.secao-titulo {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text);   /* era var(--text2) = 3,18:1 na zona clara; tamanho fica p/ D1a */
  margin-bottom: 10px;
}

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  padding: 12px 20px;
  box-shadow: 0 1px 3px rgba(20, 40, 80, 0.06);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.card:hover {
  border-color: var(--c-accent);
  box-shadow: 0 4px 14px rgba(37, 99, 168, 0.12);
}
.card-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* Cabeçalho de PÁGINA (dono 2026-07-20: "perdemos quase metade da tela para cabeçalhos") — padrão único
   pra Resultados/Torre/Cofre, que antes reinventavam eyebrow+h1+subtítulo cada uma do seu jeito (3 tamanhos
   de fonte diferentes, 3 paddings diferentes). Compacto de propósito: o dado é o protagonista, não o título. */
.pagina-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
/* eyebrow + título na MESMA linha (dono 2026-07-20: cabeçalho comia ~30% da tela). O subtítulo, quando
   existe (só o Cofre usa), cai numa 2ª linha via flex-basis:100% — o Resultados não tem subtítulo. */
.pagina-cab-txto { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9px; }
.pagina-cab-eyebrow { margin: 0; color: var(--c-accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pagina-cab h1 { margin: 0; max-width: 62ch; color: var(--c-text); font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; display: inline-flex; align-items: center; gap: 6px; }
.pagina-cab-sub { flex-basis: 100%; margin: 2px 0 0; max-width: 62ch; color: var(--c-text2); font-size: var(--fs-md); line-height: var(--lh-ui); }
.pagina-cab-acoes { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-ok   { background: rgba(74,222,128,0.12);  color: var(--c-ok); }
.badge-erro { background: rgba(248,113,113,0.12); color: var(--c-erro); }
/* "Atenção" — âmbar reusando o token de aviso da zona clara (--c-warn #b45309). Mesma família dos
   .cf-*-warn/.badge-calc; NÃO é paleta nova. Usado no HUB de Saúde do sistema (situação 'atencao'). */
.badge-atencao { background: rgba(180, 83, 9, 0.12); color: var(--c-warn); }
.badge-info   { background: rgba(37, 99, 168, 0.12); color: var(--c-accent); }
.badge-neutro { background: rgba(90, 106, 135, 0.16); color: var(--c-text2); }
/* Origem "Manipulado" no painel Catálogo (admin) — roxo p/ distinguir de curado (azul)/personalizado (cinza). */
.badge-roxo { background: rgba(147, 51, 234, 0.12); color: #7e22ce; }
/* "Calculado" — campo curado que o Gestão RAX deriva de outros campos (não vem direto da fonte). Âmbar discreto. */
.badge-calc { background: rgba(217, 119, 6, 0.12); color: #b45309; }

.tabela-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-m);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
}
.tabela th {
  text-align: left;
  padding: 8px 14px;
  color: var(--c-text2);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(37, 99, 168, 0.06);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.tabela td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
}
.tabela tbody tr:last-child td { border-bottom: none; }
/* Grade única: zebra muito leve para orientar a leitura; hover/foco esclarece qual linha está em ação
   sem deslocar a tabela (evita o salto visual causado por transform em <tr>). */
.tabela tbody tr { transition: background var(--tr); }
.tabela tbody tr:nth-child(even) > td { background: #fbfcfe; }
.tabela tbody tr:hover > td, .tabela tbody tr:focus-within > td { background: #edf5ff; border-bottom-color: #d6e3f3; box-shadow: inset 0 1px 0 rgba(37,99,168,.14), inset 0 -1px 0 rgba(37,99,168,.14); }
/* A sombra continua visível em células com fundo condicional inline; assim o hover orienta sem apagar a cor do prazo. */
.tabela tbody tr:hover > td:first-child, .tabela tbody tr:focus-within > td:first-child { box-shadow: inset 3px 0 0 var(--c-accent), inset 0 1px 0 rgba(37,99,168,.14), inset 0 -1px 0 rgba(37,99,168,.14); }

.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--c-text2);
  font-size: var(--fs-md);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════════════════════════════════════════ */
.pagina-login { overflow: hidden; }

.login-fundo {
  position: fixed;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--bg)                  0%,
    var(--navy)                28%,
    rgba(115, 166, 208, 0.18)  52%,
    var(--navy)                74%,
    var(--bg)                  100%
  );
  background-size: 400% 400%;
  animation: fundo-deriva 15s ease infinite;
  z-index: 0;
}
@keyframes fundo-deriva {
  0%   { background-position: 0%   0%;   }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0%   0%;   }
}

.login-palco { position: fixed; inset: 0; z-index: 1; }

.login-logo-wrap {
  position: absolute;
  top: calc(50% - 54px);
  left: 50%;
  transform: translate(-50%, -50%);
  transition:
    top       0.44s cubic-bezier(0.4, 0, 0.2, 1),
    left      0.44s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.44s cubic-bezier(0.4, 0, 0.2, 1);
}
.login-logo {
  width: 240px;
  height: auto;
  display: block;
  transition: width 0.44s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-m1 {
  position: absolute;
  top: calc(50% + 28px);
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
}
.btn-login-grande { padding: 0.7rem 2.4rem; font-size: 0.95rem; letter-spacing: 0.05em; }

.login-m2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(340px, 90vw);
  transform: translate(-50%, -46%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease 0.18s, transform 0.32s ease 0.18s;
}

.login-palco.ativo .login-logo-wrap { top: 28px; left: 28px; transform: translate(0, 0); }
.login-palco.ativo .login-logo      { width: 130px; }
.login-palco.ativo .login-m1        { opacity: 0; pointer-events: none; }
.login-palco.ativo .login-m2        { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }

.login-erro {
  margin-top: 10px;
  min-height: 1.2em;
  font-size: 0.82rem;
  color: var(--erro);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════════════════════════════════════════ */
.pagina-app { overflow: hidden; }

/* Anel de foco dedicado para navegação por TECLADO (não aparece no clique de mouse).
   Escopo em .pagina-app → o login (fundo escuro) fica intocado. Muitos controles (botões,
   cards, abas) não tinham indicador de foco visível; agora têm. */
.pagina-app :focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* 100dvh = altura VISÍVEL real (no iOS o 100vh inclui a barra do navegador → o rodapé/Salvar
   ficava atrás dela). A linha 100vh fica como fallback p/ navegadores sem dvh. */
.shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.sidebar {
  flex-shrink: 0;
  width: var(--sw);
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 55%, #1e1b3c 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--tre);
}
.sidebar.colapsado { width: var(--sc); }

/* Topo: logo + toggle */
.sidebar-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  min-height: 60px;
  gap: 8px;
  overflow: hidden;
}
.sidebar.colapsado .sidebar-topo { justify-content: center; }
/* Colapsada: ícone em cima, botão toggle embaixo (na largura estreita não cabem lado a lado) */
.sidebar.colapsado .sidebar-topo { flex-direction: column; gap: 8px; padding: 10px 6px; }

/* Logo (wordmark) — visível quando expandida; some ao colapsar */
.sidebar-logo {
  height: 52px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  flex-shrink: 1;
  min-width: 0;
  transition: max-width var(--tre), opacity var(--tre);
}
.sidebar.colapsado .sidebar-logo {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
}

/* Ícone RAX — só na sidebar COLAPSADA (substitui a wordmark que some) */
.sidebar-icone {
  display: none;
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.sidebar.colapsado .sidebar-icone { display: block; }

/* Botão toggle */
.btn-toggle-sidebar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: rgba(255,255,255,0.60);
  cursor: pointer;
  transition: color var(--tr), background var(--tr);
}
.btn-toggle-sidebar:hover { color: #fff; background: rgba(255,255,255,0.08); }
.btn-toggle-sidebar svg { width: 17px; height: 17px; }

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 3px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 2px 5px;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  border-radius: var(--radius-m);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  font-weight: 450;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  transition: color var(--tr), background var(--tr), box-shadow var(--tr);
}
.nav-item:hover:not(.nav-item--off) { color: #fff; background: rgba(255,255,255,0.08); }
.nav-item.ativo {
  color: #fff;
  font-weight: 600;
  background: rgba(115,166,208,0.16);
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-item--off { opacity: 0.38; cursor: default; pointer-events: none; }

.nav-icon { width: 17px; height: 17px; flex-shrink: 0; }

.nav-label {
  flex: 1;
  overflow: hidden;
  transition: opacity var(--tre), max-width var(--tre);
  max-width: 160px;
}
.nav-badge {
  font-size: var(--fs-xs);
  padding: 1px 5px;
  background: rgba(115,166,208,0.14);
  border-radius: 3px;
  color: var(--accent);
  white-space: nowrap;
}
.sidebar.colapsado .nav-label,
.sidebar.colapsado .nav-badge { opacity: 0; max-width: 0; }

/* Tooltip ao colapsar */
.sidebar.colapsado .nav-item::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 9px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface2);
  border: 1px solid var(--border-s);
  color: var(--text);
  padding: 4px 10px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: var(--z-popover);
}
.sidebar.colapsado .nav-item:hover::after { opacity: 1; }

/* Rodapé: logout */
.sidebar-rodape { border-top: 1px solid rgba(255,255,255,0.06); padding: 6px 5px; }
.btn-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: var(--radius-m);
  color: rgba(255,255,255,0.65);
  font-family: inherit;
  font-size: var(--fs-md);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
  transition: color var(--tr), background var(--tr);
}
.btn-logout:hover { color: var(--erro); background: rgba(248,113,113,0.07); }
.btn-logout svg { width: 17px; height: 17px; flex-shrink: 0; }
/* Anel de foco na sidebar (fundo navy): usa o accent CLARO da zona escura, não o --c-accent da zona clara */
.sidebar :focus-visible { outline-color: var(--accent); }

/* ── Área principal ──────────────────────────────────────────────────────────── */
.conteudo-principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 0;
  color: var(--c-text);
  background: var(--c-page);   /* sólido e constante — o gradiente animado virou exclusividade do login (.login-fundo) */
}

/* Sub-abas — só visíveis no Gerenciador (hidden controlado pelo JS) */
.subabas {
  display: flex;
  justify-content: center;
  gap: 2px;
  min-height: var(--subabas-h);
  padding: 0 20px;
  border-bottom: 1px solid var(--c-border);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.subaba {
  padding: 9px 16px;
  background: transparent;
  border: none;
  color: var(--c-text2);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--tr), box-shadow var(--tr);
}
.subaba:hover { color: var(--c-text); }
.subaba.ativo {
  color: var(--c-accent);
  box-shadow: inset 0 -2px 0 var(--c-accent);
}

/* Painéis de conteúdo */
@keyframes painel-entrada {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.painel {
  flex: 1;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.painel:not([hidden]) {
  animation: painel-entrada 0.18s ease both;
}
/* Conteúdo centrado e capado a 1320px (a 1920 não estica infinito). `.painel` é flex-column → align-self centra. */
.painel > * { width: 100%; max-width: 1320px; align-self: center; }
.painel-vazio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  border: 1px dashed rgba(37, 99, 168, 0.30);
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.45);
  color: var(--c-text2);
  font-size: var(--fs-md);
}

/* Sub-painéis do Gerenciador */
.sub-painel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sub-painel:not([hidden]) {
  animation: painel-entrada 0.18s ease both;
}

/* ══════════════════════════════════════════════════════════════════════════════
   NORMALIZAÇÃO (Etapa 4) — sobre o fundo claro
══════════════════════════════════════════════════════════════════════════════ */
.secao-dica { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--c-text2); }
.card-dica  { margin: 2px 0 14px; font-size: var(--fs-md); color: var(--c-text2); }
.card-dica strong { color: var(--c-text); font-weight: 600; }
.secao-titulo.flush       { margin: 0; }
.secao-titulo.espaco-topo { margin-top: 8px; }

/* Área de teste */
.form-linha-teste { display: flex; gap: 8px; align-items: stretch; }
.form-linha-teste input {
  flex: 1;
  padding: 0.58rem 0.75rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-md);
  outline: none;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.form-linha-teste input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(37,99,168,0.14); }

.norm-resultado { margin-top: 12px; min-height: 1.2em; font-size: var(--fs-md); color: var(--c-text2); }
.norm-resultado.ok { color: var(--c-text); }

/* Tabela: ações e células auxiliares */
.td-acoes   { text-align: right; white-space: nowrap; }
.td-vazio   { color: var(--c-text2); text-align: center; padding: 28px; }
.td-padroes { color: var(--c-text2); }
.rg-regra-autoria { margin-top: 2px; font-size: var(--fs-sm); color: var(--c-text2); }

/* Botões pequenos (editar/excluir/+padrão) */
.btn-mini {
  padding: 4px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-accent);
  border-radius: var(--radius);
  cursor: pointer;
  margin-left: 6px;
  transition: background var(--tr), border-color var(--tr);
}
.btn-mini:first-child { margin-left: 0; }
.btn-mini:hover { background: #f0f6fd; border-color: var(--c-accent); }
.btn-mini-perigo { color: var(--c-erro); }
.btn-mini-perigo:hover { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.3); }
.campo-senha-linha { display: flex; align-items: center; gap: 0; }
.campo-senha-linha input { flex: 1; min-width: 0; }

/* Modal */
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(15, 25, 50, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  animation: modal-fade 0.16s ease;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: min(560px, 100%);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--radius-m);
  box-shadow: 0 20px 60px rgba(15, 25, 50, 0.30);
  overflow: hidden;
}
.modal-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border);
}
.modal-cabecalho h3 { font-size: var(--fs-lg); font-weight: 600; }
.modal-fechar {
  background: none; border: none; font-size: 1.5rem; line-height: 1;
  color: var(--c-text2); cursor: pointer; padding: 0 4px;
}
.modal-fechar:hover { color: var(--c-text); }
.modal-corpo { padding: 20px; }
.modal-rodape {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--c-border); background: #f7fafe;
}
.modal-erro { color: var(--c-erro); font-size: var(--fs-sm); min-height: 1em; margin-top: 10px; }

/* Linhas de padrão dentro do modal */
.padrao-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.padrao-row .padrao-campo  { flex: 1; }
.padrao-row .padrao-op     { flex: 1.2; }
.padrao-row .padrao-valor  { flex: 1.4; }
.padrao-row input, .padrao-row select {
  padding: 0.45rem 0.6rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-md);
  outline: none;
  min-width: 0;
}
.padrao-row input:focus, .padrao-row select:focus { border-color: var(--c-accent); }
.padrao-row .padrao-rm { flex-shrink: 0; margin-left: 0; }

/* Cadastro de contatos — condições ("quando usar" e "só quando" do e-mail) reusam o
   construtor de Regras (rg-cond-modal); aqui só o layout da lista em frase e dos e-mails. */
.cc-cond-vazia { font-size: var(--fs-sm); color: var(--c-text2); padding: 4px 2px; }
.cc-email-row { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 8px; margin-bottom: 8px; background: var(--c-surface); }
.cc-email-l1 { display: flex; gap: 8px; align-items: center; }
.cc-email-l1 .cc-email-addr   { flex: 1.6; }
.cc-email-l1 .cc-email-papel  { flex: 0.9; }
.cc-email-l1 .cc-email-rotulo { flex: 1.1; }
.cc-email-l1 .cc-rm { flex-shrink: 0; }
.cc-email-l2 { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.cc-email-l2 .cc-cond-rot { flex-shrink: 0; font-size: var(--fs-sm); color: var(--c-text2); }
.cc-email-cond { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cc-cond-chip { font-size: var(--fs-sm); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 2px 8px; color: var(--c-text); }
.cc-email-row input, .cc-email-row select {
  padding: 0.45rem 0.6rem; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); color: var(--c-text); font-family: inherit; min-width: 0;
}
.cc-email-row input:focus, .cc-email-row select:focus { border-color: var(--c-accent); }
.cc-ativo-check { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--c-text2); }

/* ══════════════════════════════════════════════════════════════════════════════
   EDITOR DE REGRA (Etapa 5c) — sobre o fundo claro
══════════════════════════════════════════════════════════════════════════════ */
.editor-secao {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  padding: 0;
  margin-top: 12px;
  background: var(--c-surface);
  overflow: hidden;
}
.editor-secao-titulo {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-accent);
  letter-spacing: 0;
  margin-bottom: 0;
}
/* R12-F1 — ACORDEÃO DE CONFERÊNCIA: a seção FECHADA vira uma LINHA clicável (bolinha+nº de status · nome ·
   resumo · "ajustar ▸"); a ABERTA mostra cabeçalho + conteúdo (como antes). Abre UMA por vez (rgSetSecaoAtiva);
   rgSetSecaoAtiva(null) fecha todas. NENHUMA capacidade some — só é recolhida atrás da linha. */
.rg-col-config .editor-secao { border: none; background: transparent; margin: 0; overflow: visible; padding: 0; }
.rg-col-config .editor-secao:not(.is-aberta) + .editor-secao:not(.is-aberta) { margin-top: 6px; }
/* fechada: some o conteúdo, fica só a linha (o título) */
.rg-col-config .editor-secao:not(.is-aberta) > :not(.editor-secao-titulo) { display: none !important; }

.rg-col-config .editor-secao-titulo {
  display: flex; align-items: center; gap: 9px;
  min-height: auto; padding: 0; margin-bottom: 14px;
  font-size: var(--fs-lg); font-weight: 700; color: var(--c-accent);
  cursor: default; user-select: none;
}
/* bolinha de status + número (reusa as cores do stepper: --c-ok/--c-warn/--c-erro) */
.rg-col-config .editor-secao-titulo::before {
  content: attr(data-num);
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--c-text2);
}
.rg-col-config .editor-secao-titulo.sec-ok::before       { background: var(--c-ok); }
.rg-col-config .editor-secao-titulo.sec-atencao::before  { background: var(--c-warn); }
.rg-col-config .editor-secao-titulo.sec-pendente::before { background: var(--c-erro); }
/* estado FECHADO = linha clicável (card fino) */
.rg-col-config .editor-secao:not(.is-aberta) > .editor-secao-titulo {
  margin-bottom: 0; padding: 9px 12px; cursor: pointer;
  font-size: var(--fs-md); font-weight: 600; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.rg-col-config .editor-secao:not(.is-aberta) > .editor-secao-titulo:hover {
  border-color: var(--c-accent); box-shadow: 0 1px 3px rgba(20,40,80,0.06);
}
.rg-col-config .editor-secao:not(.is-aberta) > .editor-secao-titulo::after {
  content: "ajustar ▸"; margin-left: 8px; flex-shrink: 0;
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-accent); white-space: nowrap;
}
/* ABERTA = CARD coeso (cabeçalho com divisória + conteúdo dentro) + abertura animada — resolve o "abre/fecha ruim" */
.rg-col-config .editor-secao.is-aberta {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m);
  padding: 12px 14px 14px; box-shadow: 0 1px 3px rgba(20,40,80,0.06);
}
.rg-col-config .editor-secao.is-aberta > .editor-secao-titulo {
  margin: 0 0 12px; padding: 0 0 10px; cursor: pointer; border-bottom: 1px solid var(--c-border);
}
.rg-col-config .editor-secao.is-aberta > .editor-secao-titulo::after {
  content: "▾"; margin-left: auto; padding-left: 8px; flex-shrink: 0;
  color: var(--c-text2); font-size: var(--fs-sm);
}
.rg-col-config .editor-secao.is-aberta > :not(.editor-secao-titulo) { animation: secaoAbre .18s ease both; }
@keyframes secaoAbre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rg-col-config .editor-secao.is-aberta > :not(.editor-secao-titulo) { animation: none; } }
/* foco limpo no título (sem caixa ao clicar; anel só no teclado) */
.rg-col-config .editor-secao-titulo:focus { outline: none; }
.rg-col-config .editor-secao-titulo:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(37,99,168,0.35); }
/* resumo: SÓ na linha fechada, encostado à direita, antes do "ajustar" */
.rg-col-config .editor-secao-resumo { display: none; }
.rg-col-config .editor-secao:not(.is-aberta) .editor-secao-resumo { display: block; }
.editor-secao-resumo {
  margin-left: auto;
  color: var(--c-text2);
  font-weight: 400;
  font-size: var(--fs-sm);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52%;
}
.rg-col-config .editor-secao > :not(.editor-secao-titulo) {
  margin: 0;
}
.mini-label { display: block; font-size: var(--fs-sm); color: var(--c-text2); margin-bottom: 6px; }
.campo-check label { display: flex; align-items: center; gap: 8px; color: var(--c-text); font-size: var(--fs-md); }
.campo-check input { width: auto; }

.editor-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--c-border);
  margin-top: 16px;
  padding-top: 16px;
}
/* F3 — rodapé (pendências + erro + Cancelar/Salvar) FIXO ao fundo do viewport (sticky bottom):
   Salvar sempre visível e sem mudar de lugar. Fundo sólido edge-to-edge (margin -20 = padding horizontal do card).
   No mobile sobe junto com o teclado (--kb-inset, publicado pelo JS do visualViewport) e respeita a safe-area. */
.rg-rodape-fixo {
  position: sticky; bottom: var(--kb-inset, 0px); z-index: var(--z-sticky-conteudo);
  isolation: isolate; background: #ffffff;
  /* Fecha também o padding inferior do painel rolável. Sem a margem negativa inferior, uma faixa transparente
     deixava as linhas passarem por baixo de Cancelar/Salvar ao chegar no fim do scroll. */
  margin: 16px -20px -20px;
  padding: 10px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -10px 18px -18px rgba(20, 40, 80, 0.55);
}
.rg-rodape-fixo::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  inset: -16px 0 -20px; background: #ffffff;
}
.rg-rodape-fixo > * { position: relative; z-index: 1; }
.rg-rodape-fixo .editor-rodape { border-top: none; margin-top: 8px; padding-top: 0; }
/* Estabiliza a altura entre abas → o rodapé fixo não "pula" ao trocar de seção */
.rg-col-config .editor-secao.is-aberta { min-height: 12rem; }
/* Campo focado rola ACIMA do rodapé/teclado (não fica escondido atrás); soma a altura do teclado */
.conteudo-principal { scroll-padding-bottom: calc(6rem + var(--kb-inset, 0px)); }

/* Linhas dinâmicas (condições, colunas, vigiados) */
.cond-row, .coluna-row, .vigiado-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cond-row select, .cond-row input,
.coluna-row select, .coluna-row input,
.vigiado-row select {
  padding: 0.45rem 0.6rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-md);
  outline: none;
  min-width: 0;
}
.cond-row select:focus, .cond-row input:focus,
.coluna-row select:focus, .coluna-row input:focus,
.vigiado-row select:focus { border-color: var(--c-accent); }
.cond-campo, .col-campo, .vig-campo { flex: 1.4; }
.cond-op, .col-transform        { flex: 1.1; }
.cond-valor, .col-titulo, .col-marcador { flex: 1.2; }
/* Lista de COLUNAS da tabela/cartão — grade consistente (feedback do dono: "a tabela não casou bem",
   inputs cortando o texto). Uma linha só (sem wrap): handle | campo | título | chip | ações. Os DOIS
   inputs dividem o espaço em proporção e têm min-width digno (não espremem o texto); os botões não encolhem. */
.coluna-row {
  display: grid;
  grid-template-columns: 18px minmax(180px, 1.35fr) minmax(140px, 1fr) minmax(0, auto) auto;
  grid-template-areas: "drag campo titulo chip acoes";
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap; margin: 0; padding: 7px 8px;
  border: 1px solid transparent; border-radius: 10px; background: #fff;
  transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.coluna-row:hover { border-color: #d8e4f2; background: #f8fbff; box-shadow: 0 2px 7px rgba(20, 40, 80, 0.05); }
.coluna-row:focus-within { border-color: var(--c-accent); background: #f8fbff; box-shadow: 0 0 0 2px rgba(37, 99, 168, 0.10); }
/* NÃO usar container-type aqui: `container-type` cria containing block pra descendente position:fixed,
   e o menu de busca da coluna (.col-campo-menu, fixed) ficava PRESO/vazando dentro do #rg-colunas — regressão
   introduzida em d938eb1 e confirmada por git bisect (no e9fa8a8, sem container-type, o menu funcionava). A
   reflow em telas estreitas virou @media (viewport), que não cria essa armadilha. */
.coluna-row .col-arrasta { grid-area: drag; }
.coluna-row .col-campo-box { grid-area: campo; min-width: 0; width: 100%; }
.coluna-row .col-titulo    { grid-area: titulo; min-width: 0; width: 100%; }
.coluna-row .col-cfg-chip  { grid-area: chip; }
.coluna-row .col-acoes { grid-area: acoes; display: flex; align-items: center; gap: 5px; }
.coluna-row .col-arrasta,
.coluna-row .btn-mini,
.coluna-row .btn-ic        { flex: 0 0 auto; }
.coluna-row .col-cfg-chip  { flex: 0 1 auto; }
.coluna-row .col-acoes .btn-ic { border: 1px solid var(--c-border); background: var(--c-surface); }
.coluna-row .col-acoes .btn-ic:hover { border-color: var(--c-accent); background: #eef5ff; box-shadow: 0 1px 3px rgba(20,40,80,.10); }
.coluna-row .col-acoes .btn-ic:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.coluna-row:hover .col-arrasta { color: var(--c-accent); }
/* Telas estreitas: aí sim deixa quebrar em 2 linhas (os inputs vão pra 1ª, os botões descem) em vez de espremer.
   @media (viewport) em vez de @container — ver comentário do #rg-colunas acima. ~1024px = onde o editor 3 colunas
   aperta o suficiente pra a linha de coluna precisar reflowar. */
@media (max-width: 1024px) {
  .coluna-row {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    grid-template-areas:
      "drag campo acoes"
      ". titulo titulo"
      ". chip chip";
    padding: 9px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    background: rgba(247, 250, 254, 0.8);
  }
  .coluna-row .col-campo-box, .coluna-row .col-titulo { min-width: 0; width: 100%; }
  .coluna-row .col-cfg-chip { margin-left: 0; justify-self: start; }
}
/* Combobox buscável do campo/evento da coluna (a "barrinha"): o <select> vira cofre do value (escondido);
   o visor filtra e o menu usa a MESMA aparência do autocomplete "@" (.rg-auto-*) — grupos, rótulo+descrição,
   navegação por teclado e rodapé de atalhos. */
.col-campo-box { position: relative; flex: 1.4; min-width: 150px; }
.col-campo-box .col-campo { display: none; }
.col-campo-visor { width: 100%; }
/* MENU em portal (via JS) + position:fixed. Fora do modal ele fica no <body>, escapando do transform/overflow
   do editor. No campo de reserva, fica como filho direto do fundo do modal para pertencer à mesma sobreposição
   e não cair atrás dela. O JS (rgPosicionarMenu) crava left/top/width medindo o campo contra a tela. */
.col-campo-menu { position: fixed; z-index: var(--z-dropdown, 500); box-sizing: border-box;
  max-width: 92vw; display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m); box-shadow: 0 8px 24px rgba(15,25,50,.18); }
#rg-col-modal > .col-campo-menu, #rg-var-modal > .col-campo-menu { z-index: 2; }
/* rótulo/descrição em UMA linha com reticências (some a quebra/sobreposição e a barra horizontal do print antigo) */
.col-campo-menu .rg-auto-rot, .col-campo-menu .rg-auto-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Abre PRA CIMA quando não cabe embaixo — sombra invertida (o JS só troca a classe; top/altura são medidos). */
.col-campo-menu.abre-cima { box-shadow: 0 -8px 24px rgba(15,25,50,.18); }
.col-modo { flex: 0.9; }
.vigiado-row .vig-campo { flex: 1; }

/* Dica e autocomplete "@" de variáveis (R3.2.1) */
.var-dica { font-size: var(--fs-sm); color: var(--c-text2); margin-top: 4px; }
.rg-col-config .var-dica { display: none; }
.rg-col-config .campo:focus-within > .var-dica,
.rg-col-config .campo:focus-within .var-dica,
.rg-col-config .rg-avancado[open] .var-dica {
  display: block;
}
.var-dica code { background: rgba(37,99,168,0.08); padding: 0 4px; border-radius: 3px; color: var(--c-accent); }

/* Mensagem: ferramentas familiares e discretas */
.msg-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0 0 8px;
  padding: 5px 7px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text2);
  font-size: var(--fs-md);
}
.msg-tools[hidden] { display: none !important; }
.msg-tools .fmt-email-only[hidden] { display:none !important; }
.msg-tools .btn-mini { min-width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; padding:0 8px; border-color:transparent; background:transparent; }
.msg-tools .btn-mini:hover:not(:disabled), .msg-tools .btn-mini.ativo { background:#eaf2fb; border-color:#b9d4f3; color:#155a9b; }
.msg-tools .btn-mini:disabled { opacity:.35; cursor:not-allowed; }
.msg-tool-dado { gap:5px; margin-right:2px; color:var(--c-accent) !important; }
.msg-tools-sep { width:1px; height:20px; margin:0 3px !important; background:var(--c-border); }
.rg-auto {
  position: fixed; z-index: var(--z-dropdown); max-height: 320px; display: flex; flex-direction: column;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m);
  box-shadow: 0 8px 24px rgba(15, 25, 50, 0.18); overflow: hidden;
}
.rg-auto-busca {
  padding: 8px 10px; border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm); color: var(--c-text2); background: rgba(37,99,168,0.04);
}
.rg-auto-busca strong { color: var(--c-text); }
.rg-auto-lista {
  overflow-y: auto; padding: 4px; flex: 1 1 auto; min-height: 0;
  overscroll-behavior: contain; scrollbar-gutter: stable;
}
.rg-auto-rodape {
  padding: 6px 10px; border-top: 1px solid var(--c-border);
  font-size: 0.72rem; color: var(--c-text2);
}
.rg-auto-vazio { padding: 16px 10px; font-size: var(--fs-md); color: var(--c-text2); text-align: center; }
.rg-auto-grupo {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--c-text2); padding: 6px 8px 3px;
}
.rg-auto-item {
  display: block; width: 100%; text-align: left; padding: 6px 10px;
  background: transparent; border: none; border-radius: var(--radius);
  font-family: inherit; font-size: var(--fs-md); color: var(--c-text); cursor: pointer;
}
.rg-auto-item:hover, .rg-auto-item.sel { background: rgba(37,99,168,0.10); }
.rg-auto-item { display: flex; flex-direction: column; gap: 1px; }
.rg-auto-rot  { color: var(--c-text); font-size: var(--fs-md); }
.rg-auto-desc { color: var(--c-text2); font-size: var(--fs-sm); }

/* Editor de regra em 2 colunas (R3.4): config à esquerda, prévia sticky à direita */
.rg-editor-topo  { margin-bottom: 12px; }
.rg-modelo-campo { max-width: none; }

/* Cartões de intenção ("O que você quer comunicar?") — R3.9c */
/* R11-C2 — grade uniforme: colunas iguais (auto-fit) e cartões da mesma altura por linha (grid stretch) */
.rg-modelos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; align-items: stretch; }
.rg-modelo-card {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  padding: 8px 10px; text-align: left;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m);
  font-family: inherit; color: var(--c-text); cursor: pointer;
  transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
}
.rg-modelo-card:hover:not(:disabled) { border-color: var(--c-accent); box-shadow: 0 2px 10px rgba(37,99,168,0.12); }
.rg-modelo-card.ativo { border-color: var(--c-accent); background: rgba(37,99,168,0.06); box-shadow: 0 0 0 2px rgba(37,99,168,0.18); }
.rg-modelo-card.indisponivel, .rg-modelo-card:disabled { opacity: 0.5; cursor: not-allowed; }
.rg-modelo-ic  { font-size: var(--fs-xl); line-height: 1; flex-shrink: 0; }
.rg-modelo-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rg-modelo-txt strong { font-size: var(--fs-md); font-weight: 600; }
.rg-modelo-desc { font-size: var(--fs-sm); color: var(--c-text2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* R11-C4 — prateleira COLAPSÁVEL: escolhido o modelo, os cartões somem e vira 1 linha-resumo clicável (libera espaço) */
.rg-modelo-resumo { display: none; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left;
  background: rgba(37,99,168,0.06); border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: 8px 12px;
  font-size: var(--fs-md); color: var(--c-text); cursor: pointer; }
.rg-modelo-resumo:hover { border-color: var(--c-accent); }
.rg-modelo-trocar { font-size: var(--fs-sm); color: var(--c-accent); font-weight: 600; white-space: nowrap; }
.rg-modelo-campo.colapsado #rg-modelo { display: none; }
.rg-modelo-campo.colapsado .rg-modelo-resumo { display: flex; }
/* ── REDESENHO 3-ZONAS do criador (comprometido com o layout único) ──────────────────
   CHAT (esq · rolagem própria) · REGRAS (meio) · PRÉVIA (dir). Chat e prévia são colunas
   FIXAS (sticky) com rolagem própria — crescem só nelas, nunca empurram o meio; a coluna do
   meio é a que rola a página. O 👁 (#rg-previa-toggle) oculta a prévia. */
/* editor como CAIXA flex (topbar + grid) — preenche a altura da tela via o flex-chain .painel>.sub-painel */
#rg-editor-view:not([hidden]) { display: flex; flex-direction: column; min-height: 0; }
.rg-editor-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1100px) {
  /* EDITOR = caixa da ALTURA da tela via ALTURA EXPLÍCITA (não depende de min-height:0 nos ancestrais compartilhados):
     topbar (Voltar/Nome/Fonte) fica FIXA no topo + grid preenche o resto; cada zona rola POR DENTRO, a página não rola.
     offset = subabas (var) + padding vertical do .painel (12+12=24px). */
  #rg-editor-view:not([hidden]) { height: calc(100dvh - var(--subabas-h) - 24px); }
  /* regras (meio) é a ESTRELA (1fr = claramente a mais larga). Chat estreito à esquerda; prévia compacta (tela cheia p/ detalhe).
     grid-template-rows:1fr faz a ÚNICA linha preencher a altura → as colunas viram caixas que rolam por dentro. */
  .rg-editor-grid {
    flex: 1 1 auto; min-height: 0; align-items: stretch;
    grid-template-columns: 250px minmax(0, 1fr) minmax(300px, 360px);
    grid-template-rows: minmax(0, 1fr);
  }
  .rg-editor-grid.assistente-recolhido {
    grid-template-columns: 56px minmax(0, 1fr) minmax(300px, 360px);
  }
  .rg-editor-grid.previa-oculta { grid-template-columns: 250px minmax(0, 1fr); }
  .rg-editor-grid.assistente-recolhido.previa-oculta { grid-template-columns: 56px minmax(0, 1fr); }
  .rg-editor-grid.sem-assistente { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
  .rg-editor-grid.sem-assistente.previa-oculta { grid-template-columns: minmax(0, 1fr); }
  /* chat/prévia = caixas flex (header + corpo que rola + entrada fixa); config rola o corpo (topo/rodapé grudam nela) */
  .rg-col-chat, .rg-col-previa { display: flex; flex-direction: column; min-height: 0; }
  .rg-col-config {
    position: relative; isolation: isolate; min-height: 0; overflow-y: auto; scrollbar-gutter: stable;
    scroll-padding: 1rem 0 calc(9rem + var(--kb-inset, 0px));
    overscroll-behavior: contain; scroll-behavior: smooth;
  }
  .rg-col-config .rg-topo-sticky { top: 0; }   /* sticky ancora no scrollport (padding-box) → cobre o padding, sem fresta */
  .rg-col-previa #rg-previa { overflow: auto; flex: 1 1 auto; min-height: 0; }
}
@media (min-width: 1440px) {
  /* telão: regras ganha o extra; prévia sobe um pouco mas fica COMPACTA (o e-mail inteiro vai na TELA CHEIA — troca pedida pelo usuário) */
  .rg-editor-grid { grid-template-columns: 280px minmax(0, 1fr) minmax(340px, 420px); }
  .rg-editor-grid.previa-oculta { grid-template-columns: 280px minmax(0, 1fr); }
  .rg-editor-grid.assistente-recolhido { grid-template-columns: 56px minmax(0, 1fr) minmax(340px, 420px); }
  .rg-editor-grid.assistente-recolhido.previa-oculta { grid-template-columns: 56px minmax(0, 1fr); }
  .rg-editor-grid.sem-assistente { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); }
  .rg-editor-grid.sem-assistente.previa-oculta { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .rg-col-config { scroll-behavior: auto; } }
.rg-editor-grid.previa-oculta .rg-col-previa { display: none; }
#rg-frase { font-size: var(--fs-md); line-height: 1.65; color: var(--c-text2); }

/* TOPBAR do editor: segue a zona clara de trabalho; o navy fica reservado à navegação lateral. */
.rg-editor-topo {
  flex-wrap: wrap; gap: 10px 14px; align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #f3f7fc 100%); color: var(--c-text);
  border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-m); box-shadow: var(--shadow-1); padding: 11px 16px; margin-bottom: 14px;
}
.rg-editor-topo .btn-mini { background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-accent); }
.rg-editor-topo .btn-mini:hover { background: #edf4fb; border-color: var(--c-border-strong); color: var(--c-accent); }
.rg-topo-voltar { flex: 0 0 auto; }
.rg-topo-nome { display: flex; flex-direction: column; gap: 1px; flex: 1 1 240px; min-width: 180px; }
.rg-topo-kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text2); }
.rg-regra-areas { position: relative; flex: 0 1 240px; min-width: 190px; }
.rg-regra-areas > summary { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 7px 32px 7px 12px;
  border: 1px solid var(--c-border); border-radius: var(--radius-m); background: var(--c-surface); cursor: pointer;
  list-style: none; position: relative; }
.rg-regra-areas > summary::-webkit-details-marker { display: none; }
.rg-regra-areas > summary::after { content: '▾'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--c-text2); }
.rg-regra-areas[open] > summary { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(37, 99, 168, .12); }
.rg-regra-areas[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.rg-regra-areas > summary strong { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--c-text); }
.rg-regra-areas-pop { position: absolute; z-index: 40; top: calc(100% + 7px); right: 0; width: min(340px, calc(100vw - 32px));
  padding: 10px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-m); background: var(--c-surface);
  box-shadow: 0 14px 34px rgba(20, 40, 80, .18); }
.rg-regra-areas-pop .ad-u-areas { max-height: 210px; }
.rg-regra-areas-pop .campo-dica { margin: 8px 2px 0; }
.rg-regra-area-travada { color: var(--c-text2); font-size: var(--fs-xs); }
.rg-regra-area-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.rg-regra-area-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px;
  border: 1px solid rgba(37, 99, 168, .18); background: rgba(37, 99, 168, .07); color: var(--c-accent); font-size: var(--fs-xs); }
.rg-regra-area-badge.is-orfa { border-color: rgba(180, 120, 20, .25); background: #fff8e8; color: #8a5a08; }
.rg-modo-leitura { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(90, 106, 135, .20); background: rgba(90, 106, 135, .08); color: var(--c-text2);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.rg-modo-leitura[hidden] { display: none; }
.rg-col-config[inert] { filter: saturate(.72); }
.rg-nome-titulo {
  font-size: var(--fs-lg); font-weight: 650; color: var(--c-text); width: 100%;
  border: 1px solid transparent; border-radius: var(--radius-m); padding: 4px 9px; margin: -2px -9px;
  background: transparent; font-family: inherit;
  transition: border-color var(--tr), background var(--tr);
}
.rg-nome-titulo::placeholder { color: var(--c-text2); }
.rg-nome-titulo:hover { border-color: var(--c-border); background: rgba(37,99,168,0.04); }
.rg-nome-titulo:focus { outline: none; border-color: var(--c-accent); background: var(--c-surface); box-shadow: 0 0 0 3px rgba(37,99,168,0.12); }
.rg-fonte-chip { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: var(--fs-sm); color: var(--c-text2); }
.rg-fonte-chip-lbl { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.rg-fonte-chip select {
  font-family: inherit; font-size: var(--fs-md); color: var(--c-text); cursor: pointer;
  background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: 999px; padding: 5px 12px;
}
.rg-fonte-chip select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(37,99,168,0.12); }
.rg-topo-spacer { flex: 1 1 0; }
.rg-topo-acoes { flex: 0 0 auto; }

/* ZONA 1 · CHAT — coluna-cartão com header + log (rolagem própria) + entrada */
.rg-col-chat {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m);
  box-shadow: 0 1px 3px rgba(20,40,80,0.06);
}
.rg-zona-cab {
  flex: 0 0 auto; padding: 9px 14px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; color: var(--c-text2); border-bottom: 1px solid var(--c-border); background: #f6f9fd;
  display: flex; align-items: center; gap: 6px;
}
.rg-zona-cab-label { min-width: 0; }
.rg-zona-cab-opc { text-transform: none; letter-spacing: 0; font-weight: 400; }
.rg-chat-toggle {
  width: 28px; height: 28px; margin-left: auto; flex: 0 0 auto;
  display: grid; place-items: center; border: 1px solid var(--c-border); border-radius: 9px;
  background: #fff; color: var(--c-accent); font: inherit; cursor: pointer;
}
.rg-chat-toggle:hover { border-color: var(--c-accent); background: #eef4fd; }
@media (min-width: 1100px) {
  .rg-editor-grid.assistente-recolhido .rg-col-chat {
    align-self: start; min-height: 0; overflow: visible; border: 0; background: transparent; box-shadow: none;
  }
  .rg-editor-grid.assistente-recolhido .rg-zona-cab {
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
    justify-content: center; background: linear-gradient(135deg, var(--c-accent), #3b7fd4);
    box-shadow: 0 8px 20px rgba(37, 99, 168, 0.24);
  }
  .rg-editor-grid.assistente-recolhido .rg-zona-cab-label,
  .rg-editor-grid.assistente-recolhido .rg-ia-dock { display: none; }
  .rg-editor-grid.assistente-recolhido .rg-chat-toggle {
    width: 48px; height: 48px; margin: 0; border: 0; border-radius: 50%;
    color: #fff; background: transparent; font-size: 20px;
  }
}
/* dock ocupa a coluna inteira; a coluna já é o cartão, então o dock fica flush (sem borda/fundo/margem próprios) */
.rg-col-chat .rg-ia-dock {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  border: 0; border-radius: 0; background: transparent; margin: 0; padding: 0;
}
/* log com rolagem PRÓPRIA — cresce só aqui dentro, nunca empurra regras/prévia */
.rg-col-chat .rg-ia-log { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; margin: 0; padding: 12px; gap: 10px; }
.rg-col-chat .rg-assist-input { flex: 0 0 auto; padding: 10px 12px; border-top: 1px solid var(--c-border); }
.rg-col-chat .rg-ia-linha { flex: 0 0 auto; padding: 0 12px 8px; margin: 0; }
/* estado VAZIO = convite + modelos, centrado (some quando há bolhas) */
.rg-chat-vazio { margin: 0; text-align: center; color: var(--c-text2); padding: 14px 4px 8px; }
.rg-chat-spark {
  width: 40px; height: 40px; border-radius: 12px; margin: 0 auto 12px;
  display: grid; place-items: center; color: #fff; font-size: 20px;
  background: linear-gradient(135deg, var(--c-accent), #3b7fd4);
}
.rg-chat-vazio .rg-ia-label { display: block; font-size: var(--fs-xl); font-weight: 650; color: var(--c-text); margin: 0 0 4px; }
.rg-chat-convite { font-size: var(--fs-md); color: var(--c-text2); margin: 0 0 14px; }
.rg-chat-vazio .rg-modelo-campo { text-align: left; margin: 0; }
.rg-chat-vazio .rg-modelo-campo > label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text2); margin-bottom: 7px; }
.rg-chat-vazio .rg-modelos { grid-template-columns: 1fr; gap: 6px; }
.rg-chat-vazio .rg-modelo-card { padding: 7px 10px; }

/* faixa mobile "Regra | Conversa" — só <1100px (o JS alterna a classe .mob-chat no grid) */
.rg-mob-abas { display: none; }
@media (max-width: 1099.98px) {
  .rg-mob-abas {
    display: inline-flex; gap: 4px; margin: 0 0 12px; padding: 3px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 999px;
  }
  .rg-mob-aba {
    border: 0; background: transparent; color: var(--c-text2); font: inherit; font-size: var(--fs-md);
    font-weight: 600; padding: 6px 16px; border-radius: 999px; cursor: pointer;
  }
  .rg-mob-aba.atual { background: var(--c-accent); color: #fff; }
  /* default = aba "Regra": esconde o chat (não empilha a conversa gigante em cima); mostra config + prévia */
  .rg-editor-grid .rg-col-chat { display: none; }
  /* aba "Conversa": mostra só o chat */
  .rg-editor-grid.mob-chat .rg-col-chat { display: flex; }
  .rg-editor-grid.mob-chat .rg-col-config,
  .rg-editor-grid.mob-chat .rg-col-previa { display: none; }
  /* chat no mobile: altura própria (não é sticky); o log rola dentro */
  .rg-col-chat { max-height: 72vh; }
  .rg-col-chat .rg-ia-log { min-height: 150px; }
  .rg-chat-toggle { display: none; }
}

/* ABAS HORIZONTAIS ÚNICAS (criador-v3, layout único): o stepper (#rg-checklist) é a ÚNICA navegação; a
   seção ATIVA vira o painel abaixo e as fechadas SOMEM (fim do "acordeão" que desenhava a mesma lista 2×).
   A classe .criador-v3 é o gatilho lido pelo JS (rgEhV3) — mantida no grid do app.html. */
.criador-v3 .rg-col-config .editor-secao:not(.is-aberta) { display: none; }
/* a seção ativa é o painel da aba — não é mais "clicar p/ abrir" (acordeão): sem caret, sem cursor de link */
.criador-v3 .rg-col-config .editor-secao.is-aberta > .editor-secao-titulo { cursor: default; }
.criador-v3 .rg-col-config .editor-secao.is-aberta > .editor-secao-titulo::after { display: none; }
/* a bolinha numerada de status já vive no stepper — não repetir no título do painel (some a duplicação) */
.criador-v3 .rg-col-config .editor-secao.is-aberta > .editor-secao-titulo::before { display: none; }
/* painel da aba num cartão suave, destacado do stepper acima */
.criador-v3 .rg-col-config .editor-secao.is-aberta {
  background: var(--c-surface);
  border: 1px solid rgba(37, 99, 168, 0.16);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
}
/* a prévia já é AO VIVO (debounce) → o botão "Atualizar" é vestigial */
.criador-v3 #rg-previa-btn { display: none; }

/* F7.6 — conector E/OU VISÍVEL dos Filtros (antes o #rg-operador era hidden e regras "OU" ficavam
   invisíveis no editor). Segmented simples; só aparece com 2+ filtros (controlado por JS). */
.rg-cond-conector { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; font-size: 13px; }
.rg-cond-conector-lbl { color: var(--c-text2, #5b6a86); }
.rg-cond-conector-tabs { display: inline-flex; border: 1px solid rgba(37, 99, 168, 0.28); border-radius: 8px; overflow: hidden; }
.rg-cond-conector-tabs button { border: 0; background: var(--c-surface, #fff); color: var(--c-text2, #5b6a86); font: inherit; font-weight: 650; font-size: 12.5px; padding: 5px 11px; cursor: pointer; }
.rg-cond-conector-tabs button + button { border-left: 1px solid rgba(37, 99, 168, 0.28); }
.rg-cond-conector-tabs button.ativo { background: var(--c-accent, #2563a8); color: #fff; }
.rg-cond-conector-tabs button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(37, 99, 168, 0.45); }

/* F7.6: bloco de "campos vigiados" agora visível (antes num <details>) — só o rótulo "(opcional)" discreto */
.rg-vigiados-opc { font-weight: 400; font-size: 12px; color: var(--c-text2, #5b6a86); }

/* F7.2: conversa PERSISTENTE do dock da IA (bolhas que ficam, no lugar do banner descartável "entendi") */
.rg-ia-log { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; margin: 8px 0 4px; }
.rg-ia-msg { font-size: 13px; max-width: 92%; padding: 8px 11px; border-radius: 10px; line-height: 1.4; }
.rg-ia-msg-eu { align-self: flex-end; background: var(--c-accent, #2563a8); color: #fff; border-radius: 12px 3px 12px 12px; }
.rg-ia-msg-ia { align-self: flex-start; background: var(--c-surface, #fff); border: 1px solid rgba(37, 99, 168, 0.16); border-radius: 3px 12px 12px 12px; }
.rg-ia-msg-ia .rg-ia-resumo { margin-top: 4px; font-weight: 650; }
.rg-ia-msg-ia ul { margin: 6px 0 0; padding-left: 18px; }
.rg-ia-msg-ia li { margin: 2px 0; }
.rg-topo-acoes { display: flex; gap: 8px; align-items: center; }
.rg-previa-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.rg-previa-cab .editor-secao-titulo { margin: 0; }
.rg-previa-acoes { display: flex; gap: 6px; }
/* R11-C6 — prévia em tela cheia: a coluna capada (340px) é pequena p/ o e-mail (640px). Dica clicável +
   overlay filho do <body> (evita o containing-block do .painel[animation both] que prenderia position:fixed). */
.rg-previa-cab-acoes { display: flex; align-items: center; gap: 6px; }
.rg-previa-dica { display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  font-size: var(--fs-sm); color: var(--c-accent); background: rgba(37,99,168,0.05);
  border: 1px dashed var(--c-border); border-radius: var(--radius-m); padding: 5px 10px; margin: 0 0 8px; }
.rg-previa-dica:hover { background: rgba(37,99,168,0.10); border-color: var(--c-accent); }
.rg-previa-full { display: none; position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(15,25,50,0.62); padding: 2vh 2vw; }
.rg-previa-full.aberto { display: flex; align-items: stretch; justify-content: center; }
.rg-previa-full-caixa { display: flex; flex-direction: column; width: 100%; max-width: 1320px;
  background: var(--c-surface); border-radius: var(--radius-m); overflow: hidden;
  box-shadow: 0 24px 70px rgba(15,25,50,0.45); }
.rg-previa-full-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--c-border); font-weight: 600;
  font-size: var(--fs-md); color: var(--c-text); }
.rg-previa-full-acoes { display: inline-flex; align-items: center; gap: 6px; }
.rg-previa-full-corpo { flex: 1 1 auto; overflow: auto; padding: 20px 24px; background: #ffffff; scrollbar-gutter: stable; overscroll-behavior: contain; }
.rg-previa-full-corpo #rg-previa { width: 100%; max-width: 1180px; margin: 0 auto; }
/* F4 — prévia como acordeão recolhível no MOBILE (reparentada p/ sob os cards de Formato via JS).
   No desktop (≥1100px) nada disto vale: a prévia segue sendo a coluna fixa da direita. */
.rg-previa-caret { display: none; }
#rg-previa-slot-mobile:empty { display: none; }               /* âncora some quando vazia (no desktop) */
@media (max-width: 1099.98px) {
  #rg-previa-toggle { display: none; }                         /* no mobile o próprio cabeçalho é o controle */
  .rg-col-previa.rg-previa-mobile { margin-top: 4px; }
  .rg-col-previa.rg-previa-mobile .rg-previa-cab { cursor: pointer; }
  .rg-col-previa.rg-previa-mobile .rg-previa-caret {
    display: inline-block; margin-right: 6px; transition: transform var(--tr);
  }
  .rg-col-previa.rg-previa-mobile.previa-fechada .rg-previa-caret { transform: rotate(-90deg); }
  .rg-col-previa.rg-previa-mobile.previa-fechada #rg-previa { display: none; }
}
/* Prévia = "tela do resultado": área contida, levemente destacada do cartão */
.previa-box { background: #fcfdff; border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: 12px 14px; font-size: var(--fs-md); line-height: var(--lh-texto); color: var(--c-text); }
.previa-box:empty { padding: 16px; }
.previa-box:empty::before { content: 'Preencha a regra para ver a prévia ao vivo.'; color: var(--c-text2); font-size: var(--fs-sm); }
.previa-placeholder { color: var(--c-text2); font-size: var(--fs-sm); }

/* Resumo da prévia enquadrado (chips) */
.previa-resumo { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.previa-chip { font-size: var(--fs-sm); color: var(--c-text); background: rgba(37,99,168,0.08);
  border: 1px solid var(--c-border); border-radius: 14px; padding: 3px 10px; white-space: nowrap; }
.previa-nota { font-size: var(--fs-sm); color: var(--c-text2); margin: 0 0 10px; }

/* Prévia: distribuição por cadastro (mostra como distribuiu + destaca o que não casou) */
.previa-dist { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 10px; margin: 0 0 12px; background: rgba(37,99,168,0.04); }
.previa-dist-aviso { border-color: #e0a800; background: rgba(224,168,0,0.07); }
.previa-dist-tit { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 6px; }
.previa-dist-avisos { font-size: var(--fs-sm); color: #8a6d00; margin-bottom: 8px; }
.previa-dist-ok { font-size: var(--fs-sm); color: var(--c-text2); margin-bottom: 8px; }
.cc-desc-list { margin: 4px 0 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--c-text); }
.cc-desc-list li { margin: 2px 0; }

/* Cartões de escolha (rádio) — Mensagem e métodos */
.rg-radio-cards { display: flex; flex-wrap: wrap; gap: 8px; }
/* R11-C1 — "Como aparece": grade 2×2 fixa (com flex quebrava 3+1, o 4º esticado sozinho). Cirúrgico no
   #rg-msg-formato via .pagina-app: os OUTROS grupos .rg-radio-cards (destino etc.) seguem flex. Login intocado. */
.pagina-app #rg-msg-formato { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rg-radio-card { flex: 1; min-width: 160px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m);
  padding: 6px 10px; font-family: inherit; font-size: var(--fs-md); font-weight: 500;
  line-height: var(--lh-ui); color: var(--c-text);
  transition: border-color var(--tr), background var(--tr), box-shadow var(--tr); }
.rg-radio-card small { font-size: var(--fs-sm); font-weight: 400; line-height: var(--lh-ui); color: var(--c-text2); }
/* Escada de estado: hover 0.04 → pressed 0.10 → ativo 0.14 (mesma família rgba(37,99,168,·)) */
.rg-radio-card:hover:not(:disabled)  { border-color: var(--c-accent); background: rgba(37,99,168,0.04); }
.rg-radio-card:active:not(:disabled) { background: rgba(37,99,168,0.10); }
.rg-radio-card.ativo { border-color: var(--c-accent); background: rgba(37,99,168,0.14);
  box-shadow: 0 0 0 2px rgba(37,99,168,0.15); }
.rg-radio-card:disabled { opacity: 0.45; cursor: not-allowed; }
.rg-radio-card { position: relative; }
.rg-radio-card.ativo::after { content: '✓'; position: absolute; top: 6px; right: 9px; font-size: var(--fs-md); font-weight: 700; color: var(--c-accent); }
/* Seletor "Repetir o aviso": rótulo + cards com ícone (!) que mostra ajuda (o que faz + exemplo) ao passar o mouse */
.rg-rep-label { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--c-text); margin-bottom: 6px; }
/* consequência do objetivo ATIVO: uma linha só, cor de destaque (lê como confirmação, não como parágrafo) */
.rg-rep-conseq { display: block; margin-top: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-accent); }
.rg-rep-top { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.rg-rep-intervalo { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 10px; padding: 9px 11px; border: 1px solid #c9daef; border-radius: 8px; background: #f7fafe; color: var(--c-text); font-size: var(--fs-sm); }
.rg-rep-intervalo[hidden] { display: none; }
.rg-rep-intervalo label { font-weight: 650; }
.rg-rep-intervalo input { width: 68px; min-height: 34px; padding: 5px 8px; border: 1px solid var(--c-border); border-radius: 7px; font: inherit; text-align: center; }
.rg-rep-intervalo small { flex-basis: 100%; color: var(--c-text2); line-height: 1.35; }
.rg-info { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--c-border);
  font-size: 0.66rem; font-weight: 700; font-style: normal; line-height: 1; color: var(--c-text2);
  cursor: help; position: relative; padding: 0; background: transparent; font-family: inherit; }
.rg-info:hover, .rg-info:focus-visible { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.rg-info::after { content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  width: 230px; max-width: 60vw; padding: 8px 10px; border-radius: var(--radius-m);
  background: #1f2a3a; color: #fff; font-size: var(--fs-sm); font-weight: 400; font-style: normal;
  line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  z-index: var(--z-popover); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--tr); }
.rg-info::before { content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #1f2a3a; z-index: var(--z-popover); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity var(--tr); }
/* F3 — tooltip acessível: aparece no hover, no foco por TECLADO e no TOQUE (o botão recebe :focus) */
.rg-info:hover::after, .rg-info:hover::before,
.rg-info:focus::after, .rg-info:focus::before,
.rg-info:focus-visible::after, .rg-info:focus-visible::before { opacity: 1; visibility: visible; }
/* Sem espaço acima (balão seria cortado pelo topo do scroll/cabeçalho fixo) → abre pra BAIXO
   (classe alternada por JS, mesmo remédio do emoji-pop) */
.rg-info.tip-baixo::after { bottom: auto; top: calc(100% + 9px); }
.rg-info.tip-baixo::before { bottom: auto; top: calc(100% + 3px); border-top-color: transparent; border-bottom-color: #1f2a3a; }
.rg-hor-sug.ativo { border-color: var(--c-accent); background: rgba(37,99,168,0.10); color: var(--c-accent); font-weight: 600; }
/* seções do modal de ajustes da coluna (engrenagem) — hierarquia clara */
.modal-secao + .modal-secao { border-top: 1px solid var(--c-border); margin-top: 16px; padding-top: 16px; }
.modal-secao-titulo { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--c-text2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
/* Sub-abas do modal de ajustes da coluna (engrenagem) */
.modal-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: 16px; }
.modal-tab {
  border: 0; background: none; cursor: pointer; padding: 8px 12px; margin-bottom: -1px;
  font-size: var(--fs-md); font-weight: 600; color: var(--c-text2);
  border-bottom: 2px solid transparent;
}
.modal-tab[hidden] { display: none; }
.bloco-row .bloco-cfg { width: 32px; }
.modal-tab:hover { color: var(--c-text); }
.modal-tab.ativo { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.modal-tab-pane[hidden] { display: none; }
#rg-col-modal .modal {
  width: min(720px, 100%);
  max-height: min(860px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
}
#rg-col-modal .modal-corpo { min-height: 0; overflow-y: auto; padding: 16px 20px 20px; }
#rg-col-modal .modal-tabs {
  position: sticky;
  top: -16px;
  z-index: 2;
  padding-top: 10px;
  background: var(--c-surface);
}
#rg-col-modal .modal-tab-pane {
  padding: 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: linear-gradient(180deg, #fbfdff 0%, #f7fafe 100%);
}
#rg-col-modal .modal-rodape { flex: 0 0 auto; }
.rg-col-fallback-linha { display: flex; align-items: center; gap: 8px; }
.rg-col-fallback-linha .col-campo-box { flex: 1 1 auto; min-width: 0; }
.rg-col-fallback-linha .btn-mini { flex: 0 0 auto; }
/* Confirmação visível logo abaixo do campo (pedido 2026-07-14): mostra qual reserva está ativa assim que escolhida. */
.rg-col-fallback-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-accent);
  background: rgba(37, 99, 168, 0.10);
  border: 1px solid rgba(37, 99, 168, 0.25);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rg-col-fallback-status strong { font-weight: 700; }
.rg-col-contexto {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: rgba(37, 99, 168, 0.07);
  color: var(--c-text2);
  font-size: var(--fs-sm);
}
.rg-editor-grid > *, .rg-col-config, .rg-col-config * { min-width: 0; }
.rg-col-config { overflow-x: hidden; }
#rg-frase { overflow-wrap: anywhere; }
/* Cabeçalhos por INTENÇÃO dentro de um pane (F1): "Virar status", "Pintar quando…", "Quando vier vazio" */
.modal-grupo-titulo {
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--c-accent);
  margin: 20px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
}
.modal-grupo-titulo[hidden] { display: none; }
/* F4 — selo do que está ATIVO em cada grupo (destaque do configurado) */
.grp-selo {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0;
  color: #fff; background: var(--c-accent);
  padding: 1px 7px; border-radius: 999px; vertical-align: middle; margin-left: 4px;
}
.grp-selo[hidden] { display: none; }
/* R12-F4b — Assistente UNIFICADO: dock de descrever/ajustar no topo do editor (a prévia ao lado é o artefato) */
.rg-ia-dock { border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent);
  background: #f8fbff; border-radius: var(--radius-m); padding: 12px; margin-bottom: 12px; }
.rg-ia-label { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--c-text); margin-bottom: 8px; text-wrap: balance; }
/* Cards de modelo vindos da biblioteca da casa (biblioteca/modelos.json) */
.rg-modelo-card.rg-modelo-bib { border-left: 3px solid var(--c-accent); }
/* Vista dedicada: conversa centrada que vira bolhas; dock de entrada embaixo (sticky) */
.rg-assist-wrap { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; }
.rg-assist-log { flex: 1; min-height: 46vh; padding: 6px 2px 14px; overflow-y: auto; }
.rg-assist-vazio { text-align: center; color: var(--c-text2); padding: 44px 16px; }
.rg-assist-vazio-emoji { font-size: 40px; line-height: 1; }
.rg-assist-vazio h3 { margin: 12px 0 6px; color: var(--c-text); font-size: var(--fs-xl); text-wrap: balance; }
.rg-assist-vazio p { margin: 0 auto; max-width: 460px; font-size: var(--fs-md); }
.rg-bolha { max-width: 88%; padding: 10px 13px; border-radius: 14px; margin: 8px 0; font-size: var(--fs-md); line-height: 1.45; white-space: pre-wrap; }
.rg-bolha-voce { margin-left: auto; background: var(--c-accent); color: #fff; border-bottom-right-radius: 4px; }
.rg-bolha-ia { margin-right: auto; background: #f2f5fa; color: var(--c-text); border: 1px solid var(--c-border); border-bottom-left-radius: 4px; }
.rg-bolha-pensando { color: var(--c-text2); font-style: italic; }
.rg-bolha .rg-ia-resumo { margin: 6px 0; font-style: italic; }
.rg-bolha-avisos { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--c-text2); }
.rg-bolha-acoes { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.rg-assist-dock { position: sticky; bottom: 0; background: var(--c-surface); padding-top: 10px; border-top: 1px solid var(--c-border); }
.rg-assist-input { display: flex; gap: 8px; align-items: flex-end; }
/* textarea da dock: compacta (1 linha), cresce com o conteúdo (auto-resize por JS) */
.rg-assist-input textarea { flex: 1; box-sizing: border-box; resize: none; overflow: hidden; min-height: 42px;
  padding: 10px 11px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-m);
  font-family: inherit; font-size: var(--fs-md); line-height: 1.4; color: var(--c-text);
  transition: border-color var(--tr), box-shadow var(--tr); }
.rg-assist-input textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(37,99,168,0.14); }
.rg-assist-dock select { padding: 6px 10px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-m);
  font-family: inherit; font-size: var(--fs-md); color: var(--c-text); background: var(--c-surface); }
.rg-ia-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rg-ia-chip { border: 1px solid var(--c-border); background: #f6f9fd; color: var(--c-accent);
  border-radius: 999px; padding: 4px 11px; font-size: var(--fs-sm); font-family: inherit; cursor: pointer;
  transition: background var(--tr), border-color var(--tr); }
.rg-ia-chip:hover { background: #eaf1fb; border-color: var(--c-accent); }
.rg-ia-linha { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 10px; }
.rg-link { border: 0; background: none; padding: 0; cursor: pointer; color: var(--c-accent);
  font: inherit; font-size: var(--fs-sm); text-decoration: underline; }
.rg-ia-status { font-size: var(--fs-sm); color: var(--c-text2); }
.rg-ia-status.rg-ia-status-alerta { color: #9a6a00; cursor: help; }
/* Copy dos docks de IA (regras/fontes): ajuda discreta + exemplos sob demanda (escondidos por padrão) */
.ia-ajuda { font-size: var(--fs-sm); color: var(--c-text2); margin-top: 6px; }
.ia-ajuda a { color: var(--c-accent); cursor: pointer; text-decoration: underline; }
.ia-exemplos { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ia-exemplo { text-align: left; background: none; border: none; padding: 2px 0; color: var(--c-text); font: inherit; cursor: pointer; }
.ia-exemplo:hover { color: var(--c-accent); }
.rg-ia-avisos { border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent);
  background: #f4f8fd; border-radius: var(--radius-m); padding: 10px 12px; margin-bottom: 12px; font-size: var(--fs-sm); }
.rg-ia-avisos[hidden] { display: none; }
.rg-ia-avisos ul { margin: 6px 0 8px; padding-left: 18px; }
.rg-ia-avisos .rg-ia-resumo { margin: 6px 0; font-style: italic; color: var(--c-text); }
/* "Ajustes avançados" EM USO ganham destaque, mesmo recolhidos */
.rg-avancado.tem-conteudo { border-color: var(--c-accent); }
.rg-avancado.tem-conteudo > summary { color: var(--c-accent); }
.rg-avancado.tem-conteudo > summary::before { content: '● '; }

/* Telinha de filtro: filtros já criados (cinza) dentro do modal */
.cond-criados { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.cond-criados:empty { display: none; }
.cond-criado { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: var(--fs-md); color: var(--c-text2); background: var(--c-surface, #f4f6fa);
  border: 1px dashed var(--c-border); border-radius: var(--radius); padding: 6px 10px; }
.cond-criado .cond-criado-rem { color: var(--c-erro); }

/* Avisos humanos + resumo da prévia */
.previa-avisos {
  background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.25);
  border-radius: var(--radius-m); padding: 10px 12px; margin-bottom: 12px;
  font-size: var(--fs-md); color: var(--c-text);
}
.previa-avisos ul { margin: 6px 0 0 18px; }
/* A regra em uma frase (R5.2) — lê-se em português; cada parte é clicável */
.rg-frase { font-size: var(--fs-lg); line-height: var(--lh-texto); color: var(--c-text); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--c-border); }
/* F2 — stepper + frase grudam no topo (logo abaixo da barra .subabas, que é sticky top:0) ao rolar
   a config. Fundo sólido edge-to-edge (margin -20px = padding horizontal do .card) p/ o conteúdo NÃO vazar
   por baixo quando fixo. z abaixo das sub-abas (z:10), acima do conteúdo. */
.rg-topo-sticky {
  position: sticky; top: var(--subabas-h); z-index: var(--z-sticky-conteudo);
  isolation: isolate; background: #ffffff;
  margin: 0 -20px 14px; padding: 12px 20px;
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 10px 16px -18px rgba(20, 40, 80, 0.65);
}
.rg-topo-sticky::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  inset: -14px 0 -14px; background: #ffffff;
}
.rg-topo-sticky > * { position: relative; z-index: 1; }
.rg-topo-sticky #rg-frase { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }  /* a divisória agora é a do wrapper */
.frase-parte {
  font-family: inherit; font-size: inherit; color: var(--c-accent); cursor: pointer; font-weight: 650;
  background: none; border: 0; border-bottom: 1.5px dashed rgba(37,99,168,0.45); border-radius: 0;
  padding: 0; transition: border-color var(--tr), color var(--tr);
}
.frase-parte:hover { background: none; border-bottom-color: var(--c-accent); }
/* vazio = "espaço a preencher" (tracejado neutro); a cor de ESTADO (pendência) vive no stepper */
.frase-parte.vazio { color: var(--c-text2); border-bottom-color: var(--c-border-strong); }
.rg-conf-titulo { margin-top: 4px; }

.previa-resumo { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 12px; }
.previa-resumo div {
  font-size: var(--fs-sm); color: var(--c-text2);
  background: rgba(37,99,168,0.06); padding: 4px 10px; border-radius: 12px;
}

/* Lista de condições (frases legíveis) */
/* Filtros rápidos como chips de 1 clique (R4.5d) */
.filtro-rapido { margin-bottom: 12px; }
.filtro-rapido-titulo { display: block; font-size: var(--fs-sm); color: var(--c-text2); margin-bottom: 6px; }
.filtro-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro-chip {
  font-family: inherit; font-size: var(--fs-sm); color: var(--c-accent); cursor: pointer;
  background: rgba(37,99,168,0.06); border: 1px solid var(--c-border); border-radius: 16px; padding: 5px 12px;
  transition: background var(--tr), border-color var(--tr);
}
.filtro-chip:hover { background: rgba(37,99,168,0.12); border-color: var(--c-accent); }
.filtro-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.filtro-inline label { font-size: var(--fs-sm); color: var(--c-text); margin: 0; }
.filtro-inline input { height: 32px; max-width: 220px; padding: 0 10px; }
.btn-mini-ok { color: #fff; background: var(--c-accent); border-color: var(--c-accent); }
.rg-outro-filtro { margin-top: 6px; }
.rg-sem-filtros-nota { display: block; margin-top: 8px; font-size: var(--fs-sm); color: var(--c-text2); }
.rg-add-filtro { margin-top: 4px; }

/* Telinha de filtro: operador + valor na MESMA linha */
#rg-cond-config { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; }
#rg-cond-config .cond-escolhido { flex-basis: 100%; }
#rg-cond-config .campo { flex: 1; min-width: 150px; margin: 0; }

/* Destino padrão (quando nenhuma regra encaixa) */
.rg-destino-padrao { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--c-border); }
.rg-destino-padrao .rg-radio-cards { margin: 6px 0 10px; }

/* Linhas de "Destinatários conforme dados" — grade tipo planilha (campo·operador·valor·destino·cc) */
.dist-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px;
  align-items: end; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--c-border); }
.dist-row .campo { margin: 0; min-width: 0; }   /* min-width:0 deixa o campo encolher (nunca ultrapassa) */
.dist-row label { font-size: 0.7rem; color: var(--c-text2); margin-bottom: 3px; }
.dist-row select, .dist-row input { width: 100%; min-width: 0; box-sizing: border-box; }
.dist-row .dist-rem { justify-self: start; align-self: end; height: 36px; }
@media (max-width: 560px) { .dist-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Coluna da tabela: ⚙ abre o painel de ajustes (nada de "valor cru/recorte" poluindo a linha) */
.col-config { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 6px; padding: 10px; background: var(--c-surface, #f4f6fa);
  border: 1px solid var(--c-border); border-radius: var(--radius-m); }
.col-config select, .col-config input { flex: 1; min-width: 150px; }
.col-config .col-remover { flex-basis: 100%; }
.col-rem-presets { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.coluna-row .col-acoes .btn-ic.col-cfg.tem-cfg { color: #fff; background: var(--c-accent); border-color: var(--c-accent); }
.col-ord { position: relative; font-weight: 700; overflow: visible; }
.col-ord[data-ordem]:not([data-ordem=""])::after {
  content: attr(data-ordem); position: absolute; right: -4px; top: -5px;
  min-width: 13px; height: 13px; padding: 0 2px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #fff; border-radius: 999px; background: #1d2342; color: #fff;
  font-size: 8px; line-height: 1; font-weight: 800; box-shadow: 0 1px 2px rgba(20,40,80,.18);
}
.coluna-row .col-acoes .btn-ic.col-ord.ativo { color: #fff; background: var(--c-accent); border-color: var(--c-accent); }
/* Critério de DESEMPATE (2ª coluna clicada no ↕): mesma cor, mas "vazado" — visualmente mais leve que o
   principal (sólido), pra distinguir sem precisar de rótulo/texto extra na tela. */
.coluna-row .col-acoes .btn-ic.col-ord.ativo-sec { color: var(--c-accent); background: #eef4fd; border-color: var(--c-accent); }
.col-destaque { display: none; }                       /* destaque do cartão só faz sentido em cartões */
#rg-colunas.modo-cartoes .col-destaque { display: inline-block; }
.col-destaque[hidden] { display: none !important; }
/* Respiro na seção de colunas: título afastado do bloco anterior, botão "+ Coluna" solto da última linha. */
#rg-colunas-label { margin-top: 6px; }
#rg-colunas { margin-bottom: 4px; }
.rg-planilha-hint {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 8px 10px;
  border: 1px solid #dbe6f3; border-radius: 8px; background: #f7fafe;
  color: var(--c-text2); font-size: var(--fs-sm); line-height: 1.4;
}
.rg-planilha-hint > span:first-child { color: var(--c-accent); font-size: 15px; line-height: 1.1; }
.rg-planilha-hint[hidden] { display: none; }
#rg-add-coluna { margin-top: 2px; }
.coluna-row .col-acoes .btn-ic.col-destaque.ativo { color: #fff; background: var(--c-accent); border-color: var(--c-accent); }
/* campo com @variável não identificada: marca DISCRETA (borda esquerda âmbar) — o title mostra qual, no hover.
   O sinal principal é a bolinha AMARELA da etapa Mensagem (chk-atencao); aqui é só uma pista no campo. */
.campo-var-alerta { border-left: 3px solid #e0b155 !important; }
/* GRIFO da @variável inválida: camada-espelho atrás do campo (fundo transparente no campo → a marca amarela do
   token aparece por baixo, alinhada). Não bloqueia o envio; é só aviso visual. */
.campo-hl-wrap { position: relative; display: block; width: 100%; }
/* o wrap virou o filho de .campo → o campo dentro dele precisa de width:100% (antes ele esticava como filho direto) */
.campo-hl-wrap > input, .campo-hl-wrap > textarea { position: relative; z-index: 1; width: 100%; box-sizing: border-box; background-color: transparent !important; }
.campo-hl { position: absolute; top: 0; left: 0; z-index: 0; margin: 0; overflow: hidden; pointer-events: none;
  color: transparent; background: var(--c-surface); white-space: pre; display: flex; align-items: center; }
.campo-hl-multi { display: block; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; align-items: initial; }
.hl-var { background: #fde047; border-radius: 3px; color: transparent; }
.hl-var-ok { background: #dbeafe; border-radius: 4px; color: transparent; box-shadow: inset 0 -1px 0 #60a5fa; }
.campo-hl-rico > textarea { color:transparent !important; caret-color:#243049; }
.campo-hl-rico > textarea::selection { color:transparent; background:rgba(37,99,168,.24); }
.campo-hl-rico > textarea::placeholder { color:#8995aa; -webkit-text-fill-color:#8995aa; }
.campo-hl-rico .campo-hl { color:#243049; }
.campo-hl-rico .hl-var-ok { color:#155a9b; background:#dbeafe; box-shadow:inset 0 -1px 0 #60a5fa; }
.campo-hl-rico .hl-var { color:#7a4b00; background:#fff2ad; box-shadow:inset 0 -1px 0 #e0b155; }
.hl-vis-negrito { text-shadow:.35px 0 currentColor,-.35px 0 currentColor; }
.hl-vis-italico { font-style:italic; }
.hl-vis-sublinhado { text-decoration:underline; text-underline-offset:2px; }
.hl-vis-cor-azul { color:#2563a8 !important; } .hl-vis-cor-vermelho { color:#b42318 !important; }
.hl-vis-cor-verde { color:#18794e !important; } .hl-vis-cor-ambar { color:#9a6700 !important; }
.hl-vis-cor-cinza { color:#667085 !important; }
.hl-vis-grifo-amarelo { background:#fff2a8 !important; } .hl-vis-grifo-verde { background:#dff4df !important; }
.hl-vis-grifo-azul { background:#dcecff !important; } .hl-vis-grifo-rosa { background:#f9dce8 !important; }
/* Resumo contextual do campo ativo: não duplica a inserção por @; só mostra os dados já usados e abre ajustes. */
.rg-vars-usadas {
  margin-top: 7px; padding: 10px; border: 1px solid #d7e5f5; border-radius: 9px;
  background: #f7fafe; display: grid; gap: 9px;
}
.rg-texto-ajuste-grupo { display: grid; grid-template-columns: 125px minmax(0,1fr); align-items: start; gap: 8px; }
.rg-texto-ajuste-grupo[hidden] { display: none; }
.rg-vars-usadas-titulo { color: #5a6a87; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; margin-right: 2px; }
.rg-vars-usadas-lista { display: flex; flex-wrap: wrap; gap: 5px; }
.rg-var-chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 27px; padding: 3px 8px;
  border: 1px solid #b9d4f3; border-radius: 999px; background: #eaf3ff; color: #1d5f9f;
  font: inherit; font-size: 12px; font-weight: 600;
}
button.rg-var-chip { cursor: pointer; }
button.rg-var-chip:hover, button.rg-var-chip:focus-visible { background: #dbeafe; border-color: #4f91d2; outline: none; }
.rg-var-chip.tem-ajuste { color: #fff; background: #2563a8; border-color: #2563a8; }
.rg-var-chip-sistema { opacity: .82; }
.rg-var-reserva { font-weight: 800; }
.rg-var-contagem { min-width:17px; height:17px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; border-radius:99px; background:rgba(255,255,255,.2); font-size:9px; }
.rg-var-chip .icone-acao { font-size:13px; line-height:1; }
#rg-var-modal .modal { width: min(680px, 100%); }
#rg-var-modal .modal-corpo { min-height:410px; }
#rg-var-contexto span { color: #6b7896; font-size: 12px; }
.rg-var-aparencia-linha { display:flex; gap:22px; align-items:center; margin:4px 0 16px; }
.msg-tools-dica { margin-left:auto; color:#7b89a2; font-size:11px; font-weight:400 !important; }
@media (max-width: 640px) {
  .rg-texto-ajuste-grupo { grid-template-columns:1fr; gap:5px; }
  .msg-tools-dica { width:100%; margin-left:0; }
  #rg-var-modal .modal-corpo { min-height:0; }
}
.col-cfg-chip { font-size: var(--fs-xs); font-weight: 600; color: #1d4e86; background: #e7eff9; border: 1px solid #cfe0f5; border-radius: 999px; padding: 2px 9px; white-space: nowrap; align-self: center; display: inline-block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.rg-col-contexto { font-size: var(--fs-sm); color: #5a6a87; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid #eef1f6; }
.rg-col-contexto strong { color: #1d2342; }
.rg-col-status-com-valor { margin-top: 8px; }
.rg-col-status-com-valor .rg-radio-card { min-width: 0; }
/* Mensagem: grupos separados por ESPAÇO (sem títulos de passo). Proximidade por whitespace (NN/g):
   campos do mesmo assunto ficam juntos; um gap maior marca onde começa um novo assunto. */
.msg-sep { margin-top: 16px; }
.col-substituir { display: flex; gap: 8px; }
.col-substituir input { flex: 1; min-width: 0; }
.rg-disparo-opt { margin-top: 10px; }
/* destaque quando um ajuste/opcional está ATIVO (o usuário vê de relance) */
.rg-disparo-opt:has(input:checked) { color: var(--c-accent); font-weight: 600; }
.rg-avancado[open] { border-color: var(--c-accent); box-shadow: 0 0 0 1px rgba(37,99,168,0.15); }
.previa-vazio { border-style: dashed !important; opacity: 0.92; }
.rg-hor-sugeridos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.rg-hor-sug-lbl { font-size: var(--fs-sm); color: var(--c-text2); margin-right: 2px; }
#rg-rodape { min-height: 44px; }

/* Tabela na prévia: legível, com rolagem horizontal se for larga */
.previa-corpo { overflow-x: auto; }
.previa-corpo table, table.rel-tabela { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); margin-top: 6px; }
.previa-corpo th, .previa-corpo td { border: 1px solid var(--c-border); padding: 4px 8px; text-align: left; vertical-align: top; }
.previa-corpo thead th { background: rgba(37,99,168,0.07); font-weight: 600; white-space: nowrap; }
.cond-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cond-vazia { font-size: var(--fs-md); color: var(--c-text2); padding: 8px 0; }
.cond-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: #f6f9fd;
  border: 1px solid var(--c-border); border-radius: 8px;
}
.cond-item-txt   { flex: 1 1 auto; min-width: 0; color: var(--c-text); font-size: var(--fs-sm); line-height: 1.35; }
.cond-item-acoes { flex: 0 0 auto; display: inline-flex; gap: 2px; }
/* Botão-ÍCONE reutilizável (✎ editar · ⧉ duplicar · ⏸/▶ pausar · ✕ tirar/excluir) — auto-explicativo, não polui */
.btn-ic {
  border: 0; background: none; cursor: pointer; color: var(--c-text2);
  width: 28px; height: 28px; border-radius: 6px; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--tr), color var(--tr);
}
.btn-ic .icone-acao { width: 16px; height: 16px; display: block; flex: 0 0 auto; }
/* Fix 17/07: o SVG do ícone NÃO captura o clique → ele cai no <button> e os handlers que leem
   e.target.getAttribute('data-...') (excluir/editar/duplicar condição, ações da lista) voltam a funcionar.
   Sem isto, clicar EM CIMA do ícone (a maior parte do botão) era clique morto. */
.icone-acao { pointer-events: none; }
.btn-ic:hover   { background: rgba(37,99,168,0.10); color: var(--c-accent); }
.btn-ic-x:hover { background: rgba(192,57,43,0.10); color: var(--c-erro, #c0392b); }
.td-acoes .btn-ic + .btn-ic { margin-left: 2px; }

/* Gerenciador de regras — busca, status e ações legíveis */
.rg-gerenciador-card { padding: 20px; }
.rg-gerenciador-card:hover { border-color: var(--c-border); box-shadow: 0 1px 3px rgba(20, 40, 80, 0.06); }
.rg-gerenciador-cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px;
}
.rg-gerenciador-subtitulo { margin: 5px 0 0; color: var(--c-text2); font-size: var(--fs-md); }
.rg-lista-toolbar {
  display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 12px; margin-bottom: 12px; border: 1px solid var(--c-border); border-radius: var(--radius-m);
  background: rgba(37, 99, 168, 0.035);
}
.rg-lista-busca { position: relative; display: block; min-width: 0; }
.rg-lista-busca-icone {
  position: absolute; left: 12px; top: 50%; transform: translateY(-52%); z-index: 1;
  color: var(--c-text2); font-size: 18px; pointer-events: none;
}
.rg-lista-busca input {
  width: 100%; min-width: 0; height: 40px; padding: 0 12px 0 38px; font: inherit; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px;
}
.rg-lista-busca input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.12); }
.rg-lista-filtros { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(90, 106, 135, 0.10); }
.rg-lista-filtro {
  min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--c-text2); font: inherit; font-size: var(--fs-sm); font-weight: 650;
}
.rg-lista-filtro.ativo { background: var(--c-surface); color: var(--c-accent); box-shadow: 0 1px 4px rgba(20, 40, 80, 0.12); }
.rg-lista-contagem { color: var(--c-text2); font-size: var(--fs-sm); white-space: nowrap; }
.rg-lista-tabela .tabela { table-layout: fixed; }
.rg-lista-tabela th:first-child { width: 25%; }
.rg-lista-tabela th:nth-child(2) { width: 14%; }
.rg-lista-tabela th:nth-child(3) { width: 16%; }
.rg-lista-tabela th:nth-child(4) { width: 17%; }
.rg-lista-tabela th:nth-child(5) { width: 10%; }
.rg-lista-tabela th:last-child { width: 18%; text-align: right; }
.rg-lista-tabela td { vertical-align: middle; overflow-wrap: anywhere; }
.rg-regra-nome { display: block; color: var(--c-text); line-height: 1.35; }
.rg-regra-autoria { margin-top: 4px; color: var(--c-text2); font-size: var(--fs-xs); line-height: 1.35; }
.rg-regra-tipo { display: block; font-weight: 600; }
.rg-regra-formato { display: block; margin-top: 2px; color: var(--c-text2); font-size: var(--fs-sm); }
.rg-lista-tabela .td-acoes { display: table-cell; text-align: right; white-space: normal; }
.rg-lista-tabela .td-acoes .btn-mini { margin: 2px 0 2px 4px; }
.rg-lista-tabela .td-acoes .btn-ic { margin: 2px 0 2px 4px; border: 1px solid var(--c-border); background: var(--c-surface); }
/* A edição é a ação principal, mas fica azul em fundo claro: o lápis continua legível mesmo
   antes do hover e não depende de um glifo disponível na fonte do computador. */
.rg-lista-tabela .td-acoes .btn-ic.rg-acao-principal { color: var(--c-accent); background: #eef5ff; border-color: rgba(37,99,168,.35); }
.rg-lista-tabela .td-acoes .btn-ic.rg-acao-principal:hover { color: #fff; background: var(--c-accent); border-color: var(--c-accent); }
.rg-lista-tabela .td-acoes .btn-ic.rg-acao-toggle.is-ativa { color: #8a5a08; background: #fffaf0; border-color: rgba(180,120,20,.28); }
.rg-lista-tabela .td-acoes .btn-ic.rg-acao-toggle.is-pausada { color: #177245; background: #eefaf3; border-color: rgba(34,197,94,.28); }
.rg-lista-tabela .td-acoes .btn-ic.rg-acao-toggle:hover { color: #fff; background: var(--c-accent); border-color: var(--c-accent); }
.rg-lista-vazia { padding: 36px 18px !important; line-height: 1.5; }

@media (max-width: 980px) {
  .rg-lista-toolbar { grid-template-columns: 1fr auto; }
  .rg-lista-contagem { grid-column: 1 / -1; }
  .rg-lista-tabela { overflow: visible; border: 0; background: transparent; }
  .rg-lista-tabela .tabela, .rg-lista-tabela tbody { display: block; }
  .rg-lista-tabela thead { display: none; }
  .rg-lista-tabela tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rg-lista-tabela tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start;
    border: 1px solid var(--c-border); border-radius: var(--radius-m); background: var(--c-surface); overflow: hidden;
  }
  .rg-lista-tabela tbody tr:hover { background: var(--c-surface); border-color: rgba(37, 99, 168, 0.32); }
  .rg-lista-tabela .tabela td { display: block; min-width: 0; padding: 10px 12px; border-bottom: 1px solid var(--c-border); }
  .rg-lista-tabela .tabela td::before {
    content: attr(data-label); display: block; margin-bottom: 4px; color: var(--c-text2);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  }
  .rg-lista-tabela .tabela td:first-child, .rg-lista-tabela .tabela td:last-child { grid-column: 1 / -1; }
  .rg-lista-tabela .td-acoes { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; border-bottom: 0 !important; }
  .rg-lista-tabela .td-acoes::before { flex-basis: 100%; }
  .rg-lista-tabela .td-acoes .btn-mini { margin: 0; }
  .rg-lista-tabela .rg-lista-vazia { grid-column: 1 / -1 !important; border: 0; }
}

@media (max-width: 640px) {
  .rg-gerenciador-card { padding: 14px; }
  .rg-gerenciador-cabecalho { align-items: stretch; flex-direction: column; }
  .rg-gerenciador-cabecalho .btn { width: 100%; }
  .rg-lista-toolbar { grid-template-columns: 1fr; }
  .rg-lista-filtros { width: 100%; }
  .rg-lista-filtro { flex: 1; }
  .rg-lista-tabela tbody { grid-template-columns: 1fr; }
}

/* Modal de condição — abas tipo, busca e opções */
.cond-tipo-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
/* dica viva do operador escolhido (explica + exemplo) — logo abaixo do seletor */
.cond-op-dica { margin-top: 5px; font-size: var(--fs-sm); color: var(--c-text2); line-height: 1.35; }
.cond-op-dica:empty { display: none; }
.cond-tipo-tab {
  flex: 1; padding: 8px 10px; font-family: inherit; font-size: var(--fs-md);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  color: var(--c-text2); cursor: pointer;
}
.cond-tipo-tab.ativo { border-color: var(--c-accent); color: var(--c-accent); font-weight: 600; background: rgba(37,99,168,0.06); }
.cond-busca {
  width: 100%; padding: 0.5rem 0.7rem; margin-bottom: 8px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  font-family: inherit; font-size: var(--fs-md); color: var(--c-text); outline: none;
}
.cond-busca:focus { border-color: var(--c-accent); }
.cond-opcoes { max-height: 240px; overflow-y: auto; border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: 4px; }
.cond-grupo { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text2); padding: 8px 8px 4px; }
.cond-opcao {
  display: block; width: 100%; text-align: left; padding: 7px 10px;
  background: transparent; border: none; border-radius: var(--radius);
  font-family: inherit; font-size: var(--fs-md); color: var(--c-text); cursor: pointer;
}
.cond-opcao:hover { background: rgba(37,99,168,0.08); }
.cond-escolhido {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 10px; padding: 8px 10px; font-weight: 600; color: var(--c-accent);
  background: rgba(37,99,168,0.06); border: 1px solid rgba(37,99,168,0.14);
  border-radius: var(--radius);
}
.cond-escolhido span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Combinador E/OU em frase */
.cond-frase { font-size: var(--fs-md); color: var(--c-text); margin-bottom: 12px; line-height: 1.7; }
.cond-frase-sel {
  display: inline-block;
  width: auto;
  padding: 0.2rem 1.6rem 0.2rem 0.5rem;
  background: var(--c-surface);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius);
  color: var(--c-accent);
  font-weight: 600;
  font-family: inherit;
  font-size: var(--fs-md);
  cursor: pointer;
}

/* Área de valor dirigida pelo tipo do campo */
.cond-valor-wrap { display: flex; gap: 6px; align-items: center; flex: 1.4; min-width: 0; }
.cond-valor-wrap input, .cond-valor-wrap select { width: 100%; min-width: 0; }
.cond-ate-sep { color: var(--c-text2); font-size: var(--fs-md); flex-shrink: 0; }

/* Prévia */
#rg-previa { margin-top: 12px; }
.previa-info, .previa-vazia { font-size: var(--fs-md); color: var(--c-text2); margin-bottom: 10px; }
.previa-vazia strong { color: var(--c-text); }
.previa-vertodos-wrap { margin-top: 10px; }
.rg-previa-ver-todos { font-size: var(--fs-sm); padding: 6px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-m); background: var(--c-surface); color: var(--c-text); cursor: pointer; }
.rg-previa-ver-todos:hover { background: var(--c-surface, #f5f5f5); }
.previa-diag {
  font-size: var(--fs-sm); color: var(--c-text2);
  background: rgba(37, 99, 168, 0.05);
  border: 1px solid var(--c-border); border-radius: var(--radius-m);
  padding: 12px 14px;
}
.previa-diag ul { margin: 6px 0 6px 18px; }
.previa-diag li { margin: 4px 0; }
.previa-diag-tit { margin-top: 8px; font-weight: 600; color: var(--c-text); }
.previa-diag .previa-zero { color: var(--c-erro); font-weight: 600; }
.previa-diag-dica { margin-top: 8px; font-style: italic; }
.previa-placeholder { font-size: var(--fs-md); color: var(--c-text2); padding: 12px 14px; border: 1px dashed var(--c-border); border-radius: var(--radius-m); background: rgba(37,99,168,0.03); }
.previa-diag-ex  { color: var(--c-text2); font-size: var(--fs-sm); margin: 2px 0 0 2px; }
.previa-diag-msg { color: var(--c-erro); font-size: var(--fs-sm); margin-top: 2px; }
.previa-erro { color: var(--c-erro); font-size: var(--fs-md); }
.previa-email {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.previa-cab { font-size: var(--fs-md); color: var(--c-text2); margin-bottom: 4px; }
.previa-cab strong { color: var(--c-text); }
/* Seletor de cor da pílula de status (na engrenagem) */
.cor-pilula { max-width: 150px; flex-shrink: 0; }
.rg-col-status-com-valor { margin: 7px 0 0; color: var(--c-text2); font-size: var(--fs-sm); }
.rg-col-status-com-valor small { color: var(--c-text2); font-weight: 400; }
/* Regra de cor: a identificação e a visibilidade da legenda pertencem à própria regra. */
.cor-regra-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 118px auto; gap: 6px; align-items: center; margin-bottom: 8px; }
.cor-regra-op { min-width: 0; }
.cor-regra-val { width: 84px; flex-shrink: 0; }
.cor-regra-cor { width: 118px; flex-shrink: 0; }
.cor-regra-rm { flex-shrink: 0; }
.cor-regra-legenda { grid-column: 1 / 4; width: 100%; }
.cor-regra-legenda-toggle { grid-column: 4; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-accent); }
.cor-regra-legenda-toggle.is-oculta { color: var(--c-text2); background: #f5f7fa; border-color: #dbe2ea; }
.rg-legenda-guia { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid #dbe6f3; border-left: 3px solid #2f5fa8; border-radius: 7px; background: #f7fafe; }
.rg-legenda-guia-titulo { flex: 0 0 auto; color: #1d2342; font-size: 12px; font-weight: 700; }
.rg-legenda-guia-texto { color: #5a6a87; font-size: 12px; line-height: 1.35; }
#rg-col-m-cores:empty { display: none; }
#rg-col-m-cor-add { margin-top: 2px; }
/* Linha de CONDIÇÃO genérica (pedido do dono 2026-07-16): campo + operador + valor (ou 2º campo). Usada por
   "Ocultar este dado quando…" e pela condição do "Juntar outro dado". Mesmo visual do fallback/cor. */
.rg-cond-linha { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.rg-cond-linha .rg-cond-campo-box { flex: 1 1 150px; min-width: 0; }
.rg-cond-linha .rg-cond-op { flex: 1 1 140px; min-width: 0; }
.rg-cond-linha .rg-cond-val { flex: 1 1 90px; min-width: 0; }
.rg-cond-linha .rg-cond-valcampo-box { flex: 1 1 150px; min-width: 0; }
.rg-cond-linha .rg-cond-rm { flex: 0 0 auto; }
#rg-col-m-ocultar:empty, #rg-col-m-juntar-quando:empty, #rg-var-ocultar-se:empty { display: none; }
/* Prévia do E-MAIL (R11-PV): iframe na largura REAL (640px) → LEGÍVEL. Como a coluna é estreita, o WRAP rola na
   horizontal com a BARRA NO TOPO (double-flip rotateX: o wrap gira → sua barra de baixo sobe; o iframe gira de volta
   → fica de pé/legível). Tela cheia (~720px) → cabe sem rolar. Vertical fica com a coluna (#rg-previa). */
.previa-frame-wrap { overflow-x: auto; overflow-y: hidden; margin-top: 10px; transform: rotateX(180deg); scrollbar-gutter: stable; overscroll-behavior-x: contain; }
.previa-frame { width: 640px; border: 0; background: var(--c-surface); display: block; transform: rotateX(180deg); }
/* Prévia do canal TEAMS: visual de mensagem de chat (distingue do e-mail) */
.previa-teams { background: #f5f4fb; border-color: #d6d0f0; }
.previa-teams .previa-corpo { font-size: var(--fs-md); line-height: 1.5; }
.previa-teams .previa-corpo hr.rel-sep { border-top: 1px solid #d6d0f0; margin: 9px 0; }
.previa-corpo {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--c-border);
  font-size: var(--fs-md);
  color: var(--c-text);
  overflow: auto;
  max-height: 460px; /* prévia com altura confortável; não esmaga a tela (envio real é completo) */
}
/* Separador entre itens/grupos da lista/relatório (motor emite <hr class="rel-sep">) */
hr.rel-sep { border: none; border-top: 1px solid var(--c-border); margin: 8px 0; }
.previa-corpo table { border-collapse: collapse; }
.previa-corpo th, .previa-corpo td { border: 1px solid var(--c-border); padding: 6px 10px; text-align: left; }
.previa-nota { color: var(--c-text); background: rgba(224,168,0,0.10); border: 1px solid rgba(200,150,30,0.25); }

/* Tabela renderizada (NUTRADE) na prévia — leitura de planilha */
table.rel-tabela th, table.rel-tabela td { border: 1px solid var(--c-border); padding: 5px 9px; text-align: left; vertical-align: top; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.rel-tabela thead th { background: rgba(37,99,168,0.07); font-weight: 700; text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.03em; color: var(--c-text2); }
table.rel-tabela tbody tr:nth-child(even) td { background: rgba(37,99,168,0.025); }

/* Blocos por grupo na prévia/e-mail (motor emite .rel-bloco / .rel-dado / .rel-itens) */
.rel-grupo { margin-bottom: 6px; }
.rel-bloco { margin: 6px 0; }
.rel-dado { line-height: 1.55; }
.rel-itens { margin: 4px 0 6px 18px; padding: 0; }
.rel-itens li { margin: 2px 0; }
/* Itens sem bolinha (marcador "nenhum" ou ícone livre) — mesma indentação, sem disco de lista */
.rel-itens-livres { margin: 4px 0 6px 18px; }
.rel-itens-livres .rel-item { margin: 2px 0; }

/* Editor "Cabeçalho do bloco": grade ícone · rótulo · variável · negrito · remover.
   minmax: no desktop resolve no máximo (48/120 — visual igual ao de antes); em tela estreita
   encolhe até o mínimo em vez de ESTOURAR a largura do card (QA-Layout). */
.bloco-cab-cols, .bloco-row {
  display: grid; grid-template-columns: minmax(36px, 48px) minmax(72px, 120px) minmax(0, 1fr) auto 32px 28px; gap: 8px; align-items: center;
}
.bloco-cab-cols { margin: 2px 0 4px; }
.bloco-cab-cols span { font-size: var(--fs-xs); font-weight: 600; color: var(--c-text2); text-transform: uppercase; letter-spacing: 0.03em; }
.bloco-row { margin-bottom: 6px; }
.bloco-row .bloco-icone { text-align: center; font-size: 1rem; }
.bloco-row .bloco-icone, .bloco-row .bloco-rotulo, .bloco-row .bloco-var { min-width: 0; }
.bloco-row .bloco-rem { width: 28px; }
/* Paleta de ícones rápidos */
/* Seletor de ícone flutuante (abre ao focar um campo de ícone) */
.emoji-pop {
  position: fixed; z-index: var(--z-dropdown); width: 236px;
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto;   /* nunca ultrapassa a janela; rola internamente se não couber */
  display: flex; flex-wrap: wrap; gap: 4px; padding: 8px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.emoji-pop[hidden] { display: none; }
.emoji-pick {
  width: 32px; height: 32px; border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); cursor: pointer; font-size: 1.05rem; line-height: 1; transition: all var(--tr);
}
.emoji-pick:hover { border-color: var(--c-accent); background: rgba(37,99,168,0.08); transform: translateY(-1px); }
.emoji-pick.emoji-limpar { width: auto; flex: 1 0 100%; font-size: var(--fs-sm); color: var(--c-text2); height: 26px; }
/* Botões de formatação na barra da mensagem */
.fmt-btn { min-width: 30px; }
.fmt-btn em { font-style: italic; }
.fmt-cor-btn { min-width: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.fmt-cor-a { font-weight: 700; line-height: 1; padding-bottom: 2px; border-bottom: 3px solid var(--fmt-cor, #2563a8); }
.fmt-grifo-btn { min-width:42px !important; gap:4px; }
.fmt-grifo-icone { font-size:15px; line-height:1; color:#59677f; padding:0 2px 2px; border-bottom:4px solid var(--fmt-grifo,#fff2a8); }
.fmt-cor-pop {
  position: fixed; z-index: var(--z-dropdown); width: 170px; padding: 6px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m);
  box-shadow: 0 8px 24px rgba(15,25,50,.18);
}
.fmt-cor-pop[hidden] { display: none; }
.fmt-cor-op {
  width: 100%; min-height: 34px; display: flex; align-items: center; gap: 9px; padding: 6px 9px;
  border: 0; border-radius: 6px; background: transparent; color: var(--c-text); cursor: pointer;
  font: inherit; font-size: var(--fs-sm); text-align: left;
}
.fmt-cor-op:hover, .fmt-cor-op:focus-visible { background: #eef4fd; outline: none; }
.fmt-cor-amostra { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15,25,50,.14); }
.fmt-cor-padrao { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--c-border); color: var(--c-text2); }
/* Níveis de agrupamento (linha por nível) */
.nivel-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.nivel-row .nivel-campo { flex: 1; min-width: 0; padding: 0.45rem 0.6rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); font-family: inherit; font-size: var(--fs-md); color: var(--c-text); }
.nivel-row .nivel-campo:focus { border-color: var(--c-accent); outline: none; }
/* Alça de arrastar coluna + estado arrastando */
.col-arrasta { cursor: grab; color: var(--c-text2); font-size: 1rem; padding: 0 2px; user-select: none; flex-shrink: 0; }
.col-arrasta:active { cursor: grabbing; }
.coluna-row.arrastando { opacity: 0.5; outline: 2px dashed var(--c-accent); border-radius: var(--radius); }
/* Subtítulo de agrupamento dentro de seções avançadas */
.rg-sub-titulo {
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-text2); text-transform: uppercase;
  letter-spacing: 0.04em; margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--c-border);
}
.rg-sub-titulo:first-child { margin-top: 2px; }
/* Marcador dos itens */
.marcador-linha { display: flex; gap: 8px; align-items: center; }
.marcador-linha .marcador-custom { width: 80px; text-align: center; font-size: 1rem; }
/* Cartões em 2 colunas (ex.: aviso vazio) */
.rg-cards-2 .rg-radio-card { flex: 1 1 0; min-width: 0; }
.rg-cards-3 .rg-radio-card { flex: 1 1 0; min-width: 0; }
/* Aba Envio — subseções claras */
.envio-sub { margin: 10px 0 0; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: var(--radius-m); background: rgba(37,99,168,0.025); }
/* "Assim que mudar": rótulo por linha vigiada */
.vig-pre { font-size: var(--fs-sm); color: var(--c-text2); white-space: nowrap; }
.envio-opcoes { margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--c-border); }
.opt-hint { font-size: var(--fs-sm); color: var(--c-text2); font-weight: 400; }

/* Horários de envio (vários) */
.horario-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.horario-row .rg-horario-input { width: 150px; }
.rg-hint { font-size: var(--fs-sm); color: var(--c-text2); margin-top: 6px; }

/* Dias de envio (R3.6a) */
.rg-dias { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.rg-dia { padding: 6px 12px; border: 1px solid var(--c-border); background: var(--c-surface); border-radius: 16px; font-family: inherit; font-size: var(--fs-sm); color: var(--c-text2); cursor: pointer; }
.rg-dia.ativo { border-color: var(--c-accent); background: rgba(37,99,168,0.10); color: var(--c-accent); font-weight: 600; }
.rg-dias-atalhos { display: flex; gap: 8px; }

/* Presets de "Quando enviar" (R4.5) */
.rg-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-preset { padding: 7px 14px; border: 1px solid var(--c-border); background: var(--c-surface); border-radius: 18px; font-family: inherit; font-size: var(--fs-sm); color: var(--c-text2); cursor: pointer; transition: border-color var(--tr), background var(--tr), color var(--tr); }
.rg-preset:hover { border-color: var(--c-accent); }
.rg-preset.ativo { border-color: var(--c-accent); background: rgba(37,99,168,0.10); color: var(--c-accent); font-weight: 600; }

/* Destinatários: chips de e-mail */
.dest-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dest-chip { font-size: var(--fs-sm); padding: 2px 8px; border-radius: 12px; background: rgba(37,99,168,0.10); color: var(--c-accent); }
.dest-chip.invalido { background: rgba(248,113,113,0.12); color: var(--c-erro); }

.rg-distribuicao {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  padding: 10px;
  margin: 2px 0 14px;
  background: rgba(37,99,168,0.035);
}
/* (a regra .dist-row definitiva está acima — grid 3 colunas minmax(0,1fr); esta duplicata antiga foi removida) */
.rg-dist-fallback { margin-top: 10px; }

/* Sem filtros (estado seguro) */
.rg-sem-filtros { margin-top: 8px; }

/* Opções avançadas da mensagem */
.rg-avancado { margin-top: 10px; border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: 0 12px; }
.rg-avancado > summary { cursor: pointer; padding: 10px 2px; font-size: var(--fs-md); color: var(--c-accent); font-weight: 600; }
.rg-avancado[open] > summary { margin-bottom: 8px; }

/* Checklist de criação (painel direito) */
.rg-col-previa > .editor-secao-titulo { margin: 4px 0 10px; }
/* Navegação por ABAS — um clique troca de etapa (R4.0a; rótulos profissionais R4.5c) */
.rg-stepper { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); }
.chk-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: var(--fs-sm); color: var(--c-text2); text-decoration: none; cursor: pointer;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 20px; padding: 5px 12px 5px 6px;
  transition: border-color var(--tr), background var(--tr), color var(--tr);
}
.chk-item:hover { border-color: var(--c-accent); }
.chk-num {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--c-text2);
}
.chk-rot { white-space: nowrap; }
.chk-ok { color: var(--c-text); }
.chk-ok .chk-num { background: var(--c-ok); }
.chk-pendente .chk-num { background: var(--c-erro); }
.chk-atencao .chk-num { background: var(--c-warn); }
.chk-item.atual { border-color: var(--c-accent); background: rgba(37,99,168,0.08); color: var(--c-text); box-shadow: 0 0 0 2px rgba(37,99,168,0.15); }

/* Criador v3 — uma única navegação, resumo visível e menos ruído */
.rg-editor-status {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 999px; font-size: var(--fs-sm); font-weight: 650; white-space: nowrap;
}
.rg-editor-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rg-editor-status.is-ativa { color: var(--c-ok); background: rgba(21, 128, 61, 0.10); border-color: rgba(21, 128, 61, 0.22); }
.rg-editor-status.is-pausada { color: var(--c-text2); background: rgba(90, 106, 135, 0.08); border-color: rgba(90, 106, 135, 0.18); }
.criador-v3 .rg-col-config {
  padding: 14px 20px; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-color: rgba(37, 99, 168, 0.18); box-shadow: 0 4px 16px rgba(20, 40, 80, 0.07);
}
.criador-v3 .rg-topo-sticky { padding-top: 12px; }
.criador-v3 .rg-stepper {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  margin: 0 0 9px; padding: 0 0 10px;
}
.criador-v3 .chk-item {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px;
  min-width: 0; min-height: 54px; padding: 7px 9px; text-align: left;
  border-radius: 10px; background: #f8fafd;
}
.criador-v3 .chk-num { width: 24px; height: 24px; }
.criador-v3 .chk-texto { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.criador-v3 .chk-rot { color: var(--c-text); font-weight: 700; line-height: 1.2; }
.criador-v3 .chk-resumo {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--c-text2); font-size: var(--fs-xs); line-height: 1.3;
}
.criador-v3 .chk-item.atual {
  background: #fff; border-color: var(--c-accent); box-shadow: inset 0 3px 0 var(--c-accent), 0 2px 8px rgba(37, 99, 168, 0.10);
}
.criador-v3 #rg-frase {
  padding: 7px 10px; border: 1px solid rgba(37, 99, 168, 0.12); border-radius: 8px;
  background: rgba(37, 99, 168, 0.035); line-height: 1.5;
}
.criador-v3 .rg-col-config .editor-secao.is-aberta {
  margin-top: 12px; padding: 16px; border-color: var(--c-border); box-shadow: none;
}
.criador-v3 .rg-col-config .editor-secao.is-aberta > .editor-secao-titulo {
  margin: 0 0 14px; padding: 0 0 10px; color: var(--c-text); border-bottom: 1px solid var(--c-border);
}
.criador-v3 .rg-rodape-fixo { background: #ffffff; }
.criador-v3 .rg-rodape-fixo #rg-pendencias:empty,
.criador-v3 .rg-rodape-fixo #rg-erro:empty { display: none; }
.criador-v3 .editor-rodape .btn { min-width: 112px; }
.criador-v3 .rg-previa-dica { display: none; }
.criador-v3 .rg-col-previa { border-color: rgba(37, 99, 168, 0.16); box-shadow: 0 4px 16px rgba(20, 40, 80, 0.06); }
.criador-v3 .rg-previa-cab { padding-bottom: 9px; border-bottom: 1px solid var(--c-border); }
.criador-v3 .rg-previa-cab .editor-secao-titulo { color: var(--c-text); }

@media (min-width: 1100px) and (max-width: 1439.98px) {
  .criador-v3 .rg-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1099.98px) {
  .rg-editor-topo { align-items: stretch; }
  .rg-editor-topo .rg-topo-nome { flex-basis: calc(100% - 110px); }
  .rg-editor-topo .rg-fonte-chip { flex: 1 1 240px; }
  .rg-editor-topo .rg-regra-areas { flex: 1 1 240px; }
  .rg-editor-topo .rg-fonte-chip select { flex: 1 1 auto; min-width: 0; }
  .criador-v3 .rg-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .criador-v3 .rg-col-config { overflow: visible; }
}

@media (max-width: 560px) {
  .rg-editor-topo { padding: 12px; }
  .rg-editor-topo .rg-topo-voltar, .rg-editor-topo .rg-topo-nome,
  .rg-editor-topo .rg-fonte-chip, .rg-editor-topo .rg-regra-areas, .rg-editor-topo .rg-editor-status { flex: 1 1 100%; }
  .rg-editor-status { justify-content: center; }
  .criador-v3 .rg-col-config { padding: 12px; }
  .criador-v3 .rg-topo-sticky { margin: 0 -12px; padding: 0 12px 10px; }
  .criador-v3 .rg-stepper { grid-template-columns: 1fr; }
  .criador-v3 .chk-item { min-height: 48px; }
  .criador-v3 .rg-col-config .editor-secao.is-aberta { padding: 13px; }
  .criador-v3 .rg-rodape-fixo { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}

/* Pendências da regra */
.pend-grupo { font-size: var(--fs-sm); border-radius: var(--radius-m); padding: 8px 12px; margin-bottom: 8px; color: var(--c-text); }
.pend-grupo ul { margin: 4px 0 0 16px; }
.pend-grupo a { color: inherit; }
.pend-mais { margin-top: 4px; color: var(--c-text2); font-size: var(--fs-sm); }
.pend-critica { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.25); }
.pend-atencao { background: rgba(224,168,0,0.10); border: 1px solid rgba(200,150,30,0.25); }

/* F7 — aviso de rascunho não salvo na lista (família âmbar já usada nas pendências) */
.rascunho-aviso {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: var(--fs-md); color: var(--c-text);
  background: rgba(224,168,0,0.10); border: 1px solid rgba(200,150,30,0.25);
  border-radius: var(--radius-m); padding: 8px 12px; margin-bottom: 12px;
}

/* ── Toasts (confirmações curtas) + skeleton da prévia ───────────────────────── */
.toasts {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;   /* não bloqueia cliques no que está atrás */
}
.toast {
  background: #1f2a3a; color: #fff;   /* mesmo painel escuro do tooltip — nenhuma cor nova */
  font-size: var(--fs-md); padding: 10px 14px; border-radius: var(--radius-m);
  box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--tr), transform var(--tr);
}
.toast.visivel { opacity: 1; transform: none; }
/* Prévia buscando: pulsa sem apagar o conteúdo (com reduced-motion o pulso congela em 0.6) */
.previa-box.previa-carregando { animation: previa-pulso 1.1s ease-in-out infinite alternate; }
@keyframes previa-pulso { from { opacity: 0.6; } to { opacity: 0.35; } }

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVO
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sidebar { width: var(--sw); }
  .dist-row { grid-template-columns: 1fr; }
  .dist-rem { justify-self: start; }
  /* F3 — no mobile, limita a altura das pendências dentro do rodapé fixo (não engolir a tela) */
  .rg-rodape-fixo #rg-pendencias { max-height: 30vh; overflow-y: auto; }
  /* R10 D1a — alvo de TOQUE 44px nos controles + input 16px (mata o zoom automático do iPhone ao focar) */
  .pagina-app .btn, .pagina-app .btn-mini, .nav-item, .subaba, .rg-radio-card,
  .tabela td, .td-acoes button { min-height: 44px; }
  .campo input, .campo select, .campo textarea { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOVIMENTO REDUZIDO
══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .login-fundo { animation: none; }
  *, *::before, *::after {
    animation-duration:  0.01ms !important;
    animation-iteration-count: 1 !important;   /* mata o loop: 0.01ms + infinite = flicker eterno */
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HISTÓRICO (Etapa 6) — reusa .card/.tabela/.badge; poucos estilos próprios (.hist-)
══════════════════════════════════════════════════════════════════════════════ */
.hist-explica { margin: 2px 0 14px; font-size: var(--fs-md); color: var(--c-text2); }
.hist-seletor { max-width: 420px; margin: 0; }

/* Cards-resumo (KPIs) do detalhe da regra */
.hist-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.hist-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: rgba(37, 99, 168, 0.04);
}
.hist-kpi-num { font-size: var(--fs-2xl); font-weight: 600; color: var(--c-text); line-height: 1.2; }
.hist-kpi-rot { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text2); }
.hist-card-principal { overflow: visible; }
.hist-cab-acoes { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.hist-cab-acoes .btn { margin: 0; }
.hist-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 12px; }
.hist-busca { position: relative; flex: 1 1 260px; max-width: 410px; }
.hist-busca > span { position: absolute; left: 11px; top: 50%; transform: translateY(-53%); color: var(--c-text2); font-size: 18px; pointer-events: none; }
.hist-busca input { width: 100%; height: 38px; padding: 0 11px 0 34px; border: 1px solid var(--c-border); border-radius: 9px; color: var(--c-text); background: var(--c-surface); font: inherit; }
.hist-busca input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(37,99,168,.12); }
.hist-filtros { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 9px; background: rgba(90,106,135,.10); }
.hist-filtro { min-height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--c-text2); cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 650; }
.hist-filtro:hover { color: var(--c-accent); }
.hist-filtro.ativo { color: var(--c-accent); background: var(--c-surface); box-shadow: 0 1px 3px rgba(20,40,80,.12); }
.hist-tabela th:last-child, .hist-tabela td:last-child { text-align: right; white-space: nowrap; }
.hist-tabela .td-acoes .btn-mini { margin: 0; }
.hist-tabela .td-acoes .btn-ic { margin-left: 5px; border: 1px solid var(--c-border); background: var(--c-surface); }
.hist-tabela .td-acoes .hist-ver-detalhe { color: var(--c-accent); background: #eef5ff; border-color: rgba(37,99,168,.28); }
.hist-tabela .td-acoes .hist-ver-detalhe:hover { color: #fff; background: var(--c-accent); border-color: var(--c-accent); }
.hist-regra-nome { display: block; line-height: 1.35; }
.hist-tabela td small { display: block; margin-top: 2px; color: var(--c-text2); font-size: var(--fs-xs); }
.hist-falhas { color: var(--c-erro); font-weight: 650; }
.hist-linha-apagada td { color: var(--c-text2); }
.hist-linha-apagada .hist-regra-nome { text-decoration: line-through; }
.hist-detalhe-card { margin-top: 14px; }
.hist-aviso { margin: 0 0 12px; padding: 9px 11px; border: 1px solid #ecd8b5; border-left: 3px solid #c88822; border-radius: 7px; background: #fffaf1; color: #66502c; font-size: var(--fs-sm); line-height: 1.45; }

/* Estados (carregando / erro / vazio) */
.hist-estado { padding: 20px 4px; color: var(--c-text2); font-size: var(--fs-md); }
.hist-erro { color: var(--c-erro); }

@media (max-width: 760px) {
  .hist-toolbar { align-items: stretch; flex-direction: column; }
  .hist-busca { max-width: none; width: 100%; }
  .hist-filtros { width: 100%; }
  .hist-filtro { flex: 1 1 auto; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   FONTES (Etapa 6) — campos criados (derivados). Reusa .card/.badge/.btn-mini/.campo/
   .cond-*/.modal-*/.rg-radio-card; poucos estilos próprios (.fd-).
══════════════════════════════════════════════════════════════════════════════ */
.fd-fonte-seletor { max-width: 420px; margin: 0; }

/* Card de um derivado */
.fd-card-nome { font-size: var(--fs-lg); font-weight: 600; color: var(--c-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fd-card-base { margin: 6px 0 2px; font-size: var(--fs-sm); color: var(--c-text2); }
.fd-card-preview { margin-top: 6px; font-size: var(--fs-md); color: var(--c-text2); }

/* Visor read-only (id/tipo travados, campo base escolhido) */
.fd-ro {
  padding: 8px 10px; border: 1px dashed var(--c-border-strong); border-radius: var(--radius-m);
  background: rgba(37, 99, 168, 0.04); color: var(--c-text); font-size: var(--fs-md);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-picker-linha { display: flex; align-items: center; gap: 8px; }
.fd-picker-linha .fd-ro { flex: 1; }

/* Mapa de dias (data_calculada) */
.fd-mapa-linha { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fd-mapa-chave { flex: 1; }
.fd-mapa-dias { width: 90px; flex: none; }

.fd-vazio { padding: 10px 4px; color: var(--c-text2); font-size: var(--fs-sm); }

/* Construtor E/OU (árvore recursiva) — indentação por nível via border-left crescente */
.fd-grupo {
  border: 1px solid var(--c-border); border-radius: var(--radius-m);
  padding: 10px; margin: 8px 0; background: rgba(37, 99, 168, 0.03);
}
.fd-grupo .fd-grupo { border-left: 3px solid var(--c-border-strong); background: rgba(37, 99, 168, 0.06); }
.fd-grupo-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.fd-grupo-rodape { display: flex; gap: 6px; margin-top: 8px; }

/* Toggle E / OU */
.fd-op-toggle { display: inline-flex; border: 1px solid var(--c-border-strong); border-radius: var(--radius-m); overflow: hidden; }
.fd-op-btn { border: none; background: transparent; padding: 4px 10px; font-size: var(--fs-sm); color: var(--c-text2); cursor: pointer; }
.fd-op-btn.ativo { background: var(--c-accent); color: #fff; font-weight: 600; }

/* Folha da árvore */
.fd-folha {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; margin: 6px 0; border: 1px solid var(--c-border); border-radius: var(--radius-m);
  background: var(--c-surface);
}

/* Sub-abas LOCAIS (Campos criados × Catálogo completo) — .subabas é feita p/ a barra sticky do topo do
   app; aqui é só um par de abas dentro do card, então sobrescreve o que não serve (sticky/blur/centro). */
.fd-subabas { position: static; justify-content: flex-start; gap: 4px; min-height: auto; padding: 0; margin: 10px 0 12px; border-bottom: 1px solid var(--c-border); background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Catálogo completo (só leitura) */
.fd-cat-grupo-titulo { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text2); margin: 16px 0 6px; }
.fd-cat-grupo-titulo:first-child { margin-top: 4px; }
.fd-cat-campo { font-family: monospace; font-size: var(--fs-sm); color: var(--c-text2); }

/* ── Admin: CRUD de canais do Teams (reusa .card/.tabela/.badge/.modal-*/.btn-mini) ── */
.ad-cod { font-family: monospace; font-size: var(--fs-sm); color: var(--c-text2); }
/* C4-C2 ITEM 1 — cadeia de campos do FALLBACK (modal de campo custom): principal + reservas em ordem. */
.ad-cc-fb-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ad-cc-fb-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border: 1px solid var(--c-borda, #e0e0e0); border-radius: 6px; background: var(--c-fundo2, #fafafa); }
.ad-cc-fb-rot { font-weight: 600; }
.ad-webhook { font-family: monospace; font-size: var(--fs-sm); color: var(--c-text2); white-space: nowrap; }
.ad-vazio { font-style: italic; color: var(--c-text2); }
.ad-tabela td.ad-acoes { text-align: right; white-space: nowrap; }
.ad-check label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ad-u-areas { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto;
  padding: 8px; border: 1px solid var(--c-border); border-radius: var(--radius-m); background: var(--c-surface-2); }
.ad-u-area-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 38px; padding: 7px 9px; border: 1px solid var(--c-border); border-radius: var(--radius-s);
  background: var(--c-surface); }
.ad-u-area-nome { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.ad-u-area-nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-u-area-principal { display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  color: var(--c-text2); font-size: var(--fs-sm); cursor: pointer; }
.ad-u-area-principal:has(input:disabled) { opacity: .45; cursor: default; }
.ad-ro { padding: 8px 10px; border: 1px dashed var(--c-border-strong); border-radius: var(--radius-m);
  background: rgba(37, 99, 168, 0.04); color: var(--c-text); font-size: var(--fs-md);
  font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Admin: casca de sub-abas (Canais/Saúde do sistema/Saúde do catálogo/Usuários) — #ad-conteudo troca de
   aba p/ aba e precisa do MESMO espaçamento vertical que o .painel dava de graça aos filhos diretos (a aba
   "Canais"/"Usuários" injeta 2 blocos: o card do cabeçalho + a lista). Linha de status do banco (saúde do
   sistema). A aba "Usuários" reusa .tabela/.badge-*/.modal-*/.campo/.btn-mini/.ad-* — nenhuma classe nova. */
#ad-conteudo { display: flex; flex-direction: column; gap: 12px; }
.ad-status-linha { margin: 4px 0 12px; }
/* Linha de check na Saúde do sistema: crítico = faixa vermelha; atenção/não-medido = faixa âmbar. MESMO
   idioma do .cf-par-dif (faixa lateral + fundo tênue), reusando --c-erro / --c-warn — sem widget novo. */
.ad-linha-alerta > td { background: rgba(220, 38, 38, 0.08); box-shadow: inset 3px 0 0 var(--c-erro); }
.ad-linha-atencao > td { background: rgba(180, 83, 9, 0.07); box-shadow: inset 3px 0 0 var(--c-warn); }
.ad-saude-medida { min-width: 240px; }
.ad-saude-valor { display: block; color: var(--c-text); font-weight: 650; line-height: 1.35; }
.ad-saude-detalhe { display: block; margin-top: 3px; color: var(--c-text2); font-size: var(--fs-xs); line-height: 1.4; }

/* HUB de Saúde — faixa "Situação geral" (resumo antes do detalhe). Ícone grande + rótulo + frase; a cor da
   faixa lateral apenas REFORÇA o ícone+texto (nunca cor sozinha). Reusa .card e os tokens semânticos. */
.ad-saude-geral { display: flex; align-items: center; gap: 14px; border-left: 4px solid var(--c-text2); }
.ad-saude-geral-ic { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.ad-saude-geral-txt { flex: 1 1 auto; min-width: 0; }
.ad-saude-geral-status { font-size: var(--fs-lg); font-weight: 700; color: var(--c-text); line-height: 1.2; }
.ad-saude-geral-resumo { margin-top: 2px; color: var(--c-text2); font-size: var(--fs-sm); }
.ad-saude-geral-pontos { flex: 0 0 auto; align-self: center; padding: 4px 10px; border-radius: 12px;
  background: rgba(180, 83, 9, 0.12); color: var(--c-warn); font-size: var(--fs-xs); font-weight: 650; white-space: nowrap; }
.ad-saude-geral--ok      { border-left-color: var(--c-ok); }
.ad-saude-geral--ok      .ad-saude-geral-ic, .ad-saude-geral--ok      .ad-saude-geral-status { color: var(--c-ok); }
.ad-saude-geral--atencao { border-left-color: var(--c-warn); }
.ad-saude-geral--atencao .ad-saude-geral-ic, .ad-saude-geral--atencao .ad-saude-geral-status { color: var(--c-warn); }
.ad-saude-geral--critico { border-left-color: var(--c-erro); background: rgba(220, 38, 38, 0.05); }
.ad-saude-geral--critico .ad-saude-geral-ic, .ad-saude-geral--critico .ad-saude-geral-status { color: var(--c-erro); }
@media (max-width: 560px) {
  .ad-saude-geral { flex-wrap: wrap; }
  .ad-saude-geral-pontos { order: 3; margin-left: 40px; }
}

/* Painel único "Catálogo" (fatia F1) — sub-abas internas (Catálogo|Áreas) + botão "+ Novo campo" com
   mini-seletor (2 caminhos: caminho no JSON ou campo manipulado). Reusa .card/.tabela/.badge-*/.btn-mini/
   .modal-* — só o dropdown e o miolo são novos. */
#ad-cat-miolo { display: flex; flex-direction: column; gap: 12px; }   /* mesmo respiro do #ad-conteudo */
.ad-cat-novo-wrap { position: relative; }
.ad-cat-novo-menu {
  position: absolute; z-index: var(--z-dropdown); top: calc(100% + 4px); right: 0; min-width: 200px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m);
  box-shadow: var(--shadow-3, 0 8px 24px rgba(15, 25, 50, 0.18));
}
.ad-cat-novo-opcao {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; background: none;
  color: var(--c-text); font-size: var(--fs-md); cursor: pointer;
}
.ad-cat-novo-opcao:hover, .ad-cat-novo-opcao:focus-visible { background: rgba(37, 99, 168, 0.08); }

/* ═══════════════════════════════════════════════════════════════════════════
   COFRE DE EVIDÊNCIAS — VISOR (Fase 10). Reusa .painel/.card/.tabela/.badge/.btn-*/
   .modal-* da casa; só o layout próprio do visor vive aqui (prefixo .cf-). Zona
   clara (tokens --c-*), como as demais telas de conteúdo.
   ═══════════════════════════════════════════════════════════════════════════ */
/* .cf-titulo/.cf-subtitulo migraram pro .pagina-cab compartilhado (dono 2026-07-20: cabeçalho grande demais). */
.cf-wrap { display: flex; flex-direction: column; gap: 12px; max-width: 1100px; }
.cf-intro { color: var(--c-text2); font-size: var(--fs-md); margin: 0; max-width: 70ch; line-height: var(--lh-ui, 1.5); }

.cf-carregando, .cf-vazio, .cf-aviso { color: var(--c-text2); font-size: var(--fs-md); padding: 14px 2px; }
.cf-vazio { padding: 20px; text-align: center; background: var(--c-surface); border: 1px dashed var(--c-border-strong); border-radius: var(--radius-m); }
.cf-aviso { padding: 16px; background: rgba(180, 83, 9, 0.08); border: 1px solid rgba(180, 83, 9, 0.24); border-radius: var(--radius-m); color: var(--c-warn); }

/* Cartões de resumo por terminal + totais */
.cf-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.cf-card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m);
  padding: 14px 16px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 6px;
}
.cf-card-total { border-color: var(--c-border-strong); background: rgba(37, 99, 168, 0.05); }
.cf-card-nome { font-weight: 600; color: var(--c-text); font-size: var(--fs-md); margin-bottom: 4px; }
.cf-card-linha { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm, 0.85rem); color: var(--c-text2); }
.cf-card-linha strong { color: var(--c-text); font-size: var(--fs-md); font-weight: 600; }
.cf-card-rodape { margin-top: 6px; font-size: var(--fs-xs); color: var(--c-text2); border-top: 1px solid var(--c-border); padding-top: 6px; }
.cf-card-alerta { margin-top: 6px; font-size: var(--fs-xs); color: var(--c-warn); font-weight: 600; }

/* Verificar integridade */
.cf-verificar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cf-verificar-res { flex: none; min-width: 0; padding: 12px 16px; border-radius: var(--radius-m); font-size: var(--fs-md); font-weight: 500; line-height: 1.4; }
.cf-verif-carregando { background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text2); }
.cf-verif-ok  { background: rgba(21, 128, 61, 0.10); border: 1px solid rgba(21, 128, 61, 0.30); color: var(--c-ok); }
.cf-verif-erro { background: rgba(220, 38, 38, 0.10); border: 1px solid rgba(220, 38, 38, 0.30); color: var(--c-erro); }
.cf-verif-linha { display: flex; align-items: flex-start; gap: 11px; }
.cf-verif-icone { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(21,128,61,.14); font-weight: 800; }
.cf-verif-corpo { min-width: 0; }
.cf-verif-corpo strong { display: block; margin-bottom: 2px; color: inherit; }
.cf-verif-corpo span { display: block; font-size: var(--fs-sm, .85rem); font-weight: 500; }
.cf-verif-meta { margin-top: 5px; color: var(--c-text2); font-size: var(--fs-xs); font-weight: 500; }
.cf-verif-spinner { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; border: 2px solid var(--c-border); border-top-color: var(--c-accent); border-radius: 50%; animation: cf-girar .8s linear infinite; }
@keyframes cf-girar { to { transform: rotate(360deg); } }

/* ── Evidências v4: barra "estado da prova" no topo (botão verificar integrado) ── */
.cf-prova {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-m); box-shadow: var(--shadow-1);
}
.cf-prova-esq { display: flex; flex-direction: column; gap: 3px; min-width: 240px; flex: 1 1 340px; }
.cf-prova-rot { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text2); font-weight: 700; }
.cf-prova-estado { font-size: var(--fs-md); color: var(--c-text); font-weight: 500; line-height: 1.45; }
.cf-prova-ok { color: var(--c-ok); font-weight: 700; }
.cf-prova-erro { color: var(--c-erro); font-weight: 700; }
.cf-prova-dir { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cf-como-link { font-size: var(--fs-sm, 0.85rem); color: var(--c-accent); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.cf-como-link:hover { color: var(--c-text); }
.cf-como-corpo h4 { margin: 16px 0 4px; font-size: var(--fs-md); color: var(--c-text); }
.cf-como-corpo p { margin: 0 0 8px; color: var(--c-text2); line-height: 1.55; }
.cf-como-corpo ul { margin: 0 0 8px; padding-left: 20px; color: var(--c-text2); line-height: 1.55; }
.cf-como-corpo li { margin-bottom: 5px; }
.cf-como-corpo strong { color: var(--c-text); }
.cf-como-alerta { padding: 13px 15px; border-radius: 10px; background: #eef5fb; border: 1px solid #c6dced; color: #27496d; line-height: 1.5; }
.cf-como-passos { margin: 0; padding-left: 22px; color: var(--c-text2); line-height: 1.5; }
.cf-como-passos li { margin-bottom: 8px; padding-left: 4px; }
.cf-como-limites { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cf-como-limites > div { display: flex; flex-direction: column; gap: 5px; padding: 13px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-page); }
.cf-como-limites span { color: var(--c-text2); line-height: 1.45; }

.cf-prova-painel { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.cf-prova-kpi { background: linear-gradient(180deg,#fff,#f8fafc); border: 1px solid var(--c-border); border-radius: 12px; padding: 14px 15px; min-width: 0; }
.cf-prova-kpi span, .cf-prova-kpi small { display: block; color: var(--c-text2); }
.cf-prova-kpi span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cf-prova-kpi strong { display: block; margin: 5px 0 3px; font-size: 23px; color: #15355c; }
.cf-prova-kpi small { font-size: 11px; line-height: 1.35; }
.cf-prova-kpi-alerta { border-color: #e5b75e; background: #fffaf0; }
.cf-prova-kpi-alerta strong { color: #9a5b00; }
@media (max-width: 900px) { .cf-prova-painel { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cf-prova-painel, .cf-como-limites { grid-template-columns: 1fr; } }

/* Blocos (busca / linha do tempo / mudanças) */
.cf-bloco { display: flex; flex-direction: column; gap: 10px; }
.cf-bloco-sub { margin: -2px 0 4px; font-size: var(--fs-sm, 0.85rem); color: var(--c-text2); line-height: 1.5; max-width: 80ch; }
/* Mudanças recentes = protagonista: leve realce de fundo p/ puxar o olho primeiro. */
.cf-bloco-destaque { background: rgba(37, 99, 168, 0.04); border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: 14px 16px; }
.cf-input {
  width: 100%; max-width: 480px; padding: 10px 14px; font-size: var(--fs-md);
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-m);
  background: var(--c-surface); color: var(--c-text);
}
.cf-input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.12); }

.cf-sub { display: flex; flex-direction: column; gap: 16px; }

/* ── v5.1: Evidências em UMA COLUNA (o dono removeu a lateral/2-colunas) ──────── */
.cf-evid-col { display: flex; flex-direction: column; gap: 20px; }
.cf-zona-tit { font-size: var(--fs-lg, 1.05rem); font-weight: 700; color: var(--c-text); margin: 0; letter-spacing: 0.01em; }
.cf-zona-sub { margin: -6px 0 2px; font-size: var(--fs-sm, 0.85rem); color: var(--c-text2); line-height: 1.5; }
.cf-evid-col .cf-bloco {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-l, 14px); padding: 18px; gap: 12px;
}
/* (a) Faixa horizontal compacta: estado da prova à esquerda, ações à direita. */
.cf-faixa-prova {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-m); box-shadow: var(--shadow-1);
}
.cf-faixa-esq { display: flex; flex-direction: column; gap: 2px; min-width: 220px; flex: 1 1 320px; }
.cf-faixa-dir { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .cf-faixa-prova { flex-direction: column; align-items: stretch; gap: 12px; }
  .cf-faixa-dir { flex-direction: column; align-items: stretch; gap: 8px; }
  .cf-faixa-dir .btn { width: 100%; }
  .cf-como-link { white-space: normal; text-align: center; }
}
/* (d) Saúde da base: discreta e colapsada no fim da coluna. */
.cf-saude-det { border: 1px solid var(--c-border); border-radius: var(--radius-m); background: var(--c-surface); }
.cf-saude-det > summary {
  cursor: pointer; padding: 12px 16px; font-size: var(--fs-sm, 0.85rem); font-weight: 600;
  color: var(--c-text2); list-style: none;
}
.cf-saude-det > summary::-webkit-details-marker { display: none; }
.cf-saude-det > summary::before { content: '▸ '; color: var(--c-text2); }
.cf-saude-det[open] > summary::before { content: '▾ '; }
.cf-saude-det[open] > summary { border-bottom: 1px solid var(--c-border); }
.cf-saude-det .cf-resumo { padding: 14px 16px; }
.cf-saude-det .cf-erros-lista { padding: 0 16px 14px; }

/* Cabeçalho "atualizado" por terminal (sub-visão Consulta) */
.cf-lineup-cab { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cf-lineup-terminal { font-size: var(--fs-sm, 0.85rem); color: var(--c-text2); }
.cf-lineup-terminal strong { color: var(--c-text); }

.cf-tabela .cf-linha-clik { cursor: pointer; }
.cf-tabela .cf-linha-clik:hover { background: rgba(37, 99, 168, 0.06); }
/* Compacta a tabela do lineup p/ caber sem rolar em 1080p: paddings/fonte menores,
   datas com dígitos tabulares (alinham) e sem quebra. Navio segue forte à esquerda. */
.cf-tabela { font-size: var(--fs-sm, 0.85rem); }
.cf-tabela th, .cf-tabela td { padding: 6px 10px; white-space: nowrap; }
.cf-tabela td { font-variant-numeric: tabular-nums; }
.cf-tabela td:first-child { font-variant-numeric: normal; }
.cf-tabela tbody tr:nth-child(even) { background: rgba(90, 106, 135, 0.035); }

/* ── Consultas (cruzamento FazComex × Terminal) ──────────────────────────────
   Origem por célula: azul-navy = terminal, roxo = FazComex. Cor discreta no texto
   + sufixo pequeno "(term)"/"(faz)"; legenda fixa acima explica de bate-olho. */
.cf-legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-sm, 0.85rem); color: var(--c-text2); align-items: center; }
.cf-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.cf-fonte { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em; padding: 1px 6px; border-radius: 4px; border: 1px solid; }
.cf-fonte-term { color: #1e3a63; }
.cf-fonte-faz  { color: #6b21a8; }
.cf-legenda .cf-fonte-term { background: rgba(30, 58, 99, 0.08); border-color: rgba(30, 58, 99, 0.30); }
.cf-legenda .cf-fonte-faz  { background: rgba(107, 33, 168, 0.08); border-color: rgba(107, 33, 168, 0.30); }
/* Nas células: a cor tinge o valor; borda-esquerda fina reforça a origem sem poluir. */
.cf-tabela-cons td.cf-cel { font-weight: 600; }
.cf-tabela-cons td.cf-fonte-term { color: #1e3a63; box-shadow: inset 2px 0 0 rgba(30, 58, 99, 0.35); }
.cf-tabela-cons td.cf-fonte-faz  { color: #6b21a8; box-shadow: inset 2px 0 0 rgba(107, 33, 168, 0.35); }
.cf-fonte-suf { font-size: 9px; font-weight: 600; opacity: 0.7; margin-left: 3px; }
.cf-div { font-size: 9px; font-weight: 700; color: var(--c-warn); white-space: nowrap; }
.cf-proc-cont { display: inline-block; min-width: 20px; text-align: center; font-weight: 700; color: var(--c-accent); cursor: help; border-bottom: 1px dotted var(--c-border-strong); }
.cf-tabela-cons .cf-linha-naoclik { cursor: default; }
/* Linha sem match no terminal: fundo levemente esmaecido + nota no navio. As células
   de terminal já vêm "—" do JS; aqui só reforçamos que a informação é só-FazComex. */
.cf-tabela-cons tr.cf-cons-semterm { background: #f4f6f8; }
.cf-tabela-cons tr.cf-cons-semterm td.cf-cons-navvia::after {
  content: ' · terminal ainda não lista'; font-size: 9px; font-weight: 400; color: var(--c-text2); white-space: nowrap;
}

/* ── v5: coluna Navio/Viagem UNIDA e FIXA (sticky) + semáforo em Proc. ──────── */
/* Célula empilhada: navio forte em cima, viagem menor embaixo (economiza largura). */
.cf-tabela-cons td.cf-cons-navvia { white-space: normal; line-height: 1.2; }
.cf-cons-navio { display: block; font-weight: 700; color: var(--c-text); }
.cf-cons-viagem { display: block; font-size: var(--fs-xs); color: var(--c-text2); margin-top: 1px; }
/* Navio/Viagem FIXA no scroll horizontal (sticky à esquerda, com fundo próprio p/ não
   deixar o conteúdo passar por baixo). O cabeçalho idem. */
.cf-tabela-cons th.cf-cons-sticky,
.cf-tabela-cons td.cf-cons-navvia {
  position: sticky; left: 0; z-index: 2;
  background: var(--c-surface);
  box-shadow: 1px 0 0 var(--c-border);
}
.cf-tabela-cons th.cf-cons-sticky { z-index: 3; background: var(--c-page); }
/* Zebra: a célula sticky precisa herdar o fundo alternado (senão fica translúcida sobre
   as células que passam). Recompõe a zebra da linha par na célula fixa. */
/* Zebra da linha par composta sobre o branco (a translucida da regra base deixaria o
   conteudo passar por baixo da celula fixa). #f8f9fb ~= surface + rgba(90,106,135,.035). */
.cf-tabela-cons tbody tr:nth-child(even) td.cf-cons-navvia { background: #f8f9fb; }
.cf-tabela-cons .cf-linha-clik:hover td.cf-cons-navvia { background: #eaf2fb; }
.cf-tabela-cons tr.cf-cons-semterm td.cf-cons-navvia { background: #f1f3f6; }
.cf-tabela-cons tr.cf-cons-semterm.cf-linha-clik:hover td.cf-cons-navvia { background: #eaf2f8; }

/* Quadrinho semáforo da coluna Proc.: número dentro; verde = todos os 3 eventos ok em
   todos os processos; laranja = algum pendente. */
.cf-proc-sem {
  display: inline-block; min-width: 24px; padding: 2px 7px; text-align: center;
  font-weight: 700; border-radius: 6px; cursor: help; font-size: var(--fs-sm, 0.85rem);
}
.cf-sem-verde { background: rgba(21, 128, 61, 0.14); color: var(--c-ok); border: 1px solid rgba(21, 128, 61, 0.35); }
.cf-sem-laranja { background: rgba(202, 138, 4, 0.16); color: var(--c-warn); border: 1px solid rgba(202, 138, 4, 0.40); }

/* ── v5: ficha do NAVIO (Consultas · Container) — topo em colunas + lista de processos ── */
.cf-fc-topo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 18px;
  padding: 14px; border: 1px solid var(--c-border); border-radius: var(--radius-m);
  background: var(--c-surface);
}
.cf-fc-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cf-fc-rot { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text2); font-weight: 700; }
.cf-fc-val { font-size: var(--fs-lg, 1.05rem); font-weight: 700; color: var(--c-text); }
.cf-fc-val.cf-fonte-term { color: #1e3a63; }
.cf-fc-val.cf-fonte-faz { color: #6b21a8; }
.cf-fc-dash { color: var(--c-text2); font-size: var(--fs-lg, 1.05rem); }
/* Divergência de deadline entre processos: lista pequena "processo: data"; a adotada em negrito. */
.cf-fc-div { margin-top: 4px; display: flex; flex-direction: column; gap: 3px; border-top: 1px dashed var(--c-border); padding-top: 4px; }
/* v5.1: uma linha por DATA distinta — "Adotada: 03/07 12:00 (EX-1, EX-2)". */
.cf-fc-div-linha { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; font-size: var(--fs-xs); color: var(--c-text2); line-height: 1.4; }
.cf-fc-div-rot { font-weight: 600; }
.cf-fc-div-data { font-variant-numeric: tabular-nums; }
.cf-fc-div-proc { color: var(--c-text2); opacity: 0.8; }
.cf-fc-div-adotada { color: var(--c-warn); }
.cf-fc-div-adotada .cf-fc-div-rot, .cf-fc-div-adotada .cf-fc-div-data { font-weight: 700; }

.cf-fc-procs { display: flex; flex-direction: column; gap: 8px; }
.cf-fc-proc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-m);
  background: rgba(202, 138, 4, 0.05);
}
.cf-fc-proc-ok { background: rgba(21, 128, 61, 0.05); }
.cf-fc-proc-id { display: flex; flex-direction: column; min-width: 120px; }
.cf-fc-proc-num { font-weight: 700; color: var(--c-text); }
.cf-fc-proc-bk { font-size: var(--fs-xs); color: var(--c-text2); }
.cf-fc-proc-eventos { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.cf-ev {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: var(--fs-xs); border: 1px solid;
}
.cf-ev-ok { background: rgba(21, 128, 61, 0.10); border-color: rgba(21, 128, 61, 0.30); color: var(--c-ok); }
.cf-ev-pend { background: rgba(90, 106, 135, 0.08); border-color: var(--c-border-strong); color: var(--c-text2); }
.cf-ev-rot { font-weight: 600; }
.cf-ev-data { font-variant-numeric: tabular-nums; }

/* Âncora pública (Bitcoin) na barra "estado da prova" da tela Evidências. */
.cf-prova-ancora { font-size: var(--fs-sm, 0.85rem); color: var(--c-text2); margin-top: 4px; }
.cf-prova-anc-rot { font-weight: 700; color: var(--c-ok); }
.cf-prova-anc-hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); }

/* Linha do tempo */
.cf-voltar { align-self: flex-start; }
.cf-timeline-cab { font-size: var(--fs-lg, 1.05rem); color: var(--c-text); padding: 4px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cf-timeline-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cf-timeline-info small { color: var(--c-text2); font-size: var(--fs-xs); font-weight: 400; }
.cf-timeline-corpo { display: flex; flex-direction: column; gap: 12px; }
.cf-tl-titulo { font-weight: 600; color: var(--c-text2); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-xs); margin-top: 6px; }

.cf-mud-lista { display: flex; flex-direction: column; gap: 8px; }
.cf-mud-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  background: rgba(180, 83, 9, 0.06); border: 1px solid rgba(180, 83, 9, 0.20);
  border-radius: var(--radius-m); font-size: var(--fs-md); color: var(--c-text);
}
.cf-mud-icone { flex: none; }
.cf-mud-janela { color: var(--c-text2); font-size: var(--fs-sm, 0.85rem); }

.cf-tl-item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: 12px 14px; box-shadow: var(--shadow-1); }
.cf-tl-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.cf-tl-data { font-weight: 600; color: var(--c-text); }
.cf-tl-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; }
.cf-tl-campo { display: flex; flex-direction: column; font-size: var(--fs-sm, 0.85rem); }
.cf-tl-campo span { color: var(--c-text2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; }
.cf-tl-campo b { color: var(--c-text); font-weight: 600; }
.cf-tl-hash { margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); color: var(--c-text2); }

.cf-rodape { margin-top: 4px; color: var(--c-text2); font-size: var(--fs-xs); border-top: 1px solid var(--c-border); padding-top: 12px; }

/* Modal "ver dado bruto" */
.cf-bruto-modal { max-width: 720px; width: 92vw; }
.cf-bruto-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.cf-bruto-meta > div { display: flex; flex-direction: column; }
.cf-bruto-meta span, .cf-bruto-hashes span { color: var(--c-text2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; }
.cf-bruto-meta b { color: var(--c-text); }
.cf-bruto-hashes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cf-bruto-hashes code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); color: var(--c-text); word-break: break-all; }
.cf-bruto-sub { font-weight: 600; color: var(--c-text2); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-xs); margin: 12px 0 6px; }
.cf-bruto-pre {
  background: var(--c-page); border: 1px solid var(--c-border); border-radius: var(--radius-m);
  padding: 12px; margin: 0; max-height: 40vh; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); color: var(--c-text);
  white-space: pre; line-height: 1.5;
}

/* ── v2 (2026-07-11): filtros de mudanças, "antes → depois", ver-tudo, erros ── */
/* Filtros (campo/terminal) das Mudanças recentes. */
.cf-mud-filtros { display: flex; flex-wrap: wrap; gap: 10px; }
.cf-mudancas-integradas { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-border); }
.cf-zona-divisor { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.cf-zona-divisor h3 { margin: 0; color: var(--c-text); font-size: var(--fs-md); }
.cf-zona-divisor p { margin: 3px 0 0; color: var(--c-text2); font-size: var(--fs-sm); }
@media (max-width: 760px) { .cf-zona-divisor { align-items: stretch; flex-direction: column; } }
.cf-select {
  padding: 8px 10px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-m);
  background: var(--c-surface); color: var(--c-text); font-size: var(--fs-sm, 0.85rem); min-width: 180px;
}
.cf-select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.12); }
/* Célula "Antes → Depois": o valor novo fica em negrito (herda <strong>); a seta destaca. */
.cf-mud-td { white-space: nowrap; }
.cf-mud-td .cf-mud-de { color: var(--c-text2); }
.cf-seta { color: var(--c-accent); font-weight: 600; padding: 0 2px; }

/* "Ver todos os campos do terminal" (details/summary) dentro da linha do tempo. */
.cf-tl-todos { margin-top: 10px; border-top: 1px dashed var(--c-border); padding-top: 8px; }
.cf-tl-todos > summary {
  cursor: pointer; color: var(--c-accent); font-size: var(--fs-sm, 0.85rem); font-weight: 500;
  list-style: none; user-select: none;
}
.cf-tl-todos > summary::-webkit-details-marker { display: none; }
.cf-tl-todos > summary::before { content: '▸ '; color: var(--c-text2); }
.cf-tl-todos[open] > summary::before { content: '▾ '; }
.cf-todos-tabela { margin-top: 8px; }
.cf-todos-tabela th {
  text-align: left; white-space: nowrap; color: var(--c-text2); font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs);
  vertical-align: top;
}
.cf-todos-tabela td { color: var(--c-text); font-size: var(--fs-sm, 0.85rem); word-break: break-word; }

/* "N com erro" clicável nos Totais + lista expandida de capturas com erro. */
.cf-erros-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--c-warn); font-weight: 700; font-size: inherit; text-decoration: underline;
}
.cf-erros-lista { display: flex; flex-direction: column; gap: 8px; }
.cf-erros-titulo {
  font-weight: 600; color: var(--c-text2); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: var(--fs-xs);
}

/* ── Ficha modal do navio (Consulta) + grade compartilhada com a timeline ──────── */
.cf-ficha-modal { max-width: 760px; width: 92vw; }
/* Cabeçalho rico: navio grande + viagem + badges (dentro do .modal-cabecalho flex). */
.cf-ficha-cab { align-items: flex-start; }
.cf-ficha-cabinfo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cf-ficha-navio { font-size: var(--fs-xl, 1.25rem); font-weight: 700; color: var(--c-text); line-height: 1.2; word-break: break-word; }
.cf-ficha-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cf-ficha-viagem { font-size: var(--fs-sm, 0.85rem); color: var(--c-text2); font-weight: 600; }
.cf-ficha-corpo { padding: 18px 20px; }
.cf-ficha-secao-tit {
  font-weight: 700; color: var(--c-text2); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: var(--fs-xs); margin: 4px 0 8px;
}
.cf-ficha-secao-tit + .cf-ficha-grade { margin-bottom: 18px; }
/* Grade de pares label→valor: 2 colunas (wide) → 1 coluna (estreito). Reusada na timeline. */
.cf-ficha-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--c-border); border-radius: var(--radius-m); overflow: hidden; }
.cf-ficha-par {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 12px; font-size: var(--fs-sm, 0.85rem); min-width: 0;
}
/* Tipografia (pedido do dono): texto mais preto (tom forte da paleta nos dois lados),
   RÓTULO em negrito e VALOR em peso normal — inverte o padrão label-claro/valor-bold. */
.cf-ficha-rot { color: var(--c-text); font-weight: 700; flex: none; }
.cf-ficha-val { color: var(--c-text); font-weight: 400; text-align: right; word-break: break-word; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
/* Zebra por LINHA VISUAL (2 colunas: filhos 1,2 = linha 1; realça linhas ímpares).
   Tom neutro translúcido: aparece tanto sobre o fundo do modal quanto do card da timeline. */
.cf-ficha-grade > .cf-ficha-par:nth-child(4n+1),
.cf-ficha-grade > .cf-ficha-par:nth-child(4n+2) { background: rgba(90, 106, 135, 0.06); }
/* Destaque de mudança na timeline: fundo âmbar suave + borda + nota "antes → depois". */
.cf-par-dif { background: rgba(202, 138, 4, 0.10) !important; box-shadow: inset 3px 0 0 var(--c-warn); }
.cf-par-dif-nota { font-size: var(--fs-xs); font-weight: 500; color: var(--c-warn); white-space: nowrap; }
/* Rodapé da ficha: meta (capturado/hash) à esquerda, link do histórico à direita. */
.cf-ficha-rodape { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
/* Botões do rodapé da ficha (Gerar dossiê + Ver histórico) lado a lado. */
.cf-ficha-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-ficha-meta { font-size: var(--fs-xs); color: var(--c-text2); }
.cf-ficha-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--c-text); }
@media (max-width: 640px) {
  .cf-ficha-grade { grid-template-columns: 1fr; }
  /* Em 1 coluna a zebra passa a ser por filho ímpar (cada par é uma linha). */
  .cf-ficha-grade > .cf-ficha-par:nth-child(4n+2) { background: transparent; }
  .cf-ficha-grade > .cf-ficha-par:nth-child(odd)  { background: rgba(90, 106, 135, 0.06); }
  .cf-par-dif { background: rgba(202, 138, 4, 0.10) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOSSIÊ DE EVIDÊNCIA (Fase 11) — página de impressão

   O #cf-dossie fica hidden na tela (só existe para imprimir). Ao gerar, ele é
   revelado e window.print() é chamado; o @media print abaixo esconde TODO o
   resto do app e imprime só o dossiê em A4 (preto no branco, tipografia séria).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Na tela o container fica escondido (o [hidden] já resolve; reforço explícito). */
.cf-dossie { display: none; }

@media print {
  /* Esconde tudo com VISIBILITY (não display): display:none num ancestral mataria
     o dossiê junto — foi exatamente o bug do PDF em branco (11/07). O JS ainda move
     o #cf-dossie p/ filho direto do body antes de imprimir (fora de qualquer
     ancestral com overflow/altura travada que pudesse cortá-lo). */
  body.cf-imprimindo * { visibility: hidden; }
  body.cf-imprimindo #cf-dossie,
  body.cf-imprimindo #cf-dossie * { visibility: visible; }
  body.cf-imprimindo #cf-dossie {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  @page { size: A4; margin: 18mm 16mm; }

  html, body { background: #fff !important; }

  #cf-dossie {
    color: #17243b;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10.5pt;
    line-height: 1.48;
    /* Números e datas alinham em colunas por toda a peça (item micro-tipografia). */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* ── CAPA / CABEÇALHO ──
     Hierarquia: marca institucional → kicker pequeno-caps → navio em destaque →
     viagem/terminal → linha fina de emissão. */
  #cf-dossie .cf-do-capa { border-bottom: 2.5pt solid #172d52; padding-bottom: 14pt; margin-bottom: 17pt; }
  #cf-dossie .cf-do-marca {
    display: flex; align-items: center; justify-content: space-between; gap: 16pt;
    padding: 9pt 12pt; margin-bottom: 12pt; border-bottom: 0;
    background: #172d52; color: #fff;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Ícone institucional compacto: os arquivos de logo completos têm área vazia
     e ficavam desproporcionais na capa do PDF. */
  #cf-dossie .cf-do-logo {
    height: 30pt; width: 30pt; display: block; object-fit: contain;
    border-radius: 5pt; background: #fff;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Fallback textual (onerror) quando a imagem falha: mantém a marca institucional. */
  #cf-dossie .cf-do-marca-txt {
    font-size: 8.5pt; letter-spacing: 2.5pt; text-transform: uppercase; font-weight: 700; color: #fff;
  }
  #cf-dossie .cf-do-marca-copy { text-align: right; display: flex; flex-direction: column; gap: 2pt; }
  #cf-dossie .cf-do-marca-copy strong { font-size: 10pt; letter-spacing: .4pt; }
  #cf-dossie .cf-do-marca-copy span { font-size: 7pt; opacity: .78; letter-spacing: .8pt; text-transform: uppercase; }
  #cf-dossie .cf-do-kicker { font-size: 8pt; letter-spacing: 1.5pt; text-transform: uppercase; color: #55708f; font-weight: 700; }
  #cf-dossie .cf-do-titulo { font-size: 23pt; line-height: 1.1; margin: 6pt 0 3pt; font-weight: 750; letter-spacing: -0.3pt; color: #101e36; }
  #cf-dossie .cf-do-sub { font-size: 12.5pt; color: #304866; }
  #cf-dossie .cf-do-emitido { font-size: 9pt; color: #61758c; margin-top: 5pt; }

  /* Resumo em grade alinhada (rótulo pequeno-caps + valor tabular) — vira uma ficha. */
  #cf-dossie .cf-do-resumo {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10pt 18pt;
    margin-top: 12pt; padding-top: 10pt; border-top: 0.5pt solid #ccc;
  }
  #cf-dossie .cf-do-resumo-item { display: flex; flex-direction: column; gap: 2pt; }
  #cf-dossie .cf-do-resumo-rot { font-size: 7.5pt; letter-spacing: 1pt; text-transform: uppercase; color: #555; }
  #cf-dossie .cf-do-resumo-val { font-size: 11pt; font-weight: 700; }
  #cf-dossie .cf-do-declaracao { margin-top: 12pt; padding: 10pt 12pt; border-left: 3pt solid #2367a7; background: #f4f8fc; page-break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #cf-dossie .cf-do-declaracao-tit { margin-bottom: 5pt; color: #173a66; font-size: 9pt; font-weight: 750; letter-spacing: .8pt; text-transform: uppercase; }
  #cf-dossie .cf-do-declaracao p { margin-bottom: 5pt; text-align: left; }
  #cf-dossie .cf-do-conclusao { margin: 7pt 0; padding: 6pt 8pt; border-radius: 3pt; background: #e8f5ef; color: #126342; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #cf-dossie .cf-do-conclusao.falha { background: #fff0ef; color: #9e2018; }
  #cf-dossie .cf-do-limite { color: #455970; font-size: 9pt; }

  /* Contagem de alterações por campo (item 6) — a narrativa da disputa */
  #cf-dossie .cf-do-contagem { margin-top: 10pt; font-size: 10pt; font-weight: 700; }

  /* Carimbo de integridade (item 2) — "selo" retangular composto, nunca esconder falha. */
  #cf-dossie .cf-do-verif {
    margin-top: 12pt; padding: 8pt 10pt; border: 1.5pt solid #000; background: #fafafa;
    page-break-inside: avoid;
  }
  #cf-dossie .cf-do-verif-cab {
    font-size: 8pt; letter-spacing: 1.2pt; text-transform: uppercase; font-weight: 700;
    padding-bottom: 4pt; margin-bottom: 4pt; border-bottom: 0.5pt solid #bbb;
  }
  #cf-dossie .cf-do-verif-corpo { font-size: 11pt; font-weight: 700; }
  #cf-dossie .cf-do-verif-erro { border: 2pt solid #7a0000; background: #fff; color: #7a0000; }
  #cf-dossie .cf-do-verif-erro .cf-do-verif-cab { border-bottom-color: #7a0000; }
  /* Linha fixa explicativa sob o carimbo (item 2) */
  #cf-dossie .cf-do-verif-nota { margin-top: 5pt; padding-top: 5pt; border-top: 0.5pt dotted #ccc; font-size: 8.5pt; font-weight: 400; color: #333; line-height: 1.4; }

  /* Âncora Bitcoin (item 5c) — bloco de destaque sóbrio na capa; nunca quebra no meio. */
  #cf-dossie .cf-do-ancora { margin-top: 12pt; padding: 8pt 10pt; border: 1pt solid #000; background: #f7f7f7; page-break-inside: avoid; }
  #cf-dossie .cf-do-ancora-cab { font-size: 8pt; letter-spacing: 1.2pt; text-transform: uppercase; font-weight: 700; padding-bottom: 4pt; margin-bottom: 4pt; border-bottom: 0.5pt solid #bbb; }
  #cf-dossie .cf-do-ancora-corpo { font-size: 9.5pt; line-height: 1.45; }
  #cf-dossie .cf-do-ancora-hash { font-family: "Courier New", monospace; font-size: 8.5pt; letter-spacing: 0.3pt; }

  /* Sumário do conteúdo (item 4) — discreto, casa com a numeração das seções. */
  #cf-dossie .cf-do-sumario { margin-top: 12pt; font-size: 9pt; color: #444; }
  #cf-dossie .cf-do-sumario-rot { display: inline-block; font-size: 7.5pt; letter-spacing: 1pt; text-transform: uppercase; color: #555; margin-right: 6pt; }

  /* Código de verificação do documento (item 7) — bloco próprio com moldura fina. */
  #cf-dossie .cf-do-codigo { margin-top: 12pt; padding: 6pt 8pt; border: 0.5pt solid #999; font-size: 9pt; page-break-inside: avoid; }
  #cf-dossie .cf-do-codigo-rot { display: block; font-size: 7.5pt; letter-spacing: 1pt; text-transform: uppercase; color: #555; margin-bottom: 2pt; }
  #cf-dossie .cf-do-codigo-val { font-family: "Courier New", monospace; font-size: 8pt; letter-spacing: 0.3pt; word-break: break-all; }
  #cf-dossie .cf-do-codigo-nota { font-size: 8pt; color: #555; margin-top: 4pt; line-height: 1.4; }

  /* Seções — títulos numerados casam com o sumário; nunca ficam órfãos no fim da página. */
  #cf-dossie .cf-do-secao { margin-top: 18pt; }
  #cf-dossie .cf-do-secao h2 {
    font-size: 13pt; letter-spacing: 0.1pt; color: #152e52; border-bottom: 1pt solid #8ca5be;
    padding-bottom: 4pt; margin: 0 0 10pt; break-after: avoid; page-break-after: avoid;
  }
  #cf-dossie .cf-do-secao h3 { font-size: 11.5pt; margin: 12pt 0 5pt; break-after: avoid; page-break-after: avoid; }
  #cf-dossie .cf-do-vazio { font-style: italic; color: #333; }
  #cf-dossie p { margin: 0 0 6pt; text-align: justify; }

  /* Tabelas — grade fina e consistente, sem zebra pesada; th em pequeno-caps. */
  #cf-dossie .cf-do-tabela { width: 100%; border-collapse: collapse; font-size: 10pt; }
  #cf-dossie .cf-do-tabela th, #cf-dossie .cf-do-tabela td {
    border: 0.5pt solid #999; padding: 4pt 6pt; text-align: left; vertical-align: top;
  }
  #cf-dossie .cf-do-tabela thead th {
    background: #f0f0f0; font-weight: 700; font-size: 8pt; letter-spacing: 0.6pt; text-transform: uppercase;
    border-bottom: 1pt solid #000;
  }
  #cf-dossie .cf-do-tabela thead { display: table-header-group; }
  #cf-dossie .cf-do-tabela tr { page-break-inside: avoid; }

  /* Blocos de captura (histórico das consultas). page-break-inside:avoid vale enquanto o
     bloco cabe numa pagina; blocos LONGOS (muitos campos) ultrapassam e o avoid e ignorado
     -> por isso a grade NAO pode ser CSS grid (colunas orfas ao quebrar — bug do dono, item
     5a). Usamos multi-coluna (columns), que reflui e QUEBRA POR PAR (break-inside:avoid no
     par), preenchendo a proxima pagina inteira em vez de deixar uma coluna solta. */
  #cf-dossie .cf-do-captura { border: 0.5pt solid #999; padding: 7pt 9pt; margin-bottom: 9pt; page-break-inside: avoid; }
  #cf-dossie .cf-do-captura-cab { font-weight: 700; font-size: 10pt; margin-bottom: 5pt; border-bottom: 0.5pt solid #ccc; padding-bottom: 4pt; }
  #cf-dossie .cf-do-grade { column-count: 2; column-gap: 20pt; }
  #cf-dossie .cf-do-par { display: flex; justify-content: space-between; gap: 8pt; font-size: 9.5pt; padding: 1.5pt 0; border-bottom: 0.5pt dotted #e0e0e0; break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; }
  #cf-dossie .cf-do-rot { color: #444; }
  #cf-dossie .cf-do-val { font-weight: 600; text-align: right; }

  /* Texto "como funciona" */
  #cf-dossie .cf-do-explica p { margin-bottom: 5pt; }
  #cf-dossie .cf-do-passos { margin: 8pt 0 0; padding: 0; list-style: none; counter-reset: passo; }
  #cf-dossie .cf-do-passos li { counter-increment: passo; display: grid; grid-template-columns: 20pt 1fr; gap: 7pt; margin-bottom: 7pt; page-break-inside: avoid; }
  #cf-dossie .cf-do-passos li::before { content: counter(passo); width: 18pt; height: 18pt; display: grid; place-items: center; border-radius: 50%; background: #173b69; color: #fff; font-size: 8pt; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #cf-dossie .cf-do-passos li strong, #cf-dossie .cf-do-passos li span { grid-column: 2; }
  #cf-dossie .cf-do-passos li strong { margin-bottom: -5pt; color: #172d52; }
  #cf-dossie .cf-do-leitura-assistida { margin-top: 10pt; padding: 8pt 10pt; border: .5pt solid #98abc0; background: #f7f9fc; font-size: 9.2pt; line-height: 1.45; page-break-inside: avoid; }
  #cf-dossie .cf-do-duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 12pt; margin-top: 9pt; }
  #cf-dossie .cf-do-duas-colunas > div { padding: 8pt 9pt; border: .5pt solid #aab9c9; background: #f8fafc; page-break-inside: avoid; }
  #cf-dossie .cf-do-duas-colunas h3 { margin-top: 0; color: #173b69; font-size: 10pt; }
  #cf-dossie .cf-do-duas-colunas ul { margin: 4pt 0 0; padding-left: 15pt; }
  #cf-dossie .cf-do-duas-colunas li { margin-bottom: 4pt; font-size: 9pt; }

  /* Anexo técnico começa em página nova */
  #cf-dossie .cf-do-anexo { page-break-before: always; }
  #cf-dossie .cf-do-tabela-tec { font-size: 8.5pt; }
  #cf-dossie .cf-do-tabela-tec thead th { font-size: 7pt; }
  #cf-dossie .cf-do-hash { font-family: "Courier New", monospace; font-size: 7.5pt; letter-spacing: 0.2pt; word-break: break-all; line-height: 1.35; }
  /* Tabela verificável das consultas (dono 2026-07-20): hash completo quebra na célula. */
  #cf-dossie .cf-do-tabela-cadeia { font-size: 8pt; }
  #cf-dossie .cf-do-tabela-cadeia thead th { font-size: 6.5pt; }
  #cf-dossie .cf-do-tabela-cadeia .cf-do-td-hash code { font-family: "Courier New", monospace; font-size: 6.5pt; letter-spacing: 0.1pt; word-break: break-all; line-height: 1.3; }
  #cf-dossie .cf-do-tabela-cadeia .cf-do-td-elo { text-align: center; font-weight: 700; }
  #cf-dossie .cf-do-tabela-nota { font-size: 8pt; color: #555; margin: 4pt 0 6pt; }
  #cf-dossie .cf-do-resumo-fuso { grid-column: 1 / -1; font-size: 7.5pt; color: #555; font-style: italic; margin-top: 2pt; }
  #cf-dossie .cf-do-cadeia { display: grid; gap: 7pt; }
  #cf-dossie .cf-do-ponte { margin: 1pt 0; padding: 5pt 8pt; border-left: 1.5pt solid #8297ad; background: #f5f7fa; color: #4d6075; font-size: 8pt; page-break-inside: avoid; }
  #cf-dossie .cf-do-elo { border: .5pt solid #98aabd; border-left: 2.5pt solid #285f99; padding: 7pt 9pt; page-break-inside: avoid; }
  #cf-dossie .cf-do-elo header { display: flex; align-items: baseline; justify-content: space-between; gap: 10pt; margin-bottom: 5pt; padding-bottom: 4pt; border-bottom: .5pt solid #d3dce6; }
  #cf-dossie .cf-do-elo header strong { color: #15365e; }
  #cf-dossie .cf-do-elo header span { color: #60738a; font-size: 8pt; }
  #cf-dossie .cf-do-elo > div { display: grid; grid-template-columns: 72pt 1fr; gap: 8pt; align-items: start; margin: 2.5pt 0; }
  #cf-dossie .cf-do-elo > div > span { color: #5a6d83; font-size: 7.5pt; font-weight: 700; letter-spacing: .3pt; }
  #cf-dossie .cf-do-elo code { color: #182942; font-family: "Courier New", monospace; font-size: 7.1pt; word-break: break-all; }
  #cf-dossie .cf-do-pericia, #cf-dossie .cf-do-glossario { page-break-inside: avoid; }
  #cf-dossie .cf-do-sql {
    font-family: "Courier New", monospace; font-size: 8.5pt; white-space: pre-wrap; word-break: break-word;
    border: 0.5pt solid #999; padding: 7pt 8pt; background: #f5f5f5; margin: 4pt 0; page-break-inside: avoid;
  }
  #cf-dossie .cf-do-rodape { margin-top: 14pt; padding-top: 7pt; border-top: 0.5pt solid #999; font-size: 8.5pt; color: #444; font-style: italic; line-height: 1.4; }

  /* Linha institucional de fechamento (item rodapé) — sóbria, repete o essencial. */
  #cf-dossie .cf-do-institucional {
    margin-top: 20pt; padding-top: 8pt; border-top: 1pt solid #000;
    font-size: 8pt; letter-spacing: 0.8pt; text-transform: uppercase; color: #555; text-align: center;
  }

  /* Dados brutos por consulta no anexo (item 3) — 2 colunas, fonte menor,
     cada bloco não quebra no meio da página */
  #cf-dossie .cf-do-brutos { margin-top: 4pt; }
  #cf-dossie .cf-do-bruto-bloco { border: 0.5pt solid #999; padding: 6pt 8pt; margin-bottom: 8pt; page-break-inside: avoid; }
  #cf-dossie .cf-do-bruto-cab { font-weight: 700; font-size: 8.5pt; letter-spacing: 0.4pt; text-transform: uppercase; margin-bottom: 4pt; border-bottom: 0.5pt solid #ccc; padding-bottom: 3pt; }
  #cf-dossie .cf-do-bruto-grade { column-count: 2; column-gap: 20pt; }
  #cf-dossie .cf-do-bpar { display: flex; justify-content: space-between; gap: 8pt; font-size: 8.5pt; padding: 1pt 0; border-bottom: 0.5pt dotted #e8e8e8; break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; }
  #cf-dossie .cf-do-brot { color: #444; }
  #cf-dossie .cf-do-bval { font-weight: 600; text-align: right; word-break: break-word; }
  #cf-dossie .cf-do-bvazio { font-size: 8.5pt; font-style: italic; color: #333; }

  /* Mini-tabela BTP "Coluna do site → Valor" (raw real do terminal) dentro do bloco */
  #cf-dossie .cf-do-site-tit { font-size: 8.5pt; font-weight: 700; margin: 4pt 0 2pt; color: #333; }
  #cf-dossie .cf-do-site-tabela { font-size: 8.5pt; }
  #cf-dossie .cf-do-site-tabela td { word-break: break-word; }

  /* Glossário do anexo (item 3) — explica os códigos antes da tabela de hashes */
  #cf-dossie .cf-do-glossario { margin-bottom: 10pt; }
  #cf-dossie .cf-do-glossario p { font-size: 9.5pt; }

  /* Bloco "Em caso de contestação" — não quebrar no meio */
  #cf-dossie .cf-do-contestacao { margin-top: 14pt; padding: 8pt 10pt; border: 0.5pt solid #999; page-break-inside: avoid; }
  #cf-dossie .cf-do-contestacao h3 { margin-top: 0; }
  #cf-dossie .cf-do-contestacao ul { margin: 4pt 0 0; padding-left: 16pt; }
  #cf-dossie .cf-do-contestacao li { font-size: 9.5pt; margin-bottom: 5pt; line-height: 1.4; }

  /* Legibilidade das mini-tabelas técnicas: números tabulares e sem viúvas de linha. */
  #cf-dossie .cf-do-site-tabela th, #cf-dossie .cf-do-site-tabela td { border: 0.5pt solid #bbb; padding: 2pt 4pt; }
}

/* ── Admin · Fichas (editor de modelo de ficha) ──────────────────────────────── */
.fm-editor { display: flex; flex-direction: column; gap: 18px; }
.fm-campo { display: flex; flex-direction: column; gap: 5px; max-width: 480px; }
.fm-label { font-size: var(--fs-sm, 12.5px); font-weight: 650; color: var(--c-text2); }
.fm-campo input[type="text"] {
  height: 38px; padding: 0 12px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-m);
  background: var(--c-surface); color: var(--c-text); font: inherit;
}
.fm-campo input[type="text"]:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--accent-s); }
.fm-dica { margin: 2px 0 0; font-size: 12px; color: var(--c-text2); line-height: 1.4; }

.fm-secao { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px solid var(--c-border); }
.fm-secao-tit { font-size: 13.5px; font-weight: 700; color: var(--c-text); }

.fm-cab { display: flex; flex-direction: column; gap: 8px; }
.fm-linha-ed {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px; border: 1px solid var(--c-border); border-radius: var(--radius-m); background: rgba(37, 99, 168, 0.03);
}
.fm-linha-cells { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.fm-cell-ed { display: flex; align-items: center; gap: 4px; }
.fm-cell-ed select, .fm-cell-rot {
  height: 34px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-m);
  background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 13px; padding: 0 8px;
}
.fm-cell-ed select { max-width: 220px; }
.fm-cell-rot { width: 130px; }
.fm-linha-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.fm-seg, .fm-cols { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fm-cols { margin-top: 4px; }
.fm-seg-btn {
  border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text2);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.fm-seg-btn.ativo { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

.fm-ev-picker { display: flex; flex-direction: column; gap: 10px; }
.fm-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-toggle {
  border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text2);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.fm-toggle.ativo { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

.fm-editor-acoes { display: flex; gap: 10px; padding-top: 6px; border-top: 1px solid var(--c-border); }