/* ---------------- configuracoes ----------------
   Kit de configuracoes (Domo UI v2): area central de 1240px (1360px em tela
   larga), menu de 236px e conteudo com 44px de margem, para nao sobrar um
   formulario estreito colado na esquerda de um monitor largo. Grupos
   compactos com divisores internos em vez de um cartao por controle.

   Superficies proprias (--cfg-* em base.css): menu, conteudo, grupo e campo
   tem cada um o seu cinza, e os dois temas trocam juntos. Abaixo de 900px o
   perfil empilha; abaixo de 640px o menu vira um painel por cima.
   ------------------------------------------------ */
#settings-screen {
  position: fixed; inset: 0; z-index: 150;
  display: none;
  background: var(--cfg-fora);
  color: var(--cfg-texto);
  font-size: var(--fs-cfg);
}
#settings-screen.open { display: block; }

.cfg {
  height: 100%;
  max-width: var(--cfg-largura);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--cfg-menu) minmax(0, 1fr);
  border-left: 1px solid var(--cfg-divisor);
  border-right: 1px solid var(--cfg-divisor);
  overflow: hidden;
}

/* ---- menu ---- */
.cfg-lateral {
  min-height: 0;
  display: flex; flex-direction: column;
  padding: 30px 16px 20px;
  background: var(--cfg-lateral);
  border-right: 1px solid var(--cfg-divisor);
}
.cfg-marca { display: flex; align-items: center; padding: 0 14px 28px; color: var(--cfg-texto); }
/* rotulo de grupo do menu, em caixa alta como no kit */
.cfg-nav-titulo {
  padding: 4px 14px 12px;
  font-size: 10px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase;
  color: var(--cfg-apoio);
}
.cfg-nav { display: flex; flex-direction: column; gap: 5px; }
.cfg-nav-item, .cfg-sair-conta {
  display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 42px;
  padding: 11px 13px;
  border-radius: var(--cfg-raio-menu);
  text-align: left;
  font-size: var(--fs-cfg);
  color: var(--cfg-apoio);
  transition: background-color var(--mov-controle) var(--curva-entra), color var(--mov-controle) var(--curva-entra);
}
.cfg-nav-item:hover, .cfg-sair-conta:hover { background: var(--cfg-hover); color: var(--cfg-texto); }
/* a secao aberta: fundo, peso e o ponto - nunca so a cor */
.cfg-nav-item[aria-current="page"] { background: var(--cfg-selecao); color: var(--cfg-texto); font-weight: 750; }
.cfg-nav-item[aria-current="page"]::after {
  content: ""; margin-left: auto;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cfg-texto);
}
.cfg-nav-divisor { height: 1px; background: var(--cfg-divisor); margin: 20px 13px; }
.cfg-lateral-pe { margin-top: auto; padding-top: 24px; }
.cfg-sair-conta { font-size: 12px; }
.cfg-conta-mini {
  display: flex; align-items: center; gap: 10px;
  margin-top: 13px; padding: 17px 13px 0;
  border-top: 1px solid var(--cfg-divisor);
  min-width: 0;
}
.cfg-conta-mini-texto { display: flex; flex-direction: column; min-width: 0; }
.cfg-conta-mini-texto strong { font-size: 12px; }
.cfg-conta-mini-texto small { font-size: 10px; color: var(--cfg-apoio); }

/* ---- area principal ---- */
.cfg-principal {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--cfg-fundo);
}
.cfg-cabecalho {
  flex-shrink: 0;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 36px var(--cfg-margem) 25px;
}
.cfg-titulos { flex: 1; min-width: 0; }
.cfg-categoria {
  margin-bottom: 9px;
  font-size: 10px; font-weight: 750; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--cfg-apoio);
}
.cfg-titulos h1 {
  font-size: var(--fs-cfg-titulo); line-height: 36px; font-weight: 750; letter-spacing: -0.7px;
  color: var(--cfg-texto);
  overflow-wrap: anywhere;
}
.cfg-titulos h1:focus { outline: none; }
.cfg-descricao { margin-top: 7px; font-size: 12px; line-height: 20px; color: var(--cfg-apoio); }
.cfg-fechar { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 4px; }
.cfg-fechar span { font-size: 9px; letter-spacing: 0.5px; color: var(--cfg-apoio); }

.cfg-icone {
  width: 40px; height: 40px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: 9px;
  color: var(--cfg-apoio);
  transition: background-color var(--mov-controle) var(--curva-entra), color var(--mov-controle) var(--curva-entra);
}
.cfg-icone:hover:not(:disabled) { background: var(--cfg-hover); color: var(--cfg-texto); }
.cfg-icone:disabled { opacity: 0.45; cursor: not-allowed; }
.cfg-fechar-botao { border: 1px solid var(--cfg-divisor); border-radius: 50%; }
.cfg-abrir-menu, .cfg-fechar-menu { display: none; }
/* o veu so existe com o menu de celular aberto */
.cfg-veu { display: none; }

.cfg-corpo {
  flex: 1; min-height: 0;
  padding: 0 var(--cfg-margem) 32px;
  overflow-y: auto;
}

/* ---- blocos ---- */
.cfg-secao { margin-bottom: 26px; }
.cfg-secao-cabeca { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.cfg-secao-titulo { font-size: 14px; font-weight: 750; color: var(--cfg-texto); }
.cfg-grupo {
  background: var(--cfg-grupo);
  border: 1px solid var(--cfg-divisor);
  border-radius: var(--radius);
  overflow: hidden;
}
/* divisores internos: cada pedaco do grupo separado do anterior por uma linha */
.cfg-grupo:not(.cfg-form) > :not(:first-child):not(.cfg-linha-aviso) { border-top: 1px solid var(--cfg-divisor); }

.cfg-linha {
  display: flex; align-items: center; gap: 22px;
  min-height: 77px;
  padding: 18px 20px;
}
.cfg-linha-texto { flex: 1; min-width: 0; }
.cfg-linha-titulo { font-size: var(--fs-cfg); font-weight: 650; line-height: 21px; color: var(--cfg-texto); }
.cfg-linha-apoio { margin-top: 3px; max-width: 470px; font-size: 12px; line-height: 19px; color: var(--cfg-apoio); overflow-wrap: anywhere; }
.cfg-linha-controle { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cfg-linha.desligada .cfg-linha-titulo { color: var(--cfg-apoio); }
.cfg-linha-aviso { margin-top: -6px; padding: 0 20px 16px; font-size: 12px; line-height: 19px; color: var(--cfg-apoio); }

.cfg-apoio { font-size: 12px; line-height: 19px; color: var(--cfg-apoio); }
.cfg-rotulo {
  margin-bottom: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--cfg-apoio);
}
.cfg-selo {
  display: inline-block; flex: none;
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--cfg-selecao);
  font-size: 10px; font-weight: 750; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--cfg-texto);
  white-space: nowrap;
}
.cfg-nota { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 11px; line-height: 18px; color: var(--cfg-apoio); }
.cfg-nota .ico { flex: none; margin-top: 1px; }
.cfg-nota.com-erro, .com-erro { color: var(--cfg-perigo); }
.com-sucesso { color: var(--cfg-texto); }
.cfg-observacao {
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--cfg-borda);
  font-size: 12px; line-height: 20px; color: var(--cfg-apoio);
}
.cfg-erro { margin-top: 6px; font-size: 12px; line-height: 18px; color: var(--cfg-perigo); }
.cfg-erro[hidden] { display: none; }
.cfg-carregando { display: grid; place-items: center; padding: 48px 0; }
.cfg-falha { display: flex; align-items: center; gap: 16px; padding: 18px 20px; color: var(--cfg-perigo); font-size: 12px; }
.cfg-falha p { flex: 1; }

/* ---- controles ---- */
.cfg .btn {
  min-height: 38px; height: auto;
  padding: 8px 14px;
  border-radius: var(--cfg-raio-campo);
  font-size: 12px; font-weight: 700;
}
.cfg .btn.secondary { background: var(--cfg-campo); color: var(--cfg-texto); box-shadow: inset 0 0 0 1px var(--cfg-divisor); }
.cfg .btn.secondary:hover:not(:disabled) { background: var(--cfg-hover); }
.cfg .btn.ghost { background: transparent; color: var(--cfg-texto-2); }
.cfg .btn.ghost:hover:not(:disabled) { background: var(--cfg-hover); color: var(--cfg-texto); }
.cfg .btn:disabled { opacity: 0.45; }

.cfg-controle {
  width: 100%; min-height: 42px;
  padding: 10px 12px;
  background: var(--cfg-campo);
  border: 1px solid var(--cfg-borda);
  border-radius: var(--cfg-raio-campo);
  color: var(--cfg-texto);
  font-size: var(--fs-cfg); line-height: 20px;
  transition: border-color var(--mov-controle) var(--curva-entra), box-shadow var(--mov-controle) var(--curva-entra);
}
.cfg-controle::placeholder { color: var(--cfg-apoio); opacity: 1; }
.cfg-controle:focus-visible { outline: none; border-color: var(--foco); box-shadow: inset 0 0 0 1px var(--foco); }
.cfg-controle:disabled { opacity: 0.5; cursor: not-allowed; }
.cfg-controle[aria-invalid="true"] { border-color: var(--cfg-perigo); }
select.cfg-controle { padding-right: 28px; }
textarea.cfg-controle { min-height: 92px; resize: vertical; font-family: inherit; }
.cfg-linha select.cfg-controle { width: 250px; }

.cfg-campo { margin-bottom: 18px; min-width: 0; }
.cfg-campo label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--cfg-texto); }
.cfg-opcional { font-weight: 500; color: var(--cfg-apoio); }
.cfg-campo-pe { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 11px; line-height: 18px; color: var(--cfg-apoio); }
.cfg-contador { flex: none; font-variant-numeric: tabular-nums; }

/*
 * Interruptor: um <button role="switch">. O estado logico (aria-checked) muda
 * no clique; o pino so acompanha, em 120ms.
 */
.cfg-switch {
  position: relative; flex: none;
  width: 44px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--cfg-raio-campo);
}
.cfg-switch::before {
  content: "";
  width: 36px; height: 20px; border-radius: 20px;
  background: var(--cfg-selecao);
  box-shadow: inset 0 0 0 1px var(--cfg-borda);
  transition: background-color var(--mov-controle) var(--curva-entra), box-shadow var(--mov-controle) var(--curva-entra);
}
.cfg-switch::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -15px;
  border-radius: 50%;
  background: var(--cfg-apoio);
  transition: transform var(--mov-controle) var(--curva-entra), background-color var(--mov-controle) var(--curva-entra);
}
.cfg-switch[aria-checked="true"]::before { background: var(--brand); box-shadow: none; }
.cfg-switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--acao-texto); }
.cfg-switch:disabled { opacity: 0.45; cursor: not-allowed; }

.cfg-faixa { display: flex; align-items: center; gap: 12px; }
.cfg-faixa input[type="range"] { width: 150px; accent-color: var(--brand); cursor: pointer; }
.cfg-faixa input[type="range"]:disabled { cursor: not-allowed; opacity: 0.45; }
.cfg-faixa output { min-width: 40px; text-align: right; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

.cfg-tecla {
  display: inline-block; min-width: 48px;
  padding: 6px 12px;
  border: 1px solid var(--cfg-borda); border-bottom-width: 3px;
  border-radius: 6px;
  background: var(--cfg-campo);
  font: 600 12px var(--font); text-align: center;
  color: var(--cfg-texto);
}
.cfg-endereco { font-family: var(--mono); color: var(--cfg-texto-2); }
.cfg-versao { font-size: 11px; font-weight: 500; color: var(--cfg-apoio); }

/* expansivel: abre com um fade curto do conteudo (settings.js), sem medir altura */
.cfg-detalhe summary {
  display: flex; align-items: center; gap: 8px;
  padding: 15px 20px;
  list-style: none; cursor: pointer;
  font-size: 12px; font-weight: 650; color: var(--cfg-texto-2);
}
.cfg-detalhe summary::-webkit-details-marker { display: none; }
.cfg-detalhe summary::before {
  content: "";
  border: 4px solid transparent; border-left: 6px solid currentColor; border-right: 0;
  transition: transform var(--mov-controle) var(--curva-entra);
}
.cfg-detalhe[open] summary::before { transform: rotate(90deg); }
.cfg-detalhe summary:hover { color: var(--cfg-texto); }
.cfg-detalhe-corpo { padding: 0 20px 18px; font-size: 12px; line-height: 20px; color: var(--cfg-apoio); }
.cfg-detalhe-corpo p + p { margin-top: 8px; }
.cfg-detalhe-corpo strong { color: var(--cfg-texto-2); font-weight: 650; }

/* ---- meu perfil ---- */
.cfg-perfil {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cfg-previa);
  gap: 28px;
  align-items: start;
}
.cfg-avatar {
  width: var(--tamanho); height: var(--tamanho); flex: none;
  display: grid; place-items: center;
  border-radius: 50%; overflow: hidden;
  background: var(--avatar); color: var(--avatar-texto);
  font-size: calc(var(--tamanho) * 0.36); font-weight: 750;
}
.cfg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cfg-foto {
  display: flex; align-items: center; gap: 13px;
  margin-bottom: 25px; padding-bottom: 24px;
  border-bottom: 1px solid var(--cfg-divisor);
}
.cfg-foto-titulo { font-size: 12px; font-weight: 700; }
.cfg-botoes { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 6px; }
.cfg-perfil .cfg-botoes .btn { min-height: 32px; padding: 5px 10px; font-size: 11px; }

.cfg-previa { position: sticky; top: 0; }
.cfg-cartao { border: 1px solid var(--cfg-divisor); border-radius: var(--radius); background: var(--cfg-lateral); overflow: hidden; }
.cfg-cartao-banner { position: relative; height: 112px; overflow: hidden; background: var(--cfg-selecao); }
.cfg-cartao-banner.com-imagem { background-size: cover; background-position: center; }
/* o grafismo de faixas do kit, quando a pessoa ainda nao escolheu banner */
.cfg-listra { position: absolute; top: -25px; left: 37px; width: 14px; height: 160px; background: var(--cfg-campo); transform: rotate(30deg); }
.cfg-listra.dois { left: 64px; background: var(--cfg-hover); }
.cfg-cartao-simbolo { position: absolute; right: 20px; top: 8px; color: var(--cfg-texto); opacity: 0.16; transform: rotate(-12deg); }
.cfg-cartao-info { padding: 0 20px 21px; }
.cfg-cartao-info .cfg-avatar { position: relative; margin-top: -32px; box-shadow: 0 0 0 5px var(--cfg-lateral); }
.cfg-presenca { display: flex; align-items: center; gap: 6px; margin-top: 13px; font-size: 10px; color: var(--cfg-apoio); }
/* presenca e funcional: cor e texto juntos, nunca so a cor */
.cfg-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.cfg-ponto.idle { background: var(--yellow); }
.cfg-ponto.dnd { background: var(--red); }
.cfg-ponto.invisible { background: transparent; box-shadow: inset 0 0 0 2px var(--cfg-apoio); }
.cfg-cartao-nome { margin: 12px 0 2px; font-size: 20px; font-weight: 750; letter-spacing: -0.4px; overflow-wrap: anywhere; }
.cfg-cartao-tag { font-size: 11px; color: var(--cfg-apoio); overflow-wrap: anywhere; }
.cfg-cartao-status { margin-top: 15px; font-size: 12px; line-height: 20px; color: var(--cfg-texto-2); overflow-wrap: anywhere; }
.cfg-cartao-sobre { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--cfg-divisor); }
.cfg-cartao-sobre h4 { margin-bottom: 7px; font-size: 9px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--cfg-apoio); }
.cfg-cartao-sobre p { font-size: 12px; line-height: 20px; color: var(--cfg-texto-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.cfg-cartao [hidden] { display: none; }
.cfg-banner-ferramentas { margin-top: 16px; }

/* barra de salvar: so com alteracao pendente, embaixo do conteudo, sem cobrir campo */
.cfg-barra {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 13px var(--cfg-margem);
  background: var(--cfg-grupo);
  border-top: 1px solid var(--cfg-borda);
}
.cfg-barra[hidden] { display: none; }
.cfg-barra p { flex: 1; font-size: 12px; }
.cfg-modal-texto { color: var(--text-muted); font-size: 15px; line-height: 1.5; }

/* ---- aparencia ---- */
.cfg-temas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cfg-tema {
  display: block;
  padding: 10px;
  border: 1px solid var(--cfg-borda);
  border-radius: 10px;
  background: var(--cfg-grupo);
  cursor: pointer;
  transition: border-color var(--mov-controle) var(--curva-entra), box-shadow var(--mov-controle) var(--curva-entra);
}
.cfg-tema:hover { border-color: var(--cfg-texto-2); }
/* escolhido: borda de 2px (sem mudar o tamanho do cartao) e o radio cheio */
.cfg-tema:has(input:checked) { border-color: var(--cfg-texto); box-shadow: inset 0 0 0 1px var(--cfg-texto); }
.cfg-tema:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
/*
 * Miniatura de cada tema. As cores sao as do proprio tema retratado, fixas de
 * proposito: o cartao do Claro mostra o claro mesmo com o app no escuro.
 */
.cfg-tema-mini {
  height: 92px;
  display: grid; grid-template-columns: 22px 68px 1fr; gap: 1px;
  border-radius: 5px; overflow: hidden;
  background: #333333;
}
.cfg-tema-mini > span { padding: 10px 8px; }
.cfg-tema-mini .trilho { padding: 8px 5px; background: #101010; }
.cfg-tema-mini .trilho i { display: block; width: 11px; height: 11px; margin-bottom: 5px; border-radius: 4px; background: #555555; }
.cfg-tema-mini .canais { background: #181818; }
.cfg-tema-mini .conversa { background: #212121; }
.cfg-tema-mini .canais i, .cfg-tema-mini .conversa i { display: block; height: 4px; margin-bottom: 8px; border-radius: 3px; background: #484848; }
.cfg-tema-mini .conversa i:nth-child(2n) { width: 65%; background: #626262; }
.cfg-tema-mini.claro { background: #d5d5d5; }
.cfg-tema-mini.claro .trilho { background: #e7e7e7; }
.cfg-tema-mini.claro .trilho i { background: #9a9a9a; }
.cfg-tema-mini.claro .canais { background: #f1f1f1; }
.cfg-tema-mini.claro .conversa { background: #ffffff; }
.cfg-tema-mini.claro .canais i, .cfg-tema-mini.claro .conversa i { background: #b0b0b0; }
.cfg-tema-rotulo { display: flex; align-items: center; gap: 10px; padding: 12px 4px 3px; }
.cfg-tema-rotulo > span:first-child { flex: 1; min-width: 0; }
.cfg-tema-rotulo strong { display: block; font-size: var(--fs-cfg); }
.cfg-tema-rotulo small { display: block; margin-top: 3px; font-size: 11px; color: var(--cfg-apoio); }
.cfg-radio { width: 16px; height: 16px; flex: none; display: grid; place-items: center; border: 1px solid var(--cfg-borda); border-radius: 50%; }
.cfg-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cfg-texto); transform: scale(0); transition: transform var(--mov-controle) var(--curva-entra); }
.cfg-tema:has(input:checked) .cfg-radio::after { transform: none; }

.cfg-sons { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.cfg-som { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12px; color: var(--cfg-texto-2); border-bottom: 1px solid var(--cfg-divisor); }
.cfg-som:nth-last-child(-n+2) { border-bottom: 0; }
.cfg-som .cfg-icone { width: 32px; height: 32px; border-radius: 6px; }

/* ---- voz e video ---- */
.cfg-aparelhos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; }
.cfg-aparelhos .cfg-campo { margin: 0; }
.cfg-aparelhos-pe { display: flex; align-items: center; gap: 12px; padding: 13px 20px; }
.cfg-aparelhos-pe p { flex: 1; font-size: 11px; line-height: 18px; }

/* ---- minha conta ---- */
.cfg-identidade { display: flex; align-items: center; gap: 13px; padding: 20px; }
.cfg-identidade-texto { flex: 1; min-width: 0; }
.cfg-identidade strong { font-size: 15px; overflow-wrap: anywhere; }
.cfg-dados { margin: 0; }
.cfg-dado { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; }
.cfg-dado + .cfg-dado { border-top: 1px solid var(--cfg-divisor); }
.cfg-dado dt { font-size: 12px; color: var(--cfg-apoio); }
.cfg-dado dd { margin: 0; font-size: var(--fs-cfg); text-align: right; overflow-wrap: anywhere; }
.cfg-form { padding: 20px; }
.cfg-form-intro { margin-bottom: 18px; }
.cfg-form .cfg-campo { margin-bottom: 16px; }
.cfg-form-acoes { display: flex; align-items: center; gap: 12px; margin-top: 19px; }
.cfg-form-acoes p { flex: 1; font-size: 11px; }

/* ---- administracao ---- */
.cfg-admin-topo { display: flex; align-items: center; gap: 13px; padding: 22px 20px; }
.cfg-admin-icone { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--cfg-selecao); }
.cfg-numeros { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 25px 20px; }
/* o numero vem primeiro na tela e o nome embaixo, mas o leitor ouve "Canais, 19" */
.cfg-numero { display: flex; flex-direction: column-reverse; padding: 0 24px; border-right: 1px solid var(--cfg-divisor); min-width: 0; }
.cfg-numero:first-child { padding-left: 0; }
.cfg-numero:last-child { border-right: 0; }
.cfg-numero dd { margin: 0; font-size: 30px; font-weight: 650; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.cfg-numero dt { margin-top: 6px; font-size: 12px; color: var(--cfg-apoio); }

/* ---------------- tamanhos de tela ---------------- */
@media (min-width: 1700px) {
  .cfg { --cfg-largura: 1360px; --cfg-menu: 248px; --cfg-margem: 56px; --cfg-previa: 320px; }
  .cfg-cabecalho { padding-top: 42px; }
  .cfg-corpo { padding-top: 8px; }
  .cfg-perfil { gap: 40px; }
}

@media (max-width: 1100px) {
  .cfg { --cfg-menu: 210px; --cfg-margem: 28px; --cfg-previa: 246px; }
  .cfg-lateral { padding-left: 12px; padding-right: 12px; }
  .cfg-cabecalho { padding-top: 28px; padding-bottom: 22px; }
  .cfg-perfil { gap: 20px; }
  .cfg-linha { gap: 14px; }
  .cfg-linha select.cfg-controle { width: 205px; }
  .cfg-faixa input[type="range"] { width: 110px; }
  .cfg-aparelhos { gap: 14px; }
}

@media (max-width: 899px) {
  .cfg { --cfg-menu: 196px; }
  .cfg-perfil { grid-template-columns: 1fr; }
  /* a previa sobe para o topo, enxuta: o formulario vem logo abaixo */
  .cfg-previa { position: static; grid-row: 1; max-width: 360px; }
  .cfg-cartao-banner { height: 80px; }
  .cfg-cartao-sobre, .cfg-presenca { display: none; }
  .cfg-cartao-info { padding-bottom: 15px; }
  .cfg-aparelhos { grid-template-columns: 1fr; }
  .cfg-linha { align-items: flex-start; flex-wrap: wrap; }
  .cfg-linha-texto { min-width: 180px; }
  .cfg-linha-controle { max-width: 100%; }
  .cfg-linha select.cfg-controle { width: 100%; }
  .cfg-linha-controle:has(select) { width: 100%; }
  .cfg-temas { gap: 12px; }
  .cfg-tema-mini { grid-template-columns: 18px 42px 1fr; }
  .cfg-form-acoes { flex-wrap: wrap; }
  .cfg-form-acoes p { flex-basis: 100%; }
  .cfg-sons { grid-template-columns: 1fr; }
  .cfg-som:nth-last-child(2) { border-bottom: 1px solid var(--cfg-divisor); }
  .cfg-numero { padding: 0 14px; }
}

/* celular: o menu vira um painel por cima, aberto pelo botao do cabecalho */
@media (max-width: 639px) {
  .cfg { display: block; border: 0; --cfg-margem: 20px; }
  .cfg-lateral { display: none; }
  .cfg[data-menu="aberto"] .cfg-lateral, .cfg[data-menu="saindo"] .cfg-lateral {
    display: flex;
    position: fixed; inset: 0 auto 0 0; z-index: 2;
    width: min(310px, 90vw);
    padding-top: 24px;
  }
  .cfg-veu { display: none; position: fixed; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.6); }
  .cfg[data-menu="aberto"] .cfg-veu, .cfg[data-menu="saindo"] .cfg-veu { display: block; }
  .cfg[data-menu="saindo"] .cfg-lateral, .cfg[data-menu="saindo"] .cfg-veu { pointer-events: none; }
  .cfg-principal { height: 100%; }
  .cfg-cabecalho { gap: 10px; padding: 22px 20px 20px; }
  .cfg-categoria { margin-bottom: 5px; font-size: 9px; }
  .cfg-titulos h1 { font-size: 24px; line-height: 32px; }
  .cfg-fechar { margin-top: 0; }
  .cfg-fechar span { display: none; }
  .cfg-icone { width: 44px; height: 44px; }
  .cfg-abrir-menu { display: inline-grid; margin: 12px 0 0 -10px; }
  .cfg-fechar-menu { display: inline-grid; margin-left: auto; }
  .cfg-marca { padding-bottom: 24px; }
  .cfg-nav-item, .cfg-sair-conta { min-height: 46px; }
  .cfg-corpo { padding-bottom: 24px; }
  .cfg-secao { margin-bottom: 24px; }
  .cfg .btn { min-height: var(--controle-min); }
  .cfg-perfil { gap: 24px; }
  .cfg-previa { max-width: none; }
  .cfg-linha, .cfg-aparelhos, .cfg-form, .cfg-dado, .cfg-identidade { padding: 17px 16px; }
  .cfg-linha-texto { min-width: 140px; }
  .cfg-linha-controle:has(.cfg-faixa) { width: 100%; }
  .cfg-faixa { width: 100%; }
  .cfg-faixa input[type="range"] { flex: 1; width: auto; min-width: 50px; }
  .cfg-switch { width: 44px; height: 44px; }
  .cfg-som .cfg-icone { width: 44px; height: 44px; }
  .cfg-aparelhos-pe { flex-wrap: wrap; align-items: flex-start; padding: 15px 16px; }
  .cfg-aparelhos-pe p { flex-basis: 100%; }
  .cfg-temas { gap: 10px; }
  .cfg-tema-mini { height: 75px; grid-template-columns: 17px 30px 1fr; }
  .cfg-tema-mini .canais { padding: 10px 5px; }
  .cfg-tema-rotulo { align-items: flex-start; gap: 6px; padding: 10px 1px 3px; }
  .cfg-tema-rotulo small { display: none; }
  .cfg-dado { align-items: flex-start; gap: 10px; }
  .cfg-dado dd { max-width: 65%; font-size: 12px; }
  .cfg-numeros { padding: 22px 16px; }
  .cfg-numero { padding: 0 12px; }
  .cfg-numero dd { font-size: 26px; }
  .cfg-numero dt { font-size: 11px; }
  .cfg-admin-topo { flex-wrap: wrap; padding: 18px 16px; }
  .cfg-barra { flex-wrap: wrap; gap: 8px; padding: 12px 20px; }
  .cfg-barra p { flex-basis: 100%; margin-bottom: 3px; }
  .cfg-barra .btn { flex: 1; }
}