/*
 * Canais de atendimento (etapa D9b, redesenhado na G11) -- o formulário e os cards do
 * `canais_app` no site 2.
 *
 * **A D9b deixou este arquivo magro dizendo que não havia original para transcrever**, porque
 * a página `fale-conosco` do estático é um `<iframe>`. A G11 achou o original: aquela página
 * traz cinco `<div class="modal">`, quatro deles com **este** formulário -- mesmos campos, na
 * mesma ordem --, e o `main.css` os desenha por inteiro (`.modal`, `.modal-content`,
 * `.modal-close`, `.report-form .form-grid`, `.form-field`, `.form-captcha`, `.form-submit`,
 * `.form-feedback`). Eles são inalcançáveis -- nenhum botão aponta para eles --, e foi por
 * isso que ninguém tinha ido ler o que havia lá dentro.
 *
 * O que está abaixo é transcrição desse desenho (`main.css:3596-4132` e o bloco de celular em
 * 4237-4250), com três diferenças, todas anotadas na regra correspondente:
 *
 * 1. as cores viram tokens -- `#072F48` é `--seb-azul`, e o `#009FE3` do ícone de sucesso é o
 *    `--seb-azul-claro`;
 * 2. o diálogo é um `<dialog>` de verdade, e não um `<div>` com `.is-open`;
 * 3. os campos que somem no anonimato são alcançados por classe, e não pelo `<fieldset>` que
 *    a D9b tinha -- ver a regra do `:has()`.
 *
 * **A moldura continua não morando aqui**: onde o botão fica na página, e quanto ele mede, é
 * do `fale-conosco.css`, pela regra da D2.
 */

.canais__titulo {
  font-family: var(--seb-fonte-titulo);
  font-size: 28px;
  font-weight: 700;
  color: var(--seb-azul);
}

/*
 * As quatro abas de canal. `radio` escondido e rótulo visível -- o mesmo mecanismo do
 * seletor de idioma da C3, e o certo aqui porque **sempre há um canal ativo**: é seleção, e
 * não divulgação como o `<details>` da D7.
 *
 * O `radio` fica `position: absolute` e não `display: none`: escondido por `display` ele
 * sairia da ordem de foco, e o conjunto deixaria de ser navegável por teclado.
 *
 * Na página `fale-conosco` esta faixa não existe -- lá quem escolhe o canal é a aba da
 * página, e o template não a emite (etapa G11). Ela fica para um bloco de canais solto.
 */
.canais__abas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.canais__aba-controle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.canais__aba {
  padding: 12px 24px;
  font-family: var(--seb-fonte-corpo);
  font-weight: 700;
  color: var(--seb-azul);
  border: 1px solid var(--seb-azul-claro);
  border-radius: 50px;
  cursor: pointer;
  transition: all linear 0.15s;
}

.canais__aba-controle:checked + .canais__aba {
  background-color: var(--seb-azul-claro);
  border-color: var(--seb-azul);
}

/* O anel de foco vem do `radio`, que é o elemento focado -- e ele está escondido. */
.canais__aba-controle:focus-visible + .canais__aba {
  outline: 2px solid var(--seb-azul);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ o gatilho do modal */

/*
 * O botão que abre o formulário é o `.botao` da D5 -- e não por reuso de conveniência: o
 * `btn-channel` do original **é** um dos três botões que a D5 mediu e unificou. O que sobra
 * aqui é o que um `<a>` precisa para se comportar como botão, já que sem JavaScript quem abre
 * o diálogo é o `:target` e o gatilho tem de ser um link.
 */
.canais__abrir {
  text-decoration: none;
}

/* ------------------------------------------------------------------ o diálogo */

/*
 * **Um `<dialog>`, e ele abre por dois caminhos.**
 *
 * Com JavaScript, o `canais.js` chama `show()` e acrescenta o `Esc`, o foco e a trava de
 * rolagem -- **não `showModal()`**, que poria o diálogo na top layer e o desafio do reCAPTCHA
 * atrás dele; ver o `canais.js`. Sem JavaScript, o gatilho é um link para o `id` do diálogo e
 * é o `:target` que o abre -- porque um formulário de denúncia que só existe com script é o
 * oposto da regra que a D6 fixou.
 *
 * **As duas formas desenham igual**, e é por isso que a regra é uma só: o fundo escuro é do
 * próprio diálogo, e a posição fixa e o `z-index` também -- nada aqui dependia da top layer.
 *
 * As duas formas dividem esta regra, e ela vence o `dialog:not([open]) { display: none }` da
 * folha do navegador porque declaração de autor vence declaração de agente de usuário -- a
 * especificidade nem chega a ser consultada. (Este comentário dizia o contrário; corrigido em
 * revisão.)
 *
 * O fundo escuro é do próprio diálogo, e não do `::backdrop`: assim ele existe nos dois
 * caminhos, e o valor é o `rgba(0, 0, 0, 0.55)` do `.modal-overlay` do original -- que aqui
 * deixa de ser um `<div>` vazio.
 */
.canais__modal[open],
.canais__modal:target {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 30px;
  border: none;
  background: rgb(0 0 0 / 0.55);
}

/*
 * A página não rola atrás do diálogo aberto. Era o que o `showModal()` dava junto com a top
 * layer; com `show()` -- ver o porquê no `canais.js` -- passa a ser esta regra, posta e
 * tirada pelo script. Sem script, quem abre é o `:target` e a página continua rolando, como
 * antes.
 */
body.canais-modal-aberto {
  overflow: hidden;
}

/* A `.modal-content` do original. */
.canais__janela {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 45px 40px 40px;
  background-color: var(--seb-branco);
  border-radius: 2px;
  scrollbar-width: thin;
}

/*
 * O `×` de fechar. É um link pela mesma razão do gatilho -- sem script, fechar é voltar para o
 * `id` da seção --, e o `canais.js` o troca por `close()`.
 */
.canais__fechar {
  position: absolute;
  top: 18px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--seb-azul);
  font-family: var(--seb-fonte-corpo);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.canais__fechar:hover {
  opacity: 0.6;
}

/*
 * **O título do diálogo não vem do original** -- lá o modal abre direto no formulário. Ele
 * entra porque o diálogo cobre a aba que dizia a qual canal a mensagem vai, e é ele que nomeia
 * o `<dialog>` para quem usa leitor de tela.
 */
.canais__modal-titulo {
  margin-bottom: 8px;
  padding-right: 32px;
  font-family: var(--seb-fonte-titulo);
  font-size: 24px;
  font-weight: 700;
  color: var(--seb-azul);
}

/* ------------------------------------------------------------------ o formulário */

/* A `.form-required` do original. */
.canais__obrigatorios {
  margin-bottom: 28px;
  font-family: var(--seb-fonte-corpo);
  font-size: 14px;
  line-height: 20px;
  color: var(--seb-azul);
}

/*
 * A escolha de identificar-se, que **não existe no original** -- lá são dois formulários
 * inteiros, e a D9b os fundiu num. O desenho é o mínimo que separa o grupo do resto: a mesma
 * borda cinza dos campos, e as duas opções lado a lado.
 */
.canais__identificacao {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--seb-cinza-borda);
  border-radius: 4px;
}

.canais__legenda {
  padding: 0 6px;
  font-family: var(--seb-fonte-corpo);
  font-size: 14px;
  font-weight: 700;
  color: var(--seb-cinza-rotulo);
}

.canais__escolha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--seb-fonte-corpo);
  font-size: 15px;
  color: var(--seb-azul);
}

.canais__escolha label {
  cursor: pointer;
}

/*
 * A `.form-grid` do original: duas colunas, com `20px 32px` de espaço. Os quatro campos de
 * contato ficam nela, na ordem de lá -- e-mail, CPF, nome, telefone.
 */
.canais__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 32px;
}

.canais__campo {
  display: block;
  margin-bottom: 20px;
}

/* A `label` do original: cinza, negrito, 16/22. */
.canais__rotulo {
  display: block;
  margin-bottom: 7px;
  font-family: var(--seb-fonte-corpo);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: var(--seb-cinza-rotulo);
}

/* O asterisco é azul da marca no meio do rótulo cinza -- `label span` no original. */
.canais__obrigatorio {
  color: var(--seb-azul);
}

.canais__entrada {
  box-sizing: border-box;
  width: 100%;
  font-family: var(--seb-fonte-corpo);
  font-size: 15px;
  color: var(--seb-azul);
  background-color: var(--seb-branco);
  border: 1px solid var(--seb-cinza-borda);
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/*
 * O foco do original, e ele **não** é o `outline` do resto do site: aqui o campo já tem borda,
 * e o realce é ela escurecendo mais um halo de 2px. Fica porque é o desenho de lá, e porque
 * `outline: none` sem substituto é campo sem foco visível.
 */
.canais__entrada:focus {
  border-color: var(--seb-azul);
  box-shadow: 0 0 0 2px rgb(var(--seb-azul-rgb) / 0.08);
}

/* `input` e `select` têm altura fixa; a `textarea` tem mínima e cresce. */
.canais__entrada:not(.canais__entrada--area):not(.canais__entrada--arquivo) {
  height: 40px;
  padding: 0 12px;
}

.canais__entrada--area {
  min-height: 110px;
  padding: 10px 12px;
  resize: vertical;
}

.canais__entrada--selecao {
  cursor: pointer;
}

/* O seletor de arquivo é o único sem borda no original (`input.form-attachment`). */
.canais__entrada--arquivo {
  border: none;
  padding: 0;
}

.canais__ajuda {
  display: block;
  margin-top: 6px;
  font-family: var(--seb-fonte-corpo);
  font-size: 12px;
  color: var(--seb-cinza-rotulo);
}

/*
 * **A regra que substitui o segundo formulário inteiro.**
 *
 * O template do site 1 duplica o `<form>` -- um com os campos de identificação e outro sem --
 * e com ele duplica 17 `id`. Aqui o formulário é um só e somem os três campos pessoais quando
 * o visitante marca "sem identificação". Sem JavaScript, e sem campo repetido.
 *
 * `:has()` porque o `radio` que decide está num `<fieldset>` **irmão**, e não antes dos campos
 * a esconder -- o seletor `~` não alcança. Suporte amplo desde 2023.
 *
 * **Esconder é desenho, e desenho não protege ninguém**: quem apaga nome, CPF e telefone de
 * verdade é a `send_email`, no servidor, e é lá que a garantia mora (D9b).
 *
 * Na D9b o alvo era um `<fieldset class="canais__pessoais">`; na G11 virou classe por campo,
 * para os quatro campos de contato caberem na grade de duas colunas do original.
 */
.canais__formulario:has(input[value="anonymous"]:checked) .canais__campo--pessoal {
  display: none;
}

.canais__formulario:has(input[value="anonymous"]:checked) .canais__campo:has(input[name="email"]) .canais__obrigatorio {
  display: none;
}

.canais__captcha {
  margin: 10px 0 25px;
}

.canais__captcha-erro {
  margin: -15px 0 25px;
  font-family: var(--seb-fonte-corpo);
  font-size: 14px;
  font-weight: 700;
  color: var(--seb-vermelho);
}

/*
 * A `.form-submit` do original: azul cheio, largura toda, 50px. **Não é o `.botao` da D5** --
 * aquele é o pino vazado de 68px que o site usa para navegar, e este é o botão de envio de um
 * formulário dentro de um modal. O original os desenha diferentes, e eles são coisas
 * diferentes.
 */
.canais__enviar {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 4px;
  background-color: var(--seb-azul);
  color: var(--seb-branco);
  font-family: var(--seb-fonte-corpo);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.canais__enviar:hover {
  opacity: 0.8;
}

/* ------------------------------------------------------------------ a confirmação */

/*
 * O `.form-feedback.form-success` do original, que lá é um painel de 400px **dentro** do
 * modal, no lugar do formulário. Aqui o modal já fechou quando ela aparece -- o envio volta
 * por redirecionamento, com `?canais_status=` --, então ela é um toast: fixo num canto,
 * visível qualquer que seja a aba aberta e a rolagem. Ver o comentário no template, que traz
 * o que foi medido na página.
 *
 * O ícone mantém o círculo vazado do original, no `--seb-azul-claro`.
 */
.canais__toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  max-width: min(420px, calc(100vw - 48px));
  padding: 16px 18px;
  font-family: var(--seb-fonte-corpo);
  font-size: 16px;
  line-height: 25px;
  color: var(--seb-azul);
  background-color: var(--seb-branco);
  border-radius: 4px;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.18);
  animation: canaisToastEntra 0.3s ease-out both;
}

/*
 * **Abaixo do diálogo (9999) de propósito.** Os dois não aparecem juntos hoje -- a
 * confirmação chega depois do redirecionamento, com o modal fechado --, e se um dia
 * aparecerem, quem manda na tela é o formulário aberto.
 */

@keyframes canaisToastEntra {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * **O `hidden` do fim da saída precisa desta regra.** O `display: flex` acima é declaração de
 * autor e vence o `[hidden] { display: none }` da folha do navegador, que é de agente de
 * usuário: sem isto o toast continuava ocupando 82px de tela depois de "escondido" -- medido,
 * não suposto. É o mesmo tipo de conflito que o comentário do diálogo descreve, na direção
 * contrária.
 */
.canais__toast[hidden] {
  display: none;
}

/* A saída, posta pelo `canais.js`. */
.canais__toast--saindo {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/*
 * Quem pediu menos movimento não recebe nem a entrada nem a saída animadas -- o aviso aparece
 * e some, que é o que ele precisa fazer. Mesma regra que o resto do site segue.
 */
@media (prefers-reduced-motion: reduce) {
  .canais__toast,
  .canais__toast--saindo {
    animation: none;
    transition: none;
  }
}

.canais__toast-texto {
  margin: 0;
}

.canais__toast-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 2px solid var(--seb-azul-claro);
  border-radius: 50%;
  color: var(--seb-azul-claro);
  font-size: 16px;
  font-weight: 700;
}

/* O `×`, do mesmo tamanho de alvo do resto do site e sem cor própria. */
.canais__toast-fechar {
  flex-shrink: 0;
  padding: 0 4px;
  border: none;
  background: none;
  color: var(--seb-azul);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

/* No telefone ele ocupa a largura, como o resto do site faz com o que é fixo. */
@media (max-width: 768px) {
  .canais__toast {
    right: 16px;
    left: 16px;
    bottom: 16px;
    max-width: none;
  }
}

/* ------------------------------------------------------------------ os cards */

.canais__grupo-titulo {
  font-family: var(--seb-fonte-titulo);
  font-size: 22px;
  font-weight: 700;
  color: var(--seb-azul);
}

.canais__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.canais__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--seb-azul-claro);
}

.canais__card-imagem {
  max-width: 100%;
  width: auto;
  height: auto;
}

.canais__card-titulo {
  font-family: var(--seb-fonte-titulo);
  font-size: 18px;
  font-weight: 700;
  color: var(--seb-azul);
  text-align: center;
}

.canais__card-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/*
 * A cor vem do campo do card, que é a cor da marca de cada escola -- conteúdo, ao contrário
 * da cor do botão que a D5 tirou do formulário. Chega por custom property no elemento.
 */
.canais__card-botao {
  padding: 12px;
  text-align: center;
  font-family: var(--seb-fonte-corpo);
  font-weight: 700;
  color: var(--seb-branco);
  background-color: var(--canais-cor-do-card, var(--seb-azul));
}

@media (max-width: 768px) {
  .canais__titulo {
    font-size: 22px;
  }

  /* `padding: 20px` na janela e a grade em uma coluna -- as duas regras do original. */
  .canais__modal[open],
  .canais__modal:target {
    padding: 16px;
  }

  .canais__janela {
    max-height: 92vh;
    padding: 20px;
  }

  .canais__modal-titulo {
    padding-right: 45px;
  }

  .canais__grade {
    grid-template-columns: 1fr;
  }

  .canais__cards {
    flex-direction: column;
  }
}

/* ================================================= o pedido de LGPD (canal de privacidade)
 *
 * O `modal-contact-5` do estático -- o único dos cinco modais que um botão alcança, e que a
 * G11 descobriu ser **outro formulário**: um pedido de direitos do titular, em dois passos.
 * Transcrito de `main.css:3744-4073`.
 *
 * **Os passos são de CSS.** Os seis `radio` de `request_type` ficam fora dos dois passos, e é
 * o `:has()` que decide qual aparece -- a mesma ideia das abas da F4 e do acordeão da D7. No
 * original quem troca é o `modal.js`, que ainda copia o título e a descrição escolhidos para
 * dois elementos vazios; aqui os seis resumos já estão na marcação e a folha mostra um.
 */

/* Escolhido um direito, o passo 1 sai e o 2 entra. Em branco -- o estado inicial, e o que o
 * "Voltar" restaura --, o contrário. */
.canais__formulario--privacidade:has(.canais__passo-controle:checked:not([value=""])) .canais__passo--1 {
  display: none;
}

.canais__formulario--privacidade:not(:has(.canais__passo-controle:checked:not([value=""]))) .canais__passo--2 {
  display: none;
}

.canais__passo-titulo {
  margin-bottom: 35px;
  font-family: var(--seb-fonte-corpo);
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--seb-azul);
}

.canais__grupo-de-opcoes {
  margin-bottom: 35px;
  padding: 0;
  border: none;
}

.canais__formulario--privacidade .canais__legenda {
  margin-bottom: 14px;
  padding: 0;
  font-size: 16px;
  line-height: 22px;
}

/* ------------------------------------------------------------------ as oito relações */

.canais__relacoes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 22px;
}

.canais__relacao {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 20px;
}

/*
 * O `radio` some do olho e continua na ordem de foco -- o mesmo mecanismo das abas de canal.
 * Quem desenha a bolinha é o `::before` do rótulo, e não um `<span class="radio">` vazio como
 * no original: um elemento sem conteúdo, só para receber uma borda, é o que um pseudo faz.
 */
.canais__relacao-controle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.canais__relacao-rotulo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--seb-fonte-corpo);
  font-size: 15px;
  line-height: 20px;
  color: var(--seb-azul);
  cursor: pointer;
}

.canais__relacao-rotulo::before {
  content: "";
  flex: 0 0 20px;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid #222222;
  border-radius: 50%;
  transition: border-color 0.2s ease;
}

/*
 * O ponto de dentro, que no original é um `::after` de 10px centrado por `transform`. Aqui ele
 * é posicionado a 5px da borda esquerda -- o mesmo centro, com uma conta a menos.
 */
.canais__relacao-rotulo::after {
  content: "";
  position: absolute;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--seb-azul);
  transform: scale(0);
  transition: transform 0.2s ease;
}

.canais__relacao-rotulo:hover::before,
.canais__relacao-controle:checked + .canais__relacao-rotulo::before {
  border-color: var(--seb-azul);
}

.canais__relacao-controle:checked + .canais__relacao-rotulo::after {
  transform: scale(1);
}

.canais__relacao-controle:focus-visible + .canais__relacao-rotulo::before {
  outline: 2px solid rgb(var(--seb-azul-rgb) / 0.35);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ os seis direitos */

.canais__solicitacoes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.canais__solicitacao {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-height: 72px;
  padding: 20px 60px 20px 24px;
  color: var(--seb-azul);
  background-color: var(--seb-branco);
  text-align: left;
  cursor: pointer;
}

.canais__solicitacao-titulo {
  display: block;
  font-family: var(--seb-fonte-corpo);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

/*
 * **A descrição do direito abre também no teclado e na escolha, e não só no `:hover`.**
 *
 * No original ela é `max-height: 0; opacity: 0` e só cresce em `:hover` -- ou seja, num
 * aparelho de toque, ou para quem navega por teclado, o texto legal do direito **nunca**
 * aparece. Num formulário de exercício de direitos, esse texto é o que diz o que a pessoa está
 * pedindo. A transição e as medidas são as de lá; o que entra são os outros dois gatilhos.
 */
.canais__solicitacao-descricao {
  display: block;
  max-width: 700px;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  font-family: var(--seb-fonte-corpo);
  font-size: 15px;
  line-height: 22px;
  transform: translateY(-5px);
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease,
    transform 0.35s ease;
}

.canais__solicitacao:hover .canais__solicitacao-descricao,
.canais__solicitacao:focus-within .canais__solicitacao-descricao,
.canais__passo-controle:checked + .canais__solicitacao .canais__solicitacao-descricao {
  max-height: 300px;
  margin-top: 20px;
  opacity: 1;
  transform: translateY(0);
}

/*
 * **O anel de foco do cartão, e ele é obrigatório aqui**: o controle é o `radio`, que está
 * escondido do olho. Sem esta regra, quem navega por teclado passa por seis cartões sem
 * nenhum sinal de onde está -- foi o que aconteceu na primeira versão, em que os seis `radio`
 * ficavam juntos no topo do formulário e nenhum seletor alcançava o cartão a partir deles.
 */
.canais__passo-controle:focus-visible + .canais__solicitacao {
  outline: 2px solid var(--seb-azul);
  outline-offset: 2px;
}

.canais__solicitacao-seta {
  position: absolute;
  top: 50%;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid var(--seb-azul-vivo);
  border-radius: 50%;
  color: var(--seb-azul-vivo);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
  transition: background-color 0.2s ease;
}

.canais__solicitacao:hover .canais__solicitacao-seta,
.canais__solicitacao:focus-within .canais__solicitacao-seta {
  background-color: var(--seb-azul-vivo);
  color: var(--seb-branco);
}

/* ------------------------------------------------------------------ o passo 2 */

/*
 * Os seis resumos estão todos na marcação, e aparece o do direito escolhido. É o que dispensa
 * o `#requestTitle`/`#requestDescription` que o `modal.js` do original preenche -- e, de
 * quebra, dois `id` fixos a menos, que é o defeito 1 da análise em outra roupa.
 */
.canais__resumo {
  display: none;
}

.canais__formulario--privacidade:has(.canais__passo-controle[value="portabilidade"]:checked) .canais__resumo--portabilidade,
.canais__formulario--privacidade:has(.canais__passo-controle[value="acesso"]:checked) .canais__resumo--acesso,
.canais__formulario--privacidade:has(.canais__passo-controle[value="eliminacao"]:checked) .canais__resumo--eliminacao,
.canais__formulario--privacidade:has(.canais__passo-controle[value="correcao"]:checked) .canais__resumo--correcao,
.canais__formulario--privacidade:has(.canais__passo-controle[value="confirmacao"]:checked) .canais__resumo--confirmacao,
.canais__formulario--privacidade:has(.canais__passo-controle[value="revogacao"]:checked) .canais__resumo--revogacao {
  display: block;
}

.canais__resumo-titulo {
  margin-bottom: 14px;
  font-family: var(--seb-fonte-corpo);
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  color: var(--seb-azul);
}

.canais__resumo-texto {
  margin-bottom: 32px;
  font-family: var(--seb-fonte-corpo);
  font-size: 16px;
  line-height: 22px;
  color: var(--seb-azul);
}

/*
 * A grade `1fr 2fr` do original -- telefone estreito, e-mail largo. Ela tem nome próprio
 * porque a outra grade deste componente (os quatro campos de contato do relato) é de duas
 * colunas iguais.
 */
.canais__grade--desigual {
  grid-template-columns: 1fr 2fr;
  gap: 0 10px;
}

/*
 * Os campos do passo 2 são mais altos no original (56px contra 40) -- é a mesma diferença que
 * a E3 achou entre as duas listas de itens, e a saída é a mesma: uma medida por formulário, e
 * não dois desenhos de campo.
 */
.canais__formulario--privacidade .canais__entrada {
  font-size: 16px;
  border-color: var(--seb-cinza-medio);
}

.canais__formulario--privacidade .canais__entrada:focus {
  border-color: var(--seb-azul);
}

.canais__formulario--privacidade .canais__entrada:not(.canais__entrada--area):not(.canais__entrada--arquivo) {
  height: 56px;
  padding: 0 15px;
}

.canais__formulario--privacidade .canais__campo:has(> [name="cpf"]) {
  width: 50%;
}

.canais__formulario--privacidade .canais__entrada--area {
  min-height: 80px;
  padding: 15px;
}

/* ------------------------------------------------------------------ a caixa de anexo */

.canais__anexo {
  box-sizing: border-box;
  margin: 5px 0 22px;
  padding: 18px;
  border: 2px dashed var(--seb-cinza-medio);
}

.canais__anexo > .canais__rotulo {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: var(--seb-azul);
}

.canais__anexo-caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 55%;
  min-height: 145px;
  margin: 15px auto 0;
  padding: 16px;
  background-color: rgb(220 220 220 / 0.5);
  text-align: center;
}

.canais__anexo-frase {
  margin-bottom: 12px;
  font-family: var(--seb-fonte-corpo);
  font-size: 14px;
  line-height: 20px;
  color: var(--seb-azul);
}

/*
 * **Os dois controles escondidos deste componente usam o `.sr-only` do `base.css`**, posto na
 * classe do elemento pelo template -- é o que o `abas.css` faz com o radio das abas. A receita
 * (sete declarações com `clip-path`) chegou a ficar copiada duas vezes aqui dentro, e nenhuma
 * das duas cópias desfazia nada em media query, que é o único motivo pelo qual o `mapa.css` a
 * repete. Achado em revisão.
 *
 * Eles ficam escondidos e **na ordem de foco**, o que o `display: none` do original custaria --
 * num formulário em que o anexo pode ser a prova do pedido, e em que os `radio` são o controle
 * de verdade dos cartões.
 */

.canais__anexo-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 185px;
  height: 25px;
  padding: 0 15px;
  border: 2px solid var(--seb-azul-vivo);
  border-radius: 20px;
  font-family: var(--seb-fonte-corpo);
  font-size: 14px;
  color: var(--seb-azul);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.canais__anexo-botao:hover,
.canais__anexo-controle:focus-visible + .canais__anexo-botao {
  background-color: var(--seb-azul-vivo);
}

/* ------------------------------------------------------------------ voltar e salvar */

.canais__acoes-do-passo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  margin-top: 10px;
}

.canais__voltar {
  position: relative;
  display: inline-flex;
}

.canais__voltar-rotulo,
.canais__enviar--passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: auto;
  height: 38px;
  padding: 0 16px;
  border: 1px solid;
  border-radius: 20px;
  background-color: transparent;
  color: var(--seb-azul);
  font-family: var(--seb-fonte-corpo);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.canais__voltar-rotulo {
  border-color: var(--seb-vermelho);
}

.canais__enviar--passo {
  border-color: var(--seb-azul-vivo);
}

.canais__voltar-rotulo > [aria-hidden] {
  color: var(--seb-vermelho);
}

.canais__enviar--passo > [aria-hidden] {
  color: var(--seb-azul-vivo);
}

.canais__voltar-rotulo:hover,
.canais__passo-controle:focus-visible + .canais__voltar-rotulo {
  background-color: var(--seb-vermelho);
}

.canais__enviar--passo:hover,
.canais__enviar--passo:focus-visible {
  opacity: 1;
  background-color: var(--seb-azul-vivo);
}

.canais__voltar-rotulo:hover > [aria-hidden],
.canais__passo-controle:focus-visible + .canais__voltar-rotulo > [aria-hidden],
.canais__enviar--passo:hover > [aria-hidden],
.canais__enviar--passo:focus-visible > [aria-hidden] {
  color: inherit;
}

@media (max-width: 768px) {
  .canais__passo-titulo {
    margin-bottom: 32px;
    line-height: 23px;
  }

  .canais__relacoes {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .canais__relacao {
    min-height: 28px;
    padding: 0;
  }

  .canais__solicitacao {
    min-height: 46px;
    padding: 10px 30px 10px 0;
  }

  .canais__solicitacao-seta {
    right: 10px;
  }

  .canais__grade--desigual {
    grid-template-columns: 1fr;
  }

  .canais__anexo-caixa {
    width: 88%;
  }
}