.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: var(--altura-toque);
  padding: 0 var(--espaco-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-weight: 600;
  cursor: pointer;
}
.botao:hover { background: var(--cor-superficie-2); }
.botao:disabled { opacity: .55; cursor: not-allowed; }
.botao--principal { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-texto-botao); }
.botao--principal:hover { background: var(--cor-primaria-forte); border-color: var(--cor-primaria-forte); }
.botao--perigo { color: var(--cor-erro); border-color: var(--cor-erro); background: transparent; }
.botao--perigo:hover { background: var(--cor-erro-suave); }
.botao--largo { width: 100%; }
.botao--grande { min-height: 3.25rem; font-size: 1.0625rem; }
.botao--icone { padding: 0; width: var(--altura-toque); }
.botao svg { width: 1.125em; height: 1.125em; flex: none; }

.campo { display: grid; gap: var(--espaco-1); margin-bottom: var(--espaco-4); }
.campo > span { font-size: .875rem; font-weight: 600; color: var(--cor-texto-fraco); }
.campo input, .campo select, .campo textarea {
  min-height: var(--altura-toque);
  padding: var(--espaco-2) var(--espaco-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
  width: 100%;
}
.campo textarea { min-height: 5rem; resize: vertical; }
.campo-erro { color: var(--cor-erro); font-size: .875rem; }
.campo-dica { color: var(--cor-texto-fraco); font-size: .8125rem; }

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-1);
  padding: var(--espaco-5);
}
.cartao + .cartao { margin-top: var(--espaco-4); }
.cartao-titulo { display: flex; align-items: center; gap: var(--espaco-2); margin-bottom: var(--espaco-4); }
.cartao-titulo svg { color: var(--cor-primaria); }

/* ---------- cartao que abre e fecha ----------
 *
 * Nas telas de cadastro e de dinheiro os cartoes viram uma lista de titulos: a
 * de bairros tinha cinco blocos abertos de uma vez, e achar "Faixas por km"
 * era rolar a pagina lendo titulo por titulo.
 *
 * Fechado, o cartao e so o titulo -- por isso a margem de baixo do titulo some
 * quando ele esta fechado, senao sobra um vao dentro de um bloco vazio.
 */
/* Cartao de UMA LINHA, para lista longa.
   Usado na operacao de balcao: dez pedidos em cartoes de tamanho normal
   viram dez telas de rolagem, e quem esta no balcao precisa ver a lista toda
   de uma vez. Padding menor e margem entre eles no lugar do +.cartao. */
.cartao--linha {
  padding: var(--espaco-3);
  margin-top: 0;
}
.cartao--linha + .cartao--linha { margin-top: var(--espaco-2); }

.cartao--dobra { padding: var(--espaco-4) var(--espaco-5); }
.cartao--dobra > summary {
  cursor: pointer;
  /* A seta propria do navegador muda de forma em cada um; a nossa e a mesma em
     todos, e gira. */
  list-style: none;
  margin: 0;
  padding: var(--espaco-1) 0;
  border-radius: var(--raio-1);
}
.cartao--dobra > summary::-webkit-details-marker { display: none; }
.cartao--dobra[open] > summary { margin-bottom: var(--espaco-4); }
.cartao--dobra > summary:hover { color: var(--cor-primaria); }
.cartao--dobra > summary:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

/* A seta fica na direita, longe do titulo: no meio ela empurraria o texto e
   mudaria o alinhamento entre um cartao e outro. */
.cartao--dobra > summary::after {
  content: '';
  margin-left: auto;
  width: .6rem;
  height: .6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-.15rem, -.15rem);
  opacity: .55;
  transition: transform .15s;
}
.cartao--dobra[open] > summary::after {
  transform: rotate(225deg) translate(-.15rem, -.15rem);
}
@media (prefers-reduced-motion: reduce) {
  .cartao--dobra > summary::after { transition: none; }
}

/* Fechados, os blocos ficam mais juntos: e uma lista, e nao cartoes soltos. */
.cartao--dobra + .cartao--dobra { margin-top: var(--espaco-3); }

/* Botao discreto: acao secundaria dentro de uma linha que ja tem uma acao
   principal. Sem esta regra ele caia no visual cru do navegador, cinza e
   quadrado, no meio de botoes desenhados -- e a caixa de entrada, que e a tela
   mais vista da loja, tinha dois deles em cada pedido. */
.botao-fraco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-1);
  min-height: 2.25rem;
  padding: 0 var(--espaco-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: transparent;
  color: var(--cor-texto-fraco);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
.botao-fraco:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }
.botao-fraco:disabled { opacity: .55; cursor: not-allowed; }

/* O "mais" que abre as acoes de uma entrega no painel. Quadrado, do tamanho do
   dedo, e sem crescer junto com a linha. */
/* O tres-pontinhos que abre as acoes de uma entrega.
 *
 * Encolheu em 07/09/2026, a pedido de quem opera: ocupava a largura de um dedo
 * inteiro em cada cartao, numa lista de vinte, e o que ele faz cabe num canto.
 * Abaixo do alvo de toque de 44px de proposito -- e uma tela de balcao, usada
 * com mouse, e a area util cresce com o padding sem empurrar a linha. */
.operacao-menu-abrir {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--raio-1);
  background: none;
  color: var(--cor-texto-fraco);
  cursor: pointer;
}
.operacao-menu-abrir:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }

/* Linha de lista com rotulo de um lado e numero do outro: extrato da carteira
   na administracao.
 *
 * O aplicativo do entregador tem a sua propria versao em app/app.css, e as duas
 * existem de proposito -- a folha do aplicativo nao e carregada pelo ADM, e
 * sem esta regra o extrato da administracao ficava em display block, com o
 * valor caindo por cima da descricao. */
.ganho-linha {
  display: flex;
  align-items: baseline;
  gap: var(--espaco-3);
  padding: var(--espaco-3) 0;
  border-bottom: 1px solid var(--cor-borda);
  font-variant-numeric: tabular-nums;
}
.ganho-linha:last-child { border-bottom: 0; }
.ganho-linha > .numero { flex: none; color: var(--cor-texto-fraco); }
/* A descricao e quem cede espaco; sem o min-width: 0 um nome comprido empurra
   o valor para fora da tela em vez de quebrar. */
.ganho-linha > span:not(.numero):not(.valor) {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ganho-linha > .valor { margin-left: auto; font-weight: 600; white-space: nowrap; }
.ganho-linha > .botao, .ganho-linha > .botao-fraco { flex: none; }

.metrica { display: grid; gap: var(--espaco-1); }
.metrica-rotulo { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-fraco); }
.metrica-valor { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.abas { display: flex; gap: var(--espaco-1); border-bottom: 1px solid var(--cor-borda); overflow-x: auto; }
.abas a {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-3) var(--espaco-4);
  border-bottom: 2px solid transparent;
  color: var(--cor-texto-fraco);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.abas a:hover { color: var(--cor-texto); }
.abas a[aria-current="page"] { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }

.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: var(--espaco-3); border-bottom: 1px solid var(--cor-borda); text-align: left; }
.tabela th { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-fraco); font-weight: 600; }
.tabela td.valor, .tabela th.valor { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tbody tr:hover { background: var(--cor-superficie-2); }
.tabela tfoot td { font-weight: 700; border-bottom: none; }
.rolagem { overflow-x: auto; }

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: .125rem var(--espaco-2);
  border-radius: var(--raio-cheio);
  font-size: .8125rem;
  font-weight: 600;
  background: var(--cor-superficie-2);
  color: var(--cor-texto-fraco);
}
.selo--aguardando { background: var(--cor-alerta-suave); color: var(--cor-alerta); }
.selo--oferecida { background: var(--cor-alerta-suave); color: var(--cor-alerta); }
.selo--em_andamento { background: var(--cor-primaria-suave); color: var(--cor-primaria-forte); }
.selo--entregue { background: var(--cor-sucesso-suave); color: var(--cor-sucesso); }
.selo--cancelada { background: var(--cor-erro-suave); color: var(--cor-erro); }

/* O selo do nivel.

   A cor NAO vem de um token por nivel, e essa e a decisao: os niveis sao
   cadastrados no ADM, com cor escolhida la. Um token --cor-nivel-ouro no CSS
   viraria mentira no dia em que alguem trocasse a cor do Ouro ou criasse um
   quinto nivel. Entao a cor chega por --cor-nivel, escrita no elemento a partir
   do que o banco devolveu, e o CSS so sabe o que fazer com ela.

   O texto continua sendo a cor de texto normal: fundo e borda tingidos garantem
   a identidade sem que o contraste dependa de uma cor que alguem digitou. */
.selo--nivel {
  --nivel-tinta: var(--cor-nivel, var(--cor-texto-fraco));
  background: var(--cor-superficie-2);
  background: color-mix(in srgb, var(--nivel-tinta) 12%, var(--cor-superficie));
  border: 1px solid var(--cor-borda);
  border-color: color-mix(in srgb, var(--nivel-tinta) 55%, transparent);
  color: var(--cor-texto);
}
/* Nunca quebra: em 320px, dentro da linha da fila, PLATINA virava uma coluna
   de letras soltas -- "PL / A / TI / N / A". Selo que quebra deixa de ser selo.
   Quem cede espaco e o nome ao lado, que pode ocupar duas linhas sem prejuizo. */
.selo--nivel { white-space: nowrap; flex: none; }
.selo--nivel svg { color: var(--nivel-tinta); flex: none; }
/* No escuro o metal cru quase some no fundo. Clarear a tinta so do selo mantem
   bronze parecendo bronze sem inventar uma segunda paleta. */
[data-tema="escuro"] .selo--nivel {
  --nivel-tinta: color-mix(in srgb, var(--cor-nivel, #8a97a6) 55%, #ffffff);
}

/* A avaliacao no pe do cartao da entrega baixada.

   Quebra em varias linhas de proposito: no painel de 320px o campo de motivo
   ocupa a linha inteira, e os dois botoes caem embaixo dele em vez de
   espremerem o campo ate caber tres letras. */
.avaliar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  margin-top: var(--espaco-2);
  padding-top: var(--espaco-2);
  border-top: 1px solid var(--cor-borda);
}
.avaliar-pergunta { font-size: .8125rem; color: var(--cor-texto-fraco); }
.avaliar .selo { max-width: 100%; overflow-wrap: anywhere; }
/* O campo toma a linha e empurra os botoes para baixo assim que o cartao fica
   estreito -- e o cartao e sempre estreito no celular. */
.avaliar-motivo { flex: 1 1 12rem; min-width: 0; }
.avaliar .botao--icone { flex: none; }

/* O cartao do nivel, no topo da tela de ganhos do entregador. */
.nivel-cartao { display: grid; gap: var(--espaco-2); }
.nivel-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
}
.nivel-periodo { font-size: .8125rem; color: var(--cor-texto-fraco); }
.nivel-frase { margin: 0; font-weight: 600; }
/* A barra e enfeite com dado dentro: quem usa leitor de tela recebe a mesma
   informacao pela frase acima, e por isso ela nao repete o texto. */
.nivel-barra {
  height: .5rem;
  border-radius: var(--raio-cheio);
  background: var(--cor-superficie-2);
  overflow: hidden;
}
.nivel-barra > span {
  display: block;
  height: 100%;
  background: var(--cor-primaria);
}
.nivel-nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-1) var(--espaco-2);
  font-size: .875rem;
}
.nivel-nota > span { display: inline-flex; align-items: center; gap: var(--espaco-1); }
.nivel-motivos > summary { cursor: pointer; font-size: .875rem; color: var(--cor-texto-fraco); }
.nivel-motivo {
  margin: var(--espaco-1) 0 0;
  padding-left: var(--espaco-3);
  border-left: 2px solid var(--cor-borda);
  font-size: .875rem;
  overflow-wrap: anywhere;
}
.nivel-vantagens { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--espaco-1); }
.nivel-vantagens li {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  font-size: .875rem;
  color: var(--cor-sucesso);
}
.nivel-acerto { margin: 0; display: flex; align-items: center; gap: var(--espaco-1); }

/* A rota do entregador. Uso em pe, uma mao: alvo grande e nada apertado. */
.rota-abrir { margin-bottom: var(--espaco-3); }
.rota-mapa {
  height: 14rem;
  border-radius: var(--raio-2);
  overflow: hidden;
  margin-bottom: var(--espaco-3);
}
.rota-parada {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  padding: var(--espaco-2) 0;
  border-bottom: 1px solid var(--cor-borda);
}
.rota-parada:last-child { border-bottom: none; }
.rota-corpo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rota-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--raio-cheio);
  background: var(--cor-primaria);
  color: var(--cor-texto-botao);
  font-weight: 700;
  font-size: .875rem;
}
/* Na ficha da entrega o numero e menor: ali ele acompanha o nome da loja, e nao
   encabeca uma linha propria. */
.rota-numero--ficha { width: 1.25rem; height: 1.25rem; font-size: .75rem; }
.rota-mover { display: flex; flex-direction: column; gap: var(--espaco-1); flex: none; }
/* A seta de descer e a de subir virada. Um icone so no arquivo, dois sentidos
   na tela. */
.rota-mover [data-descer] svg { transform: rotate(180deg); }

/* O simulador do cone.
 *
 * Desenho proprio, sem ladrilho de mapa: o que esta sob prova e a GEOMETRIA --
 * o angulo e o alcance -- e nao qual rua fica onde. Um mapa de verdade atras
 * convidaria a interpretar o resultado como se fosse aquele endereco. */
.cone-mapa {
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 260;
  background: var(--cor-superficie-2);
  border-radius: var(--raio-2);
  touch-action: none;
}
.cone-arrasta { cursor: grab; }
.cone-arrasta:active { cursor: grabbing; }
.cone-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1) var(--espaco-4);
  margin-top: var(--espaco-2);
  font-size: .8125rem;
  color: var(--cor-texto-fraco);
}
.cone-legenda span { display: inline-flex; align-items: center; gap: var(--espaco-1); }
.cone-legenda i {
  width: .7rem;
  height: .7rem;
  border-radius: var(--raio-cheio);
}

.aviso {
  display: flex;
  gap: var(--espaco-3);
  align-items: flex-start;
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-2);
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie-2);
  margin-bottom: var(--espaco-4);
}
.aviso svg { flex: none; margin-top: .125rem; }
.aviso--erro { background: var(--cor-erro-suave); border-color: var(--cor-erro); color: var(--cor-erro); }
.aviso--ok { background: var(--cor-sucesso-suave); border-color: var(--cor-sucesso); color: var(--cor-sucesso); }
.aviso--atencao { background: var(--cor-alerta-suave); border-color: var(--cor-alerta); color: var(--cor-alerta); }

.vazio { text-align: center; padding: var(--espaco-7) var(--espaco-4); color: var(--cor-texto-fraco); }
.vazio svg { width: 2.5rem; height: 2.5rem; opacity: .5; margin: 0 auto var(--espaco-3); }

.carregando { display: grid; gap: var(--espaco-2); }
.carregando span { height: 1rem; border-radius: var(--raio-1); background: var(--cor-superficie-2); }
@media (prefers-reduced-motion: no-preference) {
  .carregando span { animation: pulsar 1.2s ease-in-out infinite; }
  @keyframes pulsar { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }
}

/* Lista de sugestao dos campos de texto livre (cliente e vendedor) */
.sugestoes {
  position: relative;
}
.sugestoes-lista {
  position: absolute;
  z-index: var(--camada-sugestoes);
  left: 0;
  right: 0;
  top: 100%;
  margin-top: var(--espaco-1);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  box-shadow: var(--sombra-2);
  max-height: 14rem;
  overflow-y: auto;
  padding: var(--espaco-1);
}
.sugestoes-lista button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--espaco-2) var(--espaco-3);
  border: 0;
  border-radius: var(--raio-1);
  background: transparent;
  cursor: pointer;
}
.sugestoes-lista button:hover,
.sugestoes-lista button[aria-selected="true"] { background: var(--cor-primaria-suave); color: var(--cor-primaria-forte); }

/* Balcao: formulario de lancamento e, do lado, o que esta na rua. Em tela
   estreita o painel desce para baixo do formulario. */
.balcao { display: grid; gap: var(--espaco-4); align-items: start; }
@media (min-width: 62rem) {
  .balcao { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); }
}

/* =============================================================
   Celular
   =============================================================
   Tabela de dez colunas nao cabe em tela de mao. Em vez de empurrar
   rolagem lateral para o balconista, cada linha vira um cartao com o
   rotulo do lado do valor. O rotulo sai do proprio cabecalho, pelo
   atributo data-rotulo de cada celula.
*/
.form-preco {
  display: grid;
  gap: var(--espaco-3);
  align-items: end;
  margin-bottom: var(--espaco-4);
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .form-preco { grid-template-columns: 2fr repeat(4, 1fr) auto; }
}

/* --- formulario que nao vira torre ---
   Campo curto ao lado de campo curto. A partir de 34rem sempre ha largura para
   duas colunas: ou a tela e larga e o formulario tem coluna propria, ou ela e
   media e o formulario ocupa tudo. Abaixo disso, uma coluna e ponto final. */
.dupla { display: grid; gap: 0 var(--espaco-3); grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  .dupla { grid-template-columns: 1fr 1fr; }
}

/* Campo de texto dentro de tabela. Existia so como estilo escrito na mao em
   cada tela, e estilo na mao ganha do CSS por especificidade: no celular a
   largura fixa vencia a regra que mandava o campo ocupar a linha. */
.campo-tabela {
  width: 100%;
  min-width: 10rem;
  background: transparent;
  border: 1px solid var(--cor-borda);
  border-radius: .375rem;
  padding: .375rem .5rem;
  color: inherit;
}
.campo-tabela:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }

/* Rotulo de campo com um botao do lado. Em tela estreita o botao desce e ocupa
   a linha inteira: espremido ao lado do rotulo ele fica com alvo pequeno e
   ainda esmaga o nome do campo. */
.campo-acao { display: flex; gap: var(--espaco-2); align-items: center; flex-wrap: wrap; }
.campo-acao > .crescer { flex: 1 1 auto; }
@media (max-width: 30rem) {
  .campo-acao > .botao { flex: 1 1 100%; justify-content: center; }
}

/* Um conjunto de campos que anda junto. O contorno existe para dizer, sem
   escrever, que dali para baixo nada e obrigatorio. */
.grupo {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie-2);
  padding: var(--espaco-4);
  margin: 0 0 var(--espaco-4);
}
.grupo > legend {
  padding: 0 var(--espaco-2);
  margin-left: calc(var(--espaco-2) * -1);
  font-size: .875rem;
  font-weight: 700;
  color: var(--cor-texto);
}
.grupo .campo:last-of-type { margin-bottom: var(--espaco-3); }

/* Caixa de marcar com explicacao embaixo. Vinha repetida em estilo inline em
   cada tela, e cada copia com um espacamento diferente. */
.caixa {
  display: flex;
  gap: var(--espaco-3);
  align-items: flex-start;
  margin-bottom: var(--espaco-4);
  cursor: pointer;
}
/* A caixa nativa e pequena demais para dedo e some ao lado do texto em negrito.
   Aqui ela tem tamanho proprio e a cor do sistema. */
.caixa input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: auto;
  margin-top: .15rem;
  flex: none;
  accent-color: var(--cor-primaria);
  cursor: pointer;
}
.caixa > span { display: grid; gap: .125rem; line-height: 1.35; }
.caixa .fraco { font-size: .8125rem; }

/* =============================================================
   Menu lateral da administracao
   =============================================================
   Eram dez telas numa faixa que rolava, e quem abria o sistema nao descobria
   metade delas sem arrastar. Aqui elas aparecem todas, agrupadas pelo que a
   pessoa esta tentando fazer.

   Em tela larga o menu fica aberto o tempo todo. Esconder navegacao atras de um
   botao quando ha largura de sobra so custa um toque a cada troca, o dia
   inteiro. Em tela estreita ele desliza por cima, que ai e o certo.
*/
.painel { display: block; }

.menu {
  padding: var(--espaco-4) var(--espaco-3);
  border-right: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  overflow-y: auto;
}
.menu-grupo { margin-bottom: var(--espaco-4); }

/* O TITULO QUE ABRE E FECHA.

   Cinco grupos e vinte telas nao cabiam sem rolar. O botao ocupa a linha
   inteira -- alvo largo, que e o que se quer num menu usado de relance -- e a
   seta gira em vez de trocar de icone: um glifo so, e o movimento conta o que
   aconteceu. */
button.menu-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  padding: var(--espaco-2) var(--espaco-2) var(--espaco-2) 0;
  color: inherit;
  /* 44px de alvo, a mesma conta da alca da folha do app: este menu abre no
     celular como painel sobreposto, e ali o titulo e tocado com o polegar.
     Medido sem isto: 34px. */
  min-height: 2.75rem;
}
button.menu-titulo h2 { margin: 0; font: inherit; letter-spacing: inherit; }
button.menu-titulo svg { transition: rotate .15s ease; flex: none; opacity: .7; }
.menu-grupo[data-aberto="true"] > button.menu-titulo svg { rotate: 90deg; }

/* ONDE VOCE ESTA, com o grupo fechado.

   Com tudo recolhido o item ativo fica escondido, e sem esta marca o menu nao
   diria em que secao a tela aberta mora -- a pessoa abriria os cinco grupos
   procurando onde ja esta. */
.menu-grupo[data-aqui="true"] > button.menu-titulo {
  color: var(--cor-primaria);
}
.menu-grupo[data-aqui="true"] > button.menu-titulo svg { opacity: 1; }

.menu-titulo {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cor-texto-fraco);
  font-weight: 700;
  margin: 0 0 var(--espaco-2) var(--espaco-3);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3);
  border-radius: var(--raio-2);
  color: var(--cor-texto-fraco);
  text-decoration: none;
  font-weight: 600;
  min-height: var(--altura-toque);
}
.menu-item svg { flex: none; }
.menu-item:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }
.menu-item[aria-current="page"] {
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
}
/* Filha de item de menu. O recuo e a fonte menor sao o que dizem "isto e
   assunto daquilo": filha que parece igual ao pai nao e filha. */
.menu-item--filha {
  padding-left: calc(var(--espaco-3) + var(--espaco-5));
  font-size: .875rem;
}

.menu-rodape {
  margin: var(--espaco-4) 0 0 var(--espaco-3);
  font-size: .75rem;
  color: var(--cor-texto-fraco);
}
.painel-conteudo { padding: var(--espaco-4) var(--espaco-3); min-width: 0; }

/* Tela larga: menu fixo, sempre visivel, e o conteudo ao lado. */
@media (min-width: 62rem) {
  .painel {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: start;
  }
  .menu {
    position: sticky;
    top: 0;
    height: 100vh;
  }
  .painel-conteudo { padding: var(--espaco-5); }
  .so-estreito { display: none; }

  /* Menu encolhido: sobra a faixa dos icones, e o conteudo herda as 12rem que
     sobraram. O texto sai, mas o title de cada item continua dizendo o nome ao
     passar o mouse -- tres icones do menu se repetem, e sem o nome ficaria
     adivinhacao. */
  body.menu-fino .painel { grid-template-columns: 4rem minmax(0, 1fr); }
  body.menu-fino .menu { padding: var(--espaco-4) var(--espaco-1); }
  body.menu-fino .menu-item { justify-content: center; padding: var(--espaco-3) 0; }
  /* Sem texto, a indentacao vira um icone torto na faixa e a hierarquia nao tem
     como ser lida. No menu fino todos viram icones irmaos -- o conforto some, o
     caminho fica inteiro. */
  body.menu-fino .menu-item--filha { padding-left: 0; }
  body.menu-fino .menu-item span,
  body.menu-fino .menu-titulo,
  body.menu-fino .menu-rodape { display: none; }
  /* NO MENU FINO NAO HA O QUE RECOLHER: o titulo -- que e o botao -- esta
     escondido pela regra acima, e sem ele nao ha como reabrir um grupo. Os
     itens, que ali sao so icones, ficam todos visiveis. O hidden do JS e
     vencido de proposito, e este é o unico lugar do projeto em que isso
     acontece: sem o important, um grupo fechado deixaria uma fileira de icones
     invisivel e sem caminho de volta. */
  body.menu-fino .menu-grupo-telas[hidden] { display: block !important; }
  /* Sem o titulo do grupo, o que separa um grupo do outro e o espaco. */
  body.menu-fino .menu-grupo + .menu-grupo {
    border-top: 1px solid var(--cor-borda);
    padding-top: var(--espaco-3);
  }
}

/* O botao de encolher so serve em tela larga: na estreita o menu ja desliza por
   cima do conteudo, e nao ha largura para dividir. */
@media (max-width: 61.99rem) {
  .so-largo { display: none; }
}

/* Tela estreita: o menu sai da frente e volta deslizando. */
@media (max-width: 61.99rem) {
  .menu {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(18rem, 84vw);
    z-index: var(--camada-menu);
    transform: translateX(-100%);
    transition: transform .18s ease-out;
    box-shadow: var(--sombra-2);
  }
  body.menu-aberto .menu { transform: translateX(0); }
  .menu-fundo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: var(--camada-menu-fundo);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
}

/* --- aviso da permissao de localizacao ---
   Grande de proposito. Sem esse ajuste o aplicativo parece funcionar e nao
   funciona: o acompanhamento morre quando o entregador troca de tela. Um aviso
   do tamanho dos outros seria lido como enfeite e ignorado. */
.alerta-permissao {
  border: 2px solid var(--cor-alerta);
  border-radius: var(--raio-3);
  background: var(--cor-alerta-suave);
  padding: var(--espaco-5);
  margin-bottom: var(--espaco-4);
}
.alerta-permissao-topo {
  display: flex;
  gap: var(--espaco-3);
  align-items: center;
  margin-bottom: var(--espaco-3);
}
.alerta-permissao-topo svg { color: var(--cor-alerta); flex: none; }
.alerta-permissao-topo h2 { font-size: 1.25rem; margin: 0; }
.alerta-permissao p { margin: 0 0 var(--espaco-3); line-height: 1.45; }
.alerta-permissao-forte { font-size: 1.0625rem; font-weight: 600; }
.alerta-permissao-passos {
  margin: 0 0 var(--espaco-4) 1.25rem;
  display: grid;
  gap: var(--espaco-2);
  line-height: 1.35;
}

/* --- mapa --- */
.mapa-caixa {
  height: 22rem;
  min-height: 14rem;
  border-radius: var(--raio-2);
  border: 1px solid var(--cor-borda);
  overflow: hidden;
  background: var(--cor-superficie-2);
}
/* O fundo do mapa e claro nos dois temas. Escurecer no tema escuro deixaria
   rua ilegivel, entao o que muda e a moldura, nao o mapa. */
.leaflet-container { font: inherit; background: var(--cor-superficie-2); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--cor-superficie);
  color: var(--cor-texto);
}
.leaflet-popup-content { margin: var(--espaco-3); line-height: 1.4; }
.leaflet-bar a, .leaflet-bar a:hover {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-bottom-color: var(--cor-borda);
}

/* Alfinete desenhado, sem imagem baixada: acompanha a cor do tema e some junto
   com o resto quando a pagina e impressa. */
.mapa-pino { background: none; border: 0; }
/* 34px, e nao 26: a 26 o pino era menor que a ponta do dedo num celular,
   e a operacao ja teve dia com varios pedidos na mesma rua.

   A BORDA CRESCEU JUNTO, de 2 para 3. Com o pino maior a borda de 2 vira
   um fio, e e ela que separa a cor do fundo do mapa -- sem ela a cor se
   perde em qualquer dos estilos escuros que o seletor agora oferece.

   Mexer nestes numeros exige mexer no iconSize e no iconAnchor de
   mapa.js: a ancora e o que mantem a ponta da gota sobre a coordenada. */
.mapa-pino-corpo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--pino);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  /* A COR E REFORCADA AQUI, e nao no token.

     As --cor-etapa-* foram escolhidas por medida para a LISTA: cada par a
     pelo menos 30 de distancia, e o ambar de "chamando" foi trocado uma vez
     porque a 50 do vermelho os dois viravam o mesmo marrom numa barra de
     3px. Mexer nelas para ganhar contraste no mapa desfaria essa conta.

     Sobre o mapa o problema e outro: o pino disputa com um fundo cheio de
     cor, e agora com cinco fundos diferentes, um deles escuro. Saturar so
     aqui resolve onde doi sem tocar em onde ja esta certo. */
  filter: saturate(1.35);
}
.mapa-pino-corpo > * { transform: rotate(45deg); }
/* A AURA DO PINO SELECIONADO.

   Marcar a caixinha de um pedido na lista acende o pino dele no mapa. E a mesma
   caixinha das acoes em lote, e por isso ela responde a pergunta que decide um
   agrupamento: marcar tres cartoes acende os tres pinos, e da para ver no mapa
   se os tres estao perto um do outro.

   A AURA NAO TEM COR PROPRIA -- e clara por dentro e escura por fora. Nao
   sobrou matiz para ela: as --cor-etapa-* ja ocupam o cinza, o ambar, tres
   azuis, o verde e o vermelho, e a --cor-primaria muda em cada um dos temas.
   Qualquer cor de "selecionado" colidiria com a cor de alguma etapa em algum
   tema. Claro por dentro com escuro por fora sempre aparece: nos fundos escuros
   de mapa quem le e o branco; nos claros, o contorno.

   NAO PULSA de proposito. O mapa se redesenha inteiro a cada dez segundos (o
   grupo.clearLayers de operacao-mapa.js), e uma animacao recomecaria do zero
   nesse intervalo -- a tela ficaria tremendo sozinha, sem ninguem tocar nela.

   Vai no elemento de FORA. O .mapa-pino-corpo ja gasta o filter dele em
   saturate(1.35), e filter declarado duas vezes no mesmo elemento substitui em
   vez de somar. Aqui de fora os dois convivem, e a sombra segue a silhueta da
   gota -- inclusive a do circulo tracejado do ponto aproximado.

   SAO DOIS ANDARES, e o de dentro tem borda dura de proposito. A primeira
   versao era so brilho difuso, e na bancada sobre o ladrilho claro ela lia como
   sombra um pouco mais forte -- nao como "este aqui esta escolhido". O que faz
   ler e o contorno nitido: os quatro primeiros drop-shadow, deslocados 2px para
   cada lado e sem desfoque, se empilham num aro escuro colado na gota; os dois
   ultimos sao o halo claro por fora dele.

   Um por fundo: no ladrilho claro quem separa e o aro escuro; no escuro, o halo
   branco. Nenhum dos dois depende de matiz, e por isso a aura nao briga com a
   cor da etapa -- que ja ocupa o cinza, o ambar, tres azuis, o verde e o
   vermelho. Os drop-shadow se encadeiam: cada um desenha sobre o resultado do
   anterior, e e assim que quatro sombras sem desfoque viram um aro fechado. */
.mapa-pino--destacado {
  filter: drop-shadow(2px 0 0 rgba(0, 0, 0, .92))
          drop-shadow(-2px 0 0 rgba(0, 0, 0, .92))
          drop-shadow(0 2px 0 rgba(0, 0, 0, .92))
          drop-shadow(0 -2px 0 rgba(0, 0, 0, .92))
          drop-shadow(0 0 4px #fff)
          drop-shadow(0 0 8px rgba(255, 255, 255, .95));
}

/* POSICAO VELHA: a borda do pino deixa de ser inteira.

   Este aviso existia como COR -- o pino do entregador ficava cinza depois de 30
   minutos sem posicao nova. A cor do pino agora diz quem e a pessoa, e por isso
   o aviso teve de mudar de lugar em vez de simplesmente desaparecer.

   Ele nao pode desaparecer. O mapa mostra a ultima migalha que cada um deixou,
   e no navegador isso chega so no aceite e na baixa: um ponto de quarenta
   minutos desenhado como se fosse agora vira cobranca em cima de quem ja nem
   esta mais la. O motivo esta escrito por extenso na abertura de
   operacao-mapa.js.

   Sao dois sinais somados, porque um so nao bastava. A borda tracejada se ve de
   longe, na varredura do mapa; a idade escrita na etiqueta ("Maria - 40 min")
   tira a duvida de perto, e so aparece no caso velho, para a etiqueta do dia a
   dia continuar curta. A transparencia empurra o pino um passo para tras dos
   que estao frescos.

   Vai no corpo por DESCENDENCIA, e nao na classe de fora: assim ela troca so o
   estilo da borda e herda a espessura e a cor de .mapa-pino-corpo -- reescrever
   a borda inteira aqui criaria um segundo lugar com os mesmos 3px brancos. */
.mapa-pino--velho .mapa-pino-corpo {
  border-style: dashed;
  opacity: .72;
}
/* O FANTASMA do entregador.

   Corpo branco e bone na cor da pessoa -- o mascote da marca, com a identidade
   na parte que na marca ja e colorida.

   O contorno escuro em volta do corpo nao e enfeite: o corpo e branco, e sem
   ele o fantasma desaparece sobre os fundos de mapa claros. Mesma razao pela
   qual o alfinete tem borda branca de 3px.

   Sem sombra por baixo do svg: o mapa-pino de fora e quem recebe o filtro da
   aura quando o pino esta selecionado, e sombra aqui brigaria com ele. */
.mapa-fantasma {
  display: block;
  width: 30px;
  height: 38px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}
.mapa-fantasma svg { width: 100%; height: 100%; display: block; }
/* O CONTORNO E OS OLHOS NAO USAM TOKEN DE TEMA, e isto e a parte facil de
   errar: --cor-texto e branco no tema escuro, e o corpo do fantasma tambem e
   branco -- contorno branco sobre corpo branco desaparece, e olhos brancos
   sobre corpo branco deixam o mascote cego. A primeira versao fez exatamente
   isso.

   O mapa nao e a interface. O fundo aqui e o ladrilho do mapa, e o estilo de
   mapa e escolha SEPARADA do tema -- da para ter interface escura com mapa
   claro. Por isso a cor e fixa, do mesmo jeito que a borda do alfinete e um
   #fff fixo e nao um token (ver o comentario do .mapa-pino-corpo). */
.mapa-fantasma-corpo {
  fill: #ffffff;
  stroke: #061310;
  stroke-width: 1.4;
}
.mapa-fantasma-bone {
  fill: var(--pino);
  stroke: #061310;
  stroke-width: 1.2;
}
.mapa-fantasma-olho { fill: #061310; }

/* POSICAO VELHA: o fantasma fica SO DE CONTORNO.

   Nunca desbotado, e a regra e da marca: o mascote nao aparece sumindo. No
   delivery, desaparecer com o pedido e o pior defeito que existe, e um
   fantasma que se apaga na tela e piada facil esperando acontecer. Contorno diz
   "este ponto e antigo" sem dizer "este entregador evaporou".

   O bone guarda a cor mesmo vazado: e o que permite reconhecer de quem e o
   ponto velho. */
.mapa-pino--velho .mapa-fantasma-corpo {
  fill: none;
  stroke-width: 1.8;
}
.mapa-pino--velho .mapa-fantasma-bone { fill: none; stroke: var(--pino); stroke-width: 1.8; }
.mapa-pino--velho .mapa-fantasma-olho { fill: var(--pino); }
.mapa-pino--velho .mapa-fantasma { filter: none; }

.mapa-area {
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 700;
  color: var(--pino);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pino) 30%, transparent);
  border: 2px dashed var(--pino);
}

.mapa-janela {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: grid;
  place-items: center;
  padding: var(--espaco-3);
  z-index: var(--camada-topo);
}
.mapa-janela-caixa { width: min(46rem, 100%); max-height: 92vh; overflow: auto; }

.mapa-ponto {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--cor);
  flex: none;
}

/* Botao de camada: ligado e desligado precisam ser distinguiveis sem ler. */
[data-camada][aria-pressed="false"] { opacity: .45; }

@media (max-width: 46rem) {
  .mapa-caixa { height: 16rem; }
}

/* --- ultima posicao conhecida --- */
.posicao-linha {
  display: flex;
  gap: var(--espaco-3);
  align-items: center;
  padding: var(--espaco-3) 0;
  border-bottom: 1px solid var(--cor-borda);
}
.posicao-linha:last-child { border-bottom: 0; }

/* --- para onde a entrega vai --- */
.destino {
  display: grid;
  gap: var(--espaco-2);
  margin-top: var(--espaco-3);
  padding-top: var(--espaco-3);
  border-top: 1px solid var(--cor-borda);
  text-align: left;
}
.destino-endereco {
  display: flex;
  gap: var(--espaco-2);
  align-items: flex-start;
  font-weight: 600;
  line-height: 1.35;
}
.destino-endereco svg { flex: none; margin-top: .15rem; }
.destino-referencia { padding-left: 1.5rem; }

/* O aviso de ponto aproximado tem cor de atencao de proposito: ele existe para
   ser lido antes de a pessoa sair, nao para enfeitar o cartao. */
.destino-aviso {
  display: flex;
  gap: var(--espaco-2);
  align-items: flex-start;
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio-2);
  background: var(--cor-alerta-suave);
  color: var(--cor-texto);
  font-size: .9375rem;
  line-height: 1.35;
}
.destino-aviso svg { flex: none; margin-top: .15rem; color: var(--cor-alerta); }
.destino-botao { margin-top: var(--espaco-1); }

/* --- fila que se reordena na mao --- */
.fila-ordem { list-style: none; margin: 0; padding: 0; }

.fila-item {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
  margin-bottom: var(--espaco-2);
}
.fila-item.arrastando { opacity: .4; }

/* O punho e o aviso de que da para pegar: sem ele ninguem descobre sozinho */
.fila-pegar { color: var(--cor-texto-fraco); cursor: grab; display: flex; }
.fila-item:active .fila-pegar { cursor: grabbing; }

.fila-pos {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 1.5rem;
  text-align: right;
  color: var(--cor-texto-fraco);
}
.fila-nome { flex: 1 1 auto; font-weight: 600; }
.fila-conta {
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-fraco);
  min-width: 1.25rem;
  text-align: right;
}
.fila-acoes { display: flex; gap: var(--espaco-1); }
.fila-acoes .botao { min-height: 2.25rem; width: 2.25rem; }

/* A barra so aparece com mudanca pendente, e nao sai da vista enquanto houver:
   ordem mexida e nao salva e a maneira mais facil de achar que salvou. */
/* O atributo hidden nao vence o display:flex de uma classe -- a regra do
   navegador tem prioridade menor que a nossa. Sem esta linha a barra fica na
   tela o tempo todo, oferecendo acao para uma selecao que nao existe. */
.barra-ordem[hidden] { display: none; }

.barra-ordem {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  flex-wrap: wrap;
  padding: var(--espaco-3);
  margin-top: var(--espaco-3);
  border: 1px solid var(--cor-alerta);
  border-radius: var(--raio-2);
  background: var(--cor-alerta-suave);
}

@media (max-width: 46rem) {
  .container { padding: var(--espaco-3); }

  /* Em tela de toque o punho some: arrastar dentro de pagina que rola briga
     com o proprio rolar. Quem manda ali sao os botoes. */
  .fila-pegar { display: none; }
  .fila-item { flex-wrap: wrap; gap: var(--espaco-2); }
  .fila-acoes { margin-left: auto; }

  /* Sem cabecalho de tabela e sem title (que nao existe no toque), o numero
     solto nao diz nada. Aqui ele diz. */
  .fila-conta { min-width: 0; }
  .fila-conta::before { content: 'nesta vez: '; }
  .fila-acoes .botao { min-height: var(--altura-toque); width: var(--altura-toque); }
  .cartao { padding: var(--espaco-4); border-radius: var(--raio-2); }
  h1 { font-size: 1.25rem; }

  /* Filtros e barras de acao empilham e ocupam a largura toda */
  .linha { gap: var(--espaco-2); }
  .linha > .campo { flex: 1 1 100%; }
  .linha > .botao { flex: 1 1 auto; }

  /* Numeros grandes ficam de dois em dois, e nao de quatro */
  .grade--4 { grid-template-columns: 1fr 1fr; gap: var(--espaco-3); }
  .metrica-valor { font-size: 1.375rem; }

  /* --- a tabela vira lista de cartoes --- */
  .rolagem { overflow-x: visible; }

  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela thead { display: none; }
  .tabela tfoot { display: block; }
  .tabela tfoot tr, .tabela tfoot td { display: block; }

  .tabela tr {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-2);
    padding: var(--espaco-3);
    margin-bottom: var(--espaco-3);
    background: var(--cor-superficie);
  }
  .tabela tbody tr:hover { background: var(--cor-superficie); }

  .tabela td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espaco-3);
    padding: var(--espaco-1) 0;
    border: 0;
    text-align: left;
    /* Identificador, client_id e mensagem de erro tecnica sao "palavras" de
       trinta e tantos caracteres sem espaco nenhum. Em tela de 320px elas nao
       cabem, e sem permissao de quebrar empurram a pagina inteira de lado --
       o famoso "a tela anda para o lado" que nao se acha olhando o desenho. */
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .tabela td.valor { text-align: right; }

  /* O rotulo da coluna aparece antes do valor */
  .tabela td[data-rotulo]::before {
    content: attr(data-rotulo);
    flex: none;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-texto-fraco);
  }
  /* Celula vazia some. No computador ela e uma casa em branco que alinha a
     tabela; virada cartao, ela vira uma linha escrita "Ultimo erro:" seguida
     de nada -- e o cartao passa a listar tudo o que NAO aconteceu. */
  .tabela td[data-rotulo]:empty { display: none; }

  /* Celula sem rotulo (a dos botoes) ocupa a linha inteira */
  .tabela td[data-rotulo=""] {
    display: flex;
    gap: var(--espaco-2);
    padding-top: var(--espaco-3);
    white-space: normal;
  }
  .tabela td[data-rotulo=""] .botao { flex: 1; }
  .tabela td[data-rotulo=""]::before { content: none; }

  /* Campo dentro de tabela editavel ganha largura util */
  .tabela--editavel td input { max-width: 9rem; }

  /* Celula com campo de texto livre empilha: rotulo em cima, campo embaixo,
     largura toda. Espremido na metade direita do cartao, um campo de colar
     link mostra cinco letras e nao da para conferir o que foi colado. */
  .tabela td:has(input:not([type="checkbox"]):not([type="number"])),
  .tabela td:has(select) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espaco-1);
  }

  /* Uma lista de bairros tem nome comprido dentro, e o select cresce ate caber
     a maior opcao -- que aqui passou de 70px da largura da tela. Preso a
     largura do cartao, ele corta o nome com reticencia, que e o certo: quem
     escolhe abre a lista de qualquer jeito. */
  .tabela td select,
  .tabela td .campo-tabela {
    max-width: 100%;
    min-width: 0;
    min-height: var(--altura-toque);
  }
  .tabela td .campo-tabela {
    max-width: none;
    min-width: 0;
    min-height: var(--altura-toque);
  }

  /* Abas do topo viram faixa rolavel, sem sumir com o conteudo */
  .abas { gap: 0; }
  .abas a { padding: var(--espaco-3); font-size: .9375rem; }

  .topo-conteudo { padding: var(--espaco-2) var(--espaco-3); gap: var(--espaco-2); }
  .topo-conteudo .fraco { display: none; }   /* nome no topo rouba espaco */

  /* Janela de confirmacao ocupa a tela toda no celular */
  .cartao[role="dialog"] { max-width: none; }
}

@media (max-width: 30rem) {
  .grade--4 { grid-template-columns: 1fr; }
  .marca span { display: none; }   /* so o icone, para caber */
  /* E se ele e a marca sozinha, cresce: aqui nao ha texto para dividir a
     atencao, e 28px de quadrado com margem interna le como enfeite. */
  .marca img { width: 32px; height: 32px; }
}

/* Barra de periodo do painel. Os atalhos ficam a mostra: quem quer o mes nao
   deveria ter que digitar duas datas. */
.periodo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-4);
}
.periodo .botao[aria-pressed="true"] {
  background: var(--cor-primaria);
  color: var(--cor-texto-botao);
  border-color: var(--cor-primaria);
}

/* Titulo que separa o que e do periodo do que e de agora. Sem ele, "3 em rua"
   seria lido como algo que aconteceu no mes passado. */
.secao-agora {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cor-texto-fraco);
  margin: var(--espaco-5) 0 var(--espaco-3);
}

/* Numero do pedido. Fonte tabular e um tom mais forte: e ele que a pessoa
   procura na tela enquanto fala ao telefone, entao precisa saltar sem gritar. */
.numero-pedido {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--cor-texto-fraco);
  letter-spacing: -.01em;
}
.entrega-loja .numero-pedido,
.oferta-loja .numero-pedido { color: var(--cor-primaria); }

/* Caixa de escolher linha na tabela. Alvo grande o suficiente para o dedo, sem
   empurrar a altura da linha. */
.tabela .marcar {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--cor-primaria);
  cursor: pointer;
}

/* A etiqueta presa ao pino: o numero do pedido no mapa da operacao, o nome de
   quem esta olhando no mapa do app. O Leaflet desenha tooltip permanente com
   fundo branco e seta propria; aqui ela vira uma pastilha discreta que nao
   rouba a atencao do pino.

   AS DUAS CLASSES NO SELETOR NAO SAO CAPRICHO. O CSS do Leaflet e carregado em
   tempo de execucao por mapa.js, DEPOIS desta folha, e .leaflet-tooltip tem a
   mesma especificidade que .mapa-etiqueta -- entao quem vinha depois ganhava, e
   o respiro escrito aqui nunca valeu. Medido: a etiqueta saia com os 6px do
   Leaflet em volta e a caixa ficava 42x32, ao lado de um fantasma de 30x38 --
   mais larga que ele e quase tao alta.

   O ::before abaixo fica com uma classe so de proposito: ele esconde a seta, e
   display nao e disputado -- as regras :before do Leaflet mexem em content,
   position e border, nunca em display. Medido tambem, antes de mexer. */
.leaflet-tooltip.mapa-etiqueta {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  border-radius: var(--raio-1);
  padding: .1rem .35rem;
  font-size: .75rem;
  font-weight: 600;
  box-shadow: none;
  white-space: nowrap;
}
.mapa-etiqueta::before { display: none; }

/* A etiqueta do PROPRIO entregador, no mapa dele: um passo menor.

   Dois motivos. Ela e a unica etiqueta daquela tela -- nao disputa espaco com
   ninguem, entao nao precisa gritar. E ela fica num celular ao lado de um
   fantasma de 30px, onde 12px de texto com respiro faz a caixa competir com o
   mascote em vez de nomea-lo. */
.leaflet-tooltip.mapa-etiqueta--eu {
  font-size: .625rem;
  padding: .05rem .3rem;
}

/* A tela de operacao: o mapa ocupa tudo e o painel flutua por cima. Num
   monitor de loja, ver a cidade inteira e o que faz o mapa valer a pena. */
.operacao {
  position: relative;
  height: calc(100vh - 8rem);
  min-height: 30rem;
  border-radius: var(--raio-2);
  overflow: hidden;
  border: 1px solid var(--cor-borda);
}
.operacao-mapa { position: absolute; inset: 0; }
.operacao-painel {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: min(22rem, 88%);
  background: var(--cor-superficie);
  border-right: 1px solid var(--cor-borda);
  display: flex;
  flex-direction: column;
  /* Acima dos controles do Leaflet, que ficam em 1000: abaixo disso o botao de
     zoom desenha por cima do painel e tapa o titulo e a busca. E abaixo do
     menu, que navega -- ver a escala em tokens.css. */
  z-index: var(--camada-mapa-painel);
}
.operacao-painel[hidden] { display: none; }
.operacao-painel-corpo { overflow-y: auto; padding: var(--espaco-3); }
.operacao-recolher {
  position: absolute;
  left: min(22rem, 88%); top: var(--espaco-2);
  z-index: var(--camada-mapa-botao);
  transition: left .15s;
}

/* O zoom atravessa para o lado direito. No canto esquerdo ele nasce embaixo do
   painel, que agora passa por cima: o controle sumiria em vez de so atrapalhar,
   que e pior. */
.operacao .leaflet-top.leaflet-left { left: auto; right: 0; }
.operacao--recolhido .operacao-recolher { left: var(--espaco-2); }

/* Em tela estreita o painel vira uma faixa embaixo: ocupar a largura inteira
   por cima do mapa esconderia justamente o mapa. */
@media (max-width: 40rem) {
  .operacao { height: auto; }
  .operacao-mapa { position: relative; height: 20rem; }
  .operacao-painel { position: relative; width: 100%; border-right: 0; }
  .operacao-recolher { display: none; }
}

.operacao-grupo { border-bottom: 1px solid var(--cor-borda); }
.operacao-grupo > summary {
  cursor: pointer;
  padding: var(--espaco-2) 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
}
.operacao-conta {
  background: var(--cor-superficie-2);
  border-radius: var(--raio-cheio);
  padding: 0 .5rem;
  font-size: .75rem;
  font-weight: 600;
}
.operacao-cartao { padding: var(--espaco-2) 0; border-top: 1px solid var(--cor-borda); }
.operacao-cartao-topo {
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: .4rem; color: inherit; font: inherit;
}
.operacao-cartao-topo:disabled { cursor: default; }
.operacao-linha { padding: .35rem 0; margin: 0; }
.operacao-linha--clique {
  background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
  color: inherit; font: inherit;
}
.operacao-menu { display: flex; flex-direction: column; gap: .25rem; margin-top: .4rem; }
.operacao-menu-item {
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-1);
  padding: .4rem .6rem;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: flex; align-items: center; gap: .4rem;
}
.operacao-menu-item--perigo { color: var(--cor-erro); }

/* ---------- a cor de cada grupo ----------
 *
 * A cor vem do grupo (--cor-grupo, escrita no <details> pelo painel) e e a
 * mesma que o mapa usa no alfinete daquela situacao. Uma linguagem de cor so na
 * tela: o cartao na lista e o ponto no mapa sao o mesmo pedido.
 *
 * A barra na esquerda carrega a cor; o fundo so recebe um tingimento fraco.
 * Pintar o cartao inteiro com quatro cores diferentes numa lista de vinte
 * cansaria a vista antes do fim do expediente. */
.operacao-grupo > summary::before {
  content: '';
  width: .5rem;
  height: .5rem;
  border-radius: var(--raio-cheio);
  background: var(--cor-grupo, var(--cor-texto-fraco));
  flex: none;
}
.operacao-grupo .operacao-cartao {
  border-left: 3px solid var(--cor-grupo, transparent);
  padding-left: var(--espaco-2);
  background: transparent;
  background: color-mix(in srgb, var(--cor-grupo) 4%, transparent);
}

/* ---------- a fila, flutuando sobre o mapa ----------
 *
 * Encostada na direita, acima do mapa e abaixo da janela. Quem opera olha a
 * fila o tempo todo -- para saber de quem e a vez antes de prometer prazo no
 * telefone -- e no fim da lista isso era rolar por sete blocos de pedidos. */
.fila-flutuante {
  position: absolute;
  top: var(--espaco-3);
  right: var(--espaco-3);
  z-index: var(--camada-mapa-botao);
  width: 15rem;
  max-height: 60%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.fila-flutuante-topo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  width: 100%;
  padding: var(--espaco-2) var(--espaco-3);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: .875rem;
  cursor: pointer;
}
.fila-flutuante-corpo { overflow-y: auto; padding: 0 var(--espaco-3) var(--espaco-2); }
.fila-flutuante--recolhida .fila-flutuante-corpo { display: none; }
.fila-flutuante-linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
  padding: var(--espaco-1) 0;
  font-size: .8125rem;
  border-top: 1px solid var(--cor-borda);
  overflow-wrap: anywhere;
}
.fila-flutuante-pos {
  flex: none;
  width: 1.25rem;
  text-align: right;
  color: var(--cor-texto-fraco);
  font-variant-numeric: tabular-nums;
}

/* No celular ela volta a ser um bloco no fim da lista: flutuando em 320px ela
   cobriria o mapa inteiro, e o mapa e metade desta tela. */
@media (max-width: 46rem) {
  .fila-flutuante {
    position: static;
    width: auto;
    max-height: none;
    margin: var(--espaco-3) 0 0;
    box-shadow: none;
  }
}

/* O trilho na ficha do entregador: onde ele esta, sem esconder o resto.
   Mostrar so o passo atual deixaria ele sem saber quantos faltam. */
.trilho {
  display: flex;
  gap: var(--espaco-1);
  margin-top: var(--espaco-2);
  font-size: .75rem;
  color: var(--cor-texto-fraco);
}
.trilho-passo {
  flex: 1;
  padding-top: var(--espaco-1);
  border-top: 3px solid var(--cor-borda);
  text-align: center;
  overflow-wrap: anywhere;
}
.trilho-passo--feito { border-top-color: var(--cor-etapa-rota); color: var(--cor-texto); }
.trilho-passo--agora { font-weight: 700; }

/* ---------- a saida conjunta ----------
 *
 * Os pedidos que saem juntos ficam numa moldura so. Antes cada cartao dizia
 * "sai junto" por escrito, repetido linha a linha -- descrever com palavra o
 * que a forma pode mostrar de uma vez gastava a largura que a lista nao tem.
 *
 * A moldura leva a cor do grupo como os cartoes levam; os cartoes de dentro
 * perdem a propria barra, senao seriam duas listras paralelas dizendo a mesma
 * coisa. */
.operacao-saida {
  margin: var(--espaco-2) 0;
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-grupo, var(--cor-borda));
  border-radius: var(--raio-2);
  padding: var(--espaco-2);
  background: transparent;
  background: color-mix(in srgb, var(--cor-grupo) 6%, transparent);
}
.operacao-saida .operacao-cartao {
  border-left: 0;
  padding-left: 0;
  background: none;
}
.operacao-saida .operacao-cartao:first-of-type { border-top: 0; }
/* O cabecalho da saida virou <summary> em 08/09/2026: a caixa passou a nascer
   recolhida, e o que estava dentro dela agora se abre com um clique.

   Sem marcador, como o summary dos blocos logo acima -- e o padrao da tela. O
   cursor e o que diz que da para clicar.

   flex-wrap porque a linha da loja e do entregador entrou aqui dentro: ela
   precisa cair embaixo, e nao se espremer ao lado do titulo. */
.operacao-saida-topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  cursor: pointer;
  list-style: none;
}
.operacao-saida-topo::-webkit-details-marker { display: none; }
.operacao-saida-quem { flex-basis: 100%; }
.operacao-saida-titulo {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  flex: 1;
  min-width: 0;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--cor-grupo, var(--cor-texto-fraco));
}
/* A loja e o entregador: iguais nos dois por definicao, ditos uma vez. Bairro,
   valor e tempo ficam em cada pedido, porque ali eles diferem de verdade. */
.operacao-saida-quem {
  margin: 0;
  font-size: .8125rem;
  color: var(--cor-texto-fraco);
  overflow-wrap: anywhere;
}

/* A caixinha de selecao. Alvo generoso: marcar cinco pedidos e cinco chances de
   errar o clique, e errar aqui significa cancelar o pedido errado depois. */
.operacao-marcar {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--cor-primaria);
  cursor: pointer;
}

/* ---------- a barra de acoes em lote ----------
 *
 * Presa ao rodape do painel, aparece so quando ha selecao. Fica grudada embaixo
 * porque a selecao se faz rolando a lista, e um botao no topo obrigaria a voltar
 * para agir sobre o que acabou de ser marcado. */
.operacao-lote {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  margin-top: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-3);
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-2);
}
.operacao-lote-conta { font-weight: 700; font-size: .875rem; }
.operacao-lote-porque {
  flex: 1 1 100%;
  font-size: .8125rem;
  color: var(--cor-texto-fraco);
}
.operacao-lote--perigo { color: var(--cor-erro); border-color: var(--cor-erro); }

/* ---------- o menu flutuante ----------
 *
 * Vive no <body> e nao dentro do cartao. Dentro do cartao ele empurrava a lista
 * inteira para baixo ao abrir -- o pedido que a pessoa queria ver saia de baixo
 * do proprio cursor -- e ficava preso ao recorte do painel, que rola. */
.menu-flutuante {
  position: fixed;
  z-index: var(--camada-janela);
  min-width: 12rem;
  max-width: min(18rem, calc(100vw - 1rem));
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: var(--espaco-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-2);
}
.menu-flutuante-titulo {
  margin: 0 0 var(--espaco-1);
  padding-bottom: var(--espaco-1);
  border-bottom: 1px solid var(--cor-borda);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--cor-texto-fraco);
  overflow-wrap: anywhere;
}

/* Janela que abre por cima de tudo: escolher entregador, escrever motivo,
   trocar senha. Existiu como string repetida em seis arquivos ate quebrar na
   tela de operacao -- o mapa desenha seus paines em z-index 400 e o painel em
   1100, e a janela em 50 nascia atras dos dois: o fundo escurecia e o cartao
   ficava invisivel. Uma classe so, acima de tudo, e nao ha mais o que divergir. */
.janela-fundo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: var(--camada-janela);
}

/* O bonus na oferta. Verde e a cor de dinheiro que entra em todo o sistema, e
   aqui ela esta fazendo o trabalho de chamar atencao para a corrida parada. */
/* Quantos pedidos a saida tem, e em que bairros. Fica logo abaixo do valor,
   antes do bonus: e a informacao que muda a decisao -- "R$ 39,00" com tres
   pedidos em pontas opostas da cidade e outra corrida.

   Discreto de proposito. O bonus embaixo e verde e chamativo porque ele
   convence; este so informa, e competir com o valor atrapalharia os dois. */
.oferta-saida {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  color: var(--cor-texto-fraco);
  font-size: .9375rem;
  text-align: center;
}
.oferta-bonus {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: .25rem var(--espaco-3);
  border-radius: var(--raio-cheio);
  background: var(--cor-sucesso-suave);
  color: var(--cor-sucesso);
  font-weight: 700;
}

/* A vida do pedido, etapa por etapa. A linha vertical liga os momentos: o que
   importa nao e cada hora sozinha, e o intervalo entre elas. */
.tempo { list-style: none; margin: 0; padding: 0 0 0 var(--espaco-2); }
.tempo-item {
  display: flex;
  gap: var(--espaco-3);
  padding: 0 0 var(--espaco-3) var(--espaco-4);
  border-left: 2px solid var(--cor-borda);
  position: relative;
}
.tempo-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tempo-item::before {
  content: '';
  position: absolute;
  left: -5px; top: .45rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cor-texto-fraco);
}
.tempo-item--entregue::before { background: var(--cor-sucesso); }
.tempo-item--cancelado::before { background: var(--cor-erro); }
.tempo-hora {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 3.2rem;
}
.tempo-texto { display: flex; flex-direction: column; }

/* Os dados do pedido em duas colunas: rotulo apagado, valor em destaque. */
.detalhe {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem var(--espaco-3);
  margin: 0;
  border-top: 1px solid var(--cor-borda);
  padding-top: var(--espaco-3);
}
.detalhe dt { color: var(--cor-texto-fraco); font-size: .875rem; }
.detalhe dd { margin: 0; }

/* Chave de permissao na linha de uma loja. Fica ao lado dos botoes, e por isso
   precisa da mesma altura de toque que eles. */
/* Marcador com uma linha de explicacao embaixo. Existe porque um rotulo de
   duas palavras nao bastou: "agendado" quer dizer uma coisa aqui e outra no
   sistema de onde a operacao copiou a configuracao, e a escolha errada deixava
   o agrupamento ligado sem agrupar nada. */
.chave--explica {
  align-items: flex-start;
  padding-top: .35rem;
  padding-bottom: .35rem;
  min-height: 0;
  line-height: 1.35;
}
.chave--explica input { margin-top: .15rem; }

.chave {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.25rem;
  padding: 0 .5rem;
  font-size: .8125rem;
  color: var(--cor-texto-fraco);
  cursor: pointer;
}
.chave input { width: 1.05rem; height: 1.05rem; accent-color: var(--cor-primaria); }

/* Pedido parado ha muito tempo. Vermelho porque e o unico jeito de um item numa
   lista de vinte chamar atencao sem que alguem precise ler a lista inteira. */
.operacao-parado { color: var(--cor-erro); font-weight: 700; }

.operacao-chamar {
  width: 100%;
  min-height: 2.25rem;
  margin-top: .5rem;
}

/* A escolha de quando o pedido sai. Fica em linha porque sao tres opcoes
   curtas, e empilhadas ocupariam a altura de um campo inteiro. */
.quando { border: 0; padding: 0; margin: 0 0 var(--espaco-4); }
.quando-op {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-right: var(--espaco-3);
  min-height: 2.25rem;
  cursor: pointer;
}
.quando-op input { width: 1.05rem; height: 1.05rem; accent-color: var(--cor-primaria); }

/* ---------- a caixa de entrada dos parceiros ---------- */
/* Um pedido do iFood esperando confirmacao vale mais que a lista do que ja
   esta na rua: passando de 8 minutos ele e cancelado sozinho, com penalidade
   para a loja. Por isso ela e a PRIMEIRA coisa do painel, acima de
   "Aguardando" -- mas dentro do painel, e nao empurrando o mapa. */
.caixa-entrada { border-left: 4px solid var(--cor-alerta); margin-bottom: var(--espaco-3); }
.caixa-entrada--aperta { border-left-color: var(--cor-erro); }

/* A caixa no painel da operacao.

   Ela cresce com o numero de pedidos esperando, e o painel nao pode ser comido
   por ela: com muitos pedidos, rola dentro de si mesma e o resto da operacao
   continua alcancavel. O cartao perde a margem e o canto de fora porque aqui
   ele e o topo de uma lista, e nao um bloco solto na pagina. */
/* Em rem, e nao em vh: dentro do painel (que e um flex de altura calculada) o
   vh chegou a computar zero e a caixa desapareceu com o conteudo dentro. */
.caixa-no-painel { max-height: 22rem; overflow-y: auto; flex: none; }
.caixa-no-painel .caixa-entrada {
  margin: 0;
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  border-left-width: 4px;
}

/* O TITULO DA CAIXA, no tamanho do resto dela.

   Titulo de cartao tem 18px, e isso esta certo numa pagina larga -- e a caixa
   solta no PDV continua assim. Dentro do painel da operacao, que mede 350px, o
   mesmo titulo quebrava em DUAS linhas e ficava maior que tudo o que vem
   embaixo: os itens da lista sao 13 a 16px.

   16px e o tamanho do corpo e o do numero do pedido, que e o item mais
   destacado da lista. Com ele o titulo cabe numa linha. */
.caixa-no-painel .cartao-titulo h2 {
  font-size: 1rem;
  /* O letter-spacing de .04em, que os titulos de cartao ganham em
     componentes.css, custa 19px nos 30 caracteres de "1 pedido esperando
     confirmacao". Medido: o texto precisa de 272px e ha 284 disponiveis -- com o
     espacamento decorativo ele estoura por pouco e quebra em duas linhas.
     
     Numa pagina larga esse espacamento nao custa nada e fica. Aqui ele e a
     diferenca entre uma linha e duas. */
  letter-spacing: 0;
}
.caixa-no-painel .cartao-titulo { margin-bottom: var(--espaco-3); }

.caixa-item { padding: .6rem 0; border-top: 1px solid var(--cor-borda); }
.caixa-item:first-child { border-top: 0; }

.caixa-relogio { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: auto; }
.caixa-relogio--ok { color: var(--cor-texto-fraco); }
.caixa-relogio--aperta { color: var(--cor-alerta); }
.caixa-relogio--estourou { color: var(--cor-erro); }

/* Dois selos de sentido, e nao de situacao de entrega: reaproveitar
   .selo--entregue para "confirmado no iFood" faria a mesma classe querer dizer
   duas coisas diferentes no dia em que uma das duas mudasse de cor. */
.selo--ok { background: var(--cor-sucesso-suave); color: var(--cor-sucesso); }
.selo--atencao { background: var(--cor-alerta-suave); color: var(--cor-alerta); }

.lista-simples { list-style: none; padding: 0; margin: 0 0 .75rem; }
.lista-simples li { padding: .3rem 0; border-bottom: 1px solid var(--cor-borda); }
.lista-simples li:last-child { border-bottom: 0; }

h3.sub { font-size: .95rem; margin: 1rem 0 .35rem; color: var(--cor-texto-fraco); }

/* O aviso de que o parceiro mudou algo na entrega ja aceita. Mais forte que o
   aviso de ponto aproximado de proposito: aquele diz "o mapa nao sabe bem", e
   este diz "o que voce leu antes mudou". */
.destino-aviso--mudou {
  background: var(--cor-alerta-suave);
  color: var(--cor-alerta);
  font-weight: 600;
  border-radius: var(--raio-2, .5rem);
  padding: .5rem .6rem;
}

/* ---------- o seletor de praca no cabecalho ----------
   Ele so existe quando ha mais de uma cidade ativa, e por isso pode ocupar
   espaco no topo sem culpa: quem tem uma praca so nunca o ve. Discreto de
   proposito -- e uma escolha que se faz uma vez por dia, e nao um botao de
   acao. */
.seletor-praca { display: inline-flex; align-items: center; }

.seletor-praca select {
  font: inherit;
  font-size: .875rem;
  color: var(--cor-texto);
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2, .5rem);
  padding: .3rem 1.6rem .3rem .5rem;
  max-width: 12rem;
  cursor: pointer;
  /* A seta e desenhada aqui porque a nativa do sistema ignora o tema escuro em
     parte dos navegadores e aparece preta sobre fundo preto. */
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cor-texto-fraco) 50%),
    linear-gradient(135deg, var(--cor-texto-fraco) 50%, transparent 50%);
  background-position: right .75rem center, right .5rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.seletor-praca select:hover { border-color: var(--cor-primaria); }
.seletor-praca select:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 1px;
}

/* Em tela estreita o cabecalho ja disputa espaco com o menu e o tema: o seletor
   encolhe em vez de sumir, porque saber em qual cidade voce esta importa mais
   no celular, onde nao ha menu lateral aberto dizendo isso. */
@media (max-width: 640px) {
  .seletor-praca select { max-width: 7rem; }
}

/* Texto que so o leitor de tela ouve. O seletor de praca nao tem rotulo
   visivel -- ele fica ao lado do nome de quem esta logado, e a cidade escrita
   dentro dele ja diz o que ele e -- mas sem rotulo nenhum ele seria lido como
   "caixa de selecao" e nada mais. */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Linha de tabela apagada: a praca desativada continua na lista, porque o
   historico dela existe, mas nao disputa a atencao com as que estao rodando.

   A ultima celula fica de fora: e onde mora o botao de reativar, e apagar o
   caminho de volta e o oposto do que a linha quer dizer. */
.linha--fraca > td:not(:last-child) { opacity: .55; }

/* ---------- a faixa da dinamica ----------
   Alerta, e nao aviso: dinheiro saindo a cada pedido pede mais atencao do que
   uma informacao qualquer. Ela fica no topo do painel da operacao justamente
   para ser impossivel de nao ver -- a dinamica esquecida ligada e o jeito mais
   caro de esta feature dar errado. */
.faixa-dinamica {
  display: flex;
  align-items: center;
  gap: var(--espaco-2, .5rem);
  background: var(--cor-alerta-suave);
  color: var(--cor-alerta);
  border-radius: var(--raio-2, .5rem);
  padding: .5rem .6rem;
  font-size: .8125rem;
  line-height: 1.35;
}

.faixa-dinamica strong { display: block; font-weight: 600; }

/* O detalhe -- prazo, quem paga, lojas de fora -- em segunda linha e menor: e
   o que se le uma vez ao ligar, e nao a cada olhada na tela. */
.faixa-dinamica-detalhe { display: block; opacity: .85; font-size: .75rem; }

.faixa-dinamica .botao { flex: none; }

/* Radio com rotulo ao lado, para o formulario de ligar. Existe aqui porque
   escolha de duas ou tres opcoes curtas nao merece um select: o toque a mais
   para abrir a lista custa mais do que a linha ocupada. */
.escolha {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8125rem;
  cursor: pointer;
}

/* O cartao que pede acao de quem esta lendo, e nao so informa.
   Usado pelo bloco dos retornos: ha uma mercadoria voltando e alguem precisa
   receber. A borda o separa do resto sem gritar. */
.cartao--atencao {
  border-left: 4px solid var(--cor-alerta);
}

/* Os pedidos que estao voltando para o balcao. */
.retornos { display: grid; gap: .5rem; }
.retorno {
  display: flex; gap: .75rem; align-items: center;
  padding: .625rem .75rem;
  border: 1px solid var(--cor-borda); border-radius: var(--raio-2, .75rem);
}
@media (max-width: 32rem) {
  /* No celular o botao desce para a linha inteira: lado a lado com o texto ele
     ficaria com menos de dois centimetros de largura. */
  .retorno { flex-wrap: wrap; }
  .retorno .botao { width: 100%; }
}

/* Cabecalho de tabela que ordena.
   Botao de verdade, e nao um <th> com onclick: quem navega por teclado precisa
   chegar nele com Tab e acionar com Enter, e um th nao e alvo de foco. */
.botao-ordenar {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
}
.botao-ordenar:hover { color: var(--cor-primaria); }

/* Rotulo que so o leitor de tela ve. O campo de busca dos saldos tem o
   placeholder na frente, mas placeholder some ao digitar -- e quem usa leitor
   de tela ficaria sem saber o que aquele campo e. */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* A janela do "abrir completo". Alta e rolavel: ela mostra tudo que se sabe do
   pedido, e tudo nao cabe numa tela. */
.janela-alta { max-width: 34rem; width: 100%; max-height: 85vh; overflow-y: auto; }
.pedido-secao {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--cor-texto-fraco); margin: 1.25rem 0 .375rem;
}
.pedido-secao:first-of-type { margin-top: .5rem; }
.pedido-dados {
  display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem;
  margin: 0; font-size: .875rem;
}
.pedido-dados dt { color: var(--cor-texto-fraco); }
.pedido-dados dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

/* Link que age como botao desligado. <a> sem href nao aceita :disabled, e
   esconder o botao faria a funcao parecer inexistente em vez de indisponivel. */
.botao--desligado { opacity: .5; pointer-events: none; }

/* Um select miudo que mora DENTRO de uma frase, e nao numa etiqueta propria.
   Nasceu no rodape da operacao -- "somem depois de [2 horas]" -- onde o
   controle e parte do texto que explica o que a lista esta mostrando. Por isso
   herda a fonte e o tamanho de quem o cerca, em vez de virar um campo de
   formulario no meio de um paragrafo. */
.campo-fino {
  font: inherit;
  color: var(--cor-texto);
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-1);
  padding: 0 .25rem;
  cursor: pointer;
}

/* Os numeros dos pedidos no cabecalho da saida conjunta.
   Linha propria e com espaco entre eles: sao o que se procura quando a caixa
   esta fechada, e colados viram um borrao de digitos. */
.operacao-saida-numeros {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
}

/* O balao de aviso que flutua sobre qualquer tela.
   Existe porque o .aviso de sempre nao flutua e nao some sozinho: ele e um
   pedaco de tela que a propria tela coloca. Este aqui e do sistema, e nao da
   tela -- ele aparece indiferente da pagina em que a pessoa esteja. */
.baloes {
  position: fixed;
  /* Em cima e a direita: embaixo ele taparia o botao principal das telas de
     celular, e a esquerda cobriria o menu do computador. */
  top: 1rem;
  right: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  /* A caixa nao rouba toque: so os baloes dentro dela recebem. Sem isto, uma
     area invisivel no canto engoliria cliques da operacao. */
  pointer-events: none;
  max-width: min(22rem, calc(100vw - 2rem));
}
.balao {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  text-align: left;
  padding: .6rem .7rem;
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-primaria);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  cursor: pointer;
  /* Alvo de dedo: no celular ele aparece por cima do que a pessoa esta fazendo,
     e um alvo pequeno faria ela errar e tocar na tela de baixo. */
  min-height: 3rem;
}
.balao-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.balao-texto strong { font-size: .9375rem; }
.balao-texto span {
  font-size: .8125rem;
  color: var(--cor-texto-fraco);
  /* Uma linha so: a mensagem inteira esta na conversa, e o balao e o convite
     para abri-la -- nao a leitura. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A ABA DE CHAT DA LOJA.
   O print dele de 10/09/2026 mostrou o problema: a lista era uma caixinha a
   esquerda e a conversa um retangulo vazio enorme com "Escolha uma conversa"
   perdido no meio -- "parece meio deslocado", nas palavras dele.

   O conserto e uma coisa so: AS DUAS COLUNAS TEM A MESMA ALTURA, tirada da
   janela. Lista compacta a esquerda, conversa ocupando o resto, como qualquer
   cliente de mensagem no computador. */
.chat-tela {
  display: grid;
  grid-template-columns: minmax(15rem, 22rem) 1fr;
  gap: 1rem;
  align-items: stretch;
  /* A altura sai da janela menos o cabecalho e as abas do PDV. Sem isto cada
     coluna crescia com o proprio conteudo, e era exatamente o desencontro que
     ele viu. */
  height: calc(100vh - 11rem);
  min-height: 24rem;
}
@media (max-width: 52rem) {
  .chat-tela {
    grid-template-columns: 1fr;
    /* No estreito as duas empilham, e altura fixa faria a lista sumir atras da
       conversa. Aqui a pagina rola, como no resto do sistema. */
    height: auto;
  }
}

/* A MARGEM VEM DE .cartao + .cartao, E TEM DUAS CLASSES.
   Zerar em `.chat-lista` nao pega: uma classe perde para duas, e a conversa
   descia 1rem em relacao a lista -- o "deslocado" do print. Escrito com o pai
   na frente, o seletor tem tres classes e ganha. */
.chat-tela .chat-lista,
.chat-tela .chat-conversa { margin: 0; }

.chat-lista {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  /* A lista rola sozinha: com vinte conversas ela nao empurra a conversa
     aberta para fora da tela. */
  overflow-y: auto;
}
.chat-item {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  width: 100%;
  text-align: left;
  padding: .55rem .6rem;
  border: 1px solid transparent;
  border-radius: var(--raio-2);
  background: none;
  color: var(--cor-texto);
  cursor: pointer;
  min-height: 3rem;
  flex-shrink: 0;
}
.chat-item:hover { background: var(--cor-superficie-2); }
.chat-item--aberta { border-color: var(--cor-primaria); background: var(--cor-superficie-2); }
.chat-item-titulo { display: flex; align-items: center; gap: .4rem; }
.chat-item-ultima {
  font-size: .8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-conversa {
  display: flex;
  flex-direction: column;
  /* min-height: 0 num item de flex/grid nao e enfeite: sem ele o filho que
     rola (a lista de mensagens) empurra o pai e a barra de escrever sai da
     tela. E o mesmo motivo de sempre -- item de flex tem min-height auto. */
  min-height: 0;
}
.chat-conversa .chat-linha {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .5rem 0;
  min-height: 0;
}
.chat-conversa .chat-bolha {
  align-self: flex-start;
  max-width: 72%;
  padding: .45rem .6rem;
  border-radius: var(--raio-2);
  background: var(--cor-superficie-2);
  overflow-wrap: anywhere;
}
.chat-conversa .chat-bolha--minha {
  align-self: flex-end;
  background: var(--cor-primaria);
  /* --cor-texto-botao, e nao #fff: no tema escuro do ADM a primaria e um
     amarelo, e branco em cima dele nao se le. O token ja resolve isso em todos
     os temas -- e o comentario dele em tokens.css conta a historia. */
  color: var(--cor-texto-botao);
}
.chat-conversa .chat-bolha time {
  display: block;
  font-size: .6875rem;
  opacity: .75;
  margin-top: .15rem;
  text-align: right;
}
/* A tira do dia, igual a do app: a conversa e a mesma, e ler o mesmo dado de
   dois jeitos em duas telas confunde quem opera os dois lados. */
.chat-conversa .chat-dia { align-self: center; margin: .5rem 0 .25rem; }
.chat-conversa .chat-dia span {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--cor-superficie-2);
  color: var(--cor-texto-fraco);
  font-size: .6875rem;
}
.chat-conversa .chat-escrever {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-top: .5rem;
  flex-shrink: 0;
}
.chat-conversa .chat-escrever input {
  flex: 1;
  margin: 0;
  min-height: 2.75rem;
  border-radius: 1.5rem;
  padding: 0 1rem;
}

/* A contagem de nao lidas na aba do menu. */
.aba-conta {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: .35rem;
  padding: 0 .25rem;
  border-radius: 999px;
  background: var(--cor-erro);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}

/* A coluna da conversa quando nada esta aberto.
   Era um retangulo enorme com uma frase perdida no meio -- "parece meio
   deslocado". Agora o conteudo fica centrado, com o que fazer em seguida. */
.chat-nada {
  margin: auto;
  max-width: 20rem;
  text-align: center;
  color: var(--cor-texto-fraco);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.chat-nada p { margin: 0; }
.chat-nada strong { color: var(--cor-texto); }

/* A tira que separa os pedidos dentro da conversa do ADM.
   Mesma forma da tira do dia, com a cor mais forte: as duas aparecem juntas, e
   duas tiras identicas em sequencia leriam como uma repeticao.

   O SELETOR REPETE .chat-conversa DE PROPOSITO: a regra da tira do dia e
   `.chat-conversa .chat-dia span` -- duas classes -- e uma classe so perde
   dela, mesmo vindo depois. Foi assim que a margem da coluna venceu o meu
   margin: 0 ontem. */
.chat-conversa .chat-dia--pedido > span {
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-forte);
  font-weight: 600;
}

/* Quem falou, em cima da bolha.
   So a tela do ADM usa: ali nenhum dos dois lados e "meu", e duas colunas de
   bolhas sem nome nao dizem quem falou -- que e exatamente o que ele abre a
   tela para saber. */
.chat-quem {
  display: block;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .75;
  margin-bottom: .15rem;
}

/* A largura da conversa numa tela larga.
   No print do ADM em 1445px, a bolha da loja ficava encostada na borda direita
   e a do entregador na esquerda, com um vazio enorme no meio: os olhos tinham
   de atravessar a tela para acompanhar quem respondeu o que. Num chat, a coluna
   de mensagens tem largura de leitura -- e o resto e margem.

   A COLUNA E LIMITADA, E NAO CADA BOLHA. A primeira versao punha margin auto em
   cada filho da linha: misturar `margin: auto` com `align-self` num container
   flex e pedir para descobrir na tela qual dos dois ganhou. Assim as bolhas
   continuam usando o align-self que sempre tiveram.

   A barra de escrever acompanha, senao ela ficaria da largura toda embaixo de
   uma conversa estreita. */
.chat-conversa .chat-linha,
.chat-conversa .chat-escrever {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
}

/* =============================================================
   Medalhas, insignia e perfil do entregador
   =============================================================
   A insignia e desenhada em SVG por assets/js/insignia.js -- estas regras
   cuidam so do encaixe. O metal e o simbolo estao no proprio SVG, porque cor
   de medalha nao segue o tema: ouro e ouro no claro e no escuro.
*/
.insignia { display: block; flex: none; }
.insignia--falta { opacity: .55; }

/* O avatar de iniciais. Foto ficou de fora desta etapa: o projeto nao tem
   armazenamento de imagem, e foto impropria visivel para colegas seria
   trabalho de moderacao da administracao. */
.avatar-iniciais {
  border-radius: var(--raio-cheio);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--cor-texto-botao);
  flex: none;
  line-height: 1;
}

/* A barra de progresso. Serve ao placar da colecao e a proxima medalha. */
.barra {
  height: 6px;
  border-radius: var(--raio-cheio);
  background: var(--cor-superficie-2);
  overflow: hidden;
}
.barra-cheio { height: 100%; background: var(--cor-primaria); }

.medalha-titulo {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cor-alerta);
}

.medalha-lista { display: flex; flex-direction: column; gap: .5rem; }

.medalha-linha {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
  border-top: 1px solid var(--cor-borda);
}
.medalha-linha:first-child { border-top: 0; }

/* A estante. Quatro por linha no celular, e o nome inteiro embaixo -- foi a
   correcao depois do print que ele mandou em 14/09/2026: abreviacao de cinco
   letras nao diz que medalha e aquela. */
.medalha-estante {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .625rem .25rem;
}

.medalha-item { text-align: center; display: grid; justify-items: center; gap: .125rem; }
.medalha-item--falta { opacity: .6; }

.medalha-nome {
  font-size: .625rem;
  line-height: 1.2;
  color: var(--cor-texto);
}

/* O cartao do colega, aberto da fila. */
.janela {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-2);
  width: min(24rem, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 1rem;
}

.janela--cartao { padding: 0; }

.perfil-topo {
  position: relative;
  padding: 1.125rem 1.125rem 1rem;
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--cor-nivel, var(--cor-primaria)) 18%, transparent),
    transparent);
  border-radius: var(--raio-3) var(--raio-3) 0 0;
}

.perfil-fechar { position: absolute; right: .625rem; top: .625rem; }

.perfil-frase {
  margin: .875rem 0 0;
  font-style: italic;
  color: var(--cor-texto-fraco);
  line-height: 1.5;
}

/* Tres numeros, e so estes tres: entregas, km e tempo de casa. Dinheiro nao
   atravessa o perfil -- a trava esta no banco, e um teste percorre a resposta
   procurando chave da familia do dinheiro. */
.perfil-numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
}
.perfil-numeros > div { padding: .625rem .75rem; text-align: center; }
.perfil-numeros > div + div { border-left: 1px solid var(--cor-borda); }
.perfil-numeros .valor { font-size: 1.125rem; font-weight: 700; }
.perfil-numeros .fraco { font-size: .6875rem; }

/* O nome clicavel na fila. Quem escondeu o perfil aparece como texto. */
.fila-nome {
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
  min-height: auto;
}

/* ---------- as auras da Booh ----------
 *
 * O que a marca tem e nao cabe em token: brilho, canto marcado, malha de fundo
 * e letra aberta. Sao as mesmas seis mecanicas que a pele Tatica tinha, agora
 * apoiadas na menta em vez do ciano -- e sem atributo de estilo na frente,
 * porque agora ha um visual so.
 *
 * NENHUMA REGRA DE LAYOUT AQUI. Nenhum display, nenhum grid, nenhuma ordem,
 * nenhuma largura. Elas mudam a aparencia dos mesmos elementos nos mesmos
 * lugares. Quem precisar mexer em posicao: para, e resolve na estrutura comum.
 *
 * E QUASE TODAS SO NO ESCURO. Brilho sobre fundo claro nao e brilho, e sombra
 * suja em volta de um botao colorido -- foi por isso que o Tatico tambem
 * prendia o brilho ao tema escuro. O que vale nos dois e so a tipografia:
 * caixa alta e letra aberta nao dependem de fundo.
 */

/* A malha. No fundo da pagina inteira, atras de tudo, e so no escuro: sobre
   fundo claro ela viraria papel quadriculado. 4,5% da menta -- o suficiente
   para o fundo ter textura e nao o suficiente para competir com texto. */
[data-tema="escuro"] body {
  background-image:
    linear-gradient(color-mix(in oklab, var(--cor-primaria) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--cor-primaria) 5%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  background-attachment: fixed;
}

/* O canto marcado do cartao. Pseudo-elemento, e nao borda: borda de verdade
   mexeria na caixa e, com isso, no layout. */
.cartao { position: relative; }

.cartao::before,
.cartao::after {
  content: "";
  position: absolute;
  background: var(--cor-primaria);
  opacity: .85;
  pointer-events: none;
}

.cartao::before { left: 0; top: 0; width: 22px; height: 2px; }
.cartao::after  { left: 0; top: 0; width: 2px; height: 22px; }

/* Cartao que e dobra guarda o canto mais discreto, senao a marca fica em cima
   do triangulo de abrir. */
.cartao--dobra::before,
.cartao--dobra::after { opacity: .55; }

/* Cartao de uma linha nao ganha canto: a marca ocupa 22px de uma caixa que tem
   pouco mais que isso de altura, e o resultado e um risco solto. */
.cartao--linha::before,
.cartao--linha::after { content: none; }

/* Titulo e selo com a letra aberta. E o que da o tom da marca sem trocar
   tamanho nenhum -- e o unico par de regras que vale nos dois temas. */
.cartao-titulo h1,
.cartao-titulo h2,
.cartao-titulo h3 { letter-spacing: .04em; }

.selo {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

/* O brilho do botao principal, so no escuro. Menta sobre Breu faz isto valer a
   pena; no claro seria borrao. */
[data-tema="escuro"] .botao--principal {
  box-shadow: 0 0 16px -2px var(--cor-primaria);
}

/* A borda luminosa da barra do topo e do menu: e o que separa painel de pagina
   sem desenhar mais nada. */
[data-tema="escuro"] .topo,
[data-tema="escuro"] .menu {
  border-color: color-mix(in oklab, var(--cor-primaria) 28%, transparent);
}