/* =========================================================================
   Visual calmo (05/10/2026) — inspirado no AgentePro
   =========================================================================
   O Victor, depois da engenharia reversa de 04/10: *"O layout dele está muito
   melhor que o nosso."* Medido lá: fundo cinza bem claro, cartão branco com
   borda de 1px e **sem sombra**, raio pequeno (6–8px), lateral **clara** com
   borda, uma cor de destaque só, títulos de bloco em caixa normal e sem faixa
   de fundo, botões mais baixos.

   É uma camada por cima do `prefiro_tema.css`, e não uma reescrita: tudo aqui
   vive sob `html.prefiro-visual-calmo`, que o `base_site.html` liga pela
   desde 05/10/2026 é o visual do CRM inteiro (o Victor tirou a escolha do
   clássico). Toda regra vive sob a classe, e o tema por baixo continua sendo
   o de antes — é o que permite voltar atrás tirando uma linha do template.

   O que **não** muda, de propósito:
   - a cor da marca (o vermelho da Prefiro) continua sendo o destaque único;
   - a cor de cada grupo do menu (DEBUG 26/09, item 1, pedido do Victor), só
     escurecida para ler sobre a lateral clara;
   - a caixa alta, que mora no dado de cliente (`apps/caixa_alta.py`);
   - a densidade: tamanhos de letra e alturas de campo são os do tema.
   ========================================================================= */

html.prefiro-visual-calmo,
html.prefiro-visual-calmo[data-theme="light"] {
  --fundo: #f6f6f7;
  --superficie: #ffffff;
  --superficie-2: #fafafa;
  --superficie-3: #f4f4f5;

  --texto: #18181b;
  --texto-2: #52525b;
  /* #71717a do AgentePro dá 4,3:1 sobre o fundo; um tom acima passa de 4,5. */
  --texto-3: #61616a;

  --linha: #e4e4e7;
  --linha-forte: #d4d4d8;

  --faixa: #fafafa;
  --faixa-marca: #fdf7f5;
  --cabecalho-tabela: #f4f4f5;
  --cabecalho-tabela-texto: #3f3f46;

  /* A lateral clara, separada do conteúdo por uma borda. */
  --lateral: #ffffff;
  --lateral-2: #f4f4f5;
  --lateral-texto: #3f3f46;
  --lateral-texto-forte: #18181b;
  --lateral-texto-fraco: #61616a;

  /* As cores dos grupos, escurecidas: as do tema foram escolhidas para fundo
     escuro e somem sobre branco (o amarelo da Gestão dava 1,6:1). */
  --grupo-painel: #b42000;
  --grupo-comercial: #c2410c;
  --grupo-operacao: #1d4ed8;
  --grupo-financeiro: #047857;
  --grupo-clientes: #6d28d9;
  --grupo-gestao: #a16207;
  --grupo-configuracao: #be185d;
  --grupo-equipe: #0e7490;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;

  /* Sem sombra: a borda separa. `0 0 #0000` em vez de `none` porque há
     regras que somam a sombra do token a outra (`var(--sombra-2), inset …`),
     e `none` numa lista invalida a declaração inteira. */
  --sombra-1: 0 0 #0000;
  --sombra-2: 0 0 #0000;
  --sombra-3: 0 10px 30px rgba(24, 24, 27, .10), 0 1px 3px rgba(24, 24, 27, .06);
}

/* --- O escuro do visual calmo --------------------------------------------
   O Victor (05/10/2026): *"Dá uma atenção para o tema escuro, pois estava
   horrível de usar com aquele contraste preto/vermelho (fundo/letras)."*

   Duas mudanças contra isso: o fundo deixa de ser quase preto e vira grafite
   (o contraste máximo cansa tanto quanto o mínimo), e o texto de destaque —
   link, nome do cliente, item atual do menu — deixa de ser vermelho saturado
   e vira um tom claro e dessaturado da marca. O vermelho cheio fica só onde ele
   é fundo (o botão principal, com letra branca) e no que é alerta de verdade.

   Repete **todos** os tokens da versão clara: a regra base acima tem a mesma
   especificidade do `html[data-theme="dark"]` do tema e viria depois dele —
   sem repetir aqui, o calmo escuro herdaria o texto escuro do claro. */
@media (prefers-color-scheme: dark) {
  html.prefiro-visual-calmo:not([data-theme="light"]) {
    --fundo: #161618;
    --superficie: #1d1d20;
    --superficie-2: #222226;
    --superficie-3: #29292e;
    --texto: #ececef;
    --texto-2: #b6b6bf;
    --texto-3: #9d9da7;
    --linha: #2f2f35;
    --linha-forte: #3c3c43;
    --linha-campo: #6b6b75;
    --faixa: #1a1a1d;
    --faixa-marca: #221c1b;
    --cabecalho-tabela: #232327;
    --cabecalho-tabela-texto: #c9c9d1;
    /* O vermelho da marca "fechado" para o escuro (Victor, 05/10/2026: "dá
       uma fechada nesse tom de vermelho pra suavizar"): tijolo dessaturado no
       lugar do #b42000 vivo. Letra branca sobre ele dá 7:1 — lê-se bem sem
       brilhar. Destaque em texto num vermelho "bebê", claro e suave. */
    --marca: #8c4640;
    --marca-forte: #a0554e;
    --marca-clara: #c0817a;
    --marca-texto: #ecb5ae;
    --marca-hover: #f5d0cb;
    --marca-suave: #2b2120;
    --erro: #b0574f;
    --lateral: #1d1d20;
    --lateral-2: #29292e;
    --lateral-texto: #c9c9d1;
    --lateral-texto-forte: #fafafa;
    --lateral-texto-fraco: #a1a1aa;
    --grupo-painel: #f2b8a6;
    --grupo-comercial: #fdba74;
    --grupo-operacao: #93c5fd;
    --grupo-financeiro: #6ee7b7;
    --grupo-clientes: #c4b5fd;
    --grupo-gestao: #fcd34d;
    --grupo-configuracao: #f9a8d4;
    --grupo-equipe: #67e8f9;
    --sombra-3: 0 10px 30px rgba(0, 0, 0, .45);
    /* Os alertas, em tons mais claros e menos saturados: continuam lidos como
       vermelho, âmbar e verde, sem a letra vibrando contra o fundo. */
    --erro-texto: #f2a7a0;
    --erro-suave: #33201f;
    --erro-linha: #5a3330;
    --aviso-texto: #f0cf8e;
    --aviso-suave: #2e2719;
    --ok-texto: #8fdcaa;
    --ok-suave: #1a2a20;
    --info-texto: #a6c8f5;
    --info-suave: #1b2534;
  }
}
html.prefiro-visual-calmo[data-theme="dark"] {
    --fundo: #161618;
    --superficie: #1d1d20;
    --superficie-2: #222226;
    --superficie-3: #29292e;
    --texto: #ececef;
    --texto-2: #b6b6bf;
    --texto-3: #9d9da7;
    --linha: #2f2f35;
    --linha-forte: #3c3c43;
    --linha-campo: #6b6b75;
    --faixa: #1a1a1d;
    --faixa-marca: #221c1b;
    --cabecalho-tabela: #232327;
    --cabecalho-tabela-texto: #c9c9d1;
    /* O vermelho da marca "fechado" para o escuro (Victor, 05/10/2026: "dá
       uma fechada nesse tom de vermelho pra suavizar"): tijolo dessaturado no
       lugar do #b42000 vivo. Letra branca sobre ele dá 7:1 — lê-se bem sem
       brilhar. Destaque em texto num vermelho "bebê", claro e suave. */
    --marca: #8c4640;
    --marca-forte: #a0554e;
    --marca-clara: #c0817a;
    --marca-texto: #ecb5ae;
    --marca-hover: #f5d0cb;
    --marca-suave: #2b2120;
    --erro: #b0574f;
    --lateral: #1d1d20;
    --lateral-2: #29292e;
    --lateral-texto: #c9c9d1;
    --lateral-texto-forte: #fafafa;
    --lateral-texto-fraco: #a1a1aa;
    --grupo-painel: #f2b8a6;
    --grupo-comercial: #fdba74;
    --grupo-operacao: #93c5fd;
    --grupo-financeiro: #6ee7b7;
    --grupo-clientes: #c4b5fd;
    --grupo-gestao: #fcd34d;
    --grupo-configuracao: #f9a8d4;
    --grupo-equipe: #67e8f9;
    --sombra-3: 0 10px 30px rgba(0, 0, 0, .45);
    /* Os alertas, em tons mais claros e menos saturados: continuam lidos como
       vermelho, âmbar e verde, sem a letra vibrando contra o fundo. */
    --erro-texto: #f2a7a0;
    --erro-suave: #33201f;
    --erro-linha: #5a3330;
    --aviso-texto: #f0cf8e;
    --aviso-suave: #2e2719;
    --ok-texto: #8fdcaa;
    --ok-suave: #1a2a20;
    --info-texto: #a6c8f5;
    --info-suave: #1b2534;
  }

/* --- A lateral ------------------------------------------------------------ */
html.prefiro-visual-calmo .prefiro-lateral {
  border-right: 1px solid var(--linha);
  padding: 12px 8px 32px;
}
html.prefiro-visual-calmo .prefiro-lateral::-webkit-scrollbar-thumb { background: var(--linha-forte); }
html.prefiro-visual-calmo .prefiro-lateral-item {
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: .85rem;
}
html.prefiro-visual-calmo .prefiro-lateral-item:hover { background: var(--lateral-2); }
/* "Você está aqui": o fundo suave da marca, sem o degradê e a barra do tema
   escuro — no claro eles pesavam mais que o próprio conteúdo. */
html.prefiro-visual-calmo .prefiro-lateral-item.atual {
  background: var(--marca-suave);
  box-shadow: none;
  font-weight: 600;
}
html.prefiro-visual-calmo .prefiro-lateral a.atual:link,
html.prefiro-visual-calmo .prefiro-lateral a.atual:visited { color: var(--marca-texto); }
html.prefiro-visual-calmo .prefiro-lateral-grupo > summary { padding: 14px 10px 6px; }
html.prefiro-visual-calmo #nav-filter {
  border: 1px solid var(--linha);
  padding: 8px 10px;
}
html.prefiro-visual-calmo #nav-filter:focus { border-color: var(--marca); }
html.prefiro-visual-calmo .prefiro-lateral-recolher { border-color: var(--linha); }
html.prefiro-visual-calmo .prefiro-lateral-recolher:hover { border-color: var(--linha-forte); }

/* O recado e o botão "Tela" usavam a lateral escura como fundo e borda. */
html.prefiro-visual-calmo .prefiro-recado:not(.erro) { background: #18181b; color: #fafafa; }
html.prefiro-visual-calmo .prefiro-preferencias-abrir { border-color: var(--linha-forte); }
html.prefiro-visual-calmo .prefiro-preferencias-abrir:hover { border-color: var(--texto-3); }

/* --- Cabeçalho do topo ---------------------------------------------------- */
html.prefiro-visual-calmo #header { box-shadow: none; }

/* --- Blocos --------------------------------------------------------------- */
html.prefiro-visual-calmo .module { box-shadow: none; }
/* O título do bloco deixa de ser uma faixa cinza em maiúsculas espaçadas:
   vira título, em caixa normal, sobre o próprio branco do cartão. A linha de
   baixo continua — é ela que separa o título do conteúdo. */
html.prefiro-visual-calmo .module > h2,
html.prefiro-visual-calmo .module caption,
html.prefiro-visual-calmo .inline-group h2 {
  background: var(--superficie);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* --- Botões --------------------------------------------------------------- */
html.prefiro-visual-calmo .button,
html.prefiro-visual-calmo input[type="submit"],
html.prefiro-visual-calmo input[type="button"],
html.prefiro-visual-calmo .submit-row input,
html.prefiro-visual-calmo a.button {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-weight: 500;
  box-shadow: none;
}
html.prefiro-visual-calmo .button:hover,
html.prefiro-visual-calmo input[type="submit"]:hover,
html.prefiro-visual-calmo .submit-row input:hover,
html.prefiro-visual-calmo a.button:hover { box-shadow: none; }
html.prefiro-visual-calmo .button.default,
html.prefiro-visual-calmo input[type="submit"].default,
html.prefiro-visual-calmo .submit-row input.default { font-weight: 600; }

/* --- Tabelas --------------------------------------------------------------
   Cabeçalho de tabela em caixa normal, cinza claro, sem o espaçamento largo
   entre letras — o mesmo cabeçalho discreto do AgentePro. */
html.prefiro-visual-calmo thead th {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* O nome do grupo encostado no ícone, à esquerda — no tema ele ficava no meio
   da linha, entre o ícone e a seta, e o olho não achava o começo. */
html.prefiro-visual-calmo .prefiro-lateral-grupo > summary {
  justify-content: flex-start;
  letter-spacing: .05em;
  font-weight: 650;
}
html.prefiro-visual-calmo .prefiro-lateral-grupo > summary .prefiro-lateral-rotulo { flex: 1 1 auto; text-align: left; }

/* --- Caixa normal em tudo que é da tela (05/10/2026) ----------------------
   O Victor: *"TODOS os dados de clientes devem estar em caixa alta. Todo o
   resto no CRM deve estar em modo normal."* O dado de cliente já vem em
   maiúscula do banco (`apps/caixa_alta.py`); rótulo, menu, botão e título não
   podem ser pintados em maiúscula por estilo. Uma regra só, com `!important`
   de propósito: o tema tem dezenas de rótulos em `uppercase`, e caçar um por
   um deixaria sempre o próximo para trás. */
html.prefiro-visual-calmo body,
html.prefiro-visual-calmo body * { text-transform: none !important; }

/* =========================================================================
   Acabamento (19/10/2026) — a moldura recua, o trabalho aparece
   =========================================================================
   O Victor pediu que o CRM "pareça criação de designer especializado e não um
   sistema genérico". A referência é a reforma de interface do Linear, que
   enuncia o que faltava aqui: o que não é a tarefa não disputa atenção que não
   ganhou; a estrutura se sente, não se vê; densidade sem sobrecarga.

   O que isso virou na prática:
   - a moldura (topo e lateral) no mesmo cinza do fundo, sem sombra: só os
     cartões do conteúdo são brancos, e o olho vai para eles;
   - o topo com controles de um só desenho (texto discreto, fundo no hover),
     em vez de pílulas rosadas ao lado de links soltos;
   - na listagem, uma barra só (busca + filtros) no lugar de cinco caixas
     empilhadas antes do primeiro registro; a ação em lote só aparece quando
     há linha marcada (o padrão de mercado para tabela de dados);
   - o título da tela e as ações dela na mesma linha;
   - números em algarismos de largura fixa: valores e datas alinham na coluna.

   Continua de propósito: a cor de cada grupo do menu (pedido do Victor em
   26/09), o vermelho da marca como destaque único, a caixa alta no dado de
   cliente e a densidade das listagens.
   ========================================================================= */

html.prefiro-visual-calmo {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.prefiro-visual-calmo h1,
html.prefiro-visual-calmo h2,
html.prefiro-visual-calmo h3 { text-wrap: balance; }
html.prefiro-visual-calmo table,
html.prefiro-visual-calmo .prefiro-valor,
html.prefiro-visual-calmo .prefiro-numero { font-variant-numeric: tabular-nums; }

/* --- Moldura: topo e lateral no cinza do fundo ----------------------------- */
html.prefiro-visual-calmo #header {
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
  min-height: 56px;
}
html.prefiro-visual-calmo .prefiro-lateral { background: var(--fundo); }
html.prefiro-visual-calmo .prefiro-lateral-item:hover { background: var(--superficie-3); }

/* "Você está aqui": o branco do cartão e texto forte. O rosado da marca
   somava uma nona cor a uma lateral que já tem oito (uma por grupo). */
html.prefiro-visual-calmo .prefiro-lateral-item.atual {
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--linha), 0 1px 2px rgba(24, 24, 27, .04);
}
html.prefiro-visual-calmo .prefiro-lateral a.atual:link,
html.prefiro-visual-calmo .prefiro-lateral a.atual:visited { color: var(--texto); }

/* O nome do grupo continua na cor dele, sem o peso de cabeçalho espaçado. */
html.prefiro-visual-calmo .prefiro-lateral-grupo > summary {
  letter-spacing: 0;
  font-weight: 600;
  font-size: .8rem;
}

/* "Recolher menu" deixa de ser um botão de borda do tamanho da lateral. */
html.prefiro-visual-calmo .prefiro-lateral-recolher {
  justify-content: flex-start;
  width: auto;
  padding: 5px 10px;
  border-color: transparent;
  color: var(--texto-3);
}
html.prefiro-visual-calmo .prefiro-lateral-recolher:hover {
  border-color: transparent;
  background: var(--superficie-3);
  color: var(--texto);
}

/* --- Topo: um desenho só para os controles -------------------------------- */
html.prefiro-visual-calmo #user-tools { gap: 2px; }
html.prefiro-visual-calmo #header .prefiro-link-painel,
html.prefiro-visual-calmo #user-tools > a:not(.prefiro-link-celular),
html.prefiro-visual-calmo #logout-form button,
html.prefiro-visual-calmo .prefiro-preferencias-abrir {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: .85rem;
  font-weight: 500;
  transition-property: background-color, color;
  transition-duration: 120ms;
}
html.prefiro-visual-calmo #header .prefiro-link-painel:link,
html.prefiro-visual-calmo #header .prefiro-link-painel:visited,
html.prefiro-visual-calmo #user-tools > a:not(.prefiro-link-celular):link,
html.prefiro-visual-calmo #user-tools > a:not(.prefiro-link-celular):visited,
html.prefiro-visual-calmo #logout-form button,
html.prefiro-visual-calmo .prefiro-preferencias-abrir { color: var(--texto-2) !important; }
/* `!important` só porque o tema pinta o link do Painel com ele. */
html.prefiro-visual-calmo #header .prefiro-link-painel:hover,
html.prefiro-visual-calmo #user-tools > a:not(.prefiro-link-celular):hover,
html.prefiro-visual-calmo #logout-form button:hover,
html.prefiro-visual-calmo .prefiro-preferencias-abrir:hover {
  background: var(--superficie-3);
  color: var(--texto) !important;
}
html.prefiro-visual-calmo .prefiro-saudacao { margin: 0 6px 0 10px; font-weight: 600; }

/* --- Título da tela e as ações dela na mesma linha ------------------------ */
html.prefiro-visual-calmo #content > h1 {
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -.012em;
}
@media (min-width: 768px) {
  html.prefiro-visual-calmo div.breadcrumbs {
    padding-left: calc(var(--lateral-largura) + 12px);
    font-size: .8rem;
  }
  html.prefiro-visual-calmo #content { position: relative; }
  html.prefiro-visual-calmo #content > #content-main > .object-tools {
    position: absolute;
    top: 22px;
    right: 12px;
    margin: 0;
  }
  html.prefiro-visual-calmo #content:has(> #content-main > .object-tools) > h1 {
    padding-right: min(46%, 520px);
    min-height: 40px;
  }
}

/* --- Listagem: uma barra só antes da tabela ------------------------------- */
html.prefiro-visual-calmo #changelist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 12px;
  align-items: center;
  border: 0;
  background: none;
  box-shadow: none;
}
html.prefiro-visual-calmo #changelist .changelist-form-container { display: contents; }
html.prefiro-visual-calmo #changelist > *,
html.prefiro-visual-calmo #changelist .changelist-form-container > * { grid-column: 1 / -1; min-width: 0; }
html.prefiro-visual-calmo #changelist #toolbar {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
}
html.prefiro-visual-calmo #changelist #changelist-filter {
  grid-column: 2;
  grid-row: 1;
  order: 0;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 6px;
}
html.prefiro-visual-calmo #changelist:not(:has(#toolbar)) #changelist-filter { grid-column: 1 / -1; }
html.prefiro-visual-calmo #changelist-filter > h2 { display: none; }
html.prefiro-visual-calmo #changelist-filter > details > summary {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}
html.prefiro-visual-calmo #toolbar #searchbar,
html.prefiro-visual-calmo #toolbar form input[type="submit"] { height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; }
html.prefiro-visual-calmo #changelist-filter > details > summary { height: 36px; min-height: 36px; }
/* "Buscar" é o Enter do campo: botão de apoio, não um segundo vermelho. */
html.prefiro-visual-calmo #toolbar form input[type="submit"] {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  color: var(--texto-2);
}
html.prefiro-visual-calmo #toolbar form input[type="submit"]:hover {
  background: var(--superficie-3);
  color: var(--texto);
}
html.prefiro-visual-calmo #changelist .toplinks {
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: transparent;
}

/* A ação em lote aparece quando há linha marcada — antes disso ela é só uma
   caixa a mais entre a pessoa e a lista. */
html.prefiro-visual-calmo #changelist-form:not(:has(#result_list tbody tr.selected)) > .actions { display: none; }
html.prefiro-visual-calmo #changelist-form > .actions {
  position: sticky;
  top: 8px;
  z-index: 30;
  box-shadow: var(--sombra-3);
}

/* Cabeçalho da tabela: rótulo discreto sobre o branco, a ordenação em texto
   forte — não em vermelho, que aqui quer dizer atraso. */
html.prefiro-visual-calmo #result_list thead th {
  background: var(--superficie);
  color: var(--texto-3);
  font-size: .8rem;
  font-weight: 600;
}
html.prefiro-visual-calmo #result_list thead th.sorted,
html.prefiro-visual-calmo #result_list thead th.sorted a:link,
html.prefiro-visual-calmo #result_list thead th.sorted a:visited { color: var(--texto); }

/* A ordenação numa seta ao lado do título, e não numa segunda linha de
   ícones que dobrava a altura do cabeçalho. Os controles completos (tirar a
   ordenação, inverter) aparecem por cima, à direita, quando o mouse passa. */
html.prefiro-visual-calmo #result_list thead th.sorted { position: relative; }
html.prefiro-visual-calmo #result_list thead th .sortoptions {
  position: absolute;
  top: 50%;
  right: 2px;
  margin: 0;
  padding: 2px 4px;
  border-radius: var(--r-sm);
  background: var(--superficie);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 120ms ease-out;
}
html.prefiro-visual-calmo #result_list thead th:hover .sortoptions,
html.prefiro-visual-calmo #result_list thead th:focus-within .sortoptions { opacity: 1; }
html.prefiro-visual-calmo #result_list thead th.sorted.ascending .text a::after { content: " ↑"; }
html.prefiro-visual-calmo #result_list thead th.sorted.descending .text a::after { content: " ↓"; }

/* --- Um vermelho por tela --------------------------------------------------
   No tema, todo `.button` nascia vermelho cheio — e os templates já diziam
   qual era a ação principal com `.default` (24 lugares) contra 67 botões
   comuns. O resultado era o dossiê com quatro vermelhos lado a lado e nenhum
   mais importante que o outro. Agora o comum é contorno; a cor fica com a
   ação principal ("Salvar", "Dar baixa", "+ Novo atendimento"). */
html.prefiro-visual-calmo .button:not(.default):not(.prefiro-botao-perigo),
html.prefiro-visual-calmo a.button:not(.default):not(.prefiro-botao-perigo) {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  color: var(--texto);
}
html.prefiro-visual-calmo #content .button:not(.default):not(.prefiro-botao-perigo):link,
html.prefiro-visual-calmo #content .button:not(.default):not(.prefiro-botao-perigo):visited,
html.prefiro-visual-calmo #content a.button:not(.default):not(.prefiro-botao-perigo):link,
html.prefiro-visual-calmo #content a.button:not(.default):not(.prefiro-botao-perigo):visited { color: var(--texto); }
html.prefiro-visual-calmo .button:not(.default):not(.prefiro-botao-perigo):hover,
html.prefiro-visual-calmo a.button:not(.default):not(.prefiro-botao-perigo):hover {
  background: var(--superficie-3);
  border-color: var(--texto-3);
  color: var(--texto);
}
html.prefiro-visual-calmo .button:active,
html.prefiro-visual-calmo input[type="submit"]:active { transform: scale(.98); }

/* --- O passo a passo do registro -------------------------------------------
   Era uma lista numerada com ✓/✗ coloridos, título de cada item em negrito
   sublinhado e o que falta em vermelho de erro. Faltar um passo não é erro: é
   o caminho. Agora cada passo tem uma marca redonda (verde feito, contorno
   pendente, âmbar lembrete), o nome em texto normal que sublinha ao passar o
   mouse, e o próximo passo em destaque — é para lá que o olho tem de ir. */
html.prefiro-visual-calmo .prefiro-revisao {
  padding: 10px 14px;
  border-left-width: 1px;
  background: var(--superficie);
}
html.prefiro-visual-calmo .prefiro-revisao ol {
  list-style: none;
  padding-left: 0;
  gap: 2px;
}
html.prefiro-visual-calmo .prefiro-revisao li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 8px;
  margin-left: -8px;
  border-radius: var(--r-sm);
}
html.prefiro-visual-calmo .prefiro-revisao li > span[aria-hidden="true"] {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  transform: translateY(2px);
}
html.prefiro-visual-calmo .prefiro-revisao-ok > span[aria-hidden="true"] {
  background: var(--ok-suave);
  color: var(--ok-texto);
}
html.prefiro-visual-calmo .prefiro-revisao-falta > span[aria-hidden="true"],
html.prefiro-visual-calmo .prefiro-revisao-lembrete > span[aria-hidden="true"] {
  color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--linha-campo);
}
html.prefiro-visual-calmo .prefiro-revisao-lembrete > span[aria-hidden="true"] { box-shadow: inset 0 0 0 1.5px var(--aviso); }
html.prefiro-visual-calmo .prefiro-revisao-falta strong,
html.prefiro-visual-calmo .prefiro-revisao li strong { color: var(--texto); font-weight: 550; }
html.prefiro-visual-calmo .prefiro-revisao-ok strong { color: var(--texto-2); font-weight: 500; }
html.prefiro-visual-calmo .prefiro-revisao li a {
  text-decoration: none;
}
html.prefiro-visual-calmo .prefiro-revisao li a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.prefiro-visual-calmo .prefiro-revisao-proximo { margin-left: -8px; padding: 3px 8px; }
html.prefiro-visual-calmo .prefiro-revisao-proximo > span[aria-hidden="true"] { box-shadow: inset 0 0 0 1.5px var(--aviso); }

/* --- A linha "Voltar · ? · Histórico" ---------------------------------------
   Três formatos numa linha: pílula, círculo e outra pílula maior, cada um com
   uma altura. Agora a mesma altura e o mesmo desenho dos botões de contorno. */
html.prefiro-visual-calmo .prefiro-acoes-topo { gap: 8px; margin-bottom: 12px; }
html.prefiro-visual-calmo .prefiro-voltar,
html.prefiro-visual-calmo .prefiro-acoes-topo .object-tools a,
html.prefiro-visual-calmo .object-tools a:not(.addlink) {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  box-shadow: none;
  font-size: .82rem;
  font-weight: 500;
}
html.prefiro-visual-calmo .object-tools a.addlink {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  box-shadow: none;
}
html.prefiro-visual-calmo .object-tools { display: flex; align-items: center; gap: 8px; }
html.prefiro-visual-calmo .object-tools li { margin: 0; }

/* Rótulo e botão do bloco de ações do registro: o rótulo é legenda do botão,
   não um título encostado nele. */
html.prefiro-visual-calmo .prefiro-cabecalho .prefiro-menu-item { display: grid; gap: 6px; align-content: start; }
html.prefiro-visual-calmo .prefiro-cabecalho .prefiro-menu-item > div > div[style] { margin-top: 0 !important; }
html.prefiro-visual-calmo .object-tools { float: none; height: auto; }
html.prefiro-visual-calmo .object-tools li { display: flex; float: none; height: auto; padding: 0; }
html.prefiro-visual-calmo #content .prefiro-revisao li a:link,
html.prefiro-visual-calmo #content .prefiro-revisao li a:visited { color: inherit; }

/* --- Cartões de indicador do Painel: o número protagonista, sem sobra ------ */
html.prefiro-visual-calmo .prefiro-cards { gap: 10px; }
html.prefiro-visual-calmo .prefiro-card { padding: 14px 16px; gap: 2px; }
html.prefiro-visual-calmo .prefiro-card-valor { font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em; }

/* --- Funil: colunas no cinza, cartões em branco ---------------------------
   A coluna branca com cartões brancos dentro era borda dentro de borda. A
   coluna vira um trilho cinza e o cartão é o que se destaca — o desenho dos
   quadros de negócio (Pipedrive, Trello, Linear). */
html.prefiro-visual-calmo { --coluna: #efeff1; }
@media (prefers-color-scheme: dark) {
  html.prefiro-visual-calmo:not([data-theme="light"]) { --coluna: #19191b; }
}
html.prefiro-visual-calmo[data-theme="dark"] { --coluna: #19191b; }
html.prefiro-visual-calmo .prefiro-coluna {
  background: var(--coluna);
  border-color: transparent;
}
html.prefiro-visual-calmo .prefiro-coluna .prefiro-cartao {
  border-color: var(--linha);
  box-shadow: 0 1px 2px rgba(24, 24, 27, .05);
}

/* «Mover» é a alternativa ao arrastar, para teclado e toque. Com mouse, ele
   aparece no canto do cartão quando o cartão é apontado ou recebe foco — antes
   era um botão em cada um dos 26 cartões, o elemento mais repetido do quadro.
   No toque (sem hover) continua sempre à vista. */
@media (hover: hover) and (pointer: fine) {
  html.prefiro-visual-calmo .prefiro-cartao { position: relative; }
  html.prefiro-visual-calmo .prefiro-cartao > .prefiro-cartao-mover {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 120ms ease-out;
  }
  html.prefiro-visual-calmo .prefiro-cartao:hover > .prefiro-cartao-mover,
  html.prefiro-visual-calmo .prefiro-cartao:focus-within > .prefiro-cartao-mover,
  html.prefiro-visual-calmo .prefiro-cartao > .prefiro-cartao-mover[aria-expanded="true"] { opacity: 1; }
}

/* --- Avatares: um tom por pessoa ------------------------------------------
   Eram todos o mesmo degradê roxo — vinte cartões com o mesmo círculo não
   ajudam a achar ninguém. Seis tons suaves, letra escura do mesmo matiz
   (todos acima de 4,5:1), escolhidos pelo nome (filtro `tom`): a mesma pessoa
   tem a mesma cor em toda tela. */
html.prefiro-visual-calmo .prefiro-avatar { font-weight: 650; }
html.prefiro-visual-calmo .prefiro-tom-0 { background: #fde2e1; color: #9b1c1c; }
html.prefiro-visual-calmo .prefiro-tom-1 { background: #fcebd3; color: #854705; }
html.prefiro-visual-calmo .prefiro-tom-2 { background: #d7f1e1; color: #11643a; }
html.prefiro-visual-calmo .prefiro-tom-3 { background: #dce8fd; color: #1c4aa0; }
html.prefiro-visual-calmo .prefiro-tom-4 { background: #ebe3fd; color: #5626a8; }
html.prefiro-visual-calmo .prefiro-tom-5 { background: #d3eff1; color: #0d5961; }
@media (prefers-color-scheme: dark) {
  html.prefiro-visual-calmo:not([data-theme="light"]) .prefiro-tom-0 { background: #3a2222; color: #f6b4b0; }
  html.prefiro-visual-calmo:not([data-theme="light"]) .prefiro-tom-1 { background: #3a2c1a; color: #f3c98a; }
  html.prefiro-visual-calmo:not([data-theme="light"]) .prefiro-tom-2 { background: #1d3327; color: #92dcb0; }
  html.prefiro-visual-calmo:not([data-theme="light"]) .prefiro-tom-3 { background: #1e2a40; color: #a9c6f6; }
  html.prefiro-visual-calmo:not([data-theme="light"]) .prefiro-tom-4 { background: #2b2440; color: #c8b5f7; }
  html.prefiro-visual-calmo:not([data-theme="light"]) .prefiro-tom-5 { background: #1a3235; color: #93d6dc; }
}
html.prefiro-visual-calmo[data-theme="dark"] .prefiro-tom-0 { background: #3a2222; color: #f6b4b0; }
html.prefiro-visual-calmo[data-theme="dark"] .prefiro-tom-1 { background: #3a2c1a; color: #f3c98a; }
html.prefiro-visual-calmo[data-theme="dark"] .prefiro-tom-2 { background: #1d3327; color: #92dcb0; }
html.prefiro-visual-calmo[data-theme="dark"] .prefiro-tom-3 { background: #1e2a40; color: #a9c6f6; }
html.prefiro-visual-calmo[data-theme="dark"] .prefiro-tom-4 { background: #2b2440; color: #c8b5f7; }
html.prefiro-visual-calmo[data-theme="dark"] .prefiro-tom-5 { background: #1a3235; color: #93d6dc; }

html.prefiro-visual-calmo .prefiro-coluna-topo,
html.prefiro-visual-calmo .prefiro-coluna-topo + * { background: transparent; }

/* --- Entrar ----------------------------------------------------------------
   Um cartão no meio da tela, sobre o cinza do fundo. A marca no alto do
   cartão, título, uma linha de orientação, dois campos e o botão na largura
   do formulário (alvo grande, sem precisar mirar). */
html.prefiro-visual-calmo body.login { background: var(--fundo); }
html.prefiro-visual-calmo body.login #container {
  width: min(400px, calc(100% - 32px));
  min-height: 0;
  height: auto;
  margin: max(8vh, 24px) auto 24px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--r-xl);
  background: var(--superficie);
  box-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 12px 32px rgba(24, 24, 27, .06);
  overflow: hidden;
}
html.prefiro-visual-calmo body.login #header {
  justify-content: flex-start;
  min-height: 0;
  height: auto;
  padding: 28px 32px 0;
  border: 0;
  background: transparent;
}
html.prefiro-visual-calmo body.login #site-name a { font-size: 1.05rem; }
html.prefiro-visual-calmo body.login .main,
html.prefiro-visual-calmo body.login #content { min-height: 0; }
html.prefiro-visual-calmo body.login #content { padding: 18px 32px 32px; }
html.prefiro-visual-calmo body.login .prefiro-login-titulo {
  margin: 0 0 4px;
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -.012em;
}
html.prefiro-visual-calmo body.login .prefiro-login-nota {
  margin: 0 0 20px;
  color: var(--texto-2);
  font-size: .86rem;
}
html.prefiro-visual-calmo body.login .form-row {
  padding: 0 0 14px;
  border: 0;
}
html.prefiro-visual-calmo body.login .form-row label {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  float: none;
  width: auto;
  font-weight: 550;
  font-size: .86rem;
  color: var(--texto);
}
html.prefiro-visual-calmo body.login .form-row input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
}
html.prefiro-visual-calmo body.login .submit-row {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
html.prefiro-visual-calmo body.login .submit-row input[type="submit"] {
  width: 100%;
  height: 42px;
  margin: 0;
  font-size: .92rem;
}
html.prefiro-visual-calmo body.login #footer { display: none; }

/* --- Formulário: uma altura para todo campo ---------------------------------
   Medido no atendimento: texto 29px, data 31px, lista 40px, lado a lado na
   mesma linha. Campo de uma linha passa a ter 38px, seja qual for o tipo. */
html.prefiro-visual-calmo #content input[type="text"]:not(#searchbar),
html.prefiro-visual-calmo #content input[type="email"]:not(#searchbar),
html.prefiro-visual-calmo #content input[type="tel"]:not(#searchbar),
html.prefiro-visual-calmo #content input[type="number"]:not(#searchbar),
html.prefiro-visual-calmo #content input[type="url"]:not(#searchbar),
html.prefiro-visual-calmo #content input[type="password"]:not(#searchbar),
html.prefiro-visual-calmo #content input[type="date"]:not(#searchbar),
html.prefiro-visual-calmo #content input[type="time"]:not(#searchbar),
html.prefiro-visual-calmo #content input[type="datetime-local"]:not(#searchbar),
html.prefiro-visual-calmo #content input:not([type]),
html.prefiro-visual-calmo #content select:not([multiple]) {
  height: 38px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}
html.prefiro-visual-calmo .select2-container--admin-autocomplete .select2-selection--single {
  height: 38px;
  display: flex;
  align-items: center;
}

/* O título do bloco trazia a borda azul-petróleo do Django nas laterais. */
html.prefiro-visual-calmo .module > h2,
html.prefiro-visual-calmo .inline-group h2 {
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

/* "+", lápis, "×" e olho ao lado das listas: os desenhos do Django são verde,
   azul e vermelho. Em cinza, a cor volta a significar alguma coisa no
   formulário; a cor aparece quando o mouse chega. */
html.prefiro-visual-calmo .related-widget-wrapper-link img,
html.prefiro-visual-calmo .related-widget-wrapper-link,
html.prefiro-visual-calmo .inline-group .add-row a,
html.prefiro-visual-calmo a.addlink:not(.object-tools a) {
  filter: grayscale(1);
  opacity: .7;
  transition: opacity 120ms ease-out, filter 120ms ease-out;
}
html.prefiro-visual-calmo .related-widget-wrapper-link:hover,
html.prefiro-visual-calmo .related-widget-wrapper-link:hover img,
html.prefiro-visual-calmo .inline-group .add-row a:hover { filter: none; opacity: 1; }

/* "Como esta parte funciona" é ajuda, não chamada: cinza, peso normal. */
html.prefiro-visual-calmo #content details.prefiro-explicacao > summary {
  color: var(--texto-3);
  font-weight: 500;
}

/* --- Saúde da operação (19/10/2026) ---------------------------------------
   Uma linha por verificação: o número grande à esquerda, o que é e por que
   importa, e os registros a corrigir logo abaixo. Em ordem, a linha apaga. */
html.prefiro-visual-calmo .prefiro-saude-lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
html.prefiro-visual-calmo .prefiro-saude-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 18px;
  margin: 0;
}
html.prefiro-visual-calmo .prefiro-saude-numero { display: grid; align-content: start; gap: 2px; }
html.prefiro-visual-calmo .prefiro-saude-valor {
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
html.prefiro-visual-calmo .prefiro-saude-atencao .prefiro-saude-valor { color: var(--aviso-texto); }
html.prefiro-visual-calmo .prefiro-saude-ok { background: var(--superficie-2); }
html.prefiro-visual-calmo .prefiro-saude-ok .prefiro-saude-valor { color: var(--texto-3); }
html.prefiro-visual-calmo .prefiro-saude-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.prefiro-visual-calmo .prefiro-saude-texto p { margin: 4px 0 0; }
html.prefiro-visual-calmo .prefiro-saude-exemplos {
  display: grid;
  gap: 2px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
html.prefiro-visual-calmo .prefiro-saude-exemplos li { padding: 0; font-size: .86rem; }
html.prefiro-visual-calmo .prefiro-saude-exemplos a { text-decoration: none; }
html.prefiro-visual-calmo .prefiro-saude-exemplos a:hover { text-decoration: underline; text-underline-offset: 3px; }
html.prefiro-visual-calmo .prefiro-saude-tarefas td:not(:first-child),
html.prefiro-visual-calmo .prefiro-saude-tarefas th:not(:first-child) { text-align: right; }
@media (max-width: 640px) {
  html.prefiro-visual-calmo .prefiro-saude-item { grid-template-columns: 1fr; gap: 6px; }
}

/* O número pedido na hora, na tela de mensagens (fluidez, item 5). */
html.prefiro-visual-calmo .prefiro-telefone-na-hora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
html.prefiro-visual-calmo .prefiro-telefone-na-hora label { font-weight: 550; }
html.prefiro-visual-calmo .prefiro-telefone-na-hora input { width: 180px; }
html.prefiro-visual-calmo .prefiro-telefone-na-hora [data-telefone-status]:empty { display: none; }

/* --- Diálogo (o motivo da perda no funil, 19/10/2026) -------------------- */
html.prefiro-visual-calmo .prefiro-dialogo {
  width: min(420px, calc(100vw - 32px));
  padding: 22px 24px 20px;
  border: 1px solid var(--linha);
  border-radius: var(--r-xl);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-3);
}
html.prefiro-visual-calmo .prefiro-dialogo::backdrop { background: rgba(24, 24, 27, .35); }
html.prefiro-visual-calmo .prefiro-dialogo h2 { margin: 0 0 4px; padding: 0; font-size: 1.05rem; font-weight: 650; background: none; border: 0; }
html.prefiro-visual-calmo .prefiro-dialogo-opcoes { display: grid; gap: 2px; margin: 14px 0 18px; padding: 0; border: 0; }
html.prefiro-visual-calmo .prefiro-dialogo-opcoes label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
html.prefiro-visual-calmo .prefiro-dialogo-opcoes label:hover { background: var(--superficie-3); }
html.prefiro-visual-calmo .prefiro-dialogo-botoes { display: flex; justify-content: flex-end; gap: 8px; }
html.prefiro-visual-calmo .prefiro-saude-tarefas td.prefiro-saude-fora { color: var(--aviso-texto); font-weight: 600; }

/* --- Ver como (19/10/2026) -------------------------------------------------- */
html.prefiro-visual-calmo .prefiro-ver-como-menu { display: grid; gap: 14px; }
html.prefiro-visual-calmo .prefiro-ver-como-grupo h3 { margin: 0 0 4px; font-size: .8rem; font-weight: 600; color: var(--texto-3); }
html.prefiro-visual-calmo .prefiro-ver-como-grupo ul,
html.prefiro-visual-calmo .prefiro-ver-como-escopos,
html.prefiro-visual-calmo .prefiro-ver-como-dia { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
html.prefiro-visual-calmo .prefiro-ver-como-grupo li { font-size: .88rem; }
html.prefiro-visual-calmo .prefiro-ver-como-escopos li span { display: inline-block; min-width: 64px; color: var(--texto-3); }
html.prefiro-visual-calmo .prefiro-ver-como-dia a { text-decoration: none; }
html.prefiro-visual-calmo .prefiro-ver-como-dia a:hover { text-decoration: underline; text-underline-offset: 3px; }
html.prefiro-visual-calmo .prefiro-ver-como li,
html.prefiro-visual-calmo .prefiro-saude-exemplos li { list-style: none; }

/* --- Linha do tempo do negócio (fluidez, item 8) ------------------------- */
html.prefiro-visual-calmo .prefiro-linha-do-tempo { margin: 4px 0 10px; }
html.prefiro-visual-calmo .prefiro-linha-do-tempo > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  cursor: pointer;
  list-style-position: outside;
}
html.prefiro-visual-calmo .prefiro-linha-do-tempo-ultimo { color: var(--texto-2); font-size: .86rem; }
html.prefiro-visual-calmo .prefiro-linha-do-tempo ol {
  margin: 10px 0 0 4px;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--linha);
  list-style: none;
  display: grid;
  gap: 6px;
}
html.prefiro-visual-calmo .prefiro-linha-do-tempo li {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 10px;
  font-size: .86rem;
  list-style: none;
}
html.prefiro-visual-calmo .prefiro-linha-do-tempo li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: .45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--linha-campo);
  box-shadow: 0 0 0 2px var(--superficie);
}
html.prefiro-visual-calmo .prefiro-linha-do-tempo-contato::before { background: var(--info-texto) !important; }
html.prefiro-visual-calmo .prefiro-linha-do-tempo-cotacao::before { background: var(--aviso) !important; }
html.prefiro-visual-calmo .prefiro-linha-do-tempo-dinheiro::before { background: var(--ok) !important; }
html.prefiro-visual-calmo .prefiro-linha-do-tempo-dossie::before { background: var(--marca) !important; }
html.prefiro-visual-calmo .prefiro-linha-do-tempo time { color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.prefiro-visual-calmo #content .prefiro-linha-do-tempo li a:link,
html.prefiro-visual-calmo #content .prefiro-linha-do-tempo li a:visited { text-decoration: none; color: var(--texto); }
html.prefiro-visual-calmo .prefiro-linha-do-tempo li a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  html.prefiro-visual-calmo .prefiro-linha-do-tempo li { grid-template-columns: 1fr; gap: 0; }
}
/* No celular as tabelas da saúde rolam dentro do próprio bloco, e não a página. */
html.prefiro-visual-calmo .prefiro-saude .prefiro-bloco:has(> table) { overflow-x: auto; }

/* --- Entrada em duas etapas e segurança da conta (06/11/2026) -----------------
   O código e o QR no mesmo cartão do login: a segunda etapa parece continuação
   da primeira. O QR fica sempre sobre branco (no tema escuro, o app do celular
   não lê QR claro sobre escuro). O campo do código é grande e centrado: é
   digitado olhando para outro aparelho. */
html.prefiro-visual-calmo body.prefiro-acesso-largo #container { width: min(460px, calc(100% - 32px)); }
html.prefiro-visual-calmo body.login .form-row input.prefiro-acesso-codigo {
  height: 52px;
  font-size: 1.5rem;
  letter-spacing: .32em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
html.prefiro-visual-calmo .prefiro-acesso-passos { margin: 0 0 16px; padding-left: 20px; font-size: .9rem; color: var(--texto); }
html.prefiro-visual-calmo .prefiro-acesso-passos > li { margin: 0 0 12px; list-style: decimal; }
html.prefiro-visual-calmo .prefiro-acesso-qr { display: flex; justify-content: center; margin: 12px 0 6px; }
html.prefiro-visual-calmo .prefiro-acesso-qr svg {
  width: 196px;
  height: 196px;
  padding: 6px;
  border: 1px solid var(--linha);
  border-radius: var(--r-lg, 10px);
  background: #fff;
}
html.prefiro-visual-calmo .prefiro-acesso-chave code { font-size: .98rem; letter-spacing: .04em; word-break: break-all; }
html.prefiro-visual-calmo .prefiro-acesso-ajuda { margin: 12px 0 0; font-size: .86rem; color: var(--texto-2); }
html.prefiro-visual-calmo .prefiro-acesso-ajuda > summary { cursor: pointer; color: var(--texto-2); }
html.prefiro-visual-calmo .prefiro-acesso-rodape { margin: 16px 0 0; font-size: .86rem; color: var(--texto-2); }
html.prefiro-visual-calmo .prefiro-acesso-codigos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
}
html.prefiro-visual-calmo .prefiro-acesso-codigos > li {
  list-style: none;
  padding: 9px 6px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
html.prefiro-visual-calmo .prefiro-acesso-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
html.prefiro-visual-calmo a.prefiro-acesso-continuar {
  display: block;
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  padding: 0;
  line-height: 42px;
  text-align: center;
}
html.prefiro-visual-calmo .prefiro-seguranca-aparelhos { margin: 0; padding: 0; }
html.prefiro-visual-calmo .prefiro-seguranca-aparelhos > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
  list-style: none;
}
html.prefiro-visual-calmo .prefiro-seguranca-todos { margin: 12px 0 0; }
html.prefiro-visual-calmo .prefiro-seguranca-codigos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
html.prefiro-visual-calmo .prefiro-seguranca-codigos label { flex-basis: 100%; font-size: .9rem; }
html.prefiro-visual-calmo .prefiro-seguranca-codigos input { width: 9em; text-align: center; letter-spacing: .2em; }
html.prefiro-visual-calmo .prefiro-acesso-link input { width: 100%; font-family: ui-monospace, monospace; }
html.prefiro-visual-calmo .prefiro-acesso-corpo { grid-column: 1 / -1; padding: 12px 16px 16px; }
html.prefiro-visual-calmo .prefiro-acesso-corpo .prefiro-seguranca-aparelhos { max-width: 640px; }
html.prefiro-visual-calmo .prefiro-acesso-corpo .prefiro-acesso-acoes { margin: 12px 0 0; }
html.prefiro-visual-calmo .prefiro-acesso-codigos code { color: var(--texto); font-size: .95rem; letter-spacing: .04em; }
/* O "continuar" das telas de entrada é um link com cara de botão principal:
   no cartão do login, o tema não pintava o `a.button.default`. */
html.prefiro-visual-calmo body.login a.button.default.prefiro-acesso-continuar,
html.prefiro-visual-calmo body.login a.button.default.prefiro-acesso-continuar:link,
html.prefiro-visual-calmo body.login a.button.default.prefiro-acesso-continuar:visited {
  border: 1px solid var(--marca);
  background: var(--marca);
  color: #fff !important;
  font-weight: 600;
}
html.prefiro-visual-calmo body.login a.button.default.prefiro-acesso-continuar:hover { background: var(--marca-forte); }
/* «Versão de celular»: pílula da marca com texto branco. A regra do topo
   (texto cinza com `!important`) pintava também esta, e o texto sumia no
   vermelho (achado na conferência de 06/11/2026). */
html.prefiro-visual-calmo #user-tools > a.prefiro-link-celular:link,
html.prefiro-visual-calmo #user-tools > a.prefiro-link-celular:visited { color: #fff !important; }