/* Configurações: só layout. Cores e formas vêm de tokens.css e base.css. */

.cfg { min-height: 0; }
.cfg-layout {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--gap);
}

/* Uma seção só: sem menu, o painel ocupa a largura (vale nos dois visuais e no celular). */
html:root .cfg-layout[data-unico] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
html:root .cfg-layout[data-unico] > .cfg-nav { display: none; }

/* Menu lateral interno: grupos e itens com endereço próprio (links) */
.cfg-nav { padding: 10px 8px; overflow: auto; }
/* Temas prontos: faixa em carrossel (classe .carrossel no HTML); seleção por tom e elevação, sem anel de 1 px. */
.cfg-temas { display: flex; gap: 8px; padding: 4px 2px; }
.cfg-tema-pronto { flex: none; display: grid; gap: 4px; justify-items: center; padding: 6px; border: 0; border-radius: var(--radius-sm); background: var(--tonal); color: var(--ink); cursor: pointer; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cfg-tema-pronto:hover { background: var(--tonal-hover); }
.cfg-tema-pronto:focus-visible { outline: 0; box-shadow: var(--anel-foco); }
.cfg-tema-pronto[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-2); box-shadow: 0 0 0 2px var(--accent-soft), var(--elev-1); }
.cfg-tema-cor { display: block; width: 54px; height: 26px; border-radius: var(--radius-xs); background: linear-gradient(120deg, var(--sw), color-mix(in srgb, var(--sw), white 65%)); box-shadow: var(--elev-1); }
.cfg-grupo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.cfg-grupo-titulo { font-size: var(--fs-1); color: var(--ink-faint); padding: 4px 10px; }
.cfg-link {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--control-h); padding: 0 10px;
  border-radius: var(--radius-sm); color: var(--ink-soft); text-decoration: none;
  font-size: var(--fs-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cfg-link:hover { background: var(--tonal); color: var(--ink); }
.cfg-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-2); }
.cfg-link .ico { flex: none; }
/* Ícone do item do menu em medalhão colorido por tela (cor com sentido: --tom vem de data-tom). */
.cfg-link-ico { flex: none; display: grid; place-items: center; width: var(--medalhao-sm); height: var(--medalhao-sm); border-radius: var(--radius-sm); background: var(--tom-soft, var(--accent-soft)); color: var(--tom, var(--accent)); }
[data-tom="accent"] { --tom: var(--accent); --tom-soft: var(--accent-soft); }
[data-tom="ok"] { --tom: var(--ok); --tom-soft: var(--ok-soft); }
[data-tom="warn"] { --tom: var(--warn); --tom-soft: var(--warn-soft); }
[data-tom="danger"] { --tom: var(--danger); --tom-soft: var(--danger-soft); }
[data-tom="info"] { --tom: var(--info); --tom-soft: var(--info-soft); }
[data-tom="ia"] { --tom: var(--ia); --tom-soft: var(--ia-soft); }
/* Seletor de seção: só aparece no celular/tablet estreito (ver a media query abaixo) */
.cfg-seletor { display: none; }

.cfg-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }
.cfg-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cfg-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; max-width: 880px; }

/* Seções dentro de uma aba. Espaço entre seções: 12 px (gap de .cfg-body), sem linha divisória. */
.cfg-sec { display: flex; flex-direction: column; gap: 8px; }
.cfg-sec + .cfg-sec { border-top: 0; padding-top: 0; }
.cfg-sec-titulo { margin: 0; font-size: var(--fs-2); font-weight: var(--fw-2); } /* 13 px nas duas skins */
.cfg-form { display: flex; flex-direction: column; gap: 8px; max-width: none; }
.cfg-form .field { max-width: 100%; }
.cfg-form .banner { margin: 0; }
.cfg-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* também usado pelo chat de Atendimento: não mudar aqui */
.cfg-body .cfg-linha:not(.cfg-campos) { gap: 8px; }
.cfg-linha.cfg-fim { justify-content: flex-end; }
.cfg-salvo { min-height: 1em; }
/* Campos relacionados em grade: 2 a 3 colunas conforme a largura; o botão da seção fica na última célula. */
.cfg-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; align-items: start; }
.cfg-campos > .field { min-width: 0; flex: none; }
.cfg-campo-largo { grid-column: span 2; min-width: 0; }
.cfg-acao { justify-self: end; align-self: end; }
.cfg-acao-fim { margin-left: auto; }
/* Oculto de verdade: .cfg-form e .cfg-linha definem display e venceriam o atributo hidden. */
.cfg [hidden] { display: none !important; }
.cfg-rodape { justify-content: flex-end; margin-top: 4px; }
.cfg-topo { justify-content: space-between; }
.cfg-acoes { white-space: nowrap; }
.cfg-codigo { margin: 0; font-size: var(--fs-4); font-weight: var(--fw-2); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.cfg-chip { cursor: default; }

/* Cor e fundo */
.cfg-cores, .cfg-fundos { align-items: center; flex-wrap: nowrap; }
.cfg-cores { padding: 4px 3px; }
.cfg-swatch {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 0; background: var(--sw);
  box-shadow: var(--brilho), var(--elev-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cfg-swatch:hover { transform: scale(1.08); }
.cfg-swatch:focus-visible { outline: 0; box-shadow: var(--anel-foco); }
.cfg-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
.cfg-cor-livre { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.cfg-cor-livre input[type="color"] { width: 34px; height: 26px; padding: 2px; border: 0; border-radius: var(--radius-xs); background: var(--tonal); cursor: pointer; }
.cfg-thumb {
  display: flex; flex-direction: column; gap: 4px; width: 128px; padding: 4px;
  border-radius: var(--radius-sm); border: 0; background: var(--tonal);
  cursor: pointer; font-size: var(--fs-1); color: var(--ink-soft);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cfg-thumb:hover { background: var(--tonal-hover); }
.cfg-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xs); display: block; }
.cfg-thumb[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-2); box-shadow: 0 0 0 2px var(--accent-soft), var(--elev-1); }
/* Fundo sólido: a amostra é o próprio color picker, na medida das miniaturas (16:9).
   Seletores de swatch em regras separadas: um seletor de navegador que não existe invalida a regra inteira. */
.cfg-thumb-solido { position: relative; cursor: pointer; text-align: center; }
.cfg-thumb-solido[data-ativo="true"] { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-2); box-shadow: 0 0 0 2px var(--accent-soft), var(--elev-1); }
.cfg-solido-prev { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-xs); }
.cfg-solido-prev input[type="color"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer;
}
.cfg-solido-prev input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cfg-solido-prev input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }
.cfg-solido-prev input[type="color"]::-moz-color-swatch { border: 0; border-radius: 0; }
.cfg-solido-prev input[type="color"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* Cor da etapa (Configurações > Etapas): select de cores + cor livre ao lado, dentro da célula .et-cor.
   Largura fixa do select: as bolinhas de cor ficam na mesma coluna em todas as etapas. */
.et-linha-cfg .cfg-cor-etapa { display: flex; align-items: center; gap: 6px; max-width: none; }
.cfg-cor-etapa > .select { width: 136px; height: var(--control-h-sm); }
.cfg-cor-livre-etapa {
  -webkit-appearance: none; appearance: none;
  flex: none; width: 32px; height: var(--control-h-sm); margin: 0; padding: 2px;
  border: 0; border-radius: var(--radius-xs); background: var(--tonal); cursor: pointer;
}
.cfg-cor-livre-etapa:hover { background: var(--tonal-hover); }
.cfg-cor-livre-etapa::-webkit-color-swatch-wrapper { padding: 0; }
.cfg-cor-livre-etapa::-webkit-color-swatch { border: 0; border-radius: 3px; }
.cfg-cor-livre-etapa::-moz-color-swatch { border: 0; border-radius: 3px; }
.cfg-cor-livre-etapa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Modo do agente: cartões de escolha */
/* Seleção compacta: uma linha por modo (nome + frase curta), sem caixa alta nem sombra. */
.cfg-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cfg-modo {
  display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0;
  padding: 8px 12px; border-radius: var(--radius-sm); border: 0;
  background: var(--tonal); cursor: pointer;
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cfg-modo:hover { background: var(--tonal-hover); }
.cfg-modo:focus-visible { outline: 0; box-shadow: var(--anel-foco); }
.cfg-modo-nome { font-weight: var(--fw-2); font-size: var(--fs-2); }
.cfg-modo > .small { max-width: 100%; line-height: 1.4; }
.cfg-modo[aria-checked="true"] { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft), var(--elev-1); }
.cfg-modo[aria-checked="true"] .cfg-modo-nome { color: var(--accent); }

/* Tabelas de modelos e acompanhamentos */
.cfg-sec .table select.select { min-width: 160px; height: var(--control-h-sm); }
.cfg-sec .table .switch { margin: 0; }
.cfg-prazo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfg-prazo .select { min-width: 120px; height: var(--control-h-sm); }
.cfg-dias-livre { width: 96px; height: var(--control-h-sm); }

/* Limites de gasto por período (diário, semanal, mensal) */
.cfg-limites { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.cfg-limite {
  display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); align-items: end; gap: 14px;
  padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: var(--tonal);
}
.cfg-limite-campo { max-width: 220px; }
.cfg-gasto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cfg-gasto-topo { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cfg-gasto-topo strong { font-variant-numeric: tabular-nums; }
/* Limite atingido é aviso, não destrutiva: cor de alerta do tema (não vermelho) nas duas skins. */
.cfg-over { color: var(--warn); }
.cfg-barra { height: 8px; border-radius: var(--radius-pill); background: var(--tonal-forte); overflow: hidden; }
.cfg-barra > span { display: block; height: 100%; background: var(--accent); transition: width var(--dur) var(--ease); }
.cfg-barra.is-over > span { background: var(--warn); }

/* Listas simples */
.cfg-lista { list-style: none; margin: 0; padding: 0; }
.cfg-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--row-h); padding: 0 10px; border-radius: var(--radius-sm); }
.cfg-item:nth-child(even) { background: var(--tonal); }
.cfg-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* WhatsApp: QR simulado */
.cfg-qr-box { display: flex; justify-content: center; }
.cfg-qr { width: 220px; height: 220px; border-radius: var(--radius-sm); }

/* Respostas rápidas (Configurações › Respostas). A faixa do painel leva a legenda e Adicionar/Salvar; o título
   some nesta aba, porque o item do menu já diz o nome. A lista tem uma linha por resposta, sem caixa, e 12
   respostas cabem sem rolagem em 1440 x 900. O editor é um bloco só: Comando e Rótulo lado a lado, Texto
   com altura mínima fixa que cresce, imagem e excluir como ícones no rodapé. */
.cfg-resp-cab { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.cfg-resp-dica { flex: 1 1 auto; min-width: 0; margin-right: auto; }
.cfg-resp-corpo { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cfg-resp-lista { min-width: 0; padding-right: 4px; }
.cfg-resp-itens { display: flex; flex-direction: column; gap: 1px; }
.cfg-resp-linha { display: flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; }
.cfg-resp-item {
  flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  min-height: 28px; padding: 3px 8px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.cfg-resp-item:hover { background: var(--tonal); color: var(--ink); }
.cfg-resp-item[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-2); }
.cfg-resp-item:focus-visible { outline: 0; box-shadow: var(--anel-foco); }
.cfg-resp-cmd { flex: 0 1 auto; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-1); font-weight: var(--fw-2); color: var(--ink); }
.cfg-resp-rotulo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-2); }
/* Excluir na linha: sem caixa e escondido até o hover ou o foco. No toque, aparece só na linha escolhida. */
.cfg .btn.cfg-resp-excluir { width: 24px; height: 24px; flex: none; border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-soft); opacity: 0; transition: opacity var(--dur) var(--ease); }
.cfg .btn.cfg-resp-excluir:hover { background: var(--danger-soft); color: var(--danger); }
.cfg-resp-linha:hover .btn.cfg-resp-excluir, .cfg-resp-linha:focus-within .btn.cfg-resp-excluir, .cfg .btn.cfg-resp-excluir:focus-visible { opacity: 1; }
@media (hover: none) { .cfg-resp-item[aria-current="true"] ~ .btn.cfg-resp-excluir { opacity: 1; } }
.cfg-resp-ed { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border: 0; border-radius: var(--radius-sm); background: var(--tonal); }
.cfg-resp-ed-campos { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr); gap: 10px; }
.cfg-resp-ed .field > label { font-size: var(--fs-1); color: var(--ink-soft); }
.cfg-resp-ed .input { height: var(--control-h); }
/* Texto: altura mínima fixa; cresce com o conteúdo (field-sizing). Onde o navegador não cresce, fica na mínima e rola. */
.cfg-resp-ed textarea.input { height: auto; min-height: 96px; field-sizing: content; resize: vertical; line-height: 1.45; }
.cfg-cmd { flex: none; }
.cfg-cmd-input { display: flex; align-items: center; gap: 4px; }
.cfg-cmd-input > span { color: var(--ink-faint); }
.cfg-resp-rodape { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cfg-resp-img { position: relative; width: 28px; height: 28px; }
.cfg-resp-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-xs); box-shadow: var(--elev-1); }
.cfg-resp-img-x {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--ink); color: var(--surface); font-size: 13px; line-height: 1; cursor: pointer;
}
.cfg-resp-erro { grid-column: 1 / -1; }
.cfg-resp-erro[hidden] { display: none; }

/* Edição de acesso */
.cfg-fieldset { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 12px; border: 0; border-radius: var(--radius-sm); background: var(--tonal); }
.cfg-fieldset legend { padding: 0 4px; }
.cfg-perm { align-items: flex-start; }
.cfg-perm > span { display: flex; flex-direction: column; }

/* Logotipo */
.cfg-logo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cfg-logo-prev {
  width: 96px; height: 96px; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 0; border-radius: var(--radius);
  background: var(--tonal); box-shadow: inset 0 0 0 2px var(--surface); padding: 6px;
}
.cfg-logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Escolher imagem e Remover na mesma linha; a dica de tamanho desce para a linha de baixo. */
.cfg-logo-acoes { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: 420px; }
.cfg-logo-acoes > .field-hint { flex-basis: 100%; }
.cfg-logo-salvar { align-self: flex-end; }
label.btn { cursor: pointer; }

/* Janela estreita ou celular: o menu lateral vira um seletor recolhido ("Pessoal"). O botão mostra a tela
 * atual (ícone, nome e chevron); ao abrir, a lista agrupada desce por cima do painel em superfície OPACA
 * (--surface-solida) com --elev-3: nunca transparente, o conteúdo de trás não pode vazar. */
@media (max-width: 900px) {
  .cfg-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: start; }
  .cfg-nav {
    display: block; padding: 6px; overflow: visible; position: sticky; top: 0; z-index: 4;
  }
  .cfg-seletor {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 40px; padding: 0 10px 0 6px; border: 0; border-radius: var(--radius-sm); background: var(--tonal);
    color: var(--ink); font: inherit; font-weight: var(--fw-2); font-size: var(--fs-3); text-align: left; cursor: pointer;
    transition: background var(--dur) var(--ease);
  }
  .cfg-seletor:hover { background: var(--tonal-hover); }
  .cfg-seletor:focus-visible { outline: 0; box-shadow: var(--anel-foco); }
  .cfg-seletor-ico { flex: none; display: grid; place-items: center; width: var(--medalhao-sm); height: var(--medalhao-sm); border-radius: var(--radius-sm); background: var(--tom-soft, var(--accent-soft)); color: var(--tom, var(--accent)); }
  .cfg-seletor-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cfg-seletor-seta { color: var(--ink-soft); transition: transform var(--dur) var(--ease); }
  .cfg-nav[data-aberto="true"] .cfg-seletor-seta { transform: rotate(180deg); }
  .cfg-menu-lista {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 6;
    max-height: 72vh; overflow-y: auto; padding: 8px;
    background: var(--surface-solida, var(--surface)); border: 0; border-radius: var(--radius);
    box-shadow: var(--brilho), var(--elev-3);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* Vence a regra de vidro (translúcida) do vidro.css: lista de menu sempre opaca. */
  :root:not([data-visual])[data-superficie][data-superficie] .cfg-menu-lista {
    background: var(--surface-solida, var(--vidro-base, var(--surface)));
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .cfg-nav[data-aberto="true"] .cfg-menu-lista { display: block; }
  .cfg-grupo { gap: 2px; margin-bottom: 6px; }
  .cfg-grupo:last-child { margin-bottom: 0; }
  .cfg-grupo-titulo { display: block; padding: 6px 10px 2px; font-size: var(--fs-1); font-weight: var(--fw-2); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
  .cfg-link { min-height: 44px; }
  .cfg-link[aria-current="page"] { background: var(--accent-soft); }
  .cfg-pane { min-width: 0; }
}

/* Colunas extras somem em telas estreitas (tablet com menu lateral e celular); o que elas diziam
 * vai para uma linha pequena dentro da célula principal (.cfg-so-compacto). */
.cfg-so-compacto { display: none; }
@media (max-width: 1180px) {
  .cfg-col-extra { display: none; }
  .cfg-so-compacto { display: block; }
}

/* Celular: um painel por vez, com o corpo mais folgado */
@media (max-width: 767px) {
  .cfg-body { padding: 14px 16px; }
  .cfg-sec .table td { padding-inline: 6px; }
  .cfg-sec .cfg-conhecimento-tabela td:nth-child(2) { max-width: none; }
  .cfg .et-novo .input, .cfg .et-nome-campo { max-width: 200px; }
  .cfg-modos { grid-template-columns: 1fr; }
  /* Respostas (celular): lista e editor empilhados; a lista vira uma faixa de nomes que quebra linha */
  .cfg-resp-corpo { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cfg-resp-lista { padding-right: 0; padding-bottom: 8px; }
  .cfg-resp-itens { flex-direction: row; flex-wrap: wrap; gap: 2px 6px; }
  .cfg-resp-item { min-height: 40px; }
  .cfg-resp-rotulo { max-width: 9rem; }
  .cfg-resp-ed { padding: 10px; }
  .cfg-limite { grid-template-columns: minmax(0, 1fr); }
  .cfg-limite-campo { max-width: none; }
  .cfg-thumb { width: 112px; }
}

/* Densidade compacta (RODADA3 e pedido de 16/10): botões na altura pequena do sistema, ícones de 14 px */
.cfg .btn { height: var(--control-h-sm); padding: 0 12px; font-size: var(--fs-2); gap: 6px; }
.cfg .btn-icon { width: var(--control-h-sm); padding: 0; }
.cfg .btn .ico, .cfg .btn svg.ico { width: var(--ico); height: var(--ico); }
.cfg .btn-icon .ico, .cfg .btn-icon svg.ico { width: var(--ico-md); height: var(--ico-md); }

/* Contraste e legibilidade (WCAG AA: 4.5:1 em texto pequeno). Textos auxiliares saem de ink-faint
   (baixo contraste no escuro) para ink-soft, em 13 px. O desabilitado não fica meio apagado. */
.cfg .field-hint, .cfg .cfg-thumb, .cfg .cfg-cor-livre, .cfg-grupo-titulo { color: var(--ink-soft); font-size: var(--fs-2); }
.cfg .btn-ghost[disabled] { opacity: 1; color: var(--ink-soft); }
.cfg .seg button { color: var(--ink-soft); }
.cfg .seg button[aria-pressed="true"] { color: var(--accent); font-weight: var(--fw-2); }
.cfg .seg button:disabled { cursor: not-allowed; }
/* Paleta: bolinha da cor da paleta, para separar "Paleta HubMed" (só cor) de "Interface HubMed" (layout) */
.cfg-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--sw); box-shadow: var(--elev-1); vertical-align: 0; }

/* Perfil e Aparência: em telas largas (1400 px ou mais) as seções vão em duas colunas e o conteúdo
   deixa o limite de 880 px. Dentro de cada coluna o título fica acima do conteúdo (sem título à esquerda). */
@media (min-width: 1400px) {
  .cfg-body.cfg-colunas { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 48px; align-items: start; align-content: start; }
  .cfg-colunas > .cfg-sec { border-top: 0; padding-top: 0; }
  .cfg-colunas > .cfg-sec + .cfg-sec { margin-top: 0; }
  .cfg-colunas > .cfg-sec:has(> .cfg-sec-titulo) { display: flex; flex-direction: column; gap: 8px; }
  .cfg-colunas > .cfg-sec > .cfg-sec-titulo { grid-column: auto; grid-row: auto; padding-top: 0; }
  .cfg-colunas > .cfg-sec > :not(.cfg-sec-titulo) { grid-column: auto; }
}

/* Desktop (768 px ou mais): o título da seção fica à esquerda e o conteúdo à direita, no mesmo bloco.
   Sem linha de título isolada. Com o celular (abaixo de 768 px), o título volta acima do conteúdo. */
@media (min-width: 768px) {
  .cfg-body:not(.cfg-colunas) .cfg-sec:has(> .cfg-sec-titulo) {
    display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 20px; row-gap: 8px; align-items: start;
  }
  .cfg-body:not(.cfg-colunas) .cfg-sec > .cfg-sec-titulo { grid-column: 1; grid-row: 1; padding-top: 7px; }
  .cfg-body:not(.cfg-colunas) .cfg-sec:has(> .cfg-sec-titulo) > :not(.cfg-sec-titulo) { grid-column: 2; min-width: 0; }
  /* Dados em pares (rótulo e valor lado a lado), para a lista de estado ocupar menos linhas */
  .cfg-body .kv { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px 16px; }
  /* Opções de um cartão em grade de duas colunas */
  .cfg-guia ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  /* Recursos da Indexis (com token salvo): as listas em duas colunas, cada item mais baixo */
  .cfg-body [data-recursos] .cfg-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
}
.cfg-body [data-recursos] .cfg-item { min-height: 0; padding-block: 6px; align-items: baseline; }
/* Endereço do webhook: o campo divide a linha com Copiar e Gerar novo (não desce os botões) */
.cfg-body .cfg-linha > .input.grow { width: auto; flex: 1 1 240px; min-width: 0; }

/* Guia leigo e opções avançadas recolhidas (Conexões › Indexis). */
.cfg-guia { border: 0; border-radius: var(--radius-sm); padding: 8px 14px; margin-block: 0; background: var(--tonal); }
.cfg-guia > summary, .cfg-avancado > summary { cursor: pointer; font-weight: 600; }
.cfg-guia ol { margin: 6px 0 2px; padding-inline-start: 20px; display: grid; gap: 6px; line-height: 1.5; }
.cfg-avancado { margin-block: 0; }
.cfg-avancado[open] > summary { margin-bottom: 8px; }
.cfg-avancado[open] > .cfg-campos { margin-bottom: 4px; }
/* Texto de apoio ao lado do controle, na mesma linha */
.cfg-body .cfg-linha > .field-hint { margin: 0; }

/* Conhecimento do agente: detalhe, evidência e parecer do revisor. */
.cfg-link-item { display: block; max-width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: var(--fw-2); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-resumo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-sec .cfg-conhecimento-tabela td:nth-child(2) { width: 100%; max-width: 0; }
.cfg-sec .table td.cfg-acoes { white-space: nowrap; width: 1%; }
.cfg-ico-ok { color: var(--ok); }
.cfg-link-item:hover { color: var(--accent); text-decoration: underline; }
.cfg-texto { white-space: pre-wrap; line-height: 1.55; margin: 8px 0 12px; }
.cfg-pre { max-height: 180px; overflow: auto; margin: 4px 0 12px; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: var(--tonal); font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }
.cfg-detalhe h4 { margin: 10px 0 2px; font-size: var(--fs-3); color: var(--ink-soft); }
.cfg-conhecimento-topo { flex-wrap: nowrap; align-items: center; gap: 6px; }
.cfg-conhecimento-topo .select { width: auto; min-width: 104px; }
.cfg-conhecimento-topo .btn, [data-visual="hubmed"] .cfg-sec .cfg-conhecimento-topo .btn { white-space: nowrap; } /* a skin HubMed (tema-hubmed.css) põe white-space: normal em .cfg-linha .btn; por isso o seletor com mais especificidade */
@media (max-width: 900px) { .cfg-conhecimento-topo { flex-wrap: wrap; } }
/* Controles do replay numa linha só, também no celular: janela + Colar manual + Iniciar replay + atualizar */
@media (max-width: 767px) {
  .cfg-conhecimento-topo { flex-wrap: nowrap; gap: 4px; justify-content: flex-end; }
  .cfg-conhecimento-topo .select { min-width: 0; width: auto; flex: 0 1 auto; padding-right: 22px; }
  .cfg-conhecimento-topo .btn { padding: 0 8px; }
}
/* Celular: cada proposta vira um bloco, com Aprovar/Rejeitar à vista (antes ficavam fora da tela, à direita). */
@media (max-width: 767px) {
  .cfg-sec .cfg-conhecimento-tabela thead { display: none; }
  .cfg-sec .cfg-conhecimento-tabela, .cfg-sec .cfg-conhecimento-tabela tbody,
  .cfg-sec .cfg-conhecimento-tabela tr, .cfg-sec .cfg-conhecimento-tabela td { display: block; width: 100%; }
  .cfg-sec .cfg-conhecimento-tabela tr { padding: 10px 12px; margin-bottom: 6px; border-radius: var(--radius-sm); background: var(--tonal); }
  .cfg-sec .table.cfg-conhecimento-tabela td { height: auto; padding: 2px 4px; border: 0; white-space: normal; }
  .cfg-sec .cfg-conhecimento-tabela td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--ink-soft); }
  .cfg-sec .table.cfg-conhecimento-tabela td.cfg-acoes { display: flex; gap: 6px; padding-top: 8px; }
  /* O título (largura 0 por causa de max-width: 0 da coluna no desktop) volta a ocupar a largura do cartão */
  .cfg-sec .cfg-conhecimento-tabela td:nth-child(2) { max-width: none; }
  .cfg-sec .cfg-conhecimento-tabela .cfg-link-item, .cfg-sec .cfg-conhecimento-tabela .cfg-resumo { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* Importação em segundo plano (HubMed e Indexis): barra fina e texto honesto dentro do banner. */
.imp-banner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-items: start; }
.imp-banner progress { display: block; width: 100%; height: 5px; appearance: none; border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-muted); }
.imp-banner progress::-webkit-progress-bar { background: var(--surface-muted); }
.imp-banner progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-pill); transition: width var(--dur) var(--ease); }
.imp-banner progress::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-pill); }
.imp-banner span { overflow-wrap: anywhere; }

/* Equipe: o papel e as permissões avulsas ficam numa linha só, truncada (o tip mostra a lista inteira).
 * A célula do papel encolhe (max-width: 0) em vez de empurrar as ações para fora da tela. */
.cfg-papel-nome { white-space: nowrap; }
.cfg-papel-perms { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
  /* Nome absorve a sobra (corta com reticências); papel e ações ficam na medida do conteúdo */
  .cfg-sec .table td.cfg-nome { width: 100%; max-width: 0; }
  .cfg-sec .table td.cfg-nome .strong { white-space: normal; overflow-wrap: anywhere; }
  .cfg-sec .table td.cfg-papel { width: auto; }
  .cfg-papel-nome { white-space: normal; }
  .cfg-papel-perms { max-width: 100px; }
  .cfg-sec .table td.cfg-acoes { width: 1%; }
  .cfg-sec .table td.cfg-acoes .btn-icon { width: 26px; height: 26px; }
}

/* Etapas (celular): duas linhas em grade fixa. Linha 1: alça, nome e excluir. Linha 2: cor, e as conversas
   embaixo do excluir. Antes o nome e a cor eram células de altura automática e encavalavam. */
@media (max-width: 640px) {
  .cfg .et-lista { gap: 4px; }
  .et-linha-cfg { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 6px; padding: 6px 6px 6px 2px; }
  .et-linha-cfg > .et-alca { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .et-linha-cfg > .et-nome-campo { grid-column: 2; grid-row: 1; width: 100%; }
  .et-linha-cfg > .et-excluir { grid-column: 3; grid-row: 1; justify-self: end; }
  .et-linha-cfg > .et-cor { grid-column: 2; grid-row: 2; justify-self: start; }
  .et-linha-cfg > .et-conversas { grid-column: 3; grid-row: 2; justify-self: end; font-size: var(--fs-1); }
  .et-linha-cfg .cfg-cor-etapa > .select { width: 118px; }
}

/* Conhecimento (desktop): a coluna Revisão mostra só a nota, numa linha; o modelo fica no title. */
@media (min-width: 768px) {
  .cfg-sec .table.cfg-conhecimento-tabela td.cfg-revisao { white-space: nowrap; width: 1%; }
}

/* Equipe no celular (≤767px): cada pessoa vira um cartão. Linha 1: nome + e-mail | ativo.
 * Linha 2: papel e permissões | editar e inativar (alvos de 40 px). Desktop segue com a tabela. */
@media (max-width: 767px) {
  .cfg-sec .cfg-equipe-tabela thead { display: none; }
  .cfg-sec .cfg-equipe-tabela,
  .cfg-sec .cfg-equipe-tabela tbody { display: block; width: 100%; }
  .cfg-sec .cfg-equipe-tabela tbody { display: flex; flex-direction: column; gap: 8px; }
  .cfg-sec .cfg-equipe-tabela tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; align-items: center;
    padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: var(--textura); box-shadow: var(--brilho), var(--elev-1);
  }
  .cfg-sec .cfg-equipe-tabela td { display: block; width: auto; min-width: 0; height: auto; padding: 0; border: 0; white-space: normal; }
  .cfg-sec .cfg-equipe-tabela td.cfg-col-extra { display: none; }
  .cfg-sec .cfg-equipe-tabela td.cfg-nome { grid-column: 1; grid-row: 1; width: auto; max-width: none; }
  .cfg-sec .cfg-equipe-tabela td.cfg-nome .strong { white-space: normal; overflow-wrap: anywhere; }
  .cfg-sec .cfg-equipe-tabela .cfg-so-compacto { white-space: normal; overflow-wrap: anywhere; }
  .cfg-sec .cfg-equipe-tabela td.cfg-papel { grid-column: 1; grid-row: 2; width: auto; }
  .cfg-sec .cfg-equipe-tabela .cfg-papel-perms { max-width: none; white-space: normal; overflow-wrap: anywhere; }
  .cfg-sec .cfg-equipe-tabela td.cfg-ativo { grid-column: 2; grid-row: 1; justify-self: end; }
  .cfg-sec .cfg-equipe-tabela td.cfg-acoes { grid-column: 2; grid-row: 2; justify-self: end; width: auto; display: flex; gap: 6px; }
  .cfg-sec .cfg-equipe-tabela td.cfg-acoes .btn-icon { width: 40px; height: 40px; }
  .cfg-sec .cfg-equipe-tabela td.cfg-acoes .btn-icon .ico { width: 18px; height: 18px; }
}

/* Rodada 5 · alvos de toque >= 40px a 390 px, sem mudar o desenho: área extra centrada no controle
 * (::after com 40px no mínimo). Não altera layout nem cor. Só os controles desta área (.cfg). */
.cfg :is(.btn, .btn-icon, .btn-sm, .tab, .chip, .et-alca, .et-excluir, .cfg-cor-livre-etapa, .cfg-ico-ok, .et-bola, .cfg-seletor):not([data-busy="1"]) { position: relative; }
.cfg :is(.btn, .btn-icon, .btn-sm, .tab, .chip, .et-alca, .et-excluir, .cfg-cor-livre-etapa, .cfg-ico-ok, .et-bola, .cfg-seletor):not([data-busy="1"])::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, 40px); height: max(100%, 40px); transform: translate(-50%, -50%);
}
/* Campos de texto e seleção não recebem ::after: no celular sobem para 40 px de altura (e não mudam no desktop). */
@media (max-width: 767px) {
  .cfg .input, .cfg .select { min-height: 40px; }
}
/* Interruptores com rótulo (label.check) e filtros em segmento: a área do rótulo vira 40 px, sem mudar o desenho. */
.cfg :is(label.check, .seg button) { position: relative; }
.cfg :is(label.check, .seg button)::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, 40px); height: max(100%, 40px); transform: translate(-50%, -50%);
}
/* Filtros de estado (Conhecimento): botões sem classe própria; mesma área de 40 px. */
.cfg button[data-estado] { position: relative; }
.cfg button[data-estado]::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, 40px); height: max(100%, 40px); transform: translate(-50%, -50%);
}

/* S6 (formulários): hora não ocupa a linha; campos seguem a largura do conteúdo. Altura 32 e rótulo 12px sem caixa alta. */
.cfg-campos:has(input[type="time"]) > .field { flex: 0 0 auto; min-width: 0; }
.cfg-campos input[type="time"] { width: 120px; }
.cfg-body .input, .cfg-body .select { height: var(--control-h); }
.cfg-body .field > label, .cfg-body .label { font-size: var(--fs-1); text-transform: none; letter-spacing: normal; }
/* Passada S7 (formulários): campos relacionados em grade de 2 a 3 colunas no desktop; uma coluna no celular. */
.cfg-form .cfg-campos { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.cfg-form .cfg-campos > .field { min-width: 0; flex: none; }
.cfg-form .cfg-campos input[type="time"] { width: 100%; max-width: 160px; }
@media (max-width: 600px) {
  .cfg-form .cfg-campos { grid-template-columns: minmax(0, 1fr); }
  .cfg-campo-largo { grid-column: auto; }
  .cfg-acao { justify-self: stretch; }
  .cfg-acao-fim { margin-left: 0; }
}

/* Ações de linha (Usuários e Conhecimento): ícone sem caixa, sempre visível em repouso e com a cor da ação
   (editar = destaque, ativar/reativar = verde, desativar/excluir = vermelho). */
.cfg-sec .table td.cfg-acoes .btn-icon { background: transparent; box-shadow: none; color: var(--accent); }
.cfg-sec .table td.cfg-acoes .btn-icon:hover { background: var(--tonal-hover); }
.cfg-sec .table td.cfg-acoes .btn-icon .ico { width: var(--ico-md); height: var(--ico-md); }
.cfg-sec .table td.cfg-acoes .btn-icon[data-desativar]:hover, .cfg-sec .table td.cfg-acoes .btn-icon[data-excluir]:hover, .cfg-sec .table td.cfg-acoes .btn-icon[data-remover]:hover { background: var(--danger-soft); }
.cfg-sec .table td.cfg-acoes .btn-icon[data-reativar]:hover { background: var(--ok-soft); }
.cfg-sec .table td.cfg-acoes .btn-icon[data-desativar],
.cfg-sec .table td.cfg-acoes .btn-icon[data-excluir],
.cfg-sec .table td.cfg-acoes .btn-icon[data-remover],
.cfg-resp-excluir { color: var(--danger); }
.cfg-sec .table td.cfg-acoes .btn-icon[data-reativar] { color: var(--ok); }

/* Valores dos blocos de estado (conexão, usuário, número, provedor) em negrito: são a informação principal. */
.cfg-body .kv dd { font-weight: 600; }

/* Conhecimento: a data não quebra; o replay vazio traz a ação na própria faixa. */
.cfg-sec .cfg-conhecimento-tabela td.cfg-criado { white-space: nowrap; }
.cfg-vazio-acao { flex-wrap: wrap; justify-content: space-between; }

/* Execução (HubMed): o radio segue a cor da marca da skin, não o azul do navegador. */
.cfg-radios input[type="radio"] { accent-color: var(--accent); }
:root:not([data-visual]) .cfg input[type="range"], :root:not([data-visual]) input[type="range"][data-volume], :root:not([data-visual]) input[type="range"][data-grad-campo] { accent-color: var(--accent); }

/* HubMed: o painel ocupa a largura toda (faixas e teste de acesso); vence o limite de largura da skin. */
.cfg-body.cfg-body-larga, [data-visual="hubmed"] .cfg-body.cfg-body-larga { max-width: none; }
.cfg-body-larga [data-testar] { width: 100%; justify-content: center; }
/* O atributo hidden precisa vencer o display flex de .banner. */
.cfg [data-banner-hubmed][hidden] { display: none; }

/* Prestadores favoritos por categoria de exame: painel de duas colunas; no celular, uma coluna. */
.cfg-fav { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cfg-fav .field-hint { margin: 0; }
.cfg-fav-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.cfg-fav-col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cfg-fav-titulo { margin: 0; font-size: var(--fs-2); font-weight: var(--fw-2); }
.cfg-fav-sub { margin: 6px 0 0; font-size: var(--fs-1); font-weight: var(--fw-2); color: var(--ink-soft); }
.cfg-fav-cats { display: flex; flex-direction: column; gap: 4px; max-height: 380px; overflow: auto; padding: 4px; border: 0; border-radius: var(--radius-sm); background: var(--tonal); }
.cfg-fav-cat { padding: 6px 8px; border-radius: var(--radius-xs); background: var(--surface); box-shadow: var(--elev-1); }
.cfg-fav-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.cfg-fav-marca { display: inline-flex; align-items: center; gap: 6px; min-width: 0; cursor: pointer; }
.cfg-fav-abre summary { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; cursor: pointer; list-style: none; font-size: var(--fs-1); color: var(--ink-faint); }
.cfg-fav-abre summary::-webkit-details-marker { display: none; }
.cfg-fav-abre summary .ico { transition: transform 120ms ease; }
.cfg-fav-abre[open] summary .ico { transform: rotate(90deg); }
.cfg-fav-exames { margin: 4px 0 0; padding-left: 20px; max-height: 160px; overflow: auto; font-size: var(--fs-1); color: var(--ink-soft); }
.cfg-fav-ordem, .cfg-fav-opcoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cfg-fav-item { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; border: 0; border-radius: var(--radius-xs); background: var(--tonal); }
.cfg-fav-opcao { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: var(--radius-xs); background: var(--tonal); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background var(--dur) var(--ease); }
.cfg-fav-opcao:hover { background: var(--tonal-hover); }
.cfg-fav-opcao[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cfg-fav-opcao:disabled { opacity: 0.5; cursor: not-allowed; }
.cfg-fav-nome { flex: 1 1 auto; min-width: 0; }
.cfg-fav-pos { font-weight: var(--fw-2); color: var(--accent); white-space: nowrap; }
@media (max-width: 640px) { .cfg-fav-colunas { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Perfil: cartão de identidade + linhas de ajuste (título e dica à esquerda, ação à direita) ---------- */
.cfg-perfil { display: flex; flex-direction: column; gap: 14px; }
.cfg-id { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent-soft), var(--surface) 75%); border: 0; box-shadow: var(--brilho), var(--elev-1); }
.cfg-id-avatar { width: 52px; height: 52px; font-size: 18px; flex: none; }
.cfg-id-form { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.cfg-id-nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cfg-perfil .cfg-id .cfg-id-input { flex: 1; min-width: 0; max-width: 360px; height: 34px; padding-inline: 6px; margin-left: -6px; font-size: var(--fs-4); font-weight: var(--fw-2); background: transparent; box-shadow: none; }
.cfg-perfil .cfg-id .cfg-id-input:hover { background: var(--tonal); }
.cfg-perfil .cfg-id .cfg-id-input:focus { background: var(--surface); box-shadow: var(--anel-foco); }
.cfg-id-nome [data-salvar-nome]:disabled { visibility: hidden; }
.cfg-id-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-soft); font-size: var(--fs-2); }
.cfg-ajustes { gap: 6px; }
.cfg-ajustes > .cfg-sec-titulo { padding: 2px 0 2px; color: var(--ink-soft); }
/* Linha de ajuste compacta: rótulo + ajuda à esquerda, controle à direita; tom, sem fio entre linhas. */
.cfg-ajuste { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--tonal); }
.cfg-ajuste-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cfg-ajuste-txt b { font-weight: var(--fw-2); font-size: var(--fs-2); }
.cfg-ajuste-txt .field-hint { margin: 0; }
.cfg-ajuste-form { padding: 4px 0 12px; }
.cfg-ajuste [data-atualizar] { gap: 6px; }
@media (max-width: 520px) { .cfg-id { align-items: flex-start; } .cfg-id-avatar { width: 40px; height: 40px; font-size: 14px; } }
@media (max-width: 767px) {
  .cfg-secao > .cfg-secao-corpo.cfg-body.cfg-perfil { gap: 6px; padding: 8px; }
  .cfg-perfil .cfg-id { gap: 8px; padding: 6px 8px; align-items: center; }
  .cfg-perfil .cfg-id-avatar { width: 32px; height: 32px; font-size: 12px; }
  .cfg-perfil .cfg-ajustes > .cfg-sec-titulo { padding: 2px 0 0; }
  .cfg-perfil .cfg-ajuste { min-height: 40px; padding: 3px 10px; }
  .cfg-perfil .cfg-ajuste-txt .field-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Tudo na viewport (07/11/2026) ----------
   Indexis: o passo a passo vira coluna à direita, ao lado do estado e da credencial (antes empilhava e rolava). */
@media (min-width: 1100px) {
  .cfg-body:has(> .cfg-guia) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr); gap: 12px 24px; align-content: start; }
  .cfg-body:has(> .cfg-guia) > * { grid-column: 1; min-width: 0; }
  .cfg-body:has(> .cfg-guia) > .cfg-guia { grid-column: 2; grid-row: 1 / span 20; align-self: start; position: sticky; top: 0; }
  .cfg-body:has(> .cfg-guia) > .cfg-guia ol { grid-template-columns: minmax(0, 1fr); }
  .cfg-body:has(> .cfg-guia) > .cfg-guia:not([open]) { grid-row: 1; }
  .cfg-body:has(> .cfg-guia) .kv { grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; }
}
/* Modelos e custo: os três limites lado a lado. */
.cfg-limites { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: none; }
.cfg-limites .cfg-limite { grid-template-columns: minmax(0, 1fr); align-content: start; }
.cfg-limites .cfg-limite-campo { max-width: none; }

/* Texto de ajuda logo abaixo do controle (o <p> herdava 1em de margem e ficava a 30 px do que explica). */
.cfg .cfg-sec > p.field-hint { margin: -2px 0 0; }
.cfg .cfg-sec + .cfg-sec { margin-top: 6px; }

/* Celular: as tabelas de modelos por capacidade e de prazos viram um bloco por linha (nome em cima, campos lado a lado),
 * sem rolagem lateral. O rótulo da coluna vem de data-rotulo. */
@media (max-width: 480px) {
  :root:root .cfg-body .table-wrap:has(tr[data-cap], tr[data-regra]) { overflow: visible; }
  :root:root .cfg-body .table-wrap:has(tr[data-cap], tr[data-regra]) thead { display: none; }
  :root:root .cfg-body .table-wrap:has(tr[data-cap], tr[data-regra]) :is(table, tbody) { display: block; width: 100%; }
  :root:root .cfg-body .table-wrap:has(tr[data-cap], tr[data-regra]) tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; padding: 10px 12px; margin-bottom: 6px; border-radius: var(--radius-sm); background: var(--tonal); }
  :root:root .cfg-body .table-wrap:has(tr[data-cap], tr[data-regra]) td { display: block; min-width: 0; height: auto; padding: 0; border: 0; }
  :root:root .cfg-body .table-wrap:has(tr[data-cap], tr[data-regra]) td:first-child { grid-column: 1 / -1; font-weight: var(--fw-2); }
  :root:root .cfg-body .table-wrap:has(tr[data-cap], tr[data-regra]) td[data-rotulo]::before { content: attr(data-rotulo); display: block; margin-bottom: 2px; font-size: var(--fs-1); color: var(--ink-soft); font-weight: var(--fw-1, 400); }
  :root:root .cfg-body .table-wrap:has(tr[data-cap], tr[data-regra]) .select { width: 100%; min-width: 0; max-width: 100%; }
}

/* Alinhamento da filial: topo e parcelamento fixos, perguntas rolam no meio, barra de ações fixa no pé do painel. */
:root .panel-body.cfg-body.alin-corpo { max-width: none; padding: 0; gap: 0; overflow: hidden; }
.alin { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.alin-esq { height: 120px; margin: 14px; }
.alin-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 14px 6px; }
.alin-titulo { margin: 0; font-size: var(--fs-3); font-weight: var(--fw-2); }
.alin-frase { font-size: var(--fs-1); }
.alin-quando { margin-left: auto; white-space: nowrap; }
.alin-parc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 6px 14px 10px; background: var(--tonal); }
.alin-parc-titulo { font-size: var(--fs-1); font-weight: var(--fw-2); }
.alin-num { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--ink-soft); white-space: nowrap; }
.alin-num .input { width: 72px; height: var(--control-h-sm); padding-inline: 6px; text-align: right; }
.alin-num .input[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--danger-soft), inset 0 0 0 1px var(--danger); }
.alin-exemplo { white-space: nowrap; }
.alin-parc-dica { flex-basis: 100%; margin-top: -2px; }
.alin-rolagem { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 8px; }
.alin-grade { column-width: 300px; column-gap: 28px; }
.alin-grupo { margin-bottom: 12px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--textura); box-shadow: var(--brilho), var(--elev-1); box-decoration-break: clone; -webkit-box-decoration-break: clone; break-inside: avoid; }
.alin-grupo-titulo { break-after: avoid; margin: 0 0 6px; font-size: var(--fs-1); font-weight: var(--fw-2); color: var(--accent); }
.alin-campo { break-inside: avoid; margin-bottom: 6px; }
.alin-rotulo { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 2px; }
.alin-rotulo label { font-size: var(--fs-1); line-height: 16px; color: var(--ink-soft); font-weight: 500; }
.alin-info {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: -2px 0 0;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); cursor: pointer;
}
.alin-info:hover, .alin-info[aria-describedby] { color: var(--accent); background: var(--accent-soft); }
.alin-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cfg-body .alin-area, .alin-area {
  display: block; width: 100%; height: auto; min-height: 28px; box-sizing: border-box; resize: none;
  padding: 4px 8px; font: inherit; font-size: var(--fs-2); line-height: 18px; overflow-y: auto;
}
.alin-geral { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; padding-bottom: 6px; }
.alin-geral-rotulo { font-size: var(--fs-2); font-weight: var(--fw-2); }
.alin-barra { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface); box-shadow: var(--elev-2); }
.alin-erro { color: var(--danger); }
.alin-balao {
  position: fixed; z-index: 1000; max-width: min(320px, calc(100vw - 16px)); padding: 8px 10px; border-radius: var(--radius-xs);
  background: var(--ink); color: var(--surface); font-size: var(--fs-1); line-height: 1.4; box-shadow: var(--elev-3); pointer-events: none;
}
.alin-balao[hidden] { display: none; }
.alin-balao p { margin: 0; }
.alin-balao-ex { margin-top: 4px !important; opacity: 0.9; }
@media (max-width: 767px) {
  .alin-topo, .alin-parc, .alin-rolagem, .alin-barra { padding-inline: 12px; }
  .alin-quando { margin-left: 0; }
  /* Celular: topo e parcelamento rolam junto com as perguntas (senão sobra pouca altura); a barra fica colada no pé. */
  .alin { overflow-y: auto; overscroll-behavior: contain; }
  .alin-rolagem { flex: none; overflow: visible; }
  .alin-barra { position: sticky; bottom: 0; z-index: 2; margin-top: auto; }
  .alin-barra { padding-block: 10px; }
}

/* ---------- Seções compactas (12/11/2026) ----------
   Cada tela de Configurações é uma faixa de cartões (as seções recolhidas: ícone, título, estado atual e o
   controle principal, em até três linhas) e, embaixo, a área das seções abertas, com o corpo completo.
   Tudo recolhido cabe na tela; quem rola é a área das abertas, nunca a página. */

/* Menu: uma tela por item, com as seções dela numa linha pequena (para achar onde cada coisa mora). */
.cfg-link { min-height: 44px; padding: 5px 10px; }
.cfg-link-textos { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cfg-link-nome { font-size: var(--fs-2); line-height: 1.25; }
.cfg-link-frase { font-size: 11px; line-height: 1.3; font-weight: var(--fw-1); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-link[aria-current="page"] .cfg-link-frase { color: color-mix(in srgb, var(--accent) 65%, var(--ink-soft)); }
.cfg-nav .cfg-grupo { margin-bottom: 0; }

.cfg-pane > .cfg-tela { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }
.cfg-faixa { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }
.cfg-faixa:empty { display: none; }
.cfg-abertas { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--gap); scroll-padding-top: 4px; }
.cfg-tela:not([data-com-abertas]) > .cfg-abertas { display: none; }

/* Cartão da seção (recolhida) */
.cfg-secao {
  position: relative; min-width: 0; display: flex; flex-direction: column;
  background: var(--textura); border: 0; border-radius: var(--radius); box-shadow: var(--brilho), var(--elev-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cfg-faixa > .cfg-secao:hover { box-shadow: var(--brilho), var(--elev-2); transform: translateY(-1px); }
.cfg-faixa > .cfg-secao:focus-within { box-shadow: var(--brilho), var(--elev-2), var(--anel-foco); }
.cfg-secao-cab { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 10px; }
.cfg-secao-alterna {
  display: grid; grid-template-columns: var(--medalhao) minmax(0, 1fr) auto; grid-template-areas: "ico titulo seta" "ico resumo resumo";
  align-items: center; column-gap: 10px; row-gap: 1px; width: 100%; min-width: 0; padding: 0;
  border: 0; border-radius: var(--radius-xs); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.cfg-secao-alterna:focus-visible { outline: 0; box-shadow: var(--anel-foco); }
/* Medalhão do ícone: 32 px nos dois estados (recolhida e aberta), cor de sentido por seção (--tom). */
.cfg-secao-ico {
  grid-area: ico; align-self: start; width: var(--medalhao); height: var(--medalhao); display: grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--tom-soft, var(--accent-soft)); color: var(--tom, var(--accent));
}
.cfg-secao[data-secao="perfil"], .cfg-secao[data-secao="usuarios"], .cfg-secao[data-secao="hubmed"], .cfg-secao[data-secao="dados"] { --tom: var(--accent); --tom-soft: var(--accent-soft); }
.cfg-secao[data-secao="aparencia"], .cfg-secao[data-secao="agente"], .cfg-secao[data-secao="conhecimento"], .cfg-secao[data-secao="identidade"] { --tom: var(--ia); --tom-soft: var(--ia-soft); }
.cfg-secao[data-secao="sons"], .cfg-secao[data-secao="respostas"], .cfg-secao[data-secao="indexis"], .cfg-secao[data-secao="acompanhamentos"] { --tom: var(--info); --tom-soft: var(--info-soft); }
.cfg-secao[data-secao="whatsapp"], .cfg-secao[data-secao="pagamentos"], .cfg-secao[data-secao="etapas"] { --tom: var(--ok); --tom-soft: var(--ok-soft); }
.cfg-secao[data-secao="alinhamento"], .cfg-secao[data-secao="modelos"] { --tom: var(--warn); --tom-soft: var(--warn-soft); }
.cfg-secao-titulo { grid-area: titulo; min-width: 0; font-size: var(--fs-2); font-weight: var(--fw-2); line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-secao-resumo { grid-area: resumo; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 18px; font-size: var(--fs-1); line-height: 1.4; color: var(--ink-soft); }
.cfg-secao-resumo .badge { flex: none; height: 20px; padding: 0 8px; font-size: var(--fs-1); }
.cfg-secao-resumo .cfg-dot { flex: none; margin: 0; width: 10px; height: 10px; }
.cfg-secao-resumo-txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* No cartão recolhido, o estado corre em texto (selo junto) e quebra em até duas linhas; com controle embaixo, uma
   linha só (o cartão nunca passa de três linhas). */
.cfg-faixa .cfg-secao-resumo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cfg-faixa .cfg-secao:has(> .cfg-secao-cab > .cfg-secao-rapido) .cfg-secao-resumo { -webkit-line-clamp: 1; }
.cfg-faixa .cfg-secao-resumo > * { display: inline; vertical-align: baseline; }
.cfg-faixa .cfg-secao-resumo .badge { display: inline-flex; vertical-align: 1px; margin-right: 5px; }
.cfg-faixa .cfg-secao-resumo .cfg-dot { display: inline-block; vertical-align: -1px; margin-right: 5px; }
.cfg-faixa .cfg-secao-resumo-txt { white-space: normal; overflow: visible; }
.cfg-resumo-esq { display: inline-block; width: 70%; height: 10px; border-radius: 4px; }
.cfg-secao-seta { grid-area: seta; display: inline-flex; color: var(--ink-faint); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.cfg-secao-alterna:hover .cfg-secao-seta { color: var(--accent); }
.cfg-secao[data-aberta] .cfg-secao-seta { transform: rotate(180deg); }
/* Controle principal na linha recolhida (alinhado com o texto, depois do ícone). Aberta, o corpo tem o mesmo controle. */
.cfg-secao-rapido { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cfg-secao[data-aberta] .cfg-secao-rapido { display: none; }
.cfg .cfg-rapido-abaixo { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 0 10px 9px; }
.cfg .cfg-secao[data-aberta] > .cfg-rapido-abaixo { display: none; }
.cfg .cfg-tela:not([data-com-abertas]) > .cfg-faixa .cfg-rapido-abaixo { padding-left: 10px; }
.cfg-temas-rapidos { max-width: 100%; }
.cfg-temas-rapidos .cfg-tema-pronto { padding: 3px 6px; font-size: var(--fs-1); }
.cfg-temas-rapidos .cfg-tema-cor { width: 38px; height: 13px; }
.cfg .cfg-secao-rapido .btn { height: var(--control-h-sm); padding: 0 10px; font-size: var(--fs-1); }
.cfg-rapido-check { font-size: var(--fs-1); }
/* Título: nome completo no cartão largo e na seção aberta; o curto só na faixa compacta (com seção aberta). */
.cfg-t-curto { display: none; }
.cfg-tela[data-com-abertas] > .cfg-faixa .cfg-t-longo { display: none; }
.cfg-tela[data-com-abertas] > .cfg-faixa .cfg-t-curto { display: inline; }

/* Nada aberto: a faixa vira uma grade folgada (2 a 3 cartões por linha em 1366, 3 a 4 em 1920, 1 no celular).
   Título inteiro; estado em até duas linhas; com controle, uma linha de estado e o controle na terceira. */
.cfg-tela:not([data-com-abertas]) > .cfg-faixa { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 10px; }
.cfg-tela:not([data-com-abertas]) > .cfg-faixa .cfg-secao-cab { padding: 12px 14px; gap: 8px; }
.cfg-tela:not([data-com-abertas]) > .cfg-faixa .cfg-secao-alterna { column-gap: 12px; row-gap: 3px; }
.cfg-secao-ico .ico { width: var(--ico); height: var(--ico); }
.cfg-tela:not([data-com-abertas]) > .cfg-faixa .cfg-secao-ico .ico { width: var(--ico-md); height: var(--ico-md); }
.cfg-tela:not([data-com-abertas]) > .cfg-faixa .cfg-secao-titulo { font-size: var(--fs-3); }
.cfg-tela:not([data-com-abertas]) > .cfg-faixa .cfg-secao-resumo { font-size: var(--fs-2); line-height: 1.45; }
.cfg-tela:not([data-com-abertas]) > .cfg-faixa .cfg-secao-rapido { padding-left: 44px; }

/* Extensões (Recursos experimentais) levam a cor de alerta no ícone: são recursos em teste. */
.cfg-secao-ext { --tom: var(--warn); --tom-soft: var(--warn-soft); }

/* Seção aberta: cabeçalho numa linha (ícone, título, estado, seta) fixo no alto da área enquanto o corpo rola. */
.cfg-secao[data-aberta] { flex: none; }
.cfg-secao[data-aberta] > .cfg-secao-cab {
  position: sticky; top: 0; z-index: 2; flex-direction: row; align-items: center; padding: 6px 12px;
  background: var(--surface); box-shadow: var(--elev-1); border-radius: var(--radius) var(--radius) 0 0;
}
.cfg-secao[data-aberta] .cfg-secao-alterna { grid-template-columns: var(--medalhao) auto minmax(0, 1fr) auto; grid-template-areas: "ico titulo resumo seta"; column-gap: 10px; }
.cfg-secao[data-aberta] .cfg-secao-ico { align-self: center; }
.cfg-secao[data-aberta] .cfg-secao-titulo { font-size: var(--fs-3); }
.cfg-secao[data-aberta] .cfg-secao-resumo { padding-left: 4px; }
.cfg-secao > .cfg-secao-corpo.cfg-body { max-width: none; min-width: 0; padding: 12px 14px; background: var(--surface-soft); border-radius: 0 0 var(--radius) var(--radius); }
/* Blocos dentro da seção aberta: cartões com volume (corpo --surface-soft, cartão --surface, controle --tonal). */
.cfg-secao-corpo .cfg-sec { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--textura); box-shadow: var(--brilho), var(--elev-1); }
.cfg-secao-corpo .cfg-sec .cfg-sec { padding: 0; background: none; box-shadow: none; }
.cfg-secao-corpo .cfg-sec-titulo { color: var(--ink); }
.cfg-esq { height: 120px; border-radius: var(--radius-sm); }
/* Seção de lista longa (Alinhamento, Conhecimento, Respostas): aberta, ocupa a altura da área e rola por dentro. */
.cfg-secao[data-grande][data-aberta] { flex: 0 0 100%; max-height: 100%; min-height: 0; overflow: hidden; }
.cfg-secao[data-grande][data-aberta] > .cfg-secao-cab { position: static; }
.cfg-secao[data-grande] > .cfg-secao-corpo.cfg-body { border-radius: 0 0 var(--radius) var(--radius); }
.cfg-secao[data-grande] > .cfg-secao-corpo { flex: 1; min-height: 0; overflow: auto; }
.cfg-secao > .cfg-secao-corpo.cfg-body.alin-corpo { padding: 0; gap: 0; overflow: hidden; }
.cfg-secao .alin-titulo { display: none; } /* o cabeçalho da seção já diz "Alinhamento da filial" */
/* Colunas um pouco mais estreitas: a seção divide a altura com a faixa, então as 25 perguntas vão em mais colunas. */
.cfg-secao .alin-grade { column-width: 250px; column-gap: 22px; }
.cfg-secao .alin-topo { padding-top: 8px; }
.cfg-secao .alin-rolagem { padding-block: 8px 4px; }
.cfg-secao .alin-parc { padding-bottom: 8px; }
.cfg-secao .alin-barra { border-radius: 0 0 var(--radius) var(--radius); }

/* Abrir: entrada curta; link direto: contorno da marca por um instante. Respeita "Reduzir movimento". */
@keyframes cfg-secao-abre { from { opacity: 0; transform: translateY(-4px); } }
@keyframes cfg-secao-alvo { from { box-shadow: var(--anel-foco), var(--elev-2); } to { box-shadow: var(--brilho), var(--elev-1); } }
.cfg-secao.is-abrindo { animation: cfg-secao-abre calc(var(--dur) * 1.6) var(--ease); }
.cfg-secao.is-alvo { animation: cfg-secao-alvo 1.6s var(--ease); }
.cfg-secao.is-abrindo.is-alvo { animation: cfg-secao-abre calc(var(--dur) * 1.6) var(--ease), cfg-secao-alvo 1.6s var(--ease); }
:root[data-motion="off"] .cfg-secao { animation: none !important; transition: none; }
@media (prefers-reduced-motion: reduce) { .cfg-secao { animation: none !important; } }

/* Blocos independentes lado a lado nas telas largas (Aparência, Modo do agente, Modelos, Pagamentos e Perfil). */
@media (min-width: 1100px) {
  .cfg-secao > .cfg-secao-corpo.cfg-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px 28px; align-items: start; align-content: start; }
  .cfg-secao > .cfg-secao-corpo.cfg-grade > .cfg-sec:has(> .cfg-sec-titulo) { display: flex; flex-direction: column; gap: 8px; }
  .cfg-secao > .cfg-secao-corpo.cfg-grade > .cfg-sec > .cfg-sec-titulo { padding-top: 0; }
  .cfg-secao > .cfg-secao-corpo.cfg-grade > :is(.banner, .cfg-rodape, .empty, .field-error) { grid-column: 1 / -1; }
  .cfg-secao > .cfg-secao-corpo.cfg-grade .cfg-sec + .cfg-sec { margin-top: 0; }
  /* Formulário com várias seções (Dados, Identidade): as seções dele entram na grade. */
  .cfg-secao > .cfg-secao-corpo.cfg-grade > form.cfg-form { display: contents; }
  .cfg-secao > .cfg-secao-corpo.cfg-grade > form.cfg-form > .cfg-sec:has(> .cfg-sec-titulo) { display: flex; flex-direction: column; gap: 8px; }
  .cfg-secao > .cfg-secao-corpo.cfg-grade > form.cfg-form > .field-error { grid-column: 1 / -1; }
  /* Fundo ocupa a linha inteira: as miniaturas ficam numa fila só. */
  .cfg-secao > .cfg-secao-corpo.cfg-grade :is(.cfg-sec:has(.cfg-fundos)) { grid-column: 1 / -1; }
  .cfg-secao > .cfg-secao-corpo.cfg-perfil { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
}
/* Segmentos (Estilo, Interface padrão...) na medida do conteúdo, nunca esticados até a borda. */
.cfg-secao-corpo .cfg-sec > .seg { justify-self: start; align-self: flex-start; width: fit-content; max-width: 100%; }
/* Fundos: miniaturas de tamanho fixo que quebram linha quando falta largura. */
.cfg-secao-corpo .cfg-fundos { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 6px; padding: 3px; }
.cfg-secao-corpo .cfg-fundos .cfg-thumb { flex: none; min-width: 0; width: 104px; padding: 3px; }
.cfg-secao-corpo .cfg-fundos .cfg-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cfg-secao-corpo .cfg-fundos .cfg-thumb span { font-size: var(--fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cfg-secao-corpo .cfg-fundos > .btn { align-self: center; }
@media (max-width: 767px) { .cfg-secao-corpo .cfg-fundos .cfg-thumb { width: 104px; } }

/* Celular e janela estreita: uma seção por linha (título, estado e, quando há, o controle embaixo). */
@media (max-width: 767px) {
  .cfg-faixa { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cfg-secao-cab { gap: 4px; padding: 7px 10px; }
  .cfg-tela[data-com-abertas] > .cfg-faixa .cfg-secao-resumo { -webkit-line-clamp: 1; }
  .cfg-secao[data-aberta] .cfg-secao-alterna { grid-template-columns: var(--medalhao) minmax(0, 1fr) auto; grid-template-areas: "ico titulo seta" "ico resumo resumo"; }
  .cfg-secao[data-aberta] .cfg-secao-resumo { padding-left: 0; }
  .cfg-secao > .cfg-secao-corpo.cfg-body { padding: 12px; }
}
.cfg-fundo-tipos { width: fit-content; max-width: 100%; }
.cfg-secao-corpo .cfg-fundo-carrossel, .cfg-sec-fundo .cfg-grad-estilos { scroll-snap-type: x proximity; }
.cfg-fundo-carrossel > *, .cfg-grad-estilos > *, .cfg-temas > *, .cfg-cores > * { scroll-snap-align: start; }
.cfg-paleta-fundo { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; max-width: 420px; }
.cfg-cor-fundo { min-width: 0; height: 26px; border-radius: var(--radius-xs); background: var(--sw); border: 0; box-shadow: var(--elev-1); cursor: pointer; }
.cfg-cor-fundo:hover { transform: scale(1.06); }
.cfg-cor-fundo[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.cfg-cor-fundo:focus-visible { outline: 0; box-shadow: var(--anel-foco); }
@media (max-width: 767px) { .cfg-paleta-fundo { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; } }
.cfg-fundo-upload { position: relative; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; min-height: 65px; }
.cfg-fundo-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cfg-fundo-upload:focus-within { outline: 0; box-shadow: var(--anel-foco); }

/* ---------- Design system 90: menu, linhas e etapas ---------- */
.cfg-nav .cfg-grupo { margin-bottom: 8px; }
.cfg-nav .cfg-grupo:last-child { margin-bottom: 0; }
.cfg-grupo-titulo { padding: 6px 10px 2px; font-size: var(--fs-1); font-weight: var(--fw-2); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.cfg-link { gap: 10px; }
.cfg-link[aria-current="page"] .cfg-link-ico { background: var(--surface); box-shadow: var(--elev-1); }

/* Editor de etapas: linha em tom (sem moldura), bolinha com a cor efetiva (a do token quando está em "Padrão"). */
.cfg .et-linha-cfg { border: 0; background: var(--tonal); border-radius: var(--radius-sm); box-shadow: none; }
.cfg .et-linha-cfg.is-arrastando { background: var(--surface); box-shadow: var(--elev-3); }
.cfg .et-alca:hover { background: var(--tonal-hover); }
.cfg .et-alca:focus-visible { outline: 0; box-shadow: var(--anel-foco); }
.cfg-cor-ponto { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sw, var(--et-neutra)); box-shadow: var(--elev-1); }
.cfg .et-excluir { color: var(--danger); }
.cfg .et-excluir:hover { background: var(--danger-soft); }

/* Recursos experimentais (Configurações › Recursos) e Espelho: mesma linguagem de cartão. */
.cfg-secao-corpo .cfg-rx-cartao { background: var(--textura); }

/* ---------- Lote 2: seções expandidas em grade (ajuste automático em index.js › ajustar) ----------
   Abertas ficam em colunas que usam a largura; seção de lista longa (data-grande) volta ao empilhado de altura cheia.
   Enquanto o ajuste abre tudo e recolhe o excesso, a área fica invisível (sem piscar). */
.cfg-abertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); grid-auto-flow: dense; align-items: start; align-content: start; }
.cfg-abertas:has(> .cfg-secao[data-grande]) { display: flex; flex-direction: column; }
.cfg-tela[data-ajustando] > .cfg-abertas { visibility: hidden; }
@media (max-width: 767px) { .cfg-abertas { grid-template-columns: minmax(0, 1fr); } }

/* Controles rápidos da Aparência (cartão recolhido): temas em carrossel e três campos que se distribuem na largura. */
.cfg-secao-rapido.cfg-rapido-abaixo { gap: 6px; padding: 0 12px 10px; }
.cfg-temas-rapidos { gap: 6px; padding: 2px; }
.cfg-temas-rapidos .cfg-tema-pronto { padding: 6px 8px; font-size: var(--fs-1); }
.cfg-temas-rapidos .cfg-tema-cor { width: 44px; height: 16px; }
/* Modo, Navegação e Superfície sempre na MESMA linha (também no celular): cada campo ocupa só o que precisa. */
.cfg-ap-controles { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 6px 10px; align-items: end; }
.cfg-ap-campo { text-align: left; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; font-size: var(--fs-1); color: var(--ink-soft); font-weight: var(--fw-2); }
.cfg-ap-campo > span { padding-left: 2px; }

/* Seletor visual (substitui o select nativo): azulejos com ícone em cima e nome embaixo, a escolha em destaque. */
.cfg .seg.cfg-seg-ico { display: flex; width: fit-content; max-width: 100%; padding: 3px; gap: 6px; border-radius: var(--radius-sm); }
.cfg .seg.cfg-seg-ico button { flex: 0 1 auto; min-width: 0; min-inline-size: 64px; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 44px; padding: 5px 6px; border-radius: var(--radius-xs); font-size: var(--fs-1); line-height: 1.2; white-space: nowrap; }
.cfg .seg.cfg-seg-ico button > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cfg .seg.cfg-seg-ico button .ico { width: 18px; height: 18px; }
.cfg .seg.cfg-seg-ico button:disabled { opacity: 0.6; }

/* Seletor visual dentro do cartão recolhido (Modo do agente e Aparência): em linha, baixo, para o cartão não crescer. */
.cfg-secao-rapido .seg.cfg-seg-ico { width: auto; max-width: 100%; }
.cfg .cfg-secao-rapido .seg.cfg-seg-ico button { display: inline-flex; flex-direction: row; gap: 5px; min-height: var(--control-h-sm); padding: 2px 9px; }
.cfg .cfg-secao-rapido .seg.cfg-seg-ico button .ico { width: 14px; height: 14px; }
/* No cartão recolhido, só o modo escolhido mostra o nome; os outros são ícones (o nome completo vai no title). */
.cfg .cfg-secao-rapido .seg.cfg-seg-ico button[aria-pressed="false"] > span { display: none; }
.cfg .cfg-secao-rapido .seg.cfg-seg-ico button[aria-pressed="false"] { padding-inline: 8px; }
.cfg .cfg-secao-rapido .seg.cfg-seg-ico button { flex: 0 0 auto; }
.cfg .cfg-secao-rapido .seg.cfg-seg-ico button > span { overflow: visible; max-width: none; }

/* ---------- L2: tinta de acento em texto (AA) e HubMed idêntico à main 0891fda ---------- */
:root:not([data-visual]) .cfg-link[aria-current="page"], :root:not([data-visual]) .cfg-modo[aria-checked="true"] .cfg-modo-nome { color: var(--accent-texto); }
:root:not([data-visual]) .cfg-link[aria-current="page"] .cfg-link-frase { color: color-mix(in srgb, var(--accent-texto) 75%, var(--ink-soft)); }
:root:not([data-visual]) .cfg-tema-pronto[aria-pressed="true"] { color: var(--accent-texto); }
/* Dentro de Ajustes todo controle de formulário tem 32 px; 28 px só no que é compacto de propósito (botão da linha recolhida, ações de tabela). */
:root:not([data-visual]) .cfg .cfg-body .btn:not(.btn-sm):not(.btn-icon) { height: var(--control-h); }
/* No celular a tela mostra uma seção aberta por vez: ela rola por dentro da área, o cabeçalho fica fixo. */
@media (max-width: 767px) { :root:not([data-visual]) .cfg-abertas { overflow: auto; } }

/* HubMed: cartões de seção, ícone e abertas exatamente como na main (os blocos acima são do visual Moderno). */
:root[data-visual] .cfg-secao {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:root[data-visual] .cfg-faixa > .cfg-secao:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); box-shadow: var(--shadow-sm); transform: none; }
:root[data-visual] .cfg-faixa > .cfg-secao:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow-sm); }
:root[data-visual] .cfg-secao-alterna { grid-template-columns: 28px minmax(0, 1fr) auto; }
:root[data-visual] .cfg-secao-alterna:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: none; }
:root[data-visual] .cfg-secao-ico { width: 28px; height: 28px; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent); }
:root[data-visual] .cfg-secao-ext .cfg-secao-ico { background: var(--warn-soft); color: var(--warn); }
:root[data-visual] .cfg-secao-resumo .badge { height: 18px; padding: 0 7px; font-size: 11px; }
:root[data-visual] .cfg-tela:not([data-com-abertas]) > .cfg-faixa .cfg-secao-alterna { grid-template-columns: 34px minmax(0, 1fr) auto; }
:root[data-visual] .cfg-tela:not([data-com-abertas]) > .cfg-faixa .cfg-secao-ico { width: 34px; height: 34px; border-radius: var(--radius-sm); }
:root[data-visual] .cfg-tela:not([data-com-abertas]) > .cfg-faixa .cfg-secao-ico .ico { width: 18px; height: 18px; }
:root[data-visual] .cfg-tela:not([data-com-abertas]) > .cfg-faixa .cfg-secao-rapido { padding-left: 46px; }
:root[data-visual] .cfg-secao[data-aberta] > .cfg-secao-cab {
  padding: 7px 12px; background: var(--surface-soft); box-shadow: none; border-bottom: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
:root[data-visual] .cfg-secao[data-aberta] .cfg-secao-alterna { grid-template-columns: 28px auto minmax(0, 1fr) auto; }
:root[data-visual] .cfg-secao > .cfg-secao-corpo.cfg-body { background: transparent; border-radius: 0; }
:root[data-visual] .cfg-secao-corpo .cfg-sec { padding: 0; background: none; box-shadow: none; border-radius: 0; }
:root[data-visual] .cfg-abertas { display: flex; flex-direction: column; gap: var(--gap); }
.cfg-abertas-vazio { display: none; }
:root[data-visual] .cfg-tela:not([data-com-abertas]) > .cfg-abertas-vazio {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 0; padding: 14px 16px;
  border-radius: var(--radius-sm); background: var(--tinta, var(--surface-soft)); color: var(--ink-soft); font-size: var(--fs-2); text-align: center;
}
:root[data-visual] .cfg-abertas-vazio .ico { flex: none; color: var(--accent); }

/* Aparência condensada (Moderno): blocos curtos (Estilo, Tema, Navegação, Movimento) em colunas de 200 px, mesmo no
   cartão de meia largura; Temas, Cores e Fundo ocupam a linha. Corpo ~450 px: a seção volta a entrar na abertura automática. */
@media (min-width: 1100px) {
  :root:not([data-visual]) .cfg-secao[data-secao="aparencia"] > .cfg-secao-corpo.cfg-grade { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; padding-block: 10px; }
  :root:not([data-visual]) .cfg-secao[data-secao="aparencia"] > .cfg-secao-corpo.cfg-grade > .cfg-sec:is([data-bloco="temas-prontos"], [data-bloco="paleta"], [data-bloco="fundo"], [data-bloco="superficies"]) { grid-column: 1 / -1; }
}
:root:not([data-visual]) .cfg-secao[data-secao="aparencia"] .cfg-secao-corpo .cfg-sec { padding: 8px 10px; gap: 6px; }

/* ---------- Seletores visuais (<seletor-op>, <seletor-data-hora>): substituem o select nativo no Moderno ---------- */
seletor-op, seletor-data-hora { display: block; min-width: 0; max-width: 100%; }
.sel-op .sel-seg { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; border-radius: var(--radius-lg); }
.sel-op .sel-seg button { min-height: var(--control-h-sm); }
.sel-op .sel-seg button:disabled, .sel-gatilho:disabled, .sel-dia:disabled { opacity: .6; cursor: default; }
.sel-gatilho { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--control-h); max-width: 100%; padding: 0 10px 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--tonal); color: var(--ink); font: inherit; font-size: var(--fs-2); font-weight: 560; cursor: pointer; text-align: left; transition: background var(--dur) var(--ease); }
.sel-gatilho:hover:not(:disabled) { background: var(--tonal-hover); }
.sel-gatilho:focus-visible, .sel-cor:focus-visible, .sel-dia:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.sel-gatilho-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sel-gatilho > svg { flex: 0 0 16px; color: var(--ink-soft); }
.sel-cores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sel-cor { width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--sel-cor, var(--tonal)); cursor: pointer; box-shadow: var(--brilho); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.sel-cor:hover:not(:disabled) { transform: scale(1.1); }
.sel-cor[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sel-cor, var(--accent)); }
.sel-cor-padrao { width: auto; padding: 0 10px; font: inherit; font-size: var(--fs-1); font-weight: 560; color: var(--ink-soft); }
.sel-cor-padrao[aria-pressed="true"] { background: var(--surface); color: var(--accent-texto); box-shadow: var(--brilho), var(--elev-1); }
.sel-data { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sel-dias { display: flex; gap: 6px; max-width: 100%; }
.sel-dia { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 56px; padding: 4px 10px; border: 0; border-radius: var(--radius-lg); background: var(--tonal); color: var(--ink); font: inherit; cursor: pointer; transition: background var(--dur) var(--ease); }
.sel-dia small { font-size: var(--fs-1); color: var(--ink-soft); }
.sel-dia strong { font-size: var(--fs-2); font-weight: 600; }
.sel-dia:hover:not(:disabled) { background: var(--tonal-hover); }
.sel-dia[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.sel-dia[aria-pressed="true"] small { color: inherit; }
.sel-menu { display: flex; flex-direction: column; gap: 4px; max-width: min(360px, calc(100vw - 16px)); }
.sel-menu .sel-busca { height: var(--control-h-sm); }
.sel-lista { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.sel-lista button { justify-content: space-between; }
.sel-item-txt { display: flex; flex-direction: column; min-width: 0; }
.sel-lista button[aria-selected="true"] { background: var(--tonal); color: var(--accent-texto); font-weight: 600; }
.sel-vazio { margin: 0; padding: 8px 10px; }
.cfg-prazo seletor-op { flex: 0 1 auto; }

/* Celular: na Aparência os três seletores cabem numa linha só, então ficam só os ícones (o nome vai no title). */
@media (max-width: 767px) {
  .cfg .cfg-ap-controles .seg.cfg-seg-ico button > span { display: none; }
  .cfg .cfg-ap-controles .seg.cfg-seg-ico button { padding-inline: 9px; }
}

/* ---------- Menu das telas de Configurações como carrossel horizontal (Moderno; HubMed segue com o seletor suspenso) ----------
 * Em janela estreita (celular e tablet) o seletor suspenso dá lugar a uma faixa que rola na horizontal, no mesmo
 * padrão dos demais carrosséis (.carrossel, js/core/rolagem.js): chips com o medalhão colorido e o nome, o da tela
 * atual em destaque e sempre à vista. Em janela larga a mesma lista continua o menu lateral em coluna. */
.cfg-menu-lista.carrossel { display: block; overflow: visible; max-width: none; }
@media (max-width: 900px) {
  :root:not([data-visual]) .cfg-layout .cfg-nav { padding: 6px 8px; }
  :root:not([data-visual]) .cfg-layout .cfg-nav .cfg-seletor { display: none; }
  :root:not([data-visual]) .cfg-layout .cfg-nav .cfg-menu-lista.carrossel {
    display: flex; position: static; flex-direction: row; align-items: center; gap: 6px;
    max-height: none; padding: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
    background: none; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  :root:not([data-visual]) .cfg-nav .cfg-grupo { display: contents; }
  :root:not([data-visual]) .cfg-nav .cfg-grupo-titulo, :root:not([data-visual]) .cfg-nav .cfg-link-frase { display: none; }
  :root:not([data-visual]) .cfg-nav .cfg-link {
    flex: 0 0 auto; min-height: 36px; padding: 0 12px 0 5px; gap: 6px; border-radius: var(--radius-pill);
    background: var(--tonal); white-space: nowrap; scroll-snap-align: center;
  }
  :root:not([data-visual]) .cfg-nav .cfg-link:hover { background: var(--tonal-hover); }
  :root:not([data-visual]) .cfg-nav .cfg-link[aria-current="page"] { background: var(--accent-soft); }
  :root:not([data-visual]) .cfg-nav .cfg-link-textos { flex-direction: row; }
}

/* Aparência: os três seletores ocupam só o que precisam (sem o piso de 64 px do azulejo e sem esticar a coluna). */
.cfg .cfg-ap-controles .cfg-ap-campo { align-items: flex-start; }
.cfg .cfg-ap-controles .seg.cfg-seg-ico { width: fit-content; gap: 2px; padding: 2px; }
.cfg .cfg-ap-controles .seg.cfg-seg-ico button { min-inline-size: 0; }
/* Tela larga: temas (carrossel) e os três seletores dividem a MESMA linha, o cartão fica com metade da altura. */
@media (min-width: 1280px) {
  :root:not([data-visual]) .cfg-secao-rapido.cfg-rapido-abaixo { flex-direction: row; align-items: flex-end; gap: 14px; }
  :root:not([data-visual]) .cfg-rapido-abaixo .cfg-temas-rapidos { flex: 1 1 0; min-width: 0; }
  :root:not([data-visual]) .cfg-rapido-abaixo .cfg-ap-controles { flex: none; gap: 6px 14px; }
}