/* =====================================================================
   Genius Lider — Mobilizacao via WhatsApp

   Identidade PDT (Liderancas PDT12): azul como marca, vermelho
   como secundaria — a mesma dupla do simbolo da rosa no punho.
   Aqui ela e aplicada com criterio: o azul e a marca (topo, login,
   acao principal) e o resto da paleta vira ESCALA DE ESTADO, que e
   onde a cor carrega informacao de verdade. O fundo fica calmo —
   coordenador le esta tela o dia inteiro, as vezes no sol, e fundo
   azul com estouro vermelho cansa e atrapalha a leitura da tabela.
   ===================================================================== */

:root {
  /* --- marca (PDT: azul #1a3f8f, vermelho #e5253c) --- */
  --roxo:        #1a3f8f;
  --roxo-vivo:   #2f5fc4;
  --roxo-escuro: #0f2a63;
  --laranja:     #e5253c;
  --amarelo:     #f2798c;
  --ciano:       #4d7fd6;
  --lilas:       #e7edf7;

  /* --- neutros com leve viés azul, para pertencerem à marca --- */
  --tinta:         #16233d;
  --tinta-media:   #4c5b73;
  --tinta-fraca:   #8393a8;
  --papel:         #ffffff;
  --papel-fundo:   #f6f8fb;
  --linha:         #dde3ee;
  --linha-forte:   #c0cbdc;

  /* --- semânticos: separados da marca de propósito --- */
  --sucesso:     #15803d;
  --sucesso-bg:  #e8f6ed;
  --erro:        #e5253c;
  --erro-bg:     #fdeceb;
  --atencao:     #b45309;
  --atencao-bg:  #fdf4e3;

  /* --- escala de estado da resposta --- */
  --st-pendente:    #a3aebc;
  --st-enviada:     #4d7fd6;
  --st-visualizada: #2f5fc4;
  --st-aceita:      #d99400;
  --st-concluida:   #e5253c;
  --st-validada:    #15803d;
  --st-recusada:    #c62828;

  --raio:   12px;
  --raio-p: 8px;
  --sombra:      0 1px 2px rgba(42,27,61,.05), 0 6px 20px rgba(42,27,61,.06);
  --sombra-alta: 0 10px 40px rgba(42,27,61,.16);

  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --corpo:   "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--corpo);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel-fundo);
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

::selection { background: var(--amarelo); color: var(--tinta); }

:focus-visible {
  outline: 3px solid var(--ciano);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ================================================================ login */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background: var(--roxo);
}

/* raios da identidade, no fundo do login e em lugar nenhum mais:
   e o unico momento em que a pessoa nao esta tentando ler dado */
.login::before,
.login::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.login::before {
  width: 62vmax; height: 62vmax;
  top: -28vmax; right: -22vmax;
  background: radial-gradient(circle at 35% 35%, var(--roxo-vivo) 0%, transparent 62%);
}
.login::after {
  width: 44vmax; height: 44vmax;
  bottom: -20vmax; left: -16vmax;
  background: radial-gradient(circle at 60% 40%, rgba(242,98,42,.5) 0%, transparent 64%);
}

.login__caixa {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: var(--papel);
  border-radius: 18px;
  padding: 36px 32px 32px;
  box-shadow: var(--sombra-alta);
}

/* o "12000" vem antes do nome, como no material de rua */
.login__marca {
  font-family: var(--display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0;
  color: var(--roxo);
}
.login__sub {
  margin: 6px 0 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ciano);
}
.login__sub::after {
  content: "";
}

/* ================================================================ campos */
.campo { display: block; margin-bottom: 16px; }
.campo > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-media);
  margin-bottom: 6px;
}
.campo > span em {
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta-fraca);
}

/* width:100% vale para campo de digitar, NAO para caixa de marcar nem
   botao de radio: neles a regra estica o quadradinho e empurra o rotulo
   para fora do container. Excluir aqui evita o bug em todo lugar, em vez
   de remendar caso a caso. */
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo select,
.campo textarea {
  width: 100%;
  font: inherit;
  padding: 11px 13px;
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--raio-p);
  background: var(--papel);
  color: var(--tinta);
  transition: border-color .12s, box-shadow .12s;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-fraca); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--roxo-vivo);
  box-shadow: 0 0 0 3px rgba(123,63,181,.16);
}
.campo textarea { min-height: 116px; resize: vertical; line-height: 1.55; }
.campo input[type="file"] { padding: 9px; border-style: dashed; cursor: pointer; }

/* ================================================================ botões */
.botao {
  font: inherit;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: var(--raio-p);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .13s, border-color .13s, color .13s, transform .06s;
}
.botao:active:not(:disabled) { transform: translateY(1px); }
.botao:disabled { opacity: .5; cursor: not-allowed; }

.botao--principal {
  width: 100%;
  background: var(--roxo);
  color: #fff;
  letter-spacing: .01em;
}
/* largura total serve ao login e aos formularios; dentro de um grupo de
   acoes (celula de tabela, barra de botoes) ela estica o botao e
   desequilibra a linha */
.linha-acoes .botao--principal,
.cabeca__acoes .botao--principal { width: auto; }
.botao--principal:hover:not(:disabled) { background: var(--roxo-escuro); }

.botao--secundario {
  background: var(--papel);
  border-color: var(--linha-forte);
  color: var(--tinta);
}
.botao--secundario:hover:not(:disabled) {
  border-color: var(--roxo-vivo);
  color: var(--roxo);
}

.botao--texto {
  background: none;
  border: none;
  color: var(--tinta-media);
  padding: 6px 8px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.botao--texto:hover { color: var(--roxo); }

.botao--mini { padding: 6px 12px; font-size: 13px; }

/* ================================================================ alertas */
.alerta {
  padding: 11px 14px;
  border-radius: var(--raio-p);
  font-size: 14px;
  margin: 0 0 14px;
  border-left: 3px solid;
}
.alerta b { display: block; margin-bottom: 2px; }
.alerta--erro   { background: var(--erro-bg);     color: #8e1f1f; border-color: var(--erro); }
.alerta--aviso  { background: var(--atencao-bg);  color: #7a3a06; border-color: var(--atencao); margin: 0; border-radius: 0; }
.alerta--ok     { background: var(--sucesso-bg);  color: #0f5c2e; border-color: var(--sucesso); }

/* ================================================================ topo */
.topo {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 22px;
  height: 60px;
  background: var(--roxo);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}
/* faixa fina com as quatro cores: a identidade aparece sem invadir */
.topo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--amarelo) 0 25%, var(--laranja) 25% 50%,
    var(--ciano) 50% 75%, var(--roxo-vivo) 75% 100%);
}

.topo__marca {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.topo__marca::after {
  content: "";
}

.topo__menu { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.topo__menu span { display: block; width: 20px; height: 2px; background: #fff; margin: 4px 0; border-radius: 2px; }

.abas { display: flex; gap: 3px; margin-right: auto; }
.abas a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: var(--raio-p);
  transition: background-color .12s, color .12s;
  white-space: nowrap;
}
.abas a:hover { background: rgba(255,255,255,.12); color: #fff; }
.abas a[aria-current="page"] { background: #fff; color: var(--roxo); font-weight: 600; }

.topo__usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.82);
}
.topo__usuario .botao--texto { color: rgba(255,255,255,.82); }
.topo__usuario .botao--texto:hover { color: #fff; }

.etiqueta {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--amarelo);
  color: var(--roxo-escuro);
}

/* ================================================================ layout */
.conteudo { max-width: 1200px; margin: 0 auto; padding: 26px 22px 60px; }

.cabeca {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cabeca h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -.025em;
  margin: 0;
  color: var(--tinta);
}
.cabeca p { margin: 0; color: var(--tinta-fraca); font-size: 14px; }
.cabeca__acoes { margin-left: auto; display: flex; gap: 8px; }

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px;
  margin-bottom: 18px;
}
.cartao h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
  margin: 0 0 15px;
}

.grade { display: grid; gap: 15px; }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }

/* ================================================================ placar */
.placar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 11px;
}
.placar__item {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 13px 15px;
  border-top: 4px solid var(--st-pendente);
  box-shadow: var(--sombra);
}
.placar__num {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.placar__rot {
  min-height: 2.5em;
  font-size: 11px;
  font-weight: 600;
  color: var(--tinta-media);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 3px;
}

/* ================================================================ tabela */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--linha); }
th {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tinta-media);
  background: var(--lilas);
  position: sticky;
  top: 0;
  white-space: nowrap;
}
th:first-child { border-top-left-radius: var(--raio-p); }
th:last-child  { border-top-right-radius: var(--raio-p); }
tbody tr:hover { background: var(--papel-fundo); }
tbody tr:last-child td { border-bottom: none; }
td.num { font-variant-numeric: tabular-nums; text-align: right; }
/* data e hora nao podem quebrar em tres linhas: engorda a linha inteira
   e a tabela perde a densidade que a torna util */
td.quando { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.quando .discreto { font-size: 12px; }

/* ================================================================ selos */
.selo {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 4px 10px;
  border-radius: 99px;
  color: #fff;
  white-space: nowrap;
}
.selo--pendente    { background: var(--st-pendente); }
.selo--enviada     { background: var(--st-enviada); }
.selo--visualizada { background: var(--st-visualizada); }
.selo--aceita      { background: var(--st-aceita); }
.selo--concluida   { background: var(--st-concluida); }
.selo--validada    { background: var(--st-validada); }
.selo--recusada    { background: var(--st-recusada); }
/* estados de missão usam a mesma escala, para não inventar outro vocabulário de cor */
.selo--rascunho    { background: var(--st-pendente); }
.selo--agendada    { background: var(--st-enviada); }
.selo--enviando    { background: var(--st-visualizada); }
.selo--cancelada   { background: var(--tinta-fraca); }

/* ================================================================ diversos */
.vazio { text-align: center; padding: 44px 20px; color: var(--tinta-fraca); }
.vazio strong {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 5px;
}
.carregando { color: var(--tinta-fraca); padding: 22px 0; font-size: 14px; }
.discreto { color: var(--tinta-media); font-size: 13px; }
.linha-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.pulso {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 99px;
  background: var(--sucesso);
  margin-right: 6px;
  animation: bater 2s ease-in-out infinite;
}
@keyframes bater { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

details { margin: 10px 0; }
summary { cursor: pointer; padding: 5px 0; }
summary:hover { color: var(--roxo); }

/* ================================================================ celular */
@media (max-width: 760px) {
  .topo { gap: 12px; padding: 0 15px; }
  .topo__menu { display: block; }
  .topo__marca::after { display: none; }
  .topo__usuario span:first-child { display: none; }
  .abas {
    position: absolute;
    top: 60px; left: 0; right: 0;
    flex-direction: column;
    background: var(--roxo);
    padding: 8px 15px 15px;
    gap: 2px;
    display: none;
    box-shadow: 0 12px 24px rgba(42,27,61,.28);
  }
  .abas[data-aberto="1"] { display: flex; }
  .abas a { padding: 12px 13px; }
  .conteudo { padding: 18px 15px 48px; }
  .cabeca h2 { font-size: 21px; }
  .cabeca__acoes { margin-left: 0; width: 100%; }
  .cabeca__acoes .botao { flex: 1; }
  .placar__num { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ================================================ escolha de disparo
   Tres opcoes explicitas em vez de "campo vazio = rascunho". A leitura
   antiga levou quem opera a achar que data vazia dispara na hora — o
   oposto do que acontecia. Missao que a pessoa acha que saiu e nao saiu
   e a pior falha possivel numa campanha: ninguem vai procurar. */
.escolha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: -4px 0 16px;
}
.escolha label {
  display: block;
  padding: 12px 14px;
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--raio-p);
  cursor: pointer;
  background: var(--papel);
  transition: border-color .12s, background-color .12s;
}
.escolha label:hover { border-color: var(--roxo-vivo); }
.escolha label:has(input:checked) {
  border-color: var(--roxo);
  background: var(--lilas);
  box-shadow: inset 0 0 0 1px var(--roxo);
}
.escolha input { margin-right: 8px; accent-color: var(--roxo); }
.escolha b { font-weight: 600; }
.escolha span {
  display: block;
  font-size: 12.5px;
  color: var(--tinta-media);
  margin: 2px 0 0 24px;
  line-height: 1.35;
}

/* ================================================ explicacao do filtro */
.explica {
  background: var(--lilas);
  border-left: 3px solid var(--roxo-vivo);
  border-radius: var(--raio-p);
  padding: 13px 16px;
  margin: -4px 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
}
.explica p { margin: 0 0 7px; }
.explica p:last-child { margin-bottom: 0; }
.explica .conta {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--linha-forte);
  font-size: 14.5px;
}

/* ================================================ caixas de marcar
   <select multiple> exige ctrl+clique no computador e e quase inutil no
   celular. Quem opera campanha marca no dedo, muitas vezes no telefone. */
.marcadores {
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--raio-p);
  background: var(--papel);
  max-height: 172px;
  overflow-y: auto;
  padding: 5px;
}
.marcador {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 400;
}
.marcador:hover { background: var(--papel-fundo); }
.marcador input { accent-color: var(--roxo); margin: 0; flex: 0 0 auto; width: auto; }
.marcador span { font-size: 14px; }
.marcador i {
  font-style: normal;
  color: var(--tinta-fraca);
  font-size: 12px;
  margin-left: 5px;
}
.marcador:has(input:checked) { background: var(--lilas); font-weight: 600; }
.marcador:has(input:checked) i { font-weight: 400; }

/* botao desabilitado que EXPLICA em vez de desaparecer */
.botao:disabled { opacity: .45; cursor: not-allowed; }
.linha-acoes .discreto { font-size: 12px; }

/* ================================================ resumo da missao
   Acompanhamento: o que foi enviado (previa) ao lado de como esta
   (estado, publico, acoes). Pedido de quem opera: ver o que foi postado
   sem abrir outra tela, e duplicar para repostar. */
.missao-resumo {
  display: grid;
  grid-template-columns: minmax(250px, 340px) 1fr;
  gap: 22px;
  align-items: start;
}
.missao-resumo__rotulo {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.missao-resumo__estado { display: grid; gap: 12px; min-width: 0; }
.missao-resumo__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.missao-resumo__fatos { margin: 0; display: grid; gap: 6px; font-size: 14px; }
.missao-resumo__fatos div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; }
.missao-resumo__fatos dt { color: var(--tinta-fraca); font-size: 13px; }
.missao-resumo__fatos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.missao-resumo .alerta { margin: 0; border-radius: var(--raio-p); }

/* previa com a cara do WhatsApp — de proposito fora da paleta da marca:
   o ponto e reconhecer na hora "isso e o que chegou no celular" */
.zap {
  background: #efe7de;
  border-radius: var(--raio);
  padding: 14px 12px;
}
.zap__balao {
  background: #fff;
  border-radius: 2px 8px 8px 8px;
  padding: 4px 4px 6px;
  box-shadow: 0 1px .5px rgba(11,20,26,.13);
  max-width: 100%;
}
.zap__midia {
  display: block;
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 6px;
  background: #d9d2c9;
}
.zap__audio { width: 100%; margin: 4px 0; }
.zap__arquivo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: #f5f6f6;
  border-radius: 6px;
  padding: 10px 12px;
  color: #111b21;
  text-decoration: none;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.zap__arquivo span { color: #027eb5; font-weight: 600; font-size: 12px; flex: 0 0 auto; }
.zap__texto {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #111b21;
  font-size: 14.2px;
  line-height: 1.38;
  padding: 6px 6px 0;
}
.zap__hora { text-align: right; font-size: 11px; color: #667781; padding: 2px 6px 0; }
.zap__botoes { display: grid; gap: 3px; margin-top: 3px; }
.zap__botao {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px .5px rgba(11,20,26,.13);
  padding: 9px;
  text-align: center;
  color: #027eb5;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 760px) {
  .missao-resumo { grid-template-columns: 1fr; }
}

/* ================================================ senha provisoria
   Aparece uma vez e some. Amarelo da campanha para nao passar batido:
   quem fechar a tela sem copiar vai ter que gerar outra. */
.usuario-senha {
  border-color: var(--amarelo);
  box-shadow: inset 0 0 0 1px var(--amarelo), var(--sombra);
}
.usuario-senha__valor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 14px;
}
.usuario-senha__valor code {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--roxo-escuro);
  background: var(--papel-fundo);
  border: 1.5px dashed var(--linha-forte);
  border-radius: var(--raio-p);
  padding: 8px 14px;
  user-select: all;
}

/* ================================================ chips (numeros)
   Um cartao por numero. O estado vem primeiro porque e o que decide se
   a missao sai: chip caido = regiao parada. */
.chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}
.chips-avisos { display: grid; gap: 10px; margin-bottom: 16px; }
.chips-avisos .alerta { margin: 0; border-radius: var(--raio-p); }
.chip { display: grid; gap: 12px; margin: 0; }
.chip--pausado { background: var(--papel-fundo); }
.chip__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.chip__nome { margin: 0; font-size: 17px; }
.chip__numero {
  margin: 2px 0 0;
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-media);
}
.chip__selos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.chip__fatos { margin: 0; display: grid; gap: 5px; font-size: 14px; }
.chip__fatos div { display: grid; grid-template-columns: 104px 1fr; gap: 10px; }
.chip__fatos dt { color: var(--tinta-fraca); font-size: 13px; }
.chip__fatos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.chip .alerta { margin: 0; border-radius: var(--raio-p); }
.chip__passo {
  background: var(--lilas);
  border-left: 3px solid var(--roxo-vivo);
  border-radius: var(--raio-p);
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.45;
}
.chip__passo code {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12px;
  overflow-wrap: anywhere;
  user-select: all;
}
.chip__passo--urgente { background: var(--atencao-bg); border-left-color: var(--atencao); }
.chip__qr-caixa { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.chip__qr-caixa img {
  width: 240px;
  height: 240px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  image-rendering: pixelated;
}
.chip__qr-caixa ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; max-width: 34ch; }
.chip__codigo { font-family: var(--mono); font-size: 22px; letter-spacing: .12em; }

/* topo: nome e botoes nao quebram em duas linhas em tela media */
.topo__usuario .botao--texto { white-space: nowrap; }

/* topo com 6 abas: entre o celular (menu recolhido) e a tela larga, o nome
   de quem esta logado e o que sai primeiro — o papel continua visivel */
@media (min-width: 761px) and (max-width: 1180px) {
  .topo__usuario span:first-child { display: none; }
  .abas a { padding: 8px 9px; font-size: 13.5px; }
}