/* ═══════════════════════════════════════════════════════════════════════
   BLOCO 38 — AS TELAS DAS CONFIGURAÇÕES

   Configurações deixou de ser um rolo de cinco telas de altura com quatro
   jeitos de salvar: virou um ÍNDICE que aponta para cinco telas filhas.

   As telas filhas NÃO têm CSS de navegação próprio: elas entram no
   `is-mgr-fullscreen` que o app já usava para as outras secundárias de
   página, e é ele que esconde a barra de baixo e o cabeçalho da marca
   ([38.1]H). Aqui só mora o cabeçalho de 58 px delas.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── [38.1]B O CARTÃO DA IDENTIDADE, em cima de tudo ───────────────── */
.cfg-identidade {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 72px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cfg-id-foto {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
}

.cfg-id-txt {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.cfg-id-nome {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfg-id-sub {
  font-size: 12.5px;
  color: var(--txt2);
  line-height: 1.2;
}

/* ── [38.1]C AS CINCO LINHAS, de 64 px ─────────────────────────────── */
.cfg-lista {
  padding: 0;
  overflow: hidden;
}

.cfg-linha {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 64px;
  padding: 0 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cfg-lista .cfg-linha:last-child {
  border-bottom: 0;
}

.cfg-linha-ic {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--txt2);
}

.cfg-linha-ic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cfg-linha-txt {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.cfg-linha-nome {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.cfg-linha-fato {
  font-size: 12.5px;
  color: var(--txt2);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfg-linha-seta {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--txt2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* [38.1]E RECEBIMENTOS DESCONECTADO é a ÚNICA na cor da marca — a lei de
   UMA COR POR TELA: aqui a cor marca a única coisa que pede ação. */
.cfg-linha.is-acento .cfg-linha-ic {
  background: var(--brand-soft);
  color: var(--brand);
}

.cfg-linha.is-acento .cfg-linha-fato {
  color: var(--brand);
  font-weight: 600;
}

/* [38.1]F O "SAIR": linha igual às outras, sem setinha e sem cor de marca —
   sair não destrói nada ([27.3]B), e não merece um botão de "Salvar". */
.cfg-lista--sair {
  margin-top: 0.25rem;
}

.cfg-linha--sair .cfg-linha-nome {
  color: #C9C4B8;
}

/* [38.1]G O selo da versão, centralizado no rodapé. O TEXTO vem de
   versionBadgeText(), a mesma função do selo do menu lateral. */
.cfg-versao {
  margin: 0.35rem 0 0;
  text-align: center;
  font-size: 11px;
  color: #3A3733;
}

/* ── [38.1]H O CABEÇALHO DAS TELAS FILHAS ──────────────────────────── */
.cfg-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 58px;
}

.cfg-voltar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.cfg-voltar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cfg-head-titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

/* ── [38.2] MARCA E APARÊNCIA ──────────────────────────────────────── */
.cfg-cartao-rotulo {
  margin: 0 0 0.6rem;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt2);
}

.cfg-logo-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.cfg-logo-mini {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
}

.cfg-logo-mini.is-empty {
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--txt2);
}

.cfg-logo-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cfg-btn-36 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

/* [38.2]E O bloco que o app escondia: o aluno VÊ a marca escolhida aqui.
   É fato medido no [37.6]C, não promessa. */
.cfg-aviso-aluno {
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft);
}

.cfg-aviso-titulo {
  margin: 0 0 0.3rem;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand);
}

.cfg-aviso-txt {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--txt2);
}

.cfg-nota {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--txt2);
}

/* [38.2]G O rodapé fixo, no padrão do [30.2]A: Cancelar com 116 px e o
   salvar ocupando o resto, os dois sempre visíveis. */
.cfg-rodape {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.cfg-rodape-cancelar {
  flex: 0 0 116px;
  min-height: 46px;
}

.cfg-rodape-salvar {
  flex: 1 1 auto;
  min-height: 46px;
}

/* O espaço que impede o rodapé fixo de cobrir o fim do conteúdo. */
.cfg-rodape-espaco {
  height: 74px;
}

/* ── [38.3] MENSAGENS E MODELOS ────────────────────────────────────── */
.cfg-modelos {
  display: grid;
  gap: 0.75rem;
}

/* [38.3]B A prévia COLADA no texto que ela mostra, no mesmo cartão. */
.cfg-previa {
  margin-top: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
}

.cfg-previa-rotulo {
  margin: 0 0 0.25rem;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--txt2);
}

.cfg-previa-txt {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* [38.3]C No lugar dos três parágrafos de sintaxe, UMA linha de ação. */
.cfg-vars-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 40px;
  margin-top: 0.5rem;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.cfg-vars-linha svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* [38.3]D O campo de horas com 96 px e o texto AO LADO, não embaixo. */
.cfg-horas-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.cfg-horas-campo {
  flex: 0 0 96px;
}

.cfg-horas-txt {
  flex: 1 1 auto;
  margin: 0;
  padding-top: 1.35rem;
  font-size: 12px;
  line-height: 1.4;
  color: var(--txt2);
}

/* Rodapé de um botão só (Salvar modelos, largura inteira). */
.cfg-rodape--um .cfg-rodape-salvar {
  flex: 1 1 auto;
}

/* ── [38.5] O MODELO DO CONTRATO EM TELA INTEIRA ───────────────────── */
/* Editar um contrato de mais de cem linhas por uma janela de três linhas no
   celular não é possível — então o texto ocupa a tela toda. */
.cfg-contrato-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.cfg-contrato-txt {
  flex: 1 1 auto;
  width: 100%;
  min-height: 58vh;
  resize: none;
  font-size: 13px;
  line-height: 1.55;
}

.cfg-tela--contrato .cfg-rodape {
  align-items: center;
}

.cfg-tela--contrato .cfg-vars-linha {
  margin-top: 0;
  flex: 1 1 auto;
  width: auto;
}

.cfg-tela--contrato .cfg-rodape-salvar {
  flex: 0 0 116px;
}

/* ── [38.4] A FOLHA DAS VARIÁVEIS ──────────────────────────────────── */
.cfg-vars-sub {
  margin: 0 0 0.9rem;
  font-size: 12.5px;
  color: var(--txt2);
}

.cfg-var-grupo {
  margin-bottom: 1.1rem;
}

.cfg-var-grupo-tit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--txt2);
}

/* O fio que segue o rótulo do grupo. */
.cfg-var-grupo-tit::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.cfg-var-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* [38.4]B As variáveis viram ETIQUETAS de 32, em largura fixa. */
.cfg-var {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 32px;
  padding: 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  cursor: pointer;
}

/* [38.4]D O que está VAZIO no perfil aparece marcado — usar agora sai em
   branco no contrato, e a folha diz isso antes de o professor descobrir
   pelo PDF. */
.cfg-var.is-vazia {
  color: #DA8E81;
  border-color: rgba(218, 142, 129, 0.45);
}

.cfg-var-falta {
  margin: 0.45rem 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #DA8E81;
}

.cfg-var-preencher {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* [38.4]E A sintaxe condicional, explicada em português. */
.cfg-var-cond {
  margin-top: 0.4rem;
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
}

.cfg-var-cond-tit {
  margin: 0 0 0.35rem;
  font-size: 13.5px;
  font-weight: 700;
}

.cfg-var-cond-txt {
  margin: 0 0 0.5rem;
  font-size: 12px;
  line-height: 1.45;
  color: var(--txt2);
}

.cfg-var-cond-ex {
  margin: 0 0 0.5rem;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.cfg-var-cond-chave {
  color: var(--brand);
}

/* ── [38.6] AVISOS NO CELULAR ──────────────────────────────────────── */
/* [38.6]D Não tem botão de salvar — eles salvam no toque, e a tela diz. */
.cfg-contexto {
  margin: 0;
  font-size: 12.5px;
  color: var(--txt2);
}

.cfg-aviso-linha {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 64px;
  padding: 0 0.9rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.cfg-lista .cfg-aviso-linha:last-child {
  border-bottom: 0;
}

.cfg-aviso-linha input[type="checkbox"] {
  flex: 0 0 auto;
}

/* ── [38.7]/[38.8] RECEBIMENTOS ────────────────────────────────────── */
.cfg-estado {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* Marcador vazado quando falta, cheio quando está. */
.cfg-marcador {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--txt2);
  background: transparent;
}

.cfg-marcador.is-cheio {
  border-color: var(--brand);
  background: var(--brand);
}

.cfg-estado-txt-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.cfg-estado-tit {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.cfg-estado-tit-menor {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
}

.cfg-estado-conta {
  margin: 0.1rem 0 0;
  font-size: 12.5px;
  color: var(--txt2);
}

.cfg-estado-txt {
  margin: 0.15rem 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--txt2);
}

.cfg-chave input {
  min-height: 46px;
}

/* O link de texto ("Onde achar a minha chave", "Atualizar"). */
.cfg-link {
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* [38.7]E O que muda ao conectar — três linhas de marcador. */
.cfg-bullets {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
}

.cfg-bullets li {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--txt2);
}

/* [38.8]B A frase do dinheiro, que agora só existe no estado conectado e
   aponta para a conta que está na tela logo acima. */
.cfg-dinheiro {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* [38.8]C Em sandbox, o aviso que o selo sozinho não dava. */
.cfg-sandbox {
  margin: 0.6rem 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--brand);
}

.cfg-erro {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #DA8E81;
}

.cfg-eventos-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.4rem;
  margin-bottom: 0.6rem;
}

.cfg-eventos-topo .cfg-cartao-rotulo {
  margin: 0;
}

.cfg-eventos-topo .cfg-link {
  margin-top: 0;
}

/* [38.8]F A cobrança de teste não é ação principal. */
.cfg-btn-superficie {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* [38.8]G Desconectar no fim, centralizado e apagado. */
.cfg-desconectar {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  text-align: center;
  margin-top: 0.4rem;
}

.cfg-desconectar-btn {
  border: 0;
  padding: 0.4rem;
  background: none;
  color: var(--txt2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

/* [54.0 g] O AVISO de proximidade em "Marca e aparência": a cor escolhida
   cai perto demais de uma cor de tipo ou de estado. Aviso, não recusa. */
.theme-customizer .tc-aviso {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgb(from var(--estado-espera) r g b / 0.45);
  border-radius: 10px;
  background: rgb(from var(--estado-espera) r g b / 0.08);
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.4;
}
.theme-customizer .tc-aviso[hidden] { display: none; }