/* ==========================================================================
   Pulso NPS — Pessoas e Reconhecimento (pessoas.js)

   Arquivo próprio, carregado depois do styles.css: tudo aqui tem o prefixo .rc-, mais
   o contrato de marcação da especificação (.avatar.pa, .pessoa-*, .medalha, .resultado,
   .base). Nada pinta pessoa de vermelho: é reconhecimento, não placar.

   Larguras: abaixo de 768 o pódio empilha e a lista vira cartões; de 768 a 1359 a lista
   é tabela sem as colunas Loja, Evolução e Avaliações; a partir de 1360, as 7 colunas.
   ========================================================================== */

:root {
  /* Avatar sem foto: seis tons, cada um com o texto em contraste AA (≥ 4,5:1). */
  --avatar-1: #E4E6FF; --avatar-1-ink: #2B2BB8;
  --avatar-2: #DDF3EA; --avatar-2-ink: #05613A;
  --avatar-3: #FCEBD2; --avatar-3-ink: #6E4300;
  --avatar-4: #F8E1EF; --avatar-4-ink: #8A1D63;
  --avatar-5: #DCEEF6; --avatar-5-ink: #0A5570;
  --avatar-6: #ECE5FB; --avatar-6-ink: #4A2A9C;
  /* A medalha: um selo com ícone e texto; a cor nunca é a única informação. */
  --medalha-fundo: #FFF5DA;
  --medalha-texto: #5E4100;
  --medalha-linha: #EDD392;
}

/* ------------------------------------------------------------------ avatar */
.avatar.pa {
  width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; margin: 0;
  display: inline-grid; place-items: center; overflow: hidden; vertical-align: middle;
  font-weight: 800; letter-spacing: .02em; line-height: 1; font-size: 14px;
  background: var(--avatar-1); color: var(--avatar-1-ink);
}
img.avatar.pa { object-fit: cover; background: var(--surface-3); }
.avatar.pa.av-1 { background: var(--avatar-1); color: var(--avatar-1-ink); }
.avatar.pa.av-2 { background: var(--avatar-2); color: var(--avatar-2-ink); }
.avatar.pa.av-3 { background: var(--avatar-3); color: var(--avatar-3-ink); }
.avatar.pa.av-4 { background: var(--avatar-4); color: var(--avatar-4-ink); }
.avatar.pa.av-5 { background: var(--avatar-5); color: var(--avatar-5-ink); }
.avatar.pa.av-6 { background: var(--avatar-6); color: var(--avatar-6-ink); }
.avatar.pa.pa-24 { width: 24px; height: 24px; font-size: 12px; }
.avatar.pa.pa-40 { width: 40px; height: 40px; font-size: 14px; }
.avatar.pa.pa-64 { width: 64px; height: 64px; font-size: 21px; }
.avatar.pa.pa-96 { width: 96px; height: 96px; font-size: 30px; }

/* Dois rostos: sobrepostos em 16 px, com o anel da superfície separando um do outro. */
.rc-avs { display: inline-flex; flex: none; align-items: center; }
.rc-avs > .avatar.pa { box-shadow: 0 0 0 2px var(--surface); }
.rc-avs.dois > .avatar.pa + .avatar.pa { margin-left: -16px; }
.rc-avs.dois > .avatar.pa-24 + .avatar.pa-24 { margin-left: -8px; }
/* As iniciais por cima da foto (a foto tolera o corte, as iniciais não: "DM" virava
   "DI"); entre duas fotos ou duas iniciais, o primeiro rosto por cima. */
.rc-avs.dois > .avatar.pa { position: relative; }
.rc-avs.dois > .avatar.pa:first-child { z-index: 1; }
.rc-avs.dois > span.avatar.pa { z-index: 2; }
.rc-avs.dois > span.avatar.pa:first-child { z-index: 3; }
/* O avatar que abre o perfil (Ranking de lojas): alvo de 44 px de altura sem abrir vão
   na linha — o enchimento cresce e a margem negativa devolve o espaço. */
.rc-av-btn {
  display: inline-grid; place-items: center; position: relative; padding: 10px; margin: -10px; border: 0;
  background: none; border-radius: 50%; min-height: 0; cursor: pointer; flex: none;
}
.rc-av-btn > .avatar.pa { box-shadow: 0 0 0 2px var(--surface); }
.rc-av-btn:focus-visible { outline: none; }
.rc-av-btn:focus-visible > .avatar { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-avs.dois > .rc-av-btn:first-child { z-index: 1; }
.rc-avs.dois > .rc-av-btn + .rc-av-btn { margin-left: -18px; }

.pessoa-nomes { min-width: 0; }
.pessoa-nome { font-weight: 700; color: var(--ink); }
button.pessoa-nome { min-height: 0; }
button.pessoa-nome:hover { color: var(--accent); }
.rc-mais-n { font-weight: 700; color: var(--accent-ink); }
.rc-voce { margin-left: 3px; vertical-align: 1px; font-size: var(--t-xs); padding: 1px 5px; }
.pessoa-funcao, .pessoa-loja { color: var(--ink-2); }

/* ------------------------------------------------------------------ medalha */
.medalha { min-width: 0; }
.medalha > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; max-width: 100%; }
.medalha-selo {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
  background: var(--medalha-fundo); color: var(--medalha-texto); border: 1px solid var(--medalha-linha);
  border-radius: var(--r-full); padding: 3px 10px 3px 8px; font-size: var(--t-xs); font-weight: 800;
  line-height: 1.35;
}
.medalha > summary::-webkit-details-marker { display: none; }
.medalha > summary:focus-visible { outline: none; }
.medalha > summary:focus-visible .medalha-selo { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A seta da versão compacta: diz que o selo abre a frase. */
.medalha-abre { display: inline-flex; flex: none; margin-right: -3px; transition: transform .15s; }
.medalha[open] .medalha-abre { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .medalha-abre { transition: none; } }
.medalha .medalha-ic { flex: none; }
.medalha .medalha-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.medalha .medalha-seq { font-weight: 600; white-space: nowrap; }
.medalha .medalha-seq::before { content: "· "; }
.medalha.ouro .medalha-selo { border-width: 2px; border-color: var(--medalha-texto); }
.medalha-frase { font-size: var(--t-sm); color: var(--ink-2); margin-top: 6px; line-height: 1.45; }
.medalha.compacta .medalha-selo { padding: 2px 9px 2px 7px; }
.rc-med-mais .medalha-frase p + p { margin-top: 6px; }
.medalha.compacta[open] { flex-basis: 100%; }

/* O cartão da medalha no perfil: nome, mês e loja, a frase, o "Por quê" e o link. */
.rc-med-cartao {
  border: 1px solid var(--medalha-linha); border-radius: var(--r-md); background: var(--surface);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.rc-med-cartao > header { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--medalha-texto); }
.rc-med-cartao > header h4 { font-size: var(--t-md); color: var(--ink); }
.rc-med-cartao > header .medalha-seq {
  font-size: var(--t-xs); font-weight: 700; background: var(--medalha-fundo); border: 1px solid var(--medalha-linha);
  border-radius: var(--r-full); padding: 0 8px; color: var(--medalha-texto);
}
.rc-med-cartao > header .medalha-seq::before { content: none; }
.rc-med-cartao.ouro { border-width: 2px; border-color: var(--medalha-texto); }
.rc-med-onde { font-size: var(--t-xs); color: var(--muted); font-weight: 600; }
.rc-med-cartao .medalha-frase { margin-top: 2px; font-size: var(--t-md); color: var(--ink); }
.rc-porque > summary { cursor: pointer; font-size: var(--t-sm); font-weight: 700; color: var(--accent-ink); min-height: 32px; display: flex; align-items: center; }
.rc-porque ul { margin: 2px 0 4px; padding-left: 18px; font-size: var(--t-sm); color: var(--ink-2); }
.rc-porque li + li { margin-top: 2px; }
.rc-ver-av { font-size: var(--t-sm); color: var(--muted); }
.rc-ver-av .linkline { color: var(--accent-ink); font-weight: 700; min-height: 32px; }
.rc-revogar { align-self: flex-start; font-size: var(--t-sm); color: var(--muted); font-weight: 600; min-height: 32px; }

/* ------------------------------------------------------------- a tela */
.rc-tela { max-width: 1200px; margin-inline: auto; }
.rc-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: var(--s4); }
.rc-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rc-campo > span { font-size: var(--t-xs); font-weight: 700; color: var(--muted); }
.rc-campo select { min-width: 180px; max-width: 100%; }
.rc-mes-txt b { font-size: var(--t-md); min-height: 38px; display: flex; align-items: center; }
.rc-abas button { min-height: 32px; }
.rc-band-sel { display: none; }
.rc-atalhos { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
/* A partir de 1100, tudo numa linha só: os atalhos à direita, sem descer sozinhos. */
@media (min-width: 1100px) {
  .rc-barra { flex-wrap: nowrap; }
  .rc-barra > * { min-width: 0; }
  .rc-barra .rc-campo select { min-width: 150px; }
  .rc-atalhos { flex-wrap: nowrap; flex: none; }
}
.rc-faixa { margin-bottom: var(--s4); }
.rc-semequipe { margin: 0 0 var(--s4); }
.rc-semequipe .linkline { color: var(--accent-ink); }
.rc-rodape { margin: var(--s2) 0 var(--s4); }
.rc-rodape .linkline { color: var(--accent-ink); min-height: 44px; display: inline-flex; align-items: center; }

/* ------------------------------------------------------------------ pódio */
.rc-podio { max-width: 960px; margin: 0 auto var(--s4); }
.rc-degraus { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rc-degrau { position: relative; display: flex; flex-direction: column; min-width: 0; }
.rc-pod-cartao {
  position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.rc-degrau.sua-loja .rc-pod-cartao { border-color: var(--accent-line); }
.rc-pos { font-weight: 800; color: var(--accent-ink); font-size: var(--t-sm); }
.rc-pod-quem { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rc-pod-txt { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-sm); }
.rc-pod-nomes {
  font-size: var(--t-md); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-res { display: flex; flex-direction: column; }
.rc-res .resultado { font-size: var(--t-lg); color: var(--ink); }
.rc-res .base, .base { font-size: var(--t-xs); color: var(--muted); }
.rc-meds { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-meds .medalha { flex: 1 1 100%; }
/* O cartão inteiro é o link quando há uma pessoa só; a medalha continua tocável. */
.rc-estica::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rc-pod-cartao .medalha, .rc-pod-cartao .rc-mais-n { position: relative; z-index: 1; }
.rc-base { display: none; }
.rc-mais-emp { margin-top: 10px; font-size: var(--t-sm); }
.rc-mais-emp a { font-weight: 700; color: var(--accent-ink); display: inline-flex; align-items: center; min-height: 44px; }

/* Entrada do pódio (sem movimento quando a pessoa pede menos movimento). */
@keyframes rc-sobe { from { transform: translateY(14px); opacity: 0; } }
.rc-degrau { animation: rc-sobe .42s cubic-bezier(.22,.8,.3,1) both; animation-delay: var(--atraso, 0ms); }
@media (prefers-reduced-motion: reduce) { .rc-degrau { animation: none; } }

@media (min-width: 768px) {
  /* Três colunas, o 1º no centro. A coluna estica até a mais alta e se divide em vão de
     cima, cartão e degrau: o vão e o degrau dependem só da posição, então cartões da
     mesma posição ficam com a mesma altura e no mesmo nível — o desenho não diz que um
     empatado está acima do outro. */
  .rc-degraus { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .rc-degrau { padding-top: var(--rc-vao, 0px); }
  .rc-degrau[data-pos="2"] { --rc-vao: 22px; }
  .rc-degrau[data-pos="3"] { --rc-vao: 40px; }
  .rc-degrau[data-ordem="0"] { order: 2; }
  .rc-degrau[data-ordem="1"] { order: 1; }
  .rc-degrau[data-ordem="2"] { order: 3; }
  .rc-degraus:has(> .rc-degrau:nth-child(2):last-child) .rc-degrau[data-ordem="0"] { order: 1; }
  .rc-degrau .rc-pod-quem { flex-direction: column; text-align: center; align-items: center; }
  .rc-degrau .rc-pod-txt { align-items: center; }
  .rc-degrau .rc-pos { text-align: center; }
  .rc-degrau .rc-res { align-items: center; text-align: center; }
  .rc-pod-cartao { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .rc-base {
    display: block; border-radius: 0 0 var(--r-md) var(--r-md);
    background: linear-gradient(180deg, var(--accent-soft), var(--surface-3)); border: 1px solid var(--rule); border-top: 0;
  }
  .rc-degrau[data-pos="1"] .rc-base { height: 56px; }
  .rc-degrau[data-pos="2"] .rc-base { height: 34px; }
  .rc-degrau[data-pos="3"] .rc-base { height: 16px; }
  .avatar.pa.pa-64 { width: 56px; height: 56px; font-size: 19px; }
}
@media (min-width: 1100px) {
  .avatar.pa.pa-64 { width: 64px; height: 64px; font-size: 21px; }
}
@media (max-width: 767px) {
  .avatar.pa.pa-64 { width: 56px; height: 56px; font-size: 19px; }
}

/* ------------------------------------------------------------ quem mais evoluiu */
.rc-evol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rc-evol-it { display: flex; align-items: center; gap: 12px; min-width: 0; position: relative; }
.rc-evol-txt { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-sm); }
.rc-evol-meta { color: var(--ink-2); }
.rc-evol-txt .rc-res { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.rc-evol-txt .resultado { font-size: var(--t-md); }
@media (min-width: 768px) { .rc-evol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------------------- classificação */
.rc-tabela-wrap { overflow-x: auto; }
.rc-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.rc-tabela th {
  text-align: left; font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--rule); background: var(--surface-2); white-space: nowrap;
}
.rc-tabela td { padding: 7px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.rc-tabela tbody tr:last-child td { border-bottom: 0; }
.rc-tabela tr.sua-loja td { background: var(--accent-soft); }
.rc-tabela .rc-c-pos { width: 104px; white-space: nowrap; }
.rc-tabela .rc-c-pos .rc-pos { font-size: var(--t-md); display: block; line-height: 1.2; }
.rc-empate { display: block; font-size: var(--t-xs); color: var(--muted); line-height: 1.2; }
.rc-eq-cel { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rc-eq-txt { display: flex; flex-direction: column; min-width: 0; }
/* A função pode ganhar reticências; os nomes, não: quebram linha antes de esconder alguém. */
.rc-eq-txt .pessoa-funcao { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-eq-txt .pessoa-funcao { font-size: var(--t-xs); line-height: 1.3; }
.rc-tabela .rc-c-loja { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-empate-sec { display: none; }
.rc-res-val { white-space: nowrap; }
.rc-sua { margin-left: 6px; }
.rc-tabela .rc-c-res .resultado { display: block; font-size: var(--t-md); line-height: 1.25; }
.rc-tabela .rc-c-res .base { display: block; line-height: 1.3; white-space: nowrap; }
.rc-tabela td.rc-c-res { min-width: 200px; }
.rc-evo-sec { display: none; font-size: var(--t-xs); color: var(--muted); }
.rc-c-evo, .rc-c-n { white-space: nowrap; }
.rc-evo { color: var(--ink-2); font-weight: 700; }
.rc-evo-nada { color: var(--muted); }
.rc-tabela .rc-c-med .medalha { display: inline-block; margin: 2px 4px 2px 0; vertical-align: middle; max-width: 100%; }
.rc-tabela .rc-c-med .medalha-selo { padding-block: 1px; }
.rc-n-cel { display: none; }
.rc-sep td { text-align: center; color: var(--muted); font-weight: 700; font-size: var(--t-xs); letter-spacing: .04em; background: var(--surface-2); }
.rc-card-lista > header h2:focus { outline: none; }
.rc-card-lista > header h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.rc-eq-loja-sec { display: none; }

/* A partir de 768, tabela de largura fixa: as colunas nunca passam do cartão (nada de
   rolagem para o lado), e a frase da medalha abre SOBRE a linha, sem esticá-la (a linha
   fica em até 56 px). Por isso o cartão da lista deixa a frase sair dele. */
@media (min-width: 768px) {
  .rc-card-lista, .rc-tabela-wrap { overflow: visible; }
  .rc-tabela { table-layout: fixed; }
  .rc-tabela .rc-c-pos { width: 108px; }
  .rc-tabela td.rc-c-res { min-width: 0; }
  /* "Frente de caixa: 6,6 por 100" e a base numa linha cada. */
  .rc-tabela .rc-c-res { width: 244px; }
  .rc-tabela .rc-c-med { width: 176px; }
  .rc-tabela td.rc-c-med { position: relative; white-space: normal; }
  .rc-tabela .rc-c-med .rc-med-extra { display: none; }
  .rc-tabela .rc-c-med .medalha[open] > .medalha-frase {
    position: absolute; z-index: 6; right: 8px; top: calc(100% - 6px); width: 300px; max-width: 70vw; margin: 0;
    padding: 10px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--rule-2);
    border-radius: var(--r-md); box-shadow: var(--sh-3); white-space: normal; text-align: left;
  }
  .rc-tabela .rc-c-med .medalha-nome { max-width: 112px; }
}
/* As 7 colunas só quando cabem (a 1440, conteúdo de 1200): abaixo disso, a Loja vai para
   embaixo da função e a Evolução para embaixo do resultado. */
@media (min-width: 1360px) {
  .rc-tabela td, .rc-tabela th { padding-inline: 10px; }
  .rc-tabela .rc-c-pos { width: 96px; }
  .rc-tabela .rc-c-eq { width: 22.6%; }
  .rc-tabela .rc-c-res { width: 226px; }
  .rc-tabela .rc-c-evo { width: 104px; }
  .rc-tabela .rc-c-n { width: 100px; }
  /* O primeiro selo e o "+1" na mesma linha. */
  .rc-tabela .rc-c-med { width: 204px; }
  .rc-tabela td.rc-c-med { white-space: nowrap; }
  .rc-tabela .rc-c-loja { white-space: normal; overflow-wrap: normal; }
}
@media (min-width: 768px) and (max-width: 1359px) {
  .rc-tabela .rc-c-evo, .rc-tabela .rc-c-loja, .rc-tabela .rc-c-n { display: none; }
  .rc-eq-loja-sec { display: inline; }
  .rc-evo-sec { display: block; }
  .rc-tabela td, .rc-tabela th { padding-inline: 9px; }
  .rc-eq-nomes, .rc-eq-txt .pessoa-funcao { white-space: normal; }
}

/* Abaixo de 768: cartões de duas linhas. Na primeira, a posição, o avatar, o nome e o
   resultado à direita; na segunda, menor, a função, a loja, as avaliações e as medalhas. */
@media (max-width: 767px) {
  .rc-tabela, .rc-tabela tbody { display: block; }
  .rc-tabela thead { display: none; }
  .rc-tabela tr.pessoa-linha {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px;
    align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--rule);
  }
  /* A linha da própria loja pinta o cartão inteiro, e não cada célula (sobravam faixas
     brancas entre elas). */
  .rc-tabela tr.pessoa-linha.sua-loja { background: var(--accent-soft); }
  .rc-tabela tr.sua-loja td { background: none; }
  .rc-tabela tr:last-child { border-bottom: 0; }
  .rc-tabela td { display: block; padding: 0; border: 0; min-width: 0; }
  .rc-tabela .rc-c-pos { grid-column: 1; grid-row: 1; width: auto; }
  /* O "empate técnico" vai para a segunda linha (.rc-empate-sec): a coluna da posição
     fica estreita, e o nome não é espremido. */
  .rc-tabela .rc-c-pos .rc-empate { display: none; }
  .rc-empate-sec { display: inline; font-weight: 700; color: var(--ink-2); }
  .rc-tabela td.rc-c-eq { grid-column: 2; grid-row: 1; width: auto; }
  .rc-tabela tr:not(:has(> .rc-c-pos)) td.rc-c-eq { grid-column: 1 / 3; }
  .rc-eq-txt { flex: 1; min-width: 88px; }
  .rc-tabela .rc-c-med { white-space: normal; }
  /* O resultado à direita, só da largura do número ("6,6 por 100"): o rótulo da área
     sobe para cima dele e pode quebrar, o número não. */
  .rc-tabela td.rc-c-res { grid-column: 3; grid-row: 1; text-align: right; min-width: 0; width: min-content; max-width: 45vw; }
  .rc-tabela .rc-c-res .resultado { font-size: var(--t-sm); white-space: normal; }
  .rc-res-rot { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); line-height: 1.25; }
  .rc-tabela .rc-c-res .base { display: none; }
  .rc-tabela .rc-c-loja { grid-row: 2; grid-column: 1 / -1; white-space: normal; font-size: var(--t-xs); color: var(--ink-2); }
  /* Nome e função nunca partidos no meio da palavra; o nome que não cabe ganha
     reticências (o completo está no aria-label do botão). */
  .rc-tabela .pessoa-nome, .rc-tabela .pessoa-funcao { overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .rc-tabela button.pessoa-nome { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .rc-tabela .rc-c-n { display: none; }
  .rc-tabela .rc-c-med { grid-column: 1 / -1; grid-row: 3; min-width: 0; margin-top: 4px; }
  .rc-tabela .rc-c-med:empty { display: none; }
  .rc-tabela .rc-c-med .rc-med-mais { display: none; }
  .rc-tabela .rc-c-med .medalha[open] { display: block; }
  .rc-tabela .rc-c-evo, .rc-tabela .rc-evo-sec { display: none; }
  .rc-tabela .rc-n-cel { display: inline; font-size: var(--t-xs); color: var(--muted); }
  .rc-eq-nomes { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .rc-eq-txt .pessoa-funcao { white-space: normal; }
  .rc-sep { display: block; padding: 8px 14px; border-bottom: 1px solid var(--rule); }
  .rc-sep td { display: block; background: none; }
}
/* Abaixo de 400 (360 com texto grande, 277): o resultado desce para baixo do nome, e o
   nome fica com a largura da linha. */
@media (max-width: 399px) {
  .rc-tabela tr.pessoa-linha { grid-template-columns: auto minmax(0, 1fr); }
  .rc-tabela td.rc-c-res { grid-column: 2; grid-row: 2; text-align: left; width: auto; max-width: none; }
  .rc-tabela .rc-c-res .resultado { display: flex; flex-wrap: wrap; gap: 0 4px; align-items: baseline; }
  .rc-res-rot { display: inline; }
  .rc-tabela .rc-c-loja { grid-row: 3; }
  .rc-tabela .rc-c-med { grid-row: 4; }
}

/* --------------------------------------------------------- fora da classificação */
.rc-fora > summary {
  list-style: none; cursor: pointer; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; min-height: 44px;
}
.rc-fora > summary::-webkit-details-marker { display: none; }
.rc-fora > summary h2 { font-size: var(--t-lg); }
.rc-fora > summary h2::after { content: " ›"; color: var(--muted); }
.rc-fora[open] > summary { border-bottom: 1px solid var(--rule); }
.rc-fora > summary .sub { font-size: var(--t-sm); color: var(--muted); }
.rc-fora-lista { list-style: none; margin: 0; padding: 0; }
.rc-fora-lista > li { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.rc-fora-lista > li:last-child { border-bottom: 0; }
.rc-fora-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 12rem; font-size: var(--t-sm); }
.rc-fora-meta { color: var(--ink-2); font-size: var(--t-xs); }
.rc-motivo { font-weight: 700; color: var(--ink-2); font-size: var(--t-sm); }

/* --------------------------------------------------------- "Como funciona" */
.rc-como h4 { font-size: var(--t-md); margin-top: 6px; }
.rc-como ul { margin: 6px 0 10px; padding-left: 18px; }
.rc-como li + li { margin-top: 8px; }
.rc-como li small { color: var(--muted); font-size: var(--t-xs); }
.rc-como p + p { margin-top: 8px; }
.rc-como > p:last-child { font-weight: 700; }

/* ------------------------------------------------------------------ perfil */
.drawer.rc-gaveta { width: min(420px, 100vw); }
.rc-gaveta > header { padding: 8px 14px 14px 18px; }
.rc-g-barra { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rc-g-barra .eyebrow { flex: 1; }
.rc-g-voltar { display: none; padding-left: 4px; }
.rc-g-x { width: 44px; height: 44px; }
.rc-g-cab { display: flex; gap: 14px; align-items: flex-start; }
.rc-g-quem { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rc-g-nome { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.rc-g-nome h2 { font-size: 19px; }
.rc-g-nome h2:focus { outline: none; }
.rc-g-nome h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.rc-g-vinc { font-size: var(--t-sm); color: var(--ink-2); }
.rc-g-foto { font-size: var(--t-xs); }
.rc-g-sec h3 { font-size: var(--t-md); margin-bottom: 8px; }
.rc-medalhas { display: grid; gap: 10px; }
.rc-andamento .sub { margin-bottom: 6px; font-size: var(--t-xs); }
.rc-and-item { border-left: 3px solid var(--accent-line); padding: 2px 0 2px 12px; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); }
.rc-and-item + .rc-and-item { margin-top: 10px; }
.rc-and-onde { font-weight: 700; font-size: var(--t-xs); color: var(--muted); }
.rc-trava { color: var(--ink-2); font-style: italic; }
.rc-hist { margin: 0; padding-left: 18px; font-size: var(--t-sm); color: var(--ink-2); }
.rc-hist li + li { margin-top: 6px; }
.rc-g-adm .sub { font-size: var(--t-xs); margin-bottom: 6px; }
.rc-g-adm-bts { display: flex; gap: 16px; flex-wrap: wrap; }
.rc-perigo { color: var(--det-ink); font-weight: 700; min-height: 44px; }
.rc-gaveta > footer { justify-content: flex-start; }
@media (max-width: 767px) {
  .drawer.rc-gaveta { width: 100vw; border-radius: 0; }
  .rc-g-voltar { display: inline-flex; min-height: 44px; }
  .rc-g-x { display: none; }
}

/* --------------------------------------------------------- equipe da loja */
.rc-campo-loja select { min-width: 240px; }
.rc-equipe-caixa .card { margin-bottom: var(--s4); }
.rc-eq-corpo { padding: 4px 0; }
.rc-semresp {
  display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2);
  padding: 10px 18px; border-bottom: 1px solid var(--rule); background: var(--surface-2);
}
.rc-semresp .dot-ic { flex: none; margin-top: 3px; color: var(--accent); }
.rc-semresp .linkline { color: var(--accent-ink); }
.rc-eq-lista { list-style: none; margin: 0; padding: 0; }
.rc-eq-linha { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--rule); min-width: 0; }
.rc-eq-lista > li:last-child { border-bottom: 0; }
.rc-eq-linha.ex { opacity: .82; }
.rc-eq-dados { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rc-eq-nome { min-width: 0; }
.rc-eq-meta { font-size: var(--t-xs); color: var(--muted); }
.rc-eq-vazio { padding: 14px 18px; }
.rc-mais { width: 44px; height: 44px; font-size: 20px; font-weight: 800; color: var(--ink-2); flex: none; }
.rc-ex > summary { cursor: pointer; padding: 12px 18px; font-weight: 700; font-size: var(--t-sm); color: var(--ink-2); border-top: 1px solid var(--rule); min-height: 44px; }
.rc-no-modal { grid-column: 1 / -1; }
.rc-no-modal .card { margin: 4px 0 0; box-shadow: none; }

/* Adicionar pessoa: a busca e os resultados. */
.rc-pessoa-ops:empty { display: none; }
.rc-pessoa-ops .op span { display: flex; flex-direction: column; }
.rc-pessoa-ops .op small { color: var(--muted); font-size: var(--t-xs); }
.rc-homonimo { font-size: var(--t-sm); color: var(--neu-ink); background: var(--neu-soft); border: 1px solid var(--neu-line); border-radius: var(--r-sm); padding: 8px 10px; }

/* ------------------------------------------------------------------- foto */
.rc-foto { display: flex; flex-direction: column; gap: 12px; }
.rc-foto-esc { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-foto-esc .btn { min-height: 44px; }
.rc-foto-erro:empty { display: none; }
.rc-foto-erro { color: var(--det-ink); font-size: var(--t-sm); font-weight: 600; }
.rc-recorte { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1; margin: 0 auto; border-radius: var(--r-md); overflow: hidden; background: var(--surface-3); }
.rc-recorte-cv { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.rc-recorte-cv:active { cursor: grabbing; }
.rc-recorte-cv:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.rc-recorte-masc {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle closest-side, transparent calc(100% - 1px), rgba(19, 19, 34, .45) 100%);
}
.rc-recorte-ctl { display: flex; align-items: center; gap: 10px; max-width: 320px; width: 100%; margin: 0 auto; }
.rc-recorte-ctl label { font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); }
.rc-recorte-ctl input[type=range] { flex: 1; min-height: 44px; accent-color: var(--accent); padding: 0; border: 0; background: none; }
.rc-recorte-ctl .btn { min-height: 44px; }
.rc-consent { display: flex; flex-direction: column; gap: 6px; }
.rc-chk { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); color: var(--ink); cursor: pointer; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-sm); min-height: 44px; }
.rc-chk:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.rc-chk input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.rc-ler-termo { align-self: flex-start; color: var(--accent-ink); min-height: 32px; }
.rc-termo-txt { white-space: pre-wrap; font-size: var(--t-sm); color: var(--ink-2); }

/* ------------------------------------------------------------------ Resumo */
.rc-card-resumo .body { display: flex; flex-direction: column; gap: 12px; }
.rc-dest, .rc-se { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rc-dest-it, .rc-se-linha { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.rc-dest-txt, .rc-se-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rc-dest-meta, .rc-se-meta { font-size: var(--t-xs); color: var(--ink-2); }
.rc-dest-txt .medalha, .rc-se-txt .rc-meds { margin-top: 4px; }
.rc-se-and { font-size: var(--t-sm); color: var(--ink-2); }
.rc-and-rot { font-weight: 700; }
.rc-se-mais { color: var(--accent-ink); align-self: flex-start; min-height: 44px; }
.rc-card-resumo .rc-semresp { padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r-sm); }
.rc-card-pe { display: flex; justify-content: flex-start; }
.rc-card-pe .btn { min-height: 44px; }
.rc-dest-vazio { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* Os Destaques lado a lado já a partir de 768: empilhados, eles empurravam o NPS da rede
   para fora da primeira tela. */
@media (min-width: 768px) { .rc-dest { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rc-se { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------- Ranking de lojas */
.rc-rk-eq {
  display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: var(--t-xs); font-weight: 500;
  color: var(--ink-2); line-height: 1.3; min-width: 0; flex-wrap: wrap;
}
.rc-rk-eq .pessoa-funcao { color: var(--muted); }
.rc-rk-eq .pessoa-nome { font-weight: 700; position: relative; z-index: 2; }
.rc-rk-eq .rc-avs { position: relative; z-index: 2; }

/* --------------------------------------------------- Problemas relatados */
.rc-cuida-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--t-sm); }
.rc-cuida { display: flex; gap: 8px; align-items: flex-start; }
.rc-cuida .rc-avs { margin-top: 1px; }
.rc-cuida-txt { min-width: 0; color: var(--ink-2); }
.rc-cuida-txt .pessoa-funcao { color: var(--ink-2); }
/* Dentro da linha do problema (Problemas relatados): texto neutro, sem número junto. */
td > p.rc-cuida {
  flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; font-size: var(--t-xs); font-weight: 500;
  color: var(--ink-2); line-height: 1.3;
}
td > p.rc-cuida .pessoa-funcao { color: var(--muted); font-weight: 600; }
td > p.rc-cuida .pessoa-nome { font-weight: 700; color: var(--ink-2); }

/* --------------------------------------------------- ficha da tratativa */
.rc-tk { display: flex; flex-direction: column; gap: 10px; }
.rc-tk:empty { display: none; }
.rc-tk-ger { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-2); }
.rc-tk-ger .pessoa-funcao { color: var(--muted); font-weight: 600; }
.rc-tk-ct ul { margin: 4px 0 0; padding-left: 18px; font-size: var(--t-sm); }
.rc-tk-ct li + li { margin-top: 4px; }
.rc-tk-ct .linkline { color: var(--accent-ink); min-height: 32px; }
.rc-tk-ct .linkline:disabled, .rc-tk-ct .linkline[disabled] { color: var(--muted-2); font-weight: 600; cursor: default; text-decoration: none; }
.rc-tk-ct > .sub { font-size: var(--t-xs); margin-top: 4px; }

/* --------------------------------------------------- contestações */
.rc-contest { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rc-contest > li { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rc-ct-quem { font-size: var(--t-xs); }

/* --------------------------------------------------- Configurações */
.rc-cfg-lista { list-style: none; margin: 0; padding: 0; }
.rc-cfg-lista > li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.rc-cfg-lista > li:last-child { border-bottom: 0; }
.rc-cfg-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rc-cfg-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-cfg-txt .sub { font-size: var(--t-xs); }
.rc-futura { color: var(--accent-ink); }
.rc-cods { max-height: 300px; overflow-y: auto; border: 1px solid var(--rule-2); border-radius: var(--r-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.rc-cod { display: flex; gap: 8px; align-items: center; font-size: var(--t-sm); min-height: 36px; cursor: pointer; }
.rc-cod input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }
.rc-cod small { color: var(--muted); }
.rc-cod-grupo > b { font-size: var(--t-sm); display: block; padding: 6px 0 2px; }
.rc-cod-filhas { padding-left: 26px; display: flex; flex-direction: column; gap: 2px; }
.rc-ap { display: flex; flex-direction: column; gap: 10px; }
.rc-ap-acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rc-pessoa-usuario .rc-pu-linha { gap: 14px; flex-wrap: wrap; }
.rc-pu-linha .linkline { color: var(--accent-ink); min-height: 32px; }

/* --------------------------------------------------- o avatar do menu */
.side-ft .rc-eu { cursor: pointer; padding: 0; overflow: hidden; font: inherit; font-size: var(--t-xs); font-weight: 800; }
.side-ft .rc-eu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-ft .rc-eu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------- celular */
@media (max-width: 767px) {
  .rc-barra { flex-direction: column; align-items: stretch; }
  .rc-campo select, .rc-campo-loja select { min-width: 0; width: 100%; }
  .rc-abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .rc-abas button { min-height: 44px; white-space: normal; line-height: 1.2; }
  .rc-barra .rc-band-abas { display: none !important; }
  .rc-barra .rc-band-sel { display: flex; }
  .rc-atalhos { margin-left: 0; }
  .rc-atalhos .btn { flex: 1 1 0; min-height: 44px; }
  /* Nomes tocáveis com alvo de 44 px sem abrir vão na linha: o enchimento cresce e a
     margem negativa devolve o espaço. */
  button.pessoa-nome, .rc-mais-n { display: inline-block; padding-block: 15px; margin-block: -15px; }
  /* Os selos de medalha, o "Por quê", o "Ler o termo", o "Contestar classificação" e o
     "Revogar": 44 px de alvo. No selo, o alvo é o summary transparente e a margem
     negativa devolve o espaço; o desenho continua do mesmo tamanho. */
  .medalha > summary { min-height: 44px; margin-block: -9px; }
  .rc-meds { gap: 14px 6px; }
  .rc-tabela .rc-c-med { margin-top: 2px; }
  details.rc-porque > summary { min-height: 44px; display: flex; align-items: center; }
  .rc-ler-termo, .rc-tk-ct .linkline, .rc-revogar, .rc-ver-av .linkline { min-height: 44px; display: inline-flex; align-items: center; }
  .rc-pod-cartao { padding: 12px 14px; }
  .rc-recorte, .rc-recorte-ctl { max-width: none; }
  .rc-cfg-lista > li { flex-wrap: wrap; }
}
@media (pointer: coarse) {
  .side-ft .rc-eu { width: 44px; height: 44px; }
}
/* Tablet e celular deitado (768 a 1024 px) com toque: as regras de 44 px acima valiam só até 767,
   e ali os nomes de pessoa tinham 16-22 px de alvo, os selos 20-24 px e as abas 36 px
   (auditoria R-08). Só com ponteiro de toque: no mouse o desenho denso continua. */
@media (pointer: coarse) and (min-width: 768px) {
  .rc-abas button { min-height: 44px; }
  button.pessoa-nome, .rc-mais-n { display: inline-block; padding-block: 15px; margin-block: -15px; }
  .medalha > summary { min-height: 44px; margin-block: -9px; }
  details.rc-porque > summary { min-height: 44px; display: flex; align-items: center; }
  .rc-ler-termo, .rc-tk-ct .linkline, .rc-revogar, .rc-ver-av .linkline { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ------------------------------------------- contato da pessoa (perfil) */
.rc-ct-lista { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rc-ct-linha { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: var(--t-sm); }
.rc-ct-rot { color: var(--muted); font-weight: 600; font-size: var(--t-xs); }
.rc-ct-val { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-weight: 600; }
.rc-ct-bts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rc-ct-bts .btn { min-height: 36px; }
.rc-contato > .linkline { color: var(--accent-ink); min-height: 32px; }
/* Os dois campos do contato lado a lado no diálogo estreito (uma coluna), cada um com
   metade; o resto do formulário continua na linha inteira. */
.modal:not(.largo) .form:has(> .rc-meia) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.modal:not(.largo) .form:has(> .rc-meia) > .field:not(.rc-meia) { grid-column: 1 / -1; }

/* ------------------------------------------- "Responde por" */
.rc-g-resp, .rc-eq-resp, .rc-ar-resp, .rc-area-resp { font-size: var(--t-xs); color: var(--muted); margin: 2px 0 0; line-height: 1.4; }
.rc-resp-rot { font-weight: 700; color: var(--ink-2); }
.rc-area-cobre { font-size: var(--t-xs); margin: 4px 0 0; color: var(--muted); }
.rc-area-cobre:empty { display: none; }
.rc-tk-resp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-2); margin: 0; }
.rc-tk-resp .pessoa-funcao, .rc-cuida .pessoa-funcao { color: var(--muted); font-weight: 600; }
.rc-cuida-area { color: var(--muted); }
.rc-origem-ninguem .pessoa-funcao { color: var(--neu-ink); }

/* ------------------------------------------- Configurar › Áreas */
.rc-ar-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rc-ar-topo .sub { margin: 0; }
.rc-ar-soltas { margin-bottom: 12px; }
.rc-ar-soltas .linkline { color: var(--accent-ink); }
.rc-area { margin-bottom: 14px; }
.rc-area-off > header h2 { color: var(--muted); }
.rc-ar-corpo { display: flex; flex-direction: column; }
.rc-ar-sec { padding: 12px 16px; border-top: 1px solid var(--rule); margin: 0; }
.rc-ar-sec:first-child { border-top: 0; }
.rc-ar-h { font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.rc-ar-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rc-ar-cat { font-size: var(--t-sm); white-space: normal; }
.rc-ar-cat small { color: var(--muted); font-weight: 500; }
.rc-ar-aviso { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--t-sm); color: var(--neu-ink); }
.rc-ar-aviso .dot-ic { flex: none; margin-top: 2px; color: var(--neu-mark); }
.rc-ar-lojas > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; cursor: pointer; min-height: 44px; list-style: none; padding: 4px 0; }
.rc-ar-lojas > summary::-webkit-details-marker { display: none; }
.rc-ar-lojas > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-left: auto; align-self: center; }
.rc-ar-lojas[open] > summary::after { transform: rotate(225deg); }
.rc-ar-lojas > summary .rc-ar-h { margin: 0; }
.rc-ar-lojas > summary .sub { font-size: var(--t-sm); }
.rc-ar-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.rc-ar-loja { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 8px 10px; border-top: 1px solid var(--rule); font-size: var(--t-sm); }
.rc-ar-loja:first-child { border-top: 0; }
/* A loja sem responsável aparece primeiro e marcada: quem responde é o gerente (ou ninguém). */
.rc-ar-loja.rc-ar-sem { background: var(--neu-soft); border-radius: var(--r-sm); border-top-color: transparent; margin-bottom: 2px; }
.rc-ar-lj { font-weight: 700; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.rc-ar-quem { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.rc-ar-quem .pessoa-funcao { color: var(--muted); font-weight: 600; }
.rc-ar-eq { color: var(--accent-ink); min-height: 36px; }
.rc-ar-atalho { margin-top: 10px; }
.rc-cfg-areas { margin: 0; font-size: var(--t-sm); }
/* O seletor de categorias da área: as escolhidas em chips, a busca e a lista. */
.rc-cods-sel { display: flex; flex-direction: column; gap: 8px; }
.rc-cod-esc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rc-cod-esc-rot { font-size: var(--t-xs); font-weight: 800; color: var(--muted); margin-right: 4px; }
.rc-cod-esc .sub { font-size: var(--t-sm); }
.rc-cod-ocupada { cursor: default; color: var(--muted); }
.rc-cod-outra { color: var(--neu-ink) !important; }
/* Categorias de problema: a área de cada linha. */
.tax-area { display: block; font-size: var(--t-xs); color: var(--muted); margin-top: 2px; line-height: 1.4; }
.tax-area .linkline { color: var(--accent-ink); font-size: inherit; }
.tax-area-sem { color: var(--neu-ink); }

@media (max-width: 767px) {
  .modal:not(.largo) .form:has(> .rc-meia) { grid-template-columns: minmax(0, 1fr); }
  .rc-ct-linha { grid-template-columns: minmax(0, 1fr); }
  .rc-ct-bts { justify-content: flex-start; }
  .rc-ct-bts .btn, .rc-contato > .linkline, .rc-ar-eq, .tax-area .linkline, .rc-ar-soltas .linkline { min-height: 44px; display: inline-flex; align-items: center; }
  .rc-ar-loja { grid-template-columns: minmax(0, 1fr) auto; }
  .rc-ar-quem { grid-column: 1 / -1; grid-row: 2; }
  .rc-ar-sec { padding: 12px; }
  .rc-ar-topo .btn, .rc-area .btn-row .btn, .rc-ar-atalho .btn { min-height: 44px; }
  .chip-filtro { min-height: 44px; }
}

/* ------------------------------------------- a chave do reconhecimento (opt-in) */
.rc-chave { display: flex; flex-direction: column; gap: 8px; }
.rc-chave p { margin: 0; font-size: var(--t-sm); }
.rc-chave-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rc-chave-estado { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink-2); font-size: var(--t-sm); }
.rc-chave-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--muted-2, #9a9ab0); }
.rc-chave-estado.on .rc-chave-ponto { background: var(--accent); }
.rc-chave-off { color: var(--neu-ink); }
@media (max-width: 767px) { .rc-chave-topo .btn { min-height: 44px; flex: 1 1 100%; } }
.rc-ar-topo .grow { flex: 1; }
.rc-ar-quem { flex-wrap: nowrap; align-items: flex-start; }
.rc-ar-quem > span:last-child { min-width: 0; }