/* ==========================================================================
   Área do cliente — a casca de aplicativo do motorista

   Três telas, uma barra embaixo: Recargas, Mapa e Carteira. Cada aba é uma
   PÁGINA de verdade, não um painel trocado por JavaScript. Custa uma ida ao
   servidor por toque, e vale a pena por três motivos:

     1. O mapa já é uma página inteira, com Leaflet e uma folha arrastável
        afinada em cima de `position: fixed`. Enfiá-lo dentro de um contêiner
        de abas quebraria as duas coisas.
     2. Um <iframe> resolveria — mas a CSP manda `frame-ancestors 'none'`,
        que recusa até moldura de mesma origem. Afrouxá-la para ganhar troca
        de aba seria pagar caro por pouco.
     3. Cada aba fica com endereço próprio, então o botão "voltar" do celular
        faz o que a pessoa espera e o link pode ser compartilhado.

   Esta folha é carregada pelas três páginas. Ela não depende do style.css
   nem do site.css: define os próprios tokens, como o login.css faz.
   ========================================================================== */

:root {
  /* Altura da barra de abas. Fica em :root para quem não é tela da área do
     cliente também poder consultar — o mapa usa isto para o diálogo de
     reserva não nascer por trás dela. */
  --barra-h: 60px;
}

/* Sem a barra na página, o valor tem de ser zero: quem soma --barra-h numa
   folga precisa somar nada quando ela não existe. */
body:not(.tem-barra) { --barra-h: 0px; }

/* Estas páginas não carregam o style.css do painel, e portanto não herdam o
   reset dele. Sem isto, qualquer elemento com padding e largura percentual
   estoura o contêiner — foi o que aconteceu com os campos da tela de entrada,
   que vazavam 34px para fora do cartão. */
*, *::before, *::after { box-sizing: border-box; }

.pagina-cliente {
  --cl-fundo: #F4F4F6;
  --cl-superficie: #ffffff;
  --cl-texto: #16161a;
  --cl-suave: #5b5b66;
  --cl-linha: #e2e2e7;
  --cl-primaria: #b4160f;
  --cl-primaria-fraca: rgba(180, 22, 15, 0.09);
  --cl-ok: #0c6b45;
  --cl-sombra: 0 10px 28px rgba(20, 20, 24, 0.08);

  margin: 0;
  min-height: 100dvh;
  background: var(--cl-fundo);
  color: var(--cl-texto);
  font: 400 16px/1.5 var(--fonte-smartcharge, "Sora", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .pagina-cliente {
  --cl-fundo: #08080a;
  --cl-superficie: #16161b;
  --cl-texto: #f5f5f7;
  --cl-suave: #b0b0bc;
  --cl-linha: rgba(255, 255, 255, 0.12);
  --cl-primaria: #ff4d42;
  --cl-primaria-fraca: rgba(255, 77, 66, 0.14);
  --cl-ok: #5fe0ab;
  --cl-sombra: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* O mapa é a única aba que não é uma tela da área do cliente: ele é página
   aberta e tem paleta própria, a do site.css. A barra ali empresta os tokens
   dele, senão ficaria um retângulo de outro aplicativo colado embaixo.

   Emprestar os tokens também resolve o tema de graça: desde que o mapa.css
   ganhou bloco escuro, esses mesmos tokens viram com a página, e a barra vira
   junto sem precisar saber de nada. */
.pagina-mapa {
  --cl-superficie: var(--superficie);
  --cl-texto: var(--texto);
  --cl-suave: var(--texto-3);
  --cl-linha: var(--linha);
  --cl-primaria: var(--vermelho-forte);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Barra de abas
   ========================================================================== */

/* Fica escondida até o cliente.js confirmar quem está logado. No mapa, que é
   página aberta, mostrá-la antes da confirmação ofereceria a um visitante sem
   conta três abas que ele não pode abrir. */
.barra-app[hidden] { display: none; }

.barra-app {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: grid;
  /* Uma coluna por aba, seja qual for o numero delas. Estava fixo em 3, e a
     quarta aba caiu para uma segunda linha, dobrando a altura da barra por
     cima do conteudo. Assim ela acompanha sem depender de alguem lembrar de
     contar de novo. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--cl-superficie) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--cl-linha);
  /* A faixa do gesto do iPhone come a última linha de qualquer barra colada
     embaixo. O padding entra por baixo do conteúdo, não em volta dele, para o
     alvo de toque continuar com 60px de altura útil. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.barra-app-item {
  appearance: none;
  border: 0;
  background: transparent;
  /* Ancora o traço da aba ativa. Sem isto, o ::before abaixo é absoluto sem
     ancestral posicionado: ele cai na .barra-app, que é `fixed`, e a margem
     negativa o joga 31px ACIMA da barra — um risco vermelho atravessando o
     texto da página. */
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  height: var(--barra-h);
  padding: 0 4px;
  color: var(--cl-suave);
  font: 600 11px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .16s ease;
}
.barra-app-item svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.barra-app-item:hover { color: var(--cl-texto); }
.barra-app-item:focus-visible {
  outline: 2px solid var(--cl-primaria);
  outline-offset: -3px;
  border-radius: 10px;
}
.barra-app-item[aria-current="page"] { color: var(--cl-primaria); }
/* O traço em cima da aba ativa: é o que diz "você está aqui" sem depender de
   distinguir dois tons de cinza, que é o que falha em tela de celular no sol. */
.barra-app-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--cl-primaria);
}

/* A aba que ainda não existe não pode parecer quebrada quando alguém toca
   nela: fica visivelmente adiada, e o toque leva a uma página que explica. */
.barra-app-item.is-breve { opacity: 0.62; }

/* No computador as três abas se juntam no meio.
   Esticadas em 1fr cada, num monitor largo elas ficavam a palmos de distância
   uma da outra — três ilhas numa faixa vazia, e o olho não as lê mais como um
   grupo. No celular 1fr é o certo, porque a largura do polegar é o que manda;
   aqui o que manda é a leitura. */
@media (min-width: 700px) {
  .barra-app {
    /* `grid-auto-columns`, e nao `grid-template-columns: repeat(3, ...)`.
       O valor fixo em tres sobreviveu a chegada da quarta aba: as tres
       primeiras ficavam espremidas na esquerda e a de Ajustes ia parar sozinha
       no meio da faixa. Assim a barra acompanha o numero de abas, como ja faz
       no celular logo acima. */
    grid-auto-columns: 116px;
    justify-content: center;
  }
}

/* ==========================================================================
   Telas (Recargas, Carteira)
   ========================================================================== */

.tela-cliente {
  max-width: 560px;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 16px
           calc(var(--barra-h) + env(safe-area-inset-bottom, 0px) + 22px);
}

.cliente-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 20px;
}
.cliente-perfil { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cliente-perfil .avatar-dashboard { width: 48px; height: 48px; font-size: 20px; flex: 0 0 auto; }
.cliente-saudacao { min-width: 0; }
.cliente-saudacao p {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cl-suave);
}
.cliente-saudacao h1 {
  margin: 3px 0 0;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  /* Nome grande não pode empurrar o botão de sair para fora da tela. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cliente-sair {
  flex: 0 0 auto;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--cl-linha);
  border-radius: 999px;
  background: var(--cl-superficie);
  color: var(--cl-suave);
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
.cliente-sair:hover { color: var(--cl-texto); border-color: var(--cl-suave); }
.cliente-sair:focus-visible { outline: 2px solid var(--cl-primaria); outline-offset: 2px; }
.cliente-sair svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- cartão do saldo ---------- */
.cartao-saldo {
  border-radius: 18px;
  padding: 20px;
  background: linear-gradient(140deg, #b4160f 0%, #7d0d08 100%);
  color: #fff;
  box-shadow: var(--cl-sombra);
}
.cartao-saldo p {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.86;
}
.cartao-saldo strong {
  display: block;
  margin: 8px 0 0;
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cartao-saldo small {
  display: block;
  margin: 10px 0 0;
  font-size: 0.83rem;
  line-height: 1.45;
  opacity: 0.88;
}

/* ---------- blocos ---------- */
.bloco-cliente { margin: 24px 0 0; }
.bloco-cliente h2 {
  margin: 0 0 10px;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.cartao-cliente {
  border: 1px solid var(--cl-linha);
  border-radius: 16px;
  background: var(--cl-superficie);
  padding: 18px;
}

/* ---------- estado vazio ----------
   Um vazio honesto: diz que não há nada, diz por quê, e oferece o próximo
   passo. Sem número inventado — este projeto ainda não liga recarga a conta
   de motorista, e preencher com dado falso enganaria quem está vendo. */
.vazio-cliente {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 26px 16px;
}
.vazio-cliente svg {
  width: 34px; height: 34px;
  fill: none; stroke: var(--cl-suave); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.75;
}
.vazio-cliente p {
  margin: 0;
  max-width: 34ch;
  text-wrap: balance;
  color: var(--cl-suave);
  font-size: 0.92rem;
}

.botao-cliente {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 0;
  background: var(--cl-primaria);
  color: #fff;
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.botao-cliente:focus-visible { outline: 2px solid var(--cl-texto); outline-offset: 2px; }
.botao-cliente svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

:root[data-theme="dark"] .botao-cliente { color: #140403; }

/* ---------- como funciona ---------- */
.passos-cliente {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}
.passos-cliente li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
}
.passos-cliente b {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cl-primaria-fraca);
  color: var(--cl-primaria);
  font-size: 0.85rem;
}
.passos-cliente span { font-size: 0.93rem; color: var(--cl-suave); }
.passos-cliente strong { color: var(--cl-texto); font-weight: 600; }

/* ---------- aviso de simulação ---------- */
.nota-cliente {
  margin: 20px 0 0;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--cl-suave);
  opacity: 0.85;
}

/* ---------- carteira ---------- */
.form-carteira { display: grid; gap: 14px; }
.form-carteira label { display: grid; gap: 6px; color: var(--cl-suave); font-size: .85rem; font-weight: 650; }
.form-carteira input, .pix-cobranca textarea { width: 100%; border: 1px solid var(--cl-linha); border-radius: 10px; padding: 11px 12px; background: var(--cl-fundo); color: var(--cl-texto); font: 500 16px/1.2 system-ui, sans-serif; }
.campo-moeda { display: flex; align-items: center; gap: 8px; border: 1px solid var(--cl-linha); border-radius: 10px; padding: 0 12px; background: var(--cl-fundo); color: var(--cl-suave); }
.campo-moeda input { border: 0; padding-left: 0; }
.ajuda-carteira, .mensagem-carteira { margin: 0; color: var(--cl-suave); font-size: .78rem; line-height: 1.4; }
.mensagem-carteira.erro { color: var(--cl-primaria); }
.botao-secundario { margin-top: 14px; border: 1px solid var(--cl-linha); border-radius: 999px; padding: 10px 14px; background: transparent; color: var(--cl-texto); font: 650 13px/1 system-ui, sans-serif; cursor: pointer; }
.pix-cobranca { display: grid; justify-items: center; gap: 10px; padding-top: 18px; text-align: center; }
.pix-cobranca h3, .pix-cobranca p { margin: 0; font-size: .92rem; }
.pix-cobranca img { width: min(220px, 100%); min-height: 120px; object-fit: contain; }
.pix-cobranca textarea { height: 72px; resize: none; font-size: .72rem; }
.extrato-carteira { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.extrato-carteira li { display: flex; justify-content: space-between; gap: 12px; color: var(--cl-suave); font-size: .88rem; }
.extrato-carteira li span { display: grid; }
.extrato-carteira small { color: var(--cl-suave); font-size: .75rem; }
.extrato-carteira b { color: var(--cl-ok); white-space: nowrap; }
.extrato-carteira b.debito { color: var(--cl-primaria); }

/* `display: grid` de cima vence o `display: none` padrão do navegador para
   `[hidden]` — regra de autor sempre ganha da regra do navegador, mesmo com
   especificidade menor. Sem isto, `elemento.hidden = true` no JS marcava o
   atributo mas o elemento continuava visível, como grade vazia. */
.vazio-cliente[hidden], .extrato-carteira[hidden] { display: none; }

/* ---------- melhor hora para carregar ----------
   O número que decide é a economia, e é ele que fica grande. O nome da loja
   vem antes e pequeno, porque quem já sabe onde carrega só quer a hora. */
.melhor-hora-loja {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cl-suave);
}
.melhor-hora-destaque {
  display: grid;
  gap: 2px;
  margin: 8px 0 0;
}
.melhor-hora-destaque b {
  font-size: 1.64rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cl-ok);
}
.melhor-hora-destaque span { font-size: .9rem; color: var(--cl-texto); }
.melhor-hora-agora {
  margin: 12px 0 0;
  font-size: .8rem;
  color: var(--cl-suave);
}

/* As outras lojas: lista sóbria, sem repetir o destaque. Mesma anatomia do
   extrato, para a tela não ganhar um segundo idioma. */
.melhor-hora-outras {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--cl-linha);
  list-style: none;
}
.melhor-hora-outras[hidden] { display: none; }
.melhor-hora-outras li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: .86rem;
  color: var(--cl-suave);
}
.melhor-hora-outras li span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.melhor-hora-outras li b { color: var(--cl-texto); font-weight: 600; white-space: nowrap; }
.melhor-hora-outras li i { font-style: normal; color: var(--cl-ok); white-space: nowrap; }

/* ==========================================================================
   Convivência com o mapa

   O mapa ancora três coisas na base da tela — o botão de localização, a
   pílula da lista e o aviso — e todas sobem junto com a folha através de
   `--folha`. Com a barra de abas embaixo, todas precisam subir mais um pouco,
   senão ficam atrás dela. A folha inteira também sobe, por margem: assim a
   última linha da lista não fica escondida sob a barra.

   Só vale quando a barra existe (.tem-barra), que é quando um motorista
   logado abriu o mapa. Visitante sem conta vê o mapa exatamente como antes.
   ========================================================================== */
@media (max-width: 899px) {
  /* Com a barra embaixo, a base útil da tela deixa de ser a borda do
     navegador e passa a ser o topo dela. Tudo que o mapa ancora em baixo
     sobe --barra-h, e as faixas ficam empilhadas nesta ordem, de baixo para
     cima: atribuição, pílula, aviso, botão de localização.

     A atribuição encosta na barra de propósito. Ela é uma tira de 15px, e a
     licença dos ladrilhos do OpenStreetMap e da CARTO exige que fique
     legível — deixá-la na mesma altura da pílula, como ficou na primeira
     tentativa, punha o "© OpenStreetMap" por baixo do "12 pontos". */
  .tem-barra .leaflet-bottom.leaflet-right,
  .tem-barra .leaflet-bottom.leaflet-left {
    /* +2px, e não 0: a barra mede --barra-h MAIS a borda de cima, e no zero a
       tira da atribuição encostava 1px por baixo dela. */
    bottom: calc(var(--folha, 0px) + 2px + var(--barra-h));
  }
  .tem-barra .mapa-pilula { bottom: calc(var(--folha, 0px) + 22px  + var(--barra-h)); }
  .tem-barra .mapa-aviso  { bottom: calc(var(--folha, 0px) + 70px  + var(--barra-h)); }
  .tem-barra .mapa-fab    { bottom: calc(var(--folha, 0px) + 146px + var(--barra-h)); }
  /* A folha continua com a altura externa de sempre, e o fundo dela passa por
     trás da barra — o que está certo: a barra é translúcida, e uma emenda ali
     ficaria pior que a continuidade.

     O espaço sai por dentro, com padding na folha. A folha é uma coluna flex
     e a lista é o item que cresce, então tirar 61px por baixo encurta a lista
     e deixa o último carregador parar em cima da barra, alcançável.

     As duas alternativas óbvias não servem, e as duas foram tentadas:

       margem ou altura na folha — o mapa.js calcula o `transform` do arrasto
         a partir da altura dela (`translate = altura - folha`), então mexer
         nisso desloca a folha junto e ela deixa de encostar na base.
       padding na própria lista — ela não tem altura travada; cresce com o
         padding e empurra o próprio fim mais para baixo da tela, que foi
         onde o último item continuou escondido.

     A folga é --barra-h MAIS 20px: a folha tem 88dvh de altura mas o encaixe
     mais alto mostra 86dvh, então uns 17px dela ficam abaixo da tela mesmo
     toda aberta. Só a altura da barra deixaria o último item 18px escondido
     justamente no encaixe em que a pessoa está lendo a lista. */
  .tem-barra .mapa-lista { padding-bottom: calc(var(--barra-h) + 20px); }
}
@media (min-width: 900px) {
  /* No computador a folha vira coluna fixa e a barra some — a área do cliente
     é uma experiência de celular, e no desktop o caminho é o painel. */
  .tem-barra .mapa-fab   { bottom: calc(12px + var(--barra-h)); }
  .tem-barra .mapa-aviso { bottom: calc(10px + var(--barra-h)); }
  /* No computador a folha é coluna fixa de altura inteira, então é ela mesma
     que precisa parar acima da barra — não há transform em jogo aqui. */
  .tem-barra .mapa-lista { padding-bottom: var(--barra-h); }
  .tem-barra .leaflet-bottom.leaflet-right,
  .tem-barra .leaflet-bottom.leaflet-left { bottom: calc(12px + var(--barra-h)); }
}

@media (prefers-reduced-motion: reduce) {
  .barra-app-item, .cliente-sair { transition: none; }
}

/* ---------- reservas ---------- */
.lista-reservas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.reserva-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}
.reserva-item b { display: block; font-size: 0.96rem; }
.reserva-item small { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--cl-suave); }
.reserva-quando-texto {
  display: block;
  margin-top: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cl-texto);
}

.reserva-acao {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 8px;
  text-align: right;
}
.reserva-situacao {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--cl-linha);
  color: var(--cl-suave);
  white-space: nowrap;
}
.reserva-situacao.is-ativa { background: color-mix(in srgb, var(--cl-ok) 16%, transparent); color: var(--cl-ok); }
.reserva-situacao.is-expirada { background: var(--cl-primaria-fraca); color: var(--cl-primaria); }

.reserva-cancelar {
  appearance: none;
  border: 1px solid var(--cl-linha);
  border-radius: 999px;
  background: none;
  padding: 7px 13px;
  color: var(--cl-suave);
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.reserva-cancelar:hover { color: var(--cl-primaria); border-color: var(--cl-primaria); }
.reserva-cancelar:disabled { opacity: 0.6; cursor: default; }

/* Numa tela estreita a linha vira duas: nome em cima, situação e botão
   embaixo — lado a lado, o nome da loja ficava com três caracteres. */
@media (max-width: 420px) {
  .reserva-item { flex-direction: column; align-items: stretch; }
  .reserva-acao { justify-items: stretch; text-align: left; grid-auto-flow: column; align-items: center; }
  .reserva-situacao { justify-self: start; }
  .reserva-cancelar { justify-self: end; }
}

/* O "Cheguei" é ação principal: aparece só na janela do horário, e é o que
   devolve o depósito. Por isso preenchido, enquanto "Cancelar" é contorno. */
.reserva-chegar {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--cl-primaria);
  color: #fff;
  padding: 8px 16px;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
:root[data-theme="dark"] .reserva-chegar { color: #140403; }
.reserva-chegar:disabled { opacity: 0.6; cursor: default; }
.reserva-situacao.is-cumprida { background: color-mix(in srgb, var(--cl-ok) 16%, transparent); color: var(--cl-ok); }

/* ==========================================================================
   Ajustes da conta
   ========================================================================== */

/* O avatar. Dois tamanhos, uma regra.
   Sem foto ele mostra a inicial do nome, e nao um boneco cinza: a inicial ja
   e a pessoa, e o boneco sempre parece um botao de "entrar". */
.avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cl-primaria-fraca);
  background-size: cover;
  background-position: center;
  color: var(--cl-primaria);
  font: 700 12px/1 system-ui, sans-serif;
  /* A borda so aparece quando ha foto: em cima de uma inicial ela viraria um
     circulo dentro de outro. */
  box-shadow: inset 0 0 0 1px transparent;
}
.avatar.tem-foto {
  background-color: var(--cl-linha);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.avatar-grande {
  width: 92px;
  height: 92px;
  font-size: 36px;
  flex: 0 0 auto;
}

/* Na barra de abas o avatar ocupa o lugar do icone, entao precisa do mesmo
   espaco que um svg de 24px ocupa ali. */
.barra-app-item .avatar { width: 24px; height: 24px; font-size: 11px; }
.barra-app-item[aria-current="page"] .avatar { box-shadow: inset 0 0 0 2px var(--cl-primaria); }

.ajustes-foto {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ajustes-foto-acoes { display: grid; gap: 10px; min-width: 0; }
.ajustes-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ajustes-botoes .botao-cliente,
.ajustes-botoes .botao-secundario { margin: 0; }

/* Tres colunas nao cabem num celular estreito com "Automático" escrito por
   extenso; empilhar e mais legivel que encolher a fonte. */
.ajustes-tema { margin-bottom: 4px; }

.ajustes-conta li { justify-content: space-between; }
.ajustes-conta b { font-variant-numeric: tabular-nums; }

@media (max-width: 460px) {
  .ajustes-foto { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Grupo de escolha em cartoes

   Nasceu na carteira, para escolher Pix/cartao/boleto, e por isso se chama
   `formas-pagamento`. Hoje a tela de ajustes usa o mesmo desenho para escolher
   o tema, entao o bloco mudou de arquivo -- de carteira.css para ca, que as
   duas telas carregam.

   O nome ficou. Renomear tocaria o html e o js das duas e o ganho seria so o
   nome; e o mesmo raciocinio que deixou a tabela `carteira_pix` guardar boleto
   e cartao.
   ========================================================================== */

/* ---------- escolha da forma de pagamento ----------
   Três cartões lado a lado, com o prazo escrito embaixo de cada um. O prazo
   é a informação que decide: quem precisa do saldo agora não pode descobrir
   depois de gerar o boleto que ele leva dois dias. */
.formas-pagamento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.formas-pagamento legend {
  padding: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cl-suave, #5b5b66);
}
.formas-pagamento label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 10px;
  border: 1px solid var(--cl-linha, #e2e2e7);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.formas-pagamento label:has(input:checked) {
  border-color: var(--cl-primaria, #b4160f);
  background: var(--cl-primaria-fraca, rgba(180, 22, 15, 0.09));
}
/* O reset aqui nao e zelo: `.form-carteira input` veste TODO input do
   formulario de campo de texto -- width:100%, borda, padding. Aplicado a um
   radio, ele empurrava o rotulo para fora do cartao e cortava "Cartao" no
   meio. Desfazer e mais barato que reescrever a regra de cima, que os campos
   de valor e CPF continuam precisando. */
.formas-pagamento input {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--cl-primaria, #b4160f);
}
.formas-pagamento label > span { flex: 1 1 auto; min-width: 0; }
.formas-pagamento b { display: block; font-size: 0.9rem; line-height: 1.2; }
.formas-pagamento small { display: block; margin-top: 2px; font-size: 0.74rem; color: var(--cl-suave, #5b5b66); }

/* Num celular estreito três colunas espremem "1 a 3 dias úteis" em quatro
   linhas. Empilhar é mais legível que encolher a fonte. */
@media (max-width: 460px) {
  .formas-pagamento { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Diálogo de confirmação

   Substitui o `confirm()` do navegador, que não aceita estilo nenhum e não
   deixa destacar o valor que a pessoa está prestes a perder.

   `<dialog>` nativo: o Esc fecha e o foco fica preso dentro sozinho — as duas
   coisas que o confirm() dava de graça e que uma div qualquer não daria.
   ========================================================================== */
.dialogo {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--cl-superficie);
  color: var(--cl-texto);
  box-shadow: 0 26px 70px rgba(13, 13, 15, .28);
}
.dialogo::backdrop { background: rgba(13, 13, 15, .48); }

.dialogo-caixa { display: grid; gap: 14px; padding: 26px 24px 22px; }
.dialogo-titulo { margin: 0; font-size: 1.16rem; font-weight: 650; line-height: 1.25; }
.dialogo-texto { margin: 0; font-size: .94rem; line-height: 1.5; color: var(--cl-suave); }

.dialogo-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
/* O botão que confirma vem por último e cresce: no celular, o polegar chega
   primeiro à direita, e é ali que deve estar a ação que a pessoa veio fazer. */
.dialogo-acoes .botao-secundario { flex: 0 0 auto; margin: 0; }
.dialogo-acoes .botao-cliente { flex: 1 1 auto; margin: 0; justify-content: center; }

/* Quando cancelar custa dinheiro, o botão para de ser o vermelho da marca e
   vira o vermelho de alerta. Não é decoração: são ações diferentes com o mesmo
   nome, e a cor é o que separa "cancelar e receber de volta" de "cancelar e
   perder". O texto do botão diz o valor, para não depender só da cor. */
.dialogo-acoes .botao-cliente.is-perigo { background: #9B1C1C; }

@media (prefers-reduced-motion: no-preference) {
  .dialogo[open] { animation: dialogo-entra .16s ease-out; }
  @keyframes dialogo-entra {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }
}
.melhor-hora-extra {
  margin: 10px 0 0;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--cl-texto);
}