/* #153 · Réguas — tokens do cockpit; 3 breakpoints; fundo sem vazar branco. */
.rg { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; background: var(--bg, transparent);
      min-width: 0; max-width: 100%; }
/* #523 · nenhum filho da coluna passa da largura dela; texto longo quebra */
.rg > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.rg-funil, .rg-detalhe, .rg-editor { min-width: 0; max-width: 100%; }
.rg-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.rg-cab h2 { margin: 0; }
.rg-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; max-width: 100%; }
/* #523 (3ª rodada do QA) · o <select> de cliente tem a largura mínima do nome
   mais longo e era ELE que esticava a página a 414 px no celular
   (div.rg-toolbar > select). Encolhe até a barra; no celular ocupa a linha. */
.rg-toolbar select { min-width: 0; max-width: 100%; }
@media (max-width: 720px) { .rg-toolbar select { width: 100%; } }
/* #523 · abas e período quebram linha no celular (QA: 414 px numa janela de 390). */
.rg-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rg-abas button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; color: inherit; cursor: pointer; }
.rg-abas button.ativa { border-bottom-color: var(--ink-accent); color: var(--ink-accent); }
.rg-sub { color: var(--muted, #999); font-size: 12px; }
.rg-erro { color: var(--ink-err, #ff5a5a); font-size: 13px; white-space: pre-wrap; }
.rg-ok { color: var(--ink-ok, #3ecf8e); font-size: 13px; }
.rg-vazio { padding: 24px; text-align: center; color: var(--muted, #999); }
.rg-tabela-wrap { overflow-x: auto; min-width: 0; max-width: 100%; contain: inline-size; }
.rg-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.rg-tabela th { text-align: left; cursor: pointer; user-select: none; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rg-tabela td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rg-tabela tr.sel td { background: var(--bg-2, rgba(255,255,255,.04)); }
.rg-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.rg-modo { padding: 2px 8px; border-radius: 10px; font-size: 11px; border: 1px solid var(--line); }
.rg-modo.real { color: var(--ink-err, #ff5a5a); border-color: currentColor; }
.rg-q.q-GREEN { color: var(--ink-ok, #3ecf8e); }
.rg-q.q-YELLOW { color: #e5b400; }
.rg-q.q-RED { color: var(--ink-err, #ff5a5a); }
.rg-detalhe, .rg-editor { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--bg, transparent); }
.rg-funil { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.rg-passo { border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.rg-passo b { font-size: 18px; font-variant-numeric: tabular-nums; }
.rg-passo.alerta b { color: var(--ink-err, #ff5a5a); }
.rg-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rg-etapas li { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rg-etapas input[type=number] { width: 80px; }
.rg-n { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; border: 1px solid var(--line); font-size: 11px; }
@media (max-width: 1100px) { .rg-funil { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .rg { padding: 12px; }
  .rg-funil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-etapas li { align-items: stretch; }
  .rg-cab { align-items: stretch; }
}