/* ============================================================================ GOLDEN GATE
 *
 * A CAMADA VISUAL APROVADA EM 17/08/2026, inspirada no macOS 27 "Golden Gate". Ela ACRESCENTA;
 * nao reescreve o que ja estava. Assim a tela piloto (Configuracoes) usa o visual novo e as
 * outras dezesseis continuam iguais ate ele aprovar olhando a de verdade.
 *
 * Os quatro principios, e onde cada um mora:
 *   1. borda escurecida + brilho por dentro  ->  .gg-peca
 *   2. raio padronizado, TRES valores so     ->  --gg-raio-*
 *   3. vidro que difunde                     ->  .gg-vidro
 *   4. controle de intensidade               ->  html[data-vidro="opaco"]
 *
 * O detalhe esta em docs/handoffs/VISUAL-GOLDEN-GATE.md.
 */
:root {
  --gg-raio-cartao: 20px;
  --gg-raio-controle: 14px;
  --gg-raio-item: 12px;

  --gg-borda: rgba(21, 23, 43, .10);
  --gg-brilho: rgba(255, 255, 255, .98);
  --gg-sulco: inset 0 1px 2px rgba(21, 23, 43, .055);
  --gg-vidro-fundo: rgba(255, 255, 255, .72);
  --gg-desfoque: blur(24px);
}

/* O AMBIENTE. As duas manchas sao o que faz o branco parecer material em vez de tinta -- e
 * elas ficam ATRAS de tudo, sem capturar clique. */
.gg-ambiente { position: relative; }
.gg-ambiente::before {
  /* SEM ESTOURAR PARA OS LADOS. Com `-40px` na esquerda e na direita, o brilho empurrava a
   * largura da pagina e ela passava a rolar na horizontal -- medido no navegador, e nao
   * imaginado. Em cima pode passar, porque ali nao ha rolagem lateral. */
  content: ''; position: absolute; inset: -40px 0 auto 0; height: 420px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(760px 330px at 20% -10%, rgba(112, 88, 232, .16), transparent 62%),
    radial-gradient(600px 310px at 96% 0%, rgba(77, 215, 190, .15), transparent 64%);
}
.gg-ambiente > * { position: relative; z-index: 1; }

/* A PECA. Borda escura por fora, linha de luz por dentro -- o "chanfro". */
.gg-peca {
  /* O RECHEIO VEM DAQUI, e vence o do `.bloco` por vir depois no arquivo. As pecas usam as duas
     classes juntas (`class="bloco gg-peca"`), e sem esta linha o cartao herdava os 18px 22px do
     `.bloco` -- medido em 18/08, quando o catalogo dizia 22px 24px e a tela mostrava 18px 22px. */
  padding: var(--recheio-cartao);
  background: var(--surface); border: 1px solid var(--gg-borda);
  border-radius: var(--gg-raio-cartao);
  box-shadow: inset 0 1px 0 var(--gg-brilho), 0 8px 26px rgba(21, 23, 43, .05);
}
.gg-vidro { background: var(--gg-vidro-fundo); backdrop-filter: var(--gg-desfoque); }

/* O CONTROLE DE INTENSIDADE. Vidro com desfoque custa desempenho em maquina fraca, e sem esta
 * saida quem tem maquina lenta fica preso ao efeito. O Golden Gate resolveu igual. */
html[data-vidro="opaco"] .gg-vidro { background: var(--surface); backdrop-filter: none; }
html[data-vidro="opaco"] .gg-ambiente::before { display: none; }

/* ---------------------------------------------------------------- a barra de caminho */
.gg-caminho {
  display: flex; align-items: center; gap: var(--f3); flex-wrap: wrap;
  padding: 7px 10px 7px var(--f4); margin-bottom: var(--f3);
  border: 1px solid var(--gg-borda); border-radius: 16px;
  box-shadow: inset 0 1px 0 var(--gg-brilho);
}
.gg-caminho .raiz { font-size: 10.5px; color: var(--muted); letter-spacing: .1em; }
.gg-caminho .seta { color: var(--line-forte); font-size: 13px; }
.gg-caminho .aqui { font-size: 13px; font-weight: 600; }
.gg-caminho .fuso {
  margin-left: auto; display: flex; align-items: center; gap: var(--f2);
  background: rgba(255, 255, 255, .85); border: 1px solid var(--gg-borda);
  border-radius: var(--gg-raio-controle); padding: 6px 12px; font-size: 12px;
  color: var(--ink); box-shadow: inset 0 1px 0 #fff;
}

/* ---------------------------------------------------------------- as secoes */
.gg-secoes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--f4); }
.gg-secoes button {
  height: var(--alto-aba); padding: 0 14px; border-radius: var(--gg-raio-item);
  border: 1px solid transparent; background: none; color: var(--muted);
  font-size: 13px; font-family: inherit; cursor: pointer;
}
.gg-secoes button:hover:not(:disabled) { background: rgba(255, 255, 255, .7); color: var(--ink); }
.gg-secoes button[aria-current="true"] {
  background: var(--roxo-soft); border-color: rgba(112, 88, 232, .22);
  color: #312a70; font-weight: 600; box-shadow: inset 0 1px 0 #fff;
}

/* ---------------------------------------------------------------- o titulo grande */
.gg-titulo { margin-bottom: var(--f4); }
.gg-titulo h2 { font-size: var(--texto-gg); font-weight: 600; letter-spacing: -1.1px; line-height: 1.1; margin: 0; }
.gg-titulo p { font-size: var(--texto-m); color: var(--muted); margin: 8px 0 0; max-width: 52ch; line-height: 1.6; }

/* ---------------------------------------------------------------- A FAIXA DO DIA
 *
 * O momento da tela, e a regra que ele aprovou: TROCAR O CONTROLE PELA COISA. Dois campos de
 * hora nao mostram nada; a faixa mostra o dia. */
.gg-faixa-topo { display: flex; align-items: baseline; gap: var(--f4); flex-wrap: wrap; margin-bottom: var(--f5); }
.gg-horas { font-size: 44px; font-weight: 600; letter-spacing: -2px; line-height: 1; }
.gg-horas em { color: var(--line-forte); font-style: normal; margin: 0 7px; }
.gg-faixa-nota { font-size: 13px; color: var(--muted); }

.gg-dia {
  position: relative; height: 62px; border-radius: 16px;
  background: rgba(21, 23, 43, .055); border: 1px solid rgba(21, 23, 43, .08);
  box-shadow: var(--gg-sulco); overflow: hidden; margin-bottom: 9px;
}
.gg-dia .janela {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(180deg, #7d67ec, var(--agua));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.gg-dia .ponta {
  position: absolute; top: 11px; bottom: 11px; width: 5px; border-radius: 5px;
  background: #fff; transform: translateX(-2.5px); box-shadow: 0 1px 4px rgba(21, 23, 43, .28);
}
/* AGORA. Some quando o dia de hoje nao atende -- linha marcando "agora" num dia que nao
 * existe seria informacao inventada. */
.gg-dia .agora { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .95); }
.gg-dia-regua { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3, #9aa0b3); padding: 0 3px; }

.gg-estado-do-dia {
  display: flex; align-items: center; gap: var(--f2); margin-top: var(--f4);
  padding-top: var(--f3); border-top: 1px solid var(--gg-borda); font-size: 13px;
}
.gg-ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gg-ponto.vivo { background: #22c3a6; }
.gg-ponto.parado { background: var(--no-menu-fraco); }

/* ---------------------------------------------------------------- pilulas de dia */
.gg-dias { display: flex; gap: 7px; flex-wrap: wrap; }
.gg-dias button {
  /* A TECLA DE UM DIA DA SEMANA. Altura do catalogo; o recheio lateral e maior que o de cima
     porque o rotulo tem tres letras e uma pastilha quadrada com "seg" dentro fica apertada. */
  height: var(--alto-pastilha); font-size: 12.5px; padding: 0 15px; border-radius: 999px; cursor: pointer;
  font-family: inherit; border: 1px solid var(--gg-borda); background: var(--soft); color: var(--muted);
}
.gg-dias button[aria-pressed="true"] {
  background: var(--roxo); border-color: var(--roxo); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* ---------------------------------------------------------------- cabecalho de cartao */
.gg-cabeca { display: flex; align-items: center; gap: var(--f3); margin-bottom: var(--f4); }
/* O SIMBOLO E' O PRIMEIRO FILHO, e so' ele — nao `.selo` em qualquer lugar da cabeca.
 *
 * Sem o `:first-child`, um selo DE ESTADO passado na `acao` do cartao virava um quadrado
 * de 36px com o texto transbordando para fora da peca: aconteceu duas vezes em 21/08
 * ("conta desligada" nas Redes e "ativa" na Assinatura), e nas duas o defeito parecia
 * ser da tela nova, quando era desta regra. */
.gg-cabeca > .selo:first-child {
  width: 36px; height: 36px; border-radius: 12px; background: var(--roxo-soft);
  display: grid; place-items: center; flex: none; font-size: 17px; color: var(--roxo);
}
.gg-cabeca > .selo.agua:first-child { background: #e4f9f4; color: var(--ok); }
/* ITEM 179 — o simbolo em gradiente roxo->agua: o rosto do Glass, para o cartao que
 * apresenta uma familia ou uma ferramenta. Nao e' o padrao de todo cartao: gradiente em
 * todo canto vira papel de parede. */
.gg-cabeca > .selo.gradiente:first-child { background: linear-gradient(135deg, var(--roxo), var(--agua)); color: #fff; }
.gg-cabeca h3 { font-size: var(--texto-g); font-weight: 600; letter-spacing: -.2px; margin: 0; }
.gg-cabeca p { font-size: var(--texto-pp); color: var(--muted); margin: 2px 0 0; }

/* ---------------------------------------------------------------- numero grande */
.gg-numero { font-size: 36px; font-weight: 600; letter-spacing: -1.2px; line-height: 1; }
.gg-numero small { font-size: 15px; color: var(--muted); margin-left: 7px; letter-spacing: 0; font-weight: 400; }
.gg-rotulo { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.gg-recado { font-size: 11.5px; border-radius: 9px; padding: 8px 11px; margin-top: 14px; line-height: 1.45; }
.gg-recado.bom { color: var(--ok); background: var(--ok-soft); }

/* ---------------------------------------------------------------- a chave */
/* `.gg-chave` — a chave de liga/desliga. Nao e' botao de rotulo: o que se ve e' a POSICAO do
 * pino, e por isso ela tem tamanho proprio, declarado aqui e usado so por ela. */
.gg-chave {
  width: 42px; height: var(--alto-chave); border-radius: 999px; border: 0; cursor: pointer; flex: none;
  position: relative; background: var(--no-menu); box-shadow: inset 0 1px 2px rgba(21, 23, 43, .16);
}
.gg-chave::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(21, 23, 43, .25);
  transition: transform .16s;
}
.gg-chave[aria-pressed="true"] { background: #22c3a6; }
.gg-chave[aria-pressed="true"]::after { transform: translateX(18px); }

/* ---------------------------------------------------------------- a barra de salvar */
/* A BARRA DE SALVAR DE CONFIGURACOES saiu de cena em 18/08: quem salva agora e a peca do topo,
 * a mesma do app inteiro. A regra fica porque a marcacao ainda existe, escondida. */
.gg-salvar {
  display: flex; align-items: center; gap: var(--f3); flex-wrap: wrap;
  padding: 11px 12px 11px var(--f5); border-radius: 18px;
  border: 1px solid var(--gg-borda); box-shadow: inset 0 1px 0 var(--gg-brilho), 0 10px 28px rgba(21, 23, 43, .07);
  position: sticky; bottom: 12px; margin-top: var(--f4);
}
.gg-salvar .btn.principal { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px rgba(112, 88, 232, .4); }

/* A GRADE DE CAMPOS. `minmax(0, 1fr)` e nao `1fr`: com `1fr` o conteudo largo empurra a coluna
 * para fora do cartao, e o defeito so aparece com texto grande. */
.gg-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--f4); }
.gg-grade > div { min-width: 0; }
/* 13px, e nao 12: o rotulo e o que se LE para saber o que preencher, e a 12 ele empatava
 * com a nota que vem depois. Um degrau de diferenca e o minimo para o olho separar os dois. */
.gg-campo { font-size: var(--texto-p); color: var(--ink-2, #5e657d); margin-bottom: 6px; display: block; }
/* `input` SEM ATRIBUTO `type` NAO CASA com `input[type="text"]` -- o navegador trata como
 * texto, mas o seletor le o atributo, que nao existe. Os campos do perfil nasceram sem `type`
 * e apareceram sem sulco nenhum, brancos dentro de cartao branco. Daqui o `:not([type])`. */
.gg-peca input:not([type]), .gg-peca input[type="time"], .gg-peca input[type="text"],
.gg-peca input[type="number"], .gg-peca input[type="email"],
.gg-peca input[type="password"], .gg-peca input[type="url"],
.gg-peca select, .gg-peca textarea {
  border-radius: var(--gg-raio-controle); box-shadow: var(--gg-sulco);
}

/* ---------------------------------------------------------------- O ROSTO EM LISTA
 *
 * "Todo usuario vai ter a sua fotinha" — decisao dele em 18/08. Onde aparece gente, aparece a
 * cara: por enquanto a Equipe, e depois Atendimento, Atividades e Negocios.
 *
 * As iniciais NAO sao um espaco vazio a espera da foto: coluna vazia parece quebrada, e as
 * duas letras dizem "esta pessoa ainda nao subiu uma". */
/* ITEM 103: a barra de busca e o filtro da Equipe. O campo cresce; os botoes nao -- o texto
 * digitado e o que precisa de espaco, e o filtro tem tres opcoes de tamanho conhecido. */
.eq-filtros {
  display: flex; align-items: center; gap: var(--f3); flex-wrap: wrap;
  margin-bottom: var(--f4);
}
.eq-filtros input[type="search"] { flex: 1 1 260px; min-width: 0; }
.eq-filtros .gg-secoes { margin: 0; flex: none; }

.com-rosto { display: inline-flex; align-items: center; gap: var(--f2); min-width: 0; }
.rosto-foto, .rosto-iniciais {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
}
/* `cover` porque foto de gente quase nunca e' quadrada, e esticar deforma o rosto. */
.rosto-foto { object-fit: cover; border: 1px solid var(--line); }
.rosto-iniciais {
  display: grid; place-items: center; background: var(--roxo-soft); color: var(--roxo);
  font-size: 11px; font-weight: 600;
}

/* ================================================================ MEU PERFIL
 *
 * O layout e' o da v3 do SAG, que ele mostrou em print e aprovou: DOIS CARTOES LADO A LADO.
 * -- 18/08/2026 */

/* Duas colunas de largura igual. `minmax(0, 1fr)` e nao `1fr`: com `1fr` puro, um campo longo
 * dentro do cartao empurra a coluna e as duas param de ter a mesma largura. */
/* `stretch` E NAO `start`: no print da v3 os dois cartoes terminam na MESMA linha, e foi assim
 * que ele aprovou. Eu tinha escrito `start` argumentando que igualar criaria vao vazio dentro do
 * menor -- mas o vao aqui e' de 56px, e dois cartoes terminando em alturas diferentes chama mais
 * atencao do que isso. O rodape desce para o fundo em vez de flutuar no meio. */
/* DOIS TERCOS E UM TERCO, e nao meio a meio. Ele viu e disse: "proteja sua conta poderia ser um
 * terco, que eu acho que caberia tranquilamente" -- e cabe: a identidade tem seis campos, uma
 * foto e uma paleta; a seguranca tem tres campos de senha e um selo. Meio a meio dava a mesma
 * importancia visual a duas coisas de peso muito diferente. */
.gg-duplo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--f4); align-items: stretch; }
/* OS APARELHOS CONECTADOS (15/09/2026). Uma linha por aparelho, e o BOTAO SO' APARECE nos
   outros: derrubar-se sozinho por engano e' o erro que este quadro existe para evitar. */
.lista-de-aparelhos { display: flex; flex-direction: column; gap: var(--f2); }

.um-aparelho {
  display: flex; align-items: center; gap: var(--f3);
  border: 1px solid var(--gg-borda); border-radius: var(--gg-raio-controle);
  padding: var(--f3) var(--f4); background: rgba(255, 255, 255, .55);
}

/* O SEU APARELHO GANHA UMA BORDA VIVA — de relance se sabe qual e' o daqui. */
.um-aparelho.este { border-color: var(--ok); background: var(--ok-soft); }

.um-aparelho .quem-e { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.um-aparelho .quem-e b { display: flex; align-items: center; gap: var(--f2); }

/* MEIO A MEIO, quando os dois cartoes tem o mesmo peso — a Seguranca e as Preferencias do
   Meu perfil, divididas em 15/09/2026. O 2fr/1fr de cima serve ao par identidade+senha, em
   que o primeiro carrega muito mais conteudo. */
.gg-duplo.meio-a-meio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* DENTRO DO GRID, A MARGEM DE `acima` SOBRA: quem afasta os cartoes e' o `gap`, e a margem
   empurraria so' o segundo, desalinhando os topos. */
.gg-duplo > .bloco.acima { margin-top: 0; }

.gg-duplo > .bloco { display: flex; flex-direction: column; }
.gg-duplo > .bloco > .perfil-rodape { margin-top: auto; }
/* Abaixo de 1100px os dois cartoes empilham. Lado a lado, cada um ficaria com ~520px e os
 * pares de campos (Nome | E-mail) apertariam a ponto de cortar o rotulo. */
@media (max-width: 1100px) { .gg-duplo { grid-template-columns: 1fr; } }

.gg-sobre {
  font-size: var(--texto-selo); font-weight: 600; letter-spacing: .10em; text-transform: uppercase;
  color: var(--roxo); display: block; margin-bottom: 3px;
}
.gg-nota { font-size: var(--texto-pp); color: var(--muted); margin: 2px 0 0; line-height: 1.55; }

/* ---------------------------------------------------------------- a faixa de identidade */
.perfil-identidade {
  display: flex; align-items: center; gap: var(--f4);
  border: 1px solid var(--gg-borda); border-radius: var(--gg-raio-controle);
  background: rgba(255, 255, 255, .55); padding: var(--f3) var(--f4); box-shadow: var(--gg-sulco);
}
.perfil-cara {
  width: 54px; height: 54px; border-radius: 17px; flex: none; overflow: hidden;
  display: grid; place-items: center; font-size: 18px; font-weight: 600;
  box-shadow: inset 0 1px 0 var(--gg-brilho);
}
/* `cover` porque foto de gente quase nunca e' quadrada, e esticar deforma o rosto. */
.perfil-cara img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 🔴 A FOTO E O BOTAO, E O ✕ MORA NO CANTO DELA — 15/09/2026, homologando com a Tatiana.
 * Antes eram quatro controles espalhados, e o "tirar a foto" ficava na ponta da faixa:
 * *"a lixeira ficou longe da foto, que era meu foco de visão"*. A regra que ficou vale para
 * a tela inteira: **a acao mora onde o olho esta**. */
.cara-com-acao { position: relative; flex: none; }

button.perfil-cara { cursor: pointer; border: 0; padding: 0; font: inherit; }

/* A CAMERA EMBAIXO DA FOTO, e nao um veu por cima do rosto — pedido dele em 15/09/2026:
 * *"ficou muito feio a lixeira e a máquina fotográfica, dois ícones"*. Os dois gestos
 * continuam, mas em lugares proprios: a camera embaixo, o ✕ no canto de cima. */
.cara-com-acao .a-camera {
  position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--roxo); color: #fff; font-size: var(--texto-selo);
  border: 2px solid var(--surface); box-shadow: 0 2px 6px rgba(28, 32, 48, .25);
  pointer-events: none;   /* quem recebe o clique e' a foto inteira, atras dela */
  transition: transform .12s;
}
.cara-com-acao:hover .a-camera, .perfil-cara:focus-visible + .a-camera {
  transform: translateX(-50%) scale(1.12);
}

/* O SELETOR E ESCOPADO de proposito: `.tirar-a-foto` solto venceria o tamanho de qualquer
   peca que viesse por dentro dele. O fiscal do catalogo cobra isso. */
.cara-com-acao .tirar-a-foto {
  position: absolute; top: -6px; right: -6px; width: 24px; height: 24px;
  border-radius: 50%; border: 2px solid var(--surface); background: var(--ruim);
  color: #fff; cursor: pointer; font-size: var(--texto-selo); line-height: 1; padding: 0;
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(28, 32, 48, .25);
  opacity: 0; transform: scale(.8); transition: opacity .12s, transform .12s;
}
.cara-com-acao:hover .tirar-a-foto, .tirar-a-foto:focus-visible {
  opacity: 1; transform: scale(1);
}

/* NO TOQUE NAO EXISTE HOVER: o ✕ fica sempre a' vista, e com alvo maior. */
@media (hover: none) {
  .tirar-a-foto { opacity: 1; transform: scale(1); width: 30px; height: 30px; }
  .perfil-cara .veu { opacity: .35; }
}

/* O CAMPO DE ARQUIVO EXISTE, mas quem o abre e' o clique na foto. Fora da tela e nao
   `display:none`: escondido assim ele continua acessivel ao teclado e ao leitor. */
.so-para-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.perfil-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* NOME E E-MAIL CORTAM COM RETICENCIAS, e nao transbordam. `vitrine@launivo.com.br` pedia
 * 127px numa faixa de 99px e vazava por cima do que vem depois -- medido em 18/08. Cortar aqui
 * nao esconde nada: o e-mail inteiro esta no campo logo abaixo, editavel. */
.perfil-quem strong, .perfil-quem small, .perfil-quem span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.perfil-quem strong { font-size: var(--texto-g); font-weight: 600; letter-spacing: -.2px; }
/* O PAPEL, ao lado do nome. Pastilha e nao texto solto: sem a moldura ele lia como sobrenome. */
.perfil-quem .papel {
  font-style: normal; font-size: var(--texto-selo); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--roxo); background: var(--roxo-soft);
  border-radius: 999px; padding: 2px var(--f2); margin-left: var(--f2); vertical-align: middle;
}
.perfil-quem small { font-size: var(--texto-p); color: var(--muted); }
.perfil-quem span { font-size: var(--texto-pp); color: var(--muted); opacity: .82; margin-top: 2px; }
.perfil-enviar { flex: none; display: flex; flex-direction: column; gap: 5px; max-width: 200px; }
.perfil-enviar > span { font-size: var(--texto-p); color: var(--ink-2, #5e657d); }
.perfil-enviar small { font-size: var(--texto-pp); color: var(--muted); }
.perfil-enviar input[type="file"] { font-size: 11.5px; max-width: 100%; }

/* ---------------------------------------------------------------- a paleta das iniciais
 *
 * Seis cores, e nenhuma escolhida a mao. Cada nome vira um par fundo/tinta definido AQUI, e e'
 * por isso que a paleta nao briga com o tema: o navegador nunca recebe um hexadecimal solto. */
.cor-roxo    { background: var(--roxo-soft); color: var(--roxo); }
.cor-agua    { background: #e4f9f4; color: #12705d; }
.cor-verde   { background: #e6f4e8; color: #1d6b34; }
.cor-ambar   { background: #fff3e0; color: #8a540d; }
.cor-coral   { background: #fdeceb; color: #b44752; }
.cor-grafite { background: #eceef4; color: #414a60; }

.perfil-cores { display: flex; gap: var(--f2); flex-wrap: wrap; }
.perfil-cores button {
  width: var(--alto-pastilha); height: var(--alto-pastilha); border-radius: 10px; border: 1px solid var(--gg-borda);
  cursor: pointer; padding: 0; box-shadow: inset 0 1px 0 var(--gg-brilho);
}
/* A ESCOLHIDA GANHA UM ANEL POR FORA, e nao uma borda mais grossa: borda mais grossa muda o
 * tamanho do quadrado e faz a fileira inteira dar um pulo de 2px ao escolher. */
.perfil-cores button[aria-pressed="true"] {
  box-shadow: inset 0 1px 0 var(--gg-brilho), 0 0 0 2px var(--surface), 0 0 0 4px var(--roxo);
}

/* ---------------------------------------------------------------- a imagem por link */
.perfil-link { margin-top: 18px; border-top: 1px solid var(--gg-borda); padding-top: 14px; }
.perfil-link summary {
  font-size: var(--texto-p); color: var(--roxo); cursor: pointer; font-weight: 500;
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.perfil-link summary::-webkit-details-marker { display: none; }
.perfil-link summary::before { content: '›'; transition: transform .16s; display: inline-block; }
.perfil-link[open] summary::before { transform: rotate(90deg); }
.perfil-link > *:not(summary) { margin-top: 10px; }

/* ---------------------------------------------------------------- o selo verde da senha */
.perfil-selo-ok {
  display: flex; align-items: center; gap: var(--f3); padding: var(--f3) var(--f4);
  border-radius: var(--gg-raio-controle); background: var(--ok-soft);
  /* 16px abaixo do selo, e nao 24: e o cartao da DIREITA que manda na altura dos dois, e
     eram estes oito pixels que faziam a tela passar da janela. */
  border: 1px solid rgba(18, 112, 93, .14); margin-bottom: var(--f4);
}
.perfil-selo-ok i { color: var(--ok); font-style: normal; font-size: 15px; flex: none; }
.perfil-selo-ok span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.perfil-selo-ok strong { font-size: var(--texto-p); font-weight: 600; color: var(--ok); }
.perfil-selo-ok small { font-size: var(--texto-pp); color: var(--muted); }

/* ---------------------------------------------------------------- o rodape de cada cartao
 *
 * `margin-top: auto` NAO resolve aqui, porque o cartao nao e' flex-column. A folga fixa e' de
 * proposito: os dois cartoes tem alturas naturais diferentes e igualar produziria vao vazio
 * dentro do menor -- o "buracao" que ele reclama, e com razao. */
.perfil-rodape {
  display: flex; align-items: center; gap: var(--f4); margin-top: var(--f3);
  padding-top: var(--f3); border-top: 1px solid var(--gg-borda);
}
/* Quando os dois cartoes empilham (abaixo de 1100px) nao ha altura para igualar, e `margin-top:
 * auto` viraria um empurrao para o fundo de um cartao que ja acabou. Volta a folga fixa. */
@media (max-width: 1100px) { .gg-duplo > .bloco > .perfil-rodape { margin-top: var(--f5); } }
.perfil-rodape .gg-nota { flex: 1; min-width: 0; margin: 0; }

/* Câmera e microfone deste computador (15/10). A prévia é pequena; a cor do palco
 * é a mesma da webcam do Atendimento, para os dois lugares não divergirem. */
.perfil-camera-microfone .perfil-prova-de-aparelho {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--f3);
}
.perfil-previa-da-camera {
  width: 320px; max-width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 0; border-radius: 12px; object-fit: cover; display: block;
  background: var(--at-palco-da-webcam);
}
.perfil-previa-da-camera[hidden] { display: none; }

/* ---------------------------------------------------------------- o cargo embaixo do nome */
.com-rosto-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.com-rosto-texto b { font-weight: 500; }
.com-rosto-texto small { font-size: 11px; color: var(--muted); }

/* ---------------------------------------------------- a cor tambem valendo na capsula do menu
 *
 * `.menu .perfil .iniciais` tem especificidade 0,3,0 e vencia `.cor-agua`, que tem 0,1,0 -- a
 * cor escolhida aparecia no cartao e o menu continuava roxo. Estas seis regras empatam a
 * especificidade e desempatam por vir depois. E o TOM E' OUTRO de proposito: no menu escuro a
 * peca e' preenchida com a cor cheia e a letra em branco; no cartao claro e' o inverso.
 * A armadilha da especificidade esta na skill do painel, e caiu nela de novo. */
.menu .perfil .iniciais.cor-roxo    { background: var(--roxo);  color: #fff; }
.menu .perfil .iniciais.cor-agua    { background: #12866d;      color: #fff; }
.menu .perfil .iniciais.cor-verde   { background: #1d6b34;      color: #fff; }
.menu .perfil .iniciais.cor-ambar   { background: #a3671a;      color: #fff; }
.menu .perfil .iniciais.cor-coral   { background: #b44752;      color: #fff; }
.menu .perfil .iniciais.cor-grafite { background: #4a5468;      color: #fff; }

/* ---------------------------------------------------------------- a marca da conta (98) */
/* `.gg-pastilha` — o quadrado que mostra a cor escolhida. Mesma medida da pastilha de cor do
 * perfil (`--alto-pastilha`), e nao um numero novo: sao a mesma coisa em duas telas, e ele
 * pediu em 18/08 que botao com uma medida e botao com outra deixasse de existir. */
.gg-pastilha {
  width: var(--alto-pastilha); height: var(--alto-pastilha); border-radius: 10px;
  border: 1px solid var(--gg-borda); flex: none; box-shadow: inset 0 1px 0 var(--gg-brilho);
}
/* O LOGOTIPO NAO GANHA ALTURA FIXA: logotipo e' deitado, em pe ou quadrado conforme a empresa,
 * e prender a altura esmagaria justamente os que nao sao como o nosso. O teto e a caixa; a
 * proporcao e do arquivo. */
.gg-logotipo {
  max-width: 100%; max-height: 72px; margin-top: var(--f3);
  display: block; object-fit: contain;
}
/* O seletor de cor do navegador vem com recheio proprio e fica alto demais ao lado do resto. */
input[type="color"] {
  width: 64px; height: var(--alto-p); padding: 2px; border-radius: 8px;
  border: 1px solid var(--gg-borda); background: var(--gg-campo); cursor: pointer;
}

/* ---------------------------------------------------------------- a nota que nao existia */
/* `.nota` — usada NOVE vezes no `telas.js` e sem regra nenhuma na folha, desde antes de hoje.
 *
 * Achada em 19/08 conferindo as classes dos campos novos: as nove estavam sendo desenhadas
 * como texto de corpo, do mesmo tamanho e da mesma cor da frase principal. **Nao dava erro em
 * lugar nenhum** — a linha aparecia, e so' aparecia com o peso errado, o que e' exatamente o
 * tipo de coisa que ele pega num print e eu nao pego lendo codigo.
 *
 * O valor e' o mesmo da `.gg-nota`, e nao um numero novo: as duas dizem a mesma coisa. Ficaram
 * separadas porque renomear nove usos hoje seria mexer em nove telas para ganhar um nome. */
.nota { font-size: var(--texto-pp); color: var(--muted); margin: 2px 0 0; line-height: 1.55; }

/* ---------------------------------------------------------------- as duas maos (62 a 64) */
/* `.gg-maos` — a lista do que um servico manda e do que ele recebe, dentro de uma celula de
 * tabela. Sem marcador e sem recuo: marcador de lista dentro de celula desalinha a coluna do
 * cabecalho, e alinhamento de coluna e a primeira coisa que ele pega num print.
 *
 * O tamanho e' `--texto-pp`, o mesmo da nota: sao duas ou tres frases curtas por celula, e no
 * tamanho do corpo elas competiriam com o nome do servico, que e' o que se procura primeiro. */
.gg-maos { list-style: none; margin: 0; padding: 0; }
.gg-maos li { font-size: var(--texto-pp); color: var(--ink); line-height: 1.5; }
/* O PONTO ANTES DE CADA ITEM e' escrito na folha, e nao no JavaScript: assim ele nao entra no
 * texto copiado quando alguem seleciona a celula para colar noutro lugar. */
.gg-maos li::before { content: "· "; color: var(--muted); }