/* ---------------------------------------------------------------------------
   Rota pelo Bem — folha de estilo "Sereno".

   ISTO É O DESIGN. Substitui integralmente o static/css/base.css mínimo.

   Escrita para a marcação que já existe: nenhum seletor novo é obrigatório e
   nenhuma classe antiga foi removida. Trocar o arquivo já entrega a maior
   parte do redesenho; o restante são três mudanças de template listadas no
   README (ícones, barra inferior flutuante, barra de progresso do ciclo).

   Mobile primeiro, como antes. Alvos de toque de 44 px preservados.
--------------------------------------------------------------------------- */

/* ------------------------------------------------------------------ tokens */

:root {
  /* Superfícies — papel morno, cartão branco. */
  --cor-fundo: #f7f4ee;          /* papel: o fundo do aplicativo */
  --cor-cartao: #ffffff;         /* cartão: qualquer bloco elevado */
  --cor-suave: #f2eee3;          /* areia: blocos neutros, chips inativos */
  --cor-borda: #ece6da;          /* traço fino de cartão */
  --cor-borda-forte: #ddd6c9;    /* traço de botão secundário */

  /* Texto */
  --cor-texto: #1f2420;
  --cor-fraca: #6f746b;
  --cor-fraca-2: #8b9086;        /* metadado, legenda */

  /* Marca / papel "doa · coleta" */
  --cor-marca: #3f7a60;
  --cor-marca-escura: #34664f;
  --cor-marca-tinta: #2c5b47;    /* texto sobre tinta clara */
  --cor-marca-clara: #e8f0ea;    /* tinta clara */
  --cor-marca-media: #cfe2d6;    /* trilha de progresso */

  /* Papel "leva · você no mapa" */
  --cor-leva: #35608c;
  --cor-leva-clara: #e7eef5;

  /* Papel "recebe · entrega" e erro */
  --cor-alerta: #a4453c;
  --cor-alerta-clara: #f7e8e6;

  /* Atenção · aguardando */
  --cor-atencao: #8f6524;
  --cor-atencao-clara: #f6ecdd;

  /* Formas */
  --raio: 20px;                  /* cartão */
  --raio-p: 16px;                /* campo, bloco interno */
  --raio-g: 26px;                /* tela, folha */
  --raio-pilula: 999px;          /* botão, pastilha, ícone */
  --alvo: 44px;
  --sombra-flutuante: 0 6px 22px rgba(31, 36, 32, .08);
  --transicao: 180ms ease;
}

/* SEM modo escuro automático — decisão do dono. O desenho aprovado é o papel
   morno claro, e trocar a paleta pelo tema do sistema fazia o aplicativo
   parecer OUTRO produto para metade das pessoas. O visual é UM. A exceção
   continua sendo o modo direção (body[data-tela="dirigir"], mais abaixo),
   que é escuro POR DESENHO — tela olhada de relance no carro. */

* { box-sizing: border-box; }

/* Reserva o espaço da barra de rolagem SEMPRE: sem isto, navegar de uma
   página curta (sem rolagem) para uma longa (com rolagem) desloca o layout
   inteiro alguns pixels para o lado — a "tela tremendo" a cada clique. */
html { scrollbar-gutter: stable; }

/* --------------------------------------------------------------- tipografia */

/* As DUAS fontes são servidas do nosso static/ (opção que o próprio handoff
   previa): vindas do Google, cada navegação dependia da rede para os ícones
   aplicarem, e a barra piscava. Locais, o service worker as guarda e elas
   aplicam na primeira pintura — inclusive offline. O texto usa display=swap
   (texto precisa aparecer já); o ícone usa display=block (invisível até a
   fonte chegar, em vez de mostrar o nome do glifo em letras). */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fontes/plus-jakarta-sans.7660bd9909fb.woff2") format("woff2");
}
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fontes/material-symbols-rounded.f6a98bb015f7.woff2") format("woff2");
}

/* Navegação entre páginas com transição de documento (Chrome/Edge 126+):
   em vez de a tela piscar e a barra ser desmontada e remontada, o navegador
   cruza as duas pinturas — e o topo, com nome próprio, fica visualmente
   CONTÍNUO de uma página para a outra. Onde não há suporte, nada muda. */
@view-transition { navigation: auto; }
.topo { view-transition-name: topo; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: calc(94px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .75rem; text-wrap: balance; }
h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; margin: 1.75rem 0 .6rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 .35rem; }
p { margin: 0 0 .8rem; text-wrap: pretty; }

/* Rótulo de seção: o "SUAS DOAÇÕES" das telas. Aplique em h2 quando a seção
   for uma lista, não um texto. */
h2.rotulo {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cor-fraca);
  margin: 1.5rem 0 .65rem;
}

a { color: var(--cor-marca-tinta); text-decoration: none; }
a:hover, a:focus { color: var(--cor-marca); }

.pular { position: absolute; left: -9999px; }
.pular:focus {
  left: .5rem; top: .5rem; z-index: 10;
  background: var(--cor-cartao);
  border-radius: var(--raio-p);
  padding: .6rem .9rem;
}

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Foco visível em tudo que recebe teclado. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- ícones */

/* Material Symbols Rounded, preenchidos, dentro de círculo tingido.
   Uso: <span class="icone" aria-hidden="true">redeem</span>
        <span class="icone-circulo icone-circulo--doa"><span class="icone">redeem</span></span> */
.icone {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  /* Caixa TRAVADA em 1em: antes de a fonte de ícone carregar, o conteúdo é o
     NOME do glifo em texto ("directions_car") — sem a trava, ele alargava o
     elemento e a navegação inteira tremia a cada página. Com a caixa fixa,
     o layout é o mesmo com fonte, sem fonte e durante o carregamento. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 1;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.icone--vazado { font-variation-settings: "FILL" 0; }
.icone--p { font-size: 18px; }
.icone--g { font-size: 26px; }

.icone-circulo {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-pilula);
  background: var(--cor-suave);
  color: var(--cor-fraca);
}
.icone-circulo--p { width: 38px; height: 38px; }
.icone-circulo--p .icone { font-size: 20px; }
.icone-circulo--doa    { background: var(--cor-marca-clara);   color: var(--cor-marca-tinta); }
.icone-circulo--leva   { background: var(--cor-leva-clara);    color: var(--cor-leva); }
.icone-circulo--recebe { background: var(--cor-alerta-clara);  color: var(--cor-alerta); }
.icone-circulo--atencao{ background: var(--cor-atencao-clara); color: var(--cor-atencao); }
.icone-circulo--forte  { background: var(--cor-marca);         color: var(--cor-fundo); }

/* ----------------------------------------------------------------- casca */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.375rem .875rem;
  padding-top: calc(1.25rem + env(safe-area-inset-top));
  border-bottom: 0;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--cor-texto);
  font-weight: 700;
  letter-spacing: -.01em;
}
.marca-simbolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--raio-pilula);
  background: var(--cor-marca);
  color: var(--cor-fundo);
}
.marca-simbolo .icone { font-size: 18px; }

.topo-acoes { display: flex; gap: .5rem; }
.topo-acoes a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--raio-pilula);
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
}
/* O item "Conta" do topo vira as iniciais da pessoa em círculo tingido,
   como no protótipo (README, mapa de ícones: Conta → iniciais). */
.topo-acoes .avatar-iniciais {
  background: var(--cor-marca-clara);
  border-color: transparent;
  color: var(--cor-marca-tinta);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.contador {
  position: absolute;
  top: 4px; right: 5px;
  min-width: 18px;
  padding: 0 5px;
  background: var(--cor-alerta);
  color: #fff;
  border: 2px solid var(--cor-fundo);
  border-radius: var(--raio-pilula);
  font-size: .68rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  margin: 0;
  vertical-align: baseline;
}

.conteudo {
  /* O respiro de cima vale para TODAS as telas: sem ele, qualquer página
     que começa num h1 (Entrar, Sua conta…) cola no topo — a landing só
     parecia certa porque a .vitrine traz padding próprio. */
  padding: 1rem 1.375rem 1.5rem;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

/* Barra inferior FLUTUANTE em pastilha — a assinatura do Sereno. */
.barra-inferior {
  position: fixed;
  left: 1rem; right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  height: 62px;
  display: flex;
  align-items: center;
  padding: 0 .5rem;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pilula);
  box-shadow: var(--sombra-flutuante);
  max-width: 688px;
  margin: 0 auto;
}
.barra-inferior a {
  flex: 1;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #9a9e93;
  transition: color var(--transicao);
}
.barra-inferior a .icone { font-size: 23px; font-variation-settings: "FILL" 0; }
.barra-inferior span { font-size: .625rem; }
/* O rótulo reserva a largura do NEGRITO mesmo quando está no peso normal
   (fantasma invisível com o mesmo texto em 600): sem isso, o item ativo
   engorda e empurra os vizinhos a cada navegação. */
.barra-inferior span[data-texto] { display: inline-flex; flex-direction: column; align-items: center; }
.barra-inferior span[data-texto]::after {
  content: attr(data-texto);
  font-weight: 600;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
/* Ativo: ícone preenchido e cor de texto cheia. Marque com aria-current="page". */
.barra-inferior a[aria-current="page"] { color: var(--cor-texto); }
.barra-inferior a[aria-current="page"] .icone { font-variation-settings: "FILL" 1; }

.rodape {
  border-top: 0;
  padding: 1.25rem 1.375rem 1.5rem;
  margin-top: auto;
  font-size: .8125rem;
  color: var(--cor-fraca-2);
  background: var(--cor-suave);
  width: 100%;
  text-align: center;
}
.rodape-conteudo {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: .5rem;
  max-width: 860px; margin: 0 auto;
}
.rodape-conteudo a { color: var(--cor-fraca); }
.rodape-conteudo a:hover, .rodape-conteudo a:focus { color: var(--cor-marca-tinta); text-decoration: none; }
.rodape-separador { color: var(--cor-borda-forte); user-select: none; }

/* --------------------------------------------------------------- recados */

.recados { list-style: none; margin: 0; padding: .25rem 1.375rem 0; }
.recado {
  padding: .8rem 1rem;
  border-radius: var(--raio-p);
  border-left: 0;
  background: var(--cor-marca-clara);
  color: var(--cor-marca-tinta);
  font-size: .9375rem;
  margin-bottom: .5rem;
  transition: opacity .4s ease, transform .4s ease, max-height .4s ease, margin .4s ease, padding .4s ease;
  max-height: 140px;
  opacity: 1;
}
.recado--error   { background: var(--cor-alerta-clara);  color: var(--cor-alerta); }
.recado--warning { background: var(--cor-atencao-clara); color: var(--cor-atencao); }
.recado--oculto {
  opacity: 0; transform: translateY(-8px);
  max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
}

.faixa-demo {
  margin: 0;
  padding: .6rem 1rem;
  background: var(--cor-atencao-clara);
  color: var(--cor-atencao);
  text-align: center;
  font-size: .8125rem;
  font-weight: 600;
}

/* ------------------------------------------------------------ formulários */

.campo { margin-bottom: 1rem; }
.campo label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--cor-fraca);
  margin-bottom: .375rem;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="date"],
input[type="time"], input[type="datetime-local"], input[type="url"],
select, textarea {
  width: 100%;
  min-height: 52px;
  padding: .8rem 1rem;
  font-size: 1rem;               /* 16px: o iPhone não dá zoom */
  font-family: inherit;
  color: var(--cor-texto);
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  transition: border-color var(--transicao);
}
input:hover, select:hover, textarea:hover { border-color: var(--cor-borda-forte); }
input:focus, select:focus, textarea:focus { border-color: var(--cor-marca); }
textarea { min-height: 5.25rem; resize: vertical; line-height: 1.5; }

input[type="checkbox"], input[type="radio"] {
  width: 1.2rem; height: 1.2rem;
  accent-color: var(--cor-marca);
  vertical-align: -3px;
  margin-right: .5rem;
}

fieldset {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-cartao);
  padding: 1.25rem;
  margin: 0 0 1.25rem;
}
/* O legend, por padrão, senta EM CIMA da borda do fieldset — no cartão
   arredondado ele sai cortado, meio fora do traço. O float o traz para
   DENTRO do fluxo, como um título de cartão; o clear devolve o resto do
   conteúdo para baixo dele. */
legend {
  float: left;
  width: 100%;
  font-weight: 700;
  font-size: 1.0625rem;
  padding: 0;
  margin: 0 0 .875rem;
}
legend + * { clear: both; }

ul[id$="categorias"], ul[id$="cuidados"], ul[id$="itens"] { list-style: none; padding: 0; margin: 0; }
ul[id$="categorias"] li, ul[id$="cuidados"] li { margin-bottom: .4rem; }

.ajuda { color: var(--cor-fraca); font-size: .875rem; line-height: 1.55; margin: .3rem 0 0; }
.erro, .erros { color: var(--cor-alerta); font-size: .9rem; }
.erros {
  list-style: none;
  padding: .8rem 1rem;
  background: var(--cor-alerta-clara);
  border: 0;
  border-radius: var(--raio-p);
}
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: var(--cor-alerta); }

/* ---------------------------------------------------------------- botões */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--alvo);
  padding: .7rem 1.25rem;
  margin: 0 .4rem .5rem 0;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--cor-texto);
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao), transform var(--transicao);
}
/* Botão costuma ser <a>: sem cor EXPLÍCITA nos estados, o hover global de
   link (a:hover, cor da marca) vence por especificidade e pinta o texto de
   verde — sobre o fundo verde do botão principal, o rótulo some. Cada
   variante declara a própria cor em hover/focus. */
.botao:hover, .botao:focus { background: var(--cor-suave); color: var(--cor-texto); }
.botao:active { transform: translateY(1px); }

.botao--principal {
  background: var(--cor-marca);
  border-color: var(--cor-marca);
  color: #fff;
  font-weight: 600;
}
.botao--principal:hover, .botao--principal:focus {
  background: var(--cor-marca-escura);
  border-color: var(--cor-marca-escura);
  color: #fff;
}
.botao--principal:hover { transform: translateY(-1px); }
.botao--perigo { border-color: #e8ceca; color: var(--cor-alerta); }
.botao--perigo:hover, .botao--perigo:focus {
  background: var(--cor-alerta-clara);
  color: var(--cor-alerta);
}
.botao--pequeno { min-height: 38px; padding: .4rem .9rem; font-size: .875rem; }
.botao--grande { min-height: 54px; padding: .9rem 1.5rem; font-size: 1.0625rem; }
.botao--gigante {
  display: flex;
  width: 100%;
  min-height: 74px;
  border-radius: 24px;
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: .75rem;
}
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.acoes .botao { margin: 0; }
.acoes--centro { justify-content: center; }

/* ---------------------------------------------------------------- listas */

.lista, .atalhos, .sugestoes, .paradas, .mensagens, .selos, .passos {
  list-style: none; padding: 0; margin: 0 0 1.25rem;
}

/* Lista-cartão: um cartão branco com divisores internos é a forma padrão. */
.lista, .atalhos {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.lista li, .atalhos li { border: 0; border-radius: 0; margin: 0; }
.lista li + li, .atalhos li + li { border-top: 1px solid #f0ebe0; }
.lista li > a, .atalhos li > a {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: var(--alvo);
  padding: .95rem 1.125rem;
  color: var(--cor-texto);
  transition: background var(--transicao);
}
.lista li > a:hover, .atalhos li > a:hover { background: var(--cor-fundo); }
.lista li:not(:has(> a)) { padding: .95rem 1.125rem; }
.lista small, .atalhos small, .sugestao small {
  display: block;
  color: var(--cor-fraca);
  font-size: .8125rem;
  margin-top: 1px;
}
/* Não lido: a marca vira um ponto, não uma borda grossa. */
.lista li.nao-lido { position: relative; }
.lista li.nao-lido::before {
  content: "";
  position: absolute; left: .55rem; top: 1.5rem;
  width: 8px; height: 8px; border-radius: var(--raio-pilula);
  background: var(--cor-marca);
}
.lista li.nao-lido > a { padding-left: 1.5rem; }

/* Passos numerados (landing e telas explicativas). */
.passos { counter-reset: passo; }
.passos li {
  counter-increment: passo;
  position: relative;
  padding: .9rem 0 .9rem 2.5rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--cor-fraca);
}
.passos li + li { border-top: 1px solid var(--cor-borda); }
.passos li::before {
  content: counter(passo);
  position: absolute; left: 0; top: .95rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--raio-pilula);
  background: var(--cor-marca-clara);
  color: var(--cor-marca-tinta);
  font-size: .8125rem;
  font-weight: 700;
}
.passos li strong { color: var(--cor-texto); }

/* ------------------------------------------------------------- pastilhas */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .7rem;
  border-radius: var(--raio-pilula);
  border: 0;
  background: var(--cor-suave);
  color: var(--cor-fraca);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge .icone { font-size: 15px; }
.badge--sucesso { background: var(--cor-marca-clara);   color: var(--cor-marca-tinta); }
.badge--alerta  { background: var(--cor-atencao-clara); color: var(--cor-atencao); }
.badge--perigo  { background: var(--cor-alerta-clara);  color: var(--cor-alerta); }
.badge--leva    { background: var(--cor-leva-clara);    color: var(--cor-leva); }

/* Cartão de participante: sem borda colorida à esquerda — a cor vem do
   ícone em círculo, uma cor por pessoa. */
.participante-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.125rem !important;
}
/* A coluna do meio CRESCE e alinha à esquerda: sem o flex 1, o
   space-between do cartão a deixava flutuando centralizada no espaço
   livre entre o ícone e a pastilha de status. */
.participante-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  text-align: left;
}

/* --------------------------------------------------------------- blocos */

.destaque {
  border: 0;
  border-radius: 22px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--cor-marca-clara);
  color: var(--cor-texto);
}
.destaque h2 { margin-top: 0; }
.destaque .ajuda, .destaque p { color: #46503f; }
.destaque .botao--principal { width: 100%; }

.perigo { border-top: 1px solid var(--cor-borda); margin-top: 2.5rem; padding-top: 1.25rem; }
.vazio {
  color: var(--cor-fraca);
  font-style: normal;
  background: var(--cor-suave);
  border-radius: var(--raio-p);
  padding: 1rem 1.125rem;
}
.situacao { color: var(--cor-fraca); font-size: .875rem; }
.resumo {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  padding: 1rem 1.125rem;
  border-radius: var(--raio);
}
.aviso { color: var(--cor-atencao); }

.dados { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0 0 1.25rem; }
.dados dt { font-weight: 600; color: var(--cor-fraca); }
.dados dd { margin: 0; }

.numeros-grandes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 22px;
  padding: 1.25rem;
  margin: 0 0 1rem;
}
.numeros-grandes dt { color: var(--cor-fraca); font-size: .8125rem; order: 2; }
.numeros-grandes dd {
  margin: 0; order: 1;
  font-size: 2.125rem; font-weight: 700; letter-spacing: -.03em; line-height: 1;
}
.numeros-grandes > div { display: flex; flex-direction: column; gap: .25rem; }

/* Barra de progresso do ciclo da rota (proposta → concluída).
   Marcação sugerida no README: .ciclo com N spans .ciclo-etapa. */
.ciclo { display: flex; align-items: center; gap: .375rem; }
.ciclo-etapa { flex: 1; height: 6px; border-radius: var(--raio-pilula); background: #e6e0d4; }
.ciclo-etapa--feita { background: var(--cor-marca); }
.ciclo-etapa--agora { background: var(--cor-marca-media); }
.ciclo-rotulos {
  display: flex; justify-content: space-between;
  margin: .5rem 0 0;
  font-size: .6875rem; color: var(--cor-fraca-2);
}

/* ------------------------------------------------------------ sugestões */

.sugestoes li, .sugestao {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  margin-bottom: .625rem;
  transition: border-color var(--transicao);
}
.sugestao:hover { border-color: var(--cor-borda-forte); }
/* Marcado: o cartão inteiro ganha o traço da marca. */
.sugestao:has(input:checked) { border: 2px solid var(--cor-marca); }
.sugestao label { display: flex; gap: .8rem; padding: 1rem 1.125rem; cursor: pointer; }
.sugestao-corpo { display: block; }
.sugestao strong { font-size: 1rem; }
.sugestao .descricao { display: block; color: var(--cor-fraca); font-size: .875rem; line-height: 1.5; margin-top: .2rem; }
/* Os números viram pastilhas: minutos, peso, desvio, encaixe. */
.sugestao .numeros { display: flex; flex-wrap: wrap; gap: .375rem; margin: .75rem 0 .6rem; }
.sugestao .numeros b {
  display: inline-flex; align-items: center;
  padding: .28rem .7rem;
  border-radius: var(--raio-pilula);
  background: var(--cor-marca-clara);
  color: var(--cor-marca-tinta);
  font-size: .75rem; font-weight: 700;
}
.sugestao .rota { display: block; color: var(--cor-fraca); font-size: .8125rem; line-height: 1.5; }
.sugestao .excedente {
  display: inline-flex; margin-top: .5rem;
  padding: .28rem .7rem; border-radius: var(--raio-pilula);
  background: var(--cor-atencao-clara); color: var(--cor-atencao);
  font-size: .75rem; font-weight: 700;
}
.sugestao .observacao { display: block; color: var(--cor-fraca-2); font-size: .8125rem; line-height: 1.5; margin-top: .5rem; }

.destino { display: flex; gap: .8rem; padding: .95rem 0; border-bottom: 1px solid var(--cor-borda); }
.destino small { display: block; color: var(--cor-fraca); font-size: .8125rem; }

/* --------------------------------------------------------------- paradas */

.paradas {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.parada {
  border-left: 0;
  padding: 1rem 1.125rem;
  margin: 0;
}
.parada + .parada { border-top: 1px solid #f0ebe0; }
.parada--concluida { background: color-mix(in oklab, var(--cor-marca-clara) 45%, transparent); }
.parada .endereco { display: block; color: var(--cor-fraca); font-size: .875rem; margin: .25rem 0; }
.parada small { display: block; color: var(--cor-fraca); font-size: .8125rem; }
.comprovante { max-width: 160px; border-radius: var(--raio-p); margin-top: .6rem; }
.fotos { display: flex; gap: .5rem; flex-wrap: wrap; }
.fotos img { width: 45%; border-radius: var(--raio-p); }

/* O selo de parada repete o pin do mapa: mesmo número, mesma cor. */
.parada-selo {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--raio-pilula);
  color: #fff;
  font-size: .875rem; font-weight: 700;
  margin-right: .45rem;
}
.parada-selo--coleta  { background: var(--cor-marca); }
.parada-selo--entrega { background: var(--cor-alerta); }
.parada-selo--leva    { background: var(--cor-leva); }

/* ------------------------------------------------------------------ mapa */

.mapa {
  height: 300px;
  border-radius: var(--raio);
  border: 1px solid var(--cor-borda);
  margin: 1rem 0 0;
  background: var(--cor-suave);
  overflow: hidden;
}
.mapa-legenda {
  display: flex; flex-wrap: wrap;
  gap: .4rem 1rem; align-items: center;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-top: 0;
  border-radius: 0 0 var(--raio) var(--raio);
  margin: -1px 0 1.25rem;
  padding: .75rem 1rem;
  font-size: .75rem;
  color: var(--cor-fraca);
}
.mapa-legenda .ponto {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: var(--raio-pilula);
  margin-right: .35rem;
  vertical-align: 0;
  border: 0;
  box-shadow: none;
}
/* Uma cor = uma pessoa/papel, em todo lugar: legenda, pin, selo, cartão. */
.ponto--voce    { background: var(--cor-leva); }
.ponto--coleta  { background: var(--cor-marca); }
.ponto--entrega { background: var(--cor-alerta); }
.ponto--leva    { background: var(--cor-leva); }

.mapa-legenda .linha {
  display: inline-block;
  width: 18px; height: 0;
  border-top: 3px solid var(--cor-marca);
  margin-right: .35rem;
  vertical-align: 3px;
}
.mapa-legenda .linha--tracejada { border-top-style: dashed; }
.mapa-legenda .linha--atual { border-top-width: 4px; }

.rotulo-posicao {
  background: #fff;
  padding: 2px 8px;
  border-radius: var(--raio-pilula);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
  font-size: 11px;
  font-weight: 600;
}

/* ------------------------------------------------------------- conversas */

.mensagens { display: flex; flex-direction: column; gap: .875rem; }
.mensagem {
  align-self: flex-start;
  max-width: 82%;
  padding: .75rem .95rem;
  border-radius: 18px 18px 18px 6px;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
}
.mensagem--minha {
  align-self: flex-end;
  border-radius: 18px 18px 6px 18px;
  background: var(--cor-marca);
  border-color: var(--cor-marca);
  color: #fff;
}
.mensagem--minha small, .mensagem--minha strong { color: rgba(255, 255, 255, .85); }
.mensagem p { margin: .2rem 0; }
.mensagem small { color: var(--cor-fraca-2); font-size: .6875rem; }

.escrever {
  display: flex; gap: .625rem; align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--cor-borda);
}
.escrever textarea {
  flex: 1;
  min-height: 48px;
  border-radius: var(--raio-pilula);
  padding: .8rem 1.125rem;
}
.escrever .botao--principal {
  width: 48px; height: 48px; min-height: 48px;
  padding: 0; margin: 0;
  border-radius: var(--raio-pilula);
}

/* Selos do impacto. */
.selos { display: flex; flex-wrap: wrap; gap: .5rem; }
.selos li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .875rem;
  border: 1px solid transparent;
  border-radius: var(--raio-pilula);
  background: var(--cor-suave);
  color: var(--cor-fraca-2);
  font-size: .875rem;
  margin: 0;
  opacity: 1;
}
.selos li.conquistado {
  background: var(--cor-cartao);
  border-color: var(--cor-marca);
  color: var(--cor-texto);
  font-weight: 600;
}
.selos li.conquistado .icone { color: var(--cor-marca); }
.selos li small { font-size: .75rem; }

/* --------------------------------------------------------- modo direção */

/* Tela escura: um elemento por vez, olhada de relance no semáforo. */
body[data-tela="dirigir"] {
  background: #1f2420;
  color: #f7f4ee;
  padding-bottom: 0;
}
body[data-tela="dirigir"] .topo,
body[data-tela="dirigir"] .barra-inferior,
body[data-tela="dirigir"] .rodape { display: none; }

.direcao { text-align: left; padding-top: .5rem; }
.direcao-contexto { color: #9aa196; font-size: .8125rem; margin-bottom: 1.25rem; }
.direcao-tipo {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .875rem;
  border-radius: var(--raio-pilula);
  background: rgba(111, 174, 143, .18);
  color: #9ed3b6;
  font-size: .875rem; font-weight: 600;
  margin-bottom: 1rem;
}
.direcao-acao { font-size: 2.875rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; margin: 0 0 1rem; }
.direcao-quem { font-size: 1.375rem; font-weight: 600; margin: 0 0 .25rem; }
.direcao-endereco { font-size: 1.375rem; line-height: 1.35; color: #cfd3c9; margin: 0 0 .625rem; }
.direcao-item { color: #9aa196; font-size: 1rem; margin-bottom: 1.375rem; }
.direcao-navegar { display: flex; gap: .625rem; margin: 0 0 .75rem; }
.direcao-navegar .botao {
  flex: 1; min-height: 62px; margin: 0;
  border-radius: var(--raio);
  background: rgba(247, 244, 238, .1);
  border-color: transparent;
  color: #f7f4ee;
  font-size: 1rem;
}
.direcao-navegar .botao:hover { background: rgba(247, 244, 238, .16); }
body[data-tela="dirigir"] .botao--principal {
  background: #6fae8f; border-color: #6fae8f; color: #17251d;
}
body[data-tela="dirigir"] .botao--principal:hover { background: #7fbb9c; border-color: #7fbb9c; }
body[data-tela="dirigir"] .mapa { border-color: rgba(247, 244, 238, .14); background: #2a302a; }
.direcao-sair { margin-top: 1.5rem; text-align: center; }
.direcao-sair a { color: #9aa196; }

/* --------------------------------------------------------- landing page */

.vitrine { text-align: center; padding: 1.5rem 0 1.75rem; }
.vitrine-rota { display: block; width: min(210px, 60%); margin: 0 auto 1.375rem; color: var(--cor-marca); }
.vitrine h1 { font-size: 2rem; letter-spacing: -.02em; line-height: 1.12; margin-bottom: .875rem; }
.vitrine-chamada { color: var(--cor-fraca); font-size: 1rem; line-height: 1.55; max-width: 34rem; margin: 0 auto 1.5rem; }
.vitrine-nota { color: var(--cor-fraca-2); font-size: .8125rem; margin-top: .875rem; }
.vitrine .acoes--centro { flex-direction: column; }
.vitrine .botao { width: 100%; }

.bloco { margin: 2.25rem 0; }
.bloco h2 { margin-top: 0; }
.bloco--centro { text-align: center; }

/* Os três papéis: cartão branco com ícone em círculo tingido. */
.papeis { display: grid; gap: .625rem; }
.papel {
  display: flex; gap: .875rem; align-items: flex-start;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 1.125rem 1.25rem;
  background: var(--cor-cartao);
}
.papel h3 { margin: 0 0 .2rem; font-size: 1.0625rem; }
.papel p { margin: 0; color: var(--cor-fraca); font-size: .875rem; line-height: 1.5; }

.faixa-privacidade {
  background: var(--cor-marca-clara);
  border-left: 0;
  border-radius: 22px;
  padding: 1.375rem;
  color: var(--cor-texto);
}
.faixa-privacidade h2 { font-size: 1.1875rem; margin: .75rem 0 .5rem; }
.faixa-privacidade p { color: #46503f; font-size: .875rem; line-height: 1.55; }
.faixa-privacidade p:last-child { margin-bottom: 0; }
.faixa-privacidade a { color: var(--cor-marca-tinta); font-weight: 600; }

.numeros-grandes--centro { text-align: center; }
.numeros-grandes--centro dt { margin-bottom: .15rem; }

.chamada-final {
  text-align: center;
  padding: 2rem 0 .5rem;
  border-top: 1px solid var(--cor-borda);
}
.chamada-final h2 { max-width: 30rem; margin: 0 auto 1rem; font-size: 1.375rem; }
.chamada-final .botao { width: 100%; }

/* -------------------------------------------- sugestões de endereço */

/* A lista desenhada por static/js/sugestoes_endereco.js. Cada linha tem a
   altura de toque da casa: o painel antigo do Google vinha com ~30px, e foi
   exatamente a reclamação de um usuário no celular: "horrível para clicar,
   cliquei 4x e só foi na 4ª". */
.palpites-ancora { position: relative; }
.palpites {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2000;
  margin: 6px 0 0;
  padding: .375rem;
  list-style: none;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra-flutuante);
}
.palpite {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .45rem;
  min-height: var(--alvo);
  padding: .55rem .75rem;
  border-radius: 12px;
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--cor-fraca);
  cursor: pointer;
}
.palpite:hover, .palpite--ativo { background: var(--cor-marca-clara); }
.palpite-principal { font-size: 1.0625rem; color: var(--cor-texto); }
.palpites-marca { display: flex; justify-content: flex-end; padding: .5rem .75rem .3rem; }

/* -------------------------------------------------------- tela da rota */

/* Utilitários de tamanho de tela: o que é do polegar (voltar, conversa no
   rodapé) só existe no celular; o que é de ponteiro (ações no cabeçalho)
   só no computador. */
@media (min-width: 768px) {
  .so-celular { display: none !important; }
}

.so-desktop { display: none; }

.botao-circulo {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raio-pilula);
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
}

.rota-cabecalho {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
/* No celular o título fica no centro, entre os dois botões-círculo, com o
   número ACIMA da data (a ordem do markup é a do desktop; o column-reverse
   vira a pilha). */
.rota-titulo { flex: 1; text-align: center; display: flex; flex-direction: column-reverse; }
.rota-titulo h1 { margin: 0; font-size: 1.35rem; }
.rota-titulo .situacao { margin: 0; font-size: .8125rem; }

.rota-status { margin-bottom: 1.25rem; }
.rota-status .secao-cabecalho { margin-bottom: .6rem; }
/* Seis rótulos não cabem sob a barra: "entregou" sai sempre (a prancha
   mostra cinco) e, no celular, "coletou" também (a prancha mostra quatro). */
.rota-status .ciclo-rotulos span:nth-child(5) { display: none; }
@media (max-width: 767px) {
  .rota-status .ciclo-rotulos span:nth-child(4) { display: none; }
}

/* O mapa e a nota de privacidade vivem em largura total, acima das paradas
   — pedido do dono: na coluna estreita o mapa não respirava. */
.nota-privacidade { margin-bottom: 1.25rem; }

.rota-acoes-topo { margin: 0; }

/* A parada como linha da prancha: selo, corpo e a pastilha de status. */
.parada { display: flex; align-items: flex-start; gap: .75rem; }
.parada-corpo { flex: 1; }
.parada > .badge { flex: none; }
.parada-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }

/* A nota de privacidade em cartão de areia, com o escudo. */
.nota-privacidade {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  background: var(--cor-suave);
  border-radius: var(--raio);
  padding: 1.125rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--cor-fraca);
}
.nota-privacidade p { margin: 0; }
.nota-privacidade strong { color: var(--cor-texto); }

/* ------------------------------------------------------- painel do início */

/* O cabeçalho da prancha: saudação à esquerda, ações à direita (desktop).
   No celular as ações somem — os mesmos destinos vivem nos atalhos. */
.inicio-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.inicio-acoes { display: none; }

/* Cabeçalho de seção com duas pontas: rótulo à esquerda, "Ver todas" à
   direita, na mesma linha — como na prancha. */
.secao-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.secao-cabecalho a { font-size: .875rem; font-weight: 600; }

/* O cartão da rota em andamento: cabeçalho com quem leva, ciclo e paradas. */
.rota-ativa { display: block; color: var(--cor-texto); margin-bottom: .625rem; }
.rota-ativa-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.rota-ativa .ciclo-rotulos { display: none; }
.rota-paradas {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-top: .875rem;
  font-size: .875rem;
  color: var(--cor-fraca);
}
.rota-parada { display: flex; align-items: center; }
.rota-parada .parada-selo { width: 24px; height: 24px; font-size: .75rem; }

/* Doações como cartões, pastilha de status no canto. */
.cartoes { display: grid; gap: .625rem; }
.cartao {
  display: block;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 1rem 1.125rem;
  color: var(--cor-texto);
  transition: border-color var(--transicao), transform var(--transicao);
}
.cartao:hover { border-color: var(--cor-borda-forte); transform: translateY(-2px); }
.cartao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .625rem;
}
.cartao strong { display: block; }
.cartao small { display: block; color: var(--cor-fraca); font-size: .8125rem; margin-top: 2px; }

/* A coluna lateral (impacto, precisando perto, privacidade). */
.inicio-lateral { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.75rem; }
.inicio-lateral .resumo .rotulo, .inicio-lateral .resumo h2 { margin-top: 0; }
.impacto-numero { margin: .25rem 0 0; }
.impacto-numero strong { font-size: 2.125rem; font-weight: 700; letter-spacing: -.03em; }
.impacto-nivel {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .875rem 1rem;
  border-radius: var(--raio-p);
  margin: .75rem 0;
}
.impacto-nivel small { display: block; color: #46503f; }
/* Lista sem moldura própria, para viver DENTRO de um cartão .resumo. */
.lista--solta { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.lista--solta li > a { padding: .7rem 0; }

/* ------------------------------------------------ tablet e computador */

@media (min-width: 768px) {
  body { padding-bottom: 0; font-size: 17px; }
  .conteudo { padding: 1.5rem 2rem 2.5rem; }
  .inicio-acoes { display: flex; gap: .5rem; }
  .inicio-acoes .botao { margin: 0; white-space: nowrap; }
  .so-desktop { display: initial; }
  .rota-acoes-topo.so-desktop { display: flex; gap: .5rem; }
  .rota-acoes-topo .botao { margin: 0; white-space: nowrap; }
  .rota-titulo { text-align: left; flex-direction: column; }
  .rota-titulo h1 { font-size: 2rem; }
  .rota-ativa .ciclo-rotulos { display: flex; }
  .cartoes { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 2rem; }
  .vitrine { padding-top: 2.5rem; }
  .vitrine h1 { font-size: 2.75rem; }
  .vitrine .acoes--centro { flex-direction: row; }
  .vitrine .botao, .chamada-final .botao { width: auto; }
  .papeis { grid-template-columns: repeat(3, 1fr); }
  .papel { flex-direction: column; }
  .numeros-grandes--centro { grid-template-columns: repeat(3, 1fr); }
  .fotos img { width: 30%; }
  .mapa { height: 420px; }

  /* No desktop a navegação sobe para o topo, em pastilhas. */
  .topo { padding: 1.125rem 2rem; border-bottom: 1px solid var(--cor-borda); background: var(--cor-cartao); }
  .barra-inferior {
    position: static;
    left: auto; right: auto; bottom: auto;
    height: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    gap: .25rem;
  }
  .barra-inferior a {
    flex: 0 0 auto;
    flex-direction: row;
    gap: .45rem;
    min-height: 40px;
    padding: 0 1rem;
    border-radius: var(--raio-pilula);
    font-size: .9375rem;
  }
  .barra-inferior a:hover { background: var(--cor-fundo); }
  .barra-inferior a[aria-current="page"] { background: var(--cor-marca-clara); color: var(--cor-marca-tinta); font-weight: 600; }
  .barra-inferior span { font-size: .9375rem; }
  /* base.html: mova a .barra-inferior para dentro do .topo em >=768px, ou
     duplique-a lá — ver README, mudança de template nº 2. */
}

@media (min-width: 1024px) {
  .conteudo { max-width: 1080px; }
  /* O painel vira duas colunas: o fluxo principal e a lateral de contexto
     (impacto, precisando perto, privacidade), como na prancha desktop. */
  .inicio-grade {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.75rem;
    align-items: start;
  }
  .inicio-lateral { margin-top: 1.5rem; }
  /* Colunas automáticas: 4 atalhos viram 4 em linha (ou 2×2 quando a tela
     aperta), 3 viram 3 — nunca sobra um cartão órfão embaixo, como sobrava
     com as 3 colunas fixas. */
  .atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); background: transparent; border: 0; }
  .atalhos li { border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-cartao); }
  .atalhos li + li { border-top: 1px solid var(--cor-borda); }
  /* A grade iguala a altura dos CARTÕES, mas o link de dentro só ocupava a
     altura do próprio texto — cartão de texto curto ficava com um pé em
     branco. O link estica e o conteúdo centraliza: todos com o mesmo
     formato. */
  .atalhos li > a { height: 100%; }
  .numeros-grandes { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ----------------------------------------------------------- PWA instalação */

.botao-instalar-pwa { display: none; }
body[data-pode-instalar="sim"] .botao-instalar-pwa {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--cor-marca);
  color: #fff;
  border: 0;
  border-radius: var(--raio-pilula);
  padding: .5rem 1rem;
  font-size: .8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--transicao);
}
body[data-pode-instalar="sim"] .botao-instalar-pwa:hover { background: var(--cor-marca-escura); }

/* A faixa de rodapé "Instale o Rota pelo Bem" foi removida a pedido do dono:
   o convite vive só no botão do topo (acima). */