/* =====================================================================
   VIZUNE — aplicativo web (passageiro e motorista) e mapas do painel.

   Celular primeiro. As medidas usam a area segura do aparelho para o
   conteudo nao ficar embaixo do entalhe nem da barra de gestos.
   ===================================================================== */

.vz-app {
    background: #f6f7f9;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
}

.vz-app__topo {
    background: var(--vz-secundaria, #0b1220);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: calc(.75rem + env(safe-area-inset-top)) 1rem .75rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.vz-app__marca {
    color: #fff;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    font-size: 1.05rem;
}

.vz-app__acoes {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.vz-app__usuario {
    font-size: .85rem;
    opacity: .85;
}

.vz-app__conteudo {
    flex: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
}

/* Cartoes ------------------------------------------------------------ */

.vz-cartao-app {
    background: #fff;
    border: 1px solid #e7e9ee;
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.vz-cartao-app__titulo {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .75rem;
}

.vz-cartao-app--destaque {
    border-color: var(--vz-primaria, #1a56db);
    border-width: 2px;
}

/* Alvos de toque: 44px e o minimo confortavel no celular. */
.vz-app .btn,
.vz-app .form-control,
.vz-app .form-select {
    min-height: 46px;
    border-radius: 12px;
}

.vz-app .btn-lg {
    min-height: 54px;
    font-size: 1.05rem;
    font-weight: 600;
}

.vz-botao-bloco {
    width: 100%;
    display: block;
}

/* Escolha de papel --------------------------------------------------- */

.vz-escolha {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .vz-escolha { grid-template-columns: 1fr 1fr; }
}

.vz-escolha__item {
    background: #fff;
    border: 1px solid #e7e9ee;
    border-radius: 18px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.vz-escolha__item:hover,
.vz-escolha__item:focus-visible {
    border-color: var(--vz-primaria, #1a56db);
    transform: translateY(-2px);
}

.vz-escolha__icone {
    font-size: 2rem;
    display: block;
    margin-bottom: .5rem;
}

/* Estado da corrida -------------------------------------------------- */

.vz-etapas {
    display: flex;
    gap: .25rem;
    margin-bottom: .75rem;
}

.vz-etapas__item {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #e7e9ee;
}

.vz-etapas__item.ativo { background: var(--vz-primaria, #1a56db); }

.vz-valor-grande {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.vz-pin {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: .5rem;
    text-align: center;
    padding: 1rem;
    background: #f2f5ff;
    border-radius: 14px;
    color: var(--vz-primaria, #1a56db);
}

.vz-linha-valores {
    display: flex;
    justify-content: space-between;
    padding: .35rem 0;
    border-bottom: 1px dashed #e7e9ee;
    font-size: .92rem;
}

.vz-linha-valores:last-child { border-bottom: 0; }

/* Mapas -------------------------------------------------------------- */

.vz-mapa {
    height: 280px;
    border-radius: 14px;
    border: 1px solid #e7e9ee;
    overflow: hidden;
    background: #eef1f5;
}

.vz-mapa--pequeno { height: 200px; }
.vz-mapa--alto { height: 360px; }

/* Leaflet dentro dos nossos cartoes: sem isso o mapa fica por cima de
   menus e modais. */
.leaflet-container { z-index: 1; font: inherit; }
.leaflet-pane { z-index: 1; }

.vz-mapa__aviso {
    padding: 1rem;
    font-size: .875rem;
    color: #667085;
    text-align: center;
}

/* Carteira ----------------------------------------------------------- */

.vz-saldo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.vz-saldo__valor {
    font-size: 1.9rem;
    font-weight: 700;
}

.vz-saldo__valor.negativo { color: #d92d20; }

.vz-extrato__linha {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid #f1f2f4;
    font-size: .9rem;
}

.vz-extrato__linha:last-child { border-bottom: 0; }
.vz-extrato__valor.credito { color: #027a48; }
.vz-extrato__valor.debito { color: #b42318; }

/* Barra fixa de acao no celular -------------------------------------- */

.vz-barra-acao {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e7e9ee;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    margin: 1rem -1rem -2rem;
    z-index: 15;
}

/* Tabelas do painel no celular: viram cartoes, em vez de rolar para o
   lado e esconder metade da informacao. */
@media (max-width: 575.98px) {
    .vz-tabela-cartao thead { display: none; }

    .vz-tabela-cartao tbody tr {
        display: block;
        border: 1px solid #e7e9ee;
        border-radius: 12px;
        padding: .75rem;
        margin-bottom: .75rem;
    }

    .vz-tabela-cartao tbody td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        padding: .3rem 0;
    }

    .vz-tabela-cartao tbody td::before {
        content: attr(data-rotulo);
        font-weight: 600;
        color: #667085;
        font-size: .8rem;
    }
}

/* Modo escuro do aparelho: respeita a preferencia do sistema. */
@media (prefers-color-scheme: dark) {
    .vz-app { background: #0f1419; color: #e7e9ee; }

    .vz-cartao-app {
        background: #171c23;
        border-color: #262d36;
        color: #e7e9ee;
    }

    .vz-app .form-control,
    .vz-app .form-select {
        background: #1d232b;
        border-color: #303a45;
        color: #e7e9ee;
    }

    .vz-pin { background: #182034; }
    .vz-barra-acao { background: #171c23; border-color: #262d36; }
    .vz-extrato__linha { border-color: #262d36; }
}

/* Aviso sobre o mapa: aparece quando o ladrilho nao carrega. O mapa continua
   utilizavel (o clique marca o ponto), entao a nota fica por cima sem tapar. */
.vz-mapa__nota {
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .5rem;
    z-index: 500;
    background: rgba(16, 24, 40, .88);
    color: #fff;
    font-size: .78rem;
    line-height: 1.35;
    padding: .5rem .65rem;
    border-radius: 10px;
    pointer-events: none;
}

.vz-mapa { position: relative; }

/* Mapa servido pelo proprio sistema (imagem do provedor via backend) ---- */

.vz-mapa-servidor { position: relative; overflow: hidden; }

/* A imagem e MAIOR que o quadro e fica posicionada por dentro: arrastar move
   ela, nao pede uma nova. Chamada ao provedor so quando o centro sai da folga. */
.vz-mapa-servidor__imagem {
    position: absolute;
    display: block;
    max-width: none;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

.vz-mapa-servidor.arrastando .vz-mapa-servidor__imagem { cursor: grabbing; }

/* Pino fixo no centro: o mapa e que anda por baixo, como no Uber. */
.vz-mapa-servidor__alvo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%);
    pointer-events: none;
    z-index: 4;
    text-align: center;
}

.vz-mapa-servidor__alvo-pino {
    display: block;
    filter: drop-shadow(0 3px 5px rgba(16, 24, 40, .35));
    transition: transform .14s cubic-bezier(.2, .8, .3, 1);
}

/* Levanta o pino enquanto arrasta: da a sensacao de que ele "solta" do chao. */
.vz-mapa-servidor.arrastando .vz-mapa-servidor__alvo-pino { transform: translateY(-8px) scale(1.04); }

.vz-mapa-servidor__alvo-sombra {
    display: block;
    width: 12px;
    height: 5px;
    margin: 1px auto 0;
    border-radius: 50%;
    background: rgba(16, 24, 40, .35);
    transition: transform .14s ease, opacity .14s ease;
}

.vz-mapa-servidor.arrastando .vz-mapa-servidor__alvo-sombra {
    transform: scale(.7);
    opacity: .55;
}

.vz-mapa-servidor__dica {
    position: absolute;
    left: 50%;
    bottom: .6rem;
    transform: translateX(-50%);
    z-index: 4;
    background: rgba(16, 24, 40, .82);
    color: #fff;
    font-size: .75rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity .4s ease;
}

.vz-mapa-servidor__dica.sumindo { opacity: 0; }

.vz-mapa-servidor__controles {
    position: absolute;
    top: .5rem;
    left: .5rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    z-index: 5;
}

.vz-mapa-servidor__controles button {
    min-width: 34px;
    min-height: 34px;
    padding: 0 .5rem;
    border: 1px solid rgba(16, 24, 40, .18);
    border-radius: 8px;
    background: #fff;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.vz-mapa-servidor__controles button:hover { background: #f2f5ff; }

.vz-mapa-servidor__aviso {
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .5rem;
    z-index: 5;
    background: rgba(16, 24, 40, .88);
    color: #fff;
    font-size: .78rem;
    line-height: 1.35;
    padding: .5rem .65rem;
    border-radius: 10px;
}

/* Tarja do modo "ver como" ---------------------------------------------
   Amarela e no topo de tudo, de proposito: personificacao tem de ser obvia. */
.vz-tarja-teste {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    background: #b54708;
    color: #fff;
    font-size: .85rem;
    line-height: 1.35;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-top));
    text-align: center;
}

/* Motorista a caminho: quem esta esperando quer saber quem vem, em que carro
   e quanto falta — nessa ordem. ------------------------------------------ */

.vz-aproximacao {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .75rem 0;
    border-bottom: 1px solid #f1f2f4;
}

.vz-aproximacao__valor {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--vz-primaria, #1a56db);
}

.vz-aproximacao__texto { font-size: .85rem; color: #667085; }

.vz-chegou {
    background: #027a48;
    color: #fff;
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-bottom: .75rem;
    font-size: .92rem;
    line-height: 1.4;
}

.vz-motorista { padding: .75rem 0; border-bottom: 1px solid #f1f2f4; }

.vz-motorista__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}

.vz-motorista__carro { font-size: 1rem; }

.vz-placa {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    letter-spacing: .08em;
    background: #101828;
    color: #fff;
    border-radius: 6px;
    padding: .3rem .55rem;
    font-size: .9rem;
    white-space: nowrap;
}

.vz-etiqueta {
    display: inline-block;
    background: #eef2ff;
    color: #3538cd;
    border-radius: 999px;
    padding: .15rem .55rem;
    font-size: .75rem;
    margin: .15rem .25rem .15rem 0;
}

@media (prefers-color-scheme: dark) {
    .vz-motorista, .vz-aproximacao { border-color: #262d36; }
    .vz-etiqueta { background: #1e2333; color: #a4bcfd; }
}

/* Abas de origem/destino no aplicativo ---------------------------------- */

.vz-abas-ponto {
    display: flex;
    gap: .25rem;
    background: #eef1f5;
    border-radius: 12px;
    padding: .25rem;
}

.vz-abas-ponto button {
    flex: 1;
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: .92rem;
    font-weight: 600;
    color: #667085;
    cursor: pointer;
}

.vz-abas-ponto button.ativa {
    background: #fff;
    color: var(--vz-primaria, #1a56db);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

@media (prefers-color-scheme: dark) {
    .vz-abas-ponto { background: #1d232b; }
    .vz-abas-ponto button.ativa { background: #101828; }
}

/* Endereco sob o pino: coordenada nao diz nada para quem vai pedir a corrida. */
.vz-mapa-servidor__endereco {
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .5rem;
    z-index: 5;
    background: rgba(255, 255, 255, .96);
    color: #101828;
    font-size: .8rem;
    line-height: 1.3;
    font-weight: 500;
    padding: .5rem .7rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .18);
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Botao de localizacao: e o caminho mais usado para definir a origem, entao
   nao pode ter o mesmo peso visual de um botao secundario qualquer. */
.vz-botao-local {
    background: var(--vz-primaria, #0B5FFF);
    border: 1px solid var(--vz-primaria, #0B5FFF);
    color: #fff;
    font-weight: 600;
}

.vz-botao-local:hover,
.vz-botao-local:focus-visible { filter: brightness(.94); color: #fff; }

/* ---------------------------------------------------------------------
   Mapa em TELA CHEIA
   ---------------------------------------------------------------------
   No celular o mapa embutido tem 200px de altura: o dedo cobre metade do
   quadro justamente onde esta o pino, e escolher rua vira sorte. Em tela
   cheia o mesmo gesto fica preciso — e e assim que todo aplicativo de
   corrida faz.

   `100dvh` em vez de `100vh` de proposito: no celular a barra do navegador
   aparece e some, e `100vh` conta a tela SEM a barra — o rodape do mapa
   (endereco e botao de confirmar) ficava escondido atras dela. `dvh`
   acompanha a altura que realmente sobra. O `100vh` fica antes como
   reserva para navegador antigo.
   -------------------------------------------------------------------- */

.vz-mapa.vz-mapa--cheio {
    position: fixed;
    inset: 0;
    z-index: 1080;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    max-width: none;
}

/* Rolagem do corpo travada: sem isto o gesto que deveria arrastar o mapa
   rola a pagina atras dele. */
body.vz-mapa-aberto { overflow: hidden; }

/* Em tela cheia os controles descem um pouco para nao brigar com a barra
   de status do celular, e crescem para o dedo. */
.vz-mapa--cheio .vz-mapa-servidor__controles {
    top: max(.75rem, env(safe-area-inset-top));
    left: .75rem;
}

.vz-mapa--cheio .vz-mapa-servidor__controles button {
    min-width: 44px;
    min-height: 44px;
    font-size: .9rem;
}

/* O endereco sobe para dar lugar ao botao de confirmar. */
.vz-mapa--cheio .vz-mapa-servidor__endereco {
    left: .75rem;
    right: .75rem;
    bottom: calc(3.9rem + env(safe-area-inset-bottom));
    font-size: .9rem;
    padding: .65rem .8rem;
    white-space: normal;
}

.vz-mapa--cheio .vz-mapa-servidor__dica { bottom: 6.6rem; }

.vz-mapa-servidor__confirmar {
    display: none;
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    z-index: 6;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    background: var(--vz-primaria, #0B5FFF);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .28);
    cursor: pointer;
}

.vz-mapa--cheio .vz-mapa-servidor__confirmar { display: block; }

/* No celular o mapa embutido ganha altura: 200px sobra para conferir, mas
   falta para escolher. Quem precisa de precisao abre em tela cheia. */
@media (max-width: 576px) {
    .vz-mapa--pequeno { height: 260px; }
}

/* ---------------------------------------------------------------------
   Largura maxima do mapa embutido: 560px.
   ---------------------------------------------------------------------
   Nao e gosto, e aritmetica. O provedor entrega no maximo 640px de imagem.
   Tirando a folga que deixa o arraste instantaneo (40px de cada lado),
   sobram 560px de quadro que cabem numa imagem so, no zoom cheio.

   Passando disso o JS e obrigado a pedir um nivel de zoom A MENOS e ampliar
   a imagem para cobrir o quadro (ver tamanhoImagem no aplicativo.js). Cobre,
   mas o desenho fica mais grosso e com menos nomes de rua — parece que o
   mapa "deu zoom". Preferimos 90px a menos de largura no computador a um
   nivel de detalhe a menos.

   No celular a tela ja e menor que isso, entao nada muda. Em tela cheia o
   limite nao se aplica: la nao ha como cobrir a tela sem ampliar.
   -------------------------------------------------------------------- */
.vz-mapa:not(.vz-mapa--cheio) {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------------------
   Tela de conferencia do orcamento
   -------------------------------------------------------------------- */

/* Trajeto com os dois pontos ligados por uma linha, como no bilhete de
   viagem: a pessoa le de cima para baixo e entende o percurso sem legenda. */
.vz-trajeto {
    background: #f7f8fb;
    border: 1px solid #e7e9ee;
    border-radius: 12px;
    padding: .75rem .9rem;
}

.vz-trajeto__linha {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .92rem;
    line-height: 1.35;
    position: relative;
}

.vz-trajeto__linha + .vz-trajeto__linha { margin-top: .8rem; }

.vz-trajeto__marca {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 1.15rem;
    flex: 0 0 10px;
}

.vz-trajeto__marca--origem { background: #12b76a; }
.vz-trajeto__marca--destino { background: var(--vz-primaria, #0B5FFF); }

/* Fio ligando a bolinha de cima na de baixo. */
.vz-trajeto__linha:first-child .vz-trajeto__marca::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1.55rem;
    width: 2px;
    height: calc(100% - .6rem);
    background: #d7dbe3;
}

/* O total repete o valor no fim da lista: e onde o olho procura conferir
   se as linhas somam. Enquanto o arredondamento nao era uma linha, elas
   nao somavam — e o passageiro concluia que a conta estava errada. */
.vz-linha-valores--total {
    border-top: 1px solid #d7dbe3;
    border-bottom: 0;
    margin-top: .25rem;
    padding-top: .5rem;
    font-size: 1rem;
}

/* Titulo do mapa em tela cheia.
   Fora da tela cheia ele nao aparece: no formulario a aba (Origem/Destino) e
   o rotulo do campo ja dizem o que esta sendo escolhido. Em tela cheia esses
   dois somem, e sem o titulo nada indica se o pino esta marcando a partida ou
   a chegada — confirmar um pelo outro so se descobre com o carro na porta
   errada. */
.vz-mapa-servidor__titulo {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: max(.75rem, env(safe-area-inset-top));
    z-index: 6;
    max-width: calc(100% - 8rem);
    background: rgba(16, 24, 40, .88);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    padding: .45rem .9rem;
    border-radius: 999px;
    text-align: center;
    pointer-events: none;
}

.vz-mapa--cheio .vz-mapa-servidor__titulo { display: block; }

/* Icone junto do texto nos rotulos do mapa: mesmo simbolo do resumo do
   trajeto, para a pessoa reconhecer sem ler. */
.vz-mapa-servidor__titulo,
.vz-mapa-servidor__confirmar {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.vz-mapa--cheio .vz-mapa-servidor__titulo,
.vz-mapa--cheio .vz-mapa-servidor__confirmar { display: flex; }

.vz-mapa-servidor__titulo svg,
.vz-mapa-servidor__confirmar svg { flex: 0 0 auto; }

/* O icone da origem e vazado; o do destino, cheio — como no resumo. */
.vz-mapa-servidor__titulo svg { color: #7ee2b8; }
.vz-mapa-servidor__confirmar svg { color: #fff; }

/* Em tela cheia o aviso sobe: embaixo ja moram o endereco e o botao de
   confirmar, e um aviso por cima do botao esconde justamente a saida. */
.vz-mapa--cheio .vz-mapa-servidor__aviso {
    bottom: calc(7.6rem + env(safe-area-inset-bottom));
}

/* =====================================================================
   PWAs: motorista, passageiro, entrada e acompanhamento publico.

   MOBILE DE VERDADE, NAO "RESPONSIVO"

   Estas telas sao usadas com UMA MAO, com o celular no suporte do painel,
   as vezes sob sol de meio-dia e as vezes de luva. Por isso:

     - nada que se toca tem menos de 44px de altura, e o que decide a
       jornada (ONLINE, ACEITAR, CHEGUEI) tem 56 ou 72;
     - contraste alto o suficiente para ler no sol — cinza claro sobre
       branco e bonito na mesa e invisivel na rua;
     - o que importa e o maior elemento da tela, e nao um rotulo pequeno
       ao lado de outros seis iguais.
   ===================================================================== */

/* Faixa de conexao ------------------------------------------------- */

.vz-conexao {
    padding: .55rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
}

.vz-conexao--offline { background: #b42318; }
.vz-conexao--enviando { background: #b54708; }

/* Aviso de versao nova --------------------------------------------- */

.vz-atualizacao {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 1080;
    background: #0b1220;
    color: #fff;
    border-radius: 14px;
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
    font-size: .9rem;
}

.vz-atualizacao .btn { min-height: 44px; }

/* Carimbo de frescor ------------------------------------------------
   Aparece em toda tela que pode estar mostrando dado guardado. E o que
   separa "informacao" de "mentira com aparencia de informacao". */

.vz-carimbo {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.vz-carimbo--vivo { background: #dcfae6; color: #067647; }
.vz-carimbo--velho { background: #fef0c7; color: #93370d; }

.vz-nota {
    font-size: .82rem;
    color: #667085;
    margin-top: .5rem;
}

.vz-negativo { color: #d92d20; }

/* Botoes ------------------------------------------------------------ */

.vz-botao-principal,
.vz-botao-secundario,
.vz-botao-etapa,
.vz-botao-aceitar,
.vz-botao-recusar,
.vz-botao-sos,
.vz-botao-pedir,
.vz-botao-emergencia {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1rem;
    border: 0;
}

.vz-botao-principal { background: var(--vz-primaria, #1a56db); color: #fff; }
.vz-botao-principal:hover, .vz-botao-principal:focus-visible { color: #fff; filter: brightness(.94); }

.vz-botao-secundario {
    background: #fff;
    color: #1d2939;
    border: 1px solid #d0d5dd;
}
.vz-botao-secundario:hover, .vz-botao-secundario:focus-visible { background: #f2f4f7; color: #1d2939; }

.vz-botao-pedir {
    background: #25d366;
    color: #04301a;
    margin-bottom: 1rem;
    min-height: 56px;
}
.vz-botao-pedir:hover, .vz-botao-pedir:focus-visible { color: #04301a; filter: brightness(.95); }

.vz-botao-etapa {
    min-height: 56px;
    background: var(--vz-primaria, #1a56db);
    color: #fff;
    font-size: 1.05rem;
    letter-spacing: .02em;
}
.vz-botao-etapa:hover, .vz-botao-etapa:focus-visible { color: #fff; filter: brightness(.94); }

.vz-botao-sos {
    min-height: 48px;
    background: #fff;
    color: #b42318;
    border: 2px solid #fda29b;
}
.vz-botao-sos:hover, .vz-botao-sos:focus-visible { background: #fef3f2; color: #b42318; }

.vz-botao-emergencia { background: #b42318; color: #fff; }
.vz-botao-emergencia:hover, .vz-botao-emergencia:focus-visible { color: #fff; filter: brightness(.94); }

.vz-link {
    background: none;
    border: 0;
    color: var(--vz-primaria, #1a56db);
    font-size: .9rem;
    font-weight: 600;
    min-height: 44px;
    padding: 0 .25rem;
}

.vz-central {
    display: grid;
    gap: .5rem;
}

/* ONLINE / OFFLINE --------------------------------------------------
   O maior elemento da tela do motorista, e nao por estilo: e o unico
   botao que ele precisa achar sem olhar, com o celular no suporte. */

.vz-cartao-app--online { padding-bottom: 1rem; }

.vz-online__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
    flex-wrap: wrap;
}

.vz-online__estado {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: #1d2939;
}

.vz-botao-online {
    width: 100%;
    /* 72px: alvo para o polegar em movimento, nao para o dedo parado numa
       mesa. Abaixo disso o toque erra com o carro andando. */
    min-height: 72px;
    border: 0;
    border-radius: 18px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #fff;
    background: #12b76a;
    box-shadow: 0 8px 20px rgba(18, 183, 106, .28);
}

.vz-botao-online--ativo {
    background: #1d2939;
    box-shadow: 0 8px 20px rgba(29, 41, 57, .25);
}

.vz-botao-online:disabled { background: #98a2b3; box-shadow: none; }

/* Aviso de GPS ------------------------------------------------------
   Tres problemas diferentes (sem HTTPS, permissao negada, GPS desligado)
   com tres solucoes diferentes. Antes os tres viravam "erro ao obter
   localizacao", e a unica saida oferecida era "tentar de novo" — que nao
   resolve nenhum dos tres. */

.vz-aviso-gps {
    margin-top: 1rem;
    padding: .85rem 1rem;
    border-radius: 12px;
    background: #fffaeb;
    border: 1px solid #fec84b;
    font-size: .88rem;
    color: #93370d;
}

.vz-aviso-gps--grave {
    background: #fef3f2;
    border-color: #fda29b;
    color: #912018;
}

.vz-aviso-gps strong { display: block; margin-bottom: .25rem; }
.vz-aviso-gps p { margin: 0; }

/* Oferta ------------------------------------------------------------ */

.vz-oferta {
    background: #fff;
    border: 2px solid var(--vz-primaria, #1a56db);
    border-radius: 18px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 10px 28px rgba(26, 86, 219, .18);
}

.vz-oferta__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.vz-oferta__rotulo {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vz-primaria, #1a56db);
}

.vz-oferta__relogio {
    font-size: 1.1rem;
    font-weight: 800;
    color: #b42318;
    font-variant-numeric: tabular-nums;
}

.vz-oferta__valor {
    font-size: 2.1rem;
    font-weight: 800;
    color: #027a48;
    line-height: 1.1;
    margin-bottom: .5rem;
}

.vz-oferta__linha,
.vz-oferta__endereco {
    font-size: .9rem;
    color: #344054;
    padding: .35rem 0;
    border-bottom: 1px solid #f2f4f7;
}

.vz-oferta__linha {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.vz-oferta__endereco small,
.vz-corrida__endereco small {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #667085;
}

/* Barra da contagem regressiva: a informacao "quanto falta" sem exigir
   leitura de numero — o motorista ve pelo canto do olho. */
.vz-oferta__barra {
    height: 6px;
    background: #eaecf0;
    border-radius: 999px;
    overflow: hidden;
    margin: .75rem 0;
}

.vz-oferta__barra i {
    display: block;
    height: 100%;
    background: var(--vz-primaria, #1a56db);
    transition: width 1s linear;
}

.vz-oferta__acoes {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: .6rem;
}

.vz-botao-aceitar { min-height: 60px; background: #12b76a; color: #fff; font-size: 1.05rem; }
.vz-botao-aceitar:hover, .vz-botao-aceitar:focus-visible { color: #fff; filter: brightness(.94); }
.vz-botao-recusar { min-height: 60px; background: #f2f4f7; color: #475467; }
.vz-botao-recusar:hover, .vz-botao-recusar:focus-visible { background: #eaecf0; color: #475467; }

/* Corrida em andamento ---------------------------------------------- */

.vz-corrida {
    background: #fff;
    border-radius: 18px;
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 5px solid var(--vz-primaria, #1a56db);
}

/* Moto-taxi: a faixa muda de cor porque a corrida se comporta diferente
   (sem bagagem, sem acompanhante) e o motorista precisa reconhecer isso
   antes de ler qualquer coisa. */
.vz-corrida--moto { border-left-color: #dc6803; }

.vz-corrida__estado {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1d2939;
}

.vz-corrida__valor {
    font-size: 1.9rem;
    font-weight: 800;
    color: #027a48;
    line-height: 1.15;
}

.vz-corrida__pagamento {
    font-size: .85rem;
    color: #667085;
    text-transform: capitalize;
    margin-bottom: .75rem;
}

.vz-corrida__endereco {
    font-size: .95rem;
    color: #1d2939;
    padding: .5rem 0;
    border-bottom: 1px solid #f2f4f7;
}

.vz-corrida__endereco em {
    display: block;
    font-size: .8rem;
    color: #667085;
    font-style: normal;
}

.vz-corrida__aproximacao {
    font-size: .9rem;
    font-weight: 600;
    color: var(--vz-primaria, #1a56db);
    padding: .5rem 0;
}

.vz-corrida__navegar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin: .85rem 0;
}

.vz-corrida__acoes { display: grid; gap: .6rem; }

.vz-encomenda {
    background: #fffaeb;
    border-radius: 12px;
    padding: .7rem .85rem;
    margin-bottom: .75rem;
    font-size: .88rem;
    color: #93370d;
}

.vz-encomenda strong { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }

/* PIN --------------------------------------------------------------- */

.vz-pin__rotulo {
    font-size: .8rem;
    font-weight: 600;
    color: #475467;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.vz-pin {
    width: 100%;
    min-height: 60px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: .5rem;
    border: 2px solid #d0d5dd;
    border-radius: 14px;
    font-variant-numeric: tabular-nums;
}

.vz-pin:focus { outline: 3px solid rgba(26, 86, 219, .35); border-color: var(--vz-primaria, #1a56db); }

.vz-pin-caixa {
    background: #eff8ff;
    border-radius: 14px;
    padding: .85rem;
    margin: .75rem 0;
    text-align: center;
}

.vz-pin-caixa small {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #175cd3;
}

.vz-pin-caixa strong {
    font-size: 2.2rem;
    letter-spacing: .5rem;
    color: #175cd3;
    font-variant-numeric: tabular-nums;
}

/* Ganhos ------------------------------------------------------------ */

.vz-ganhos__linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .4rem 0;
    border-bottom: 1px solid #f2f4f7;
}

.vz-ganhos__valor { font-size: 1.6rem; font-weight: 800; color: #027a48; }
.vz-ganhos__detalhe { font-size: .82rem; color: #667085; padding-bottom: .5rem; }

/* Entrada sem senha -------------------------------------------------- */

.vz-entrar { max-width: 26rem; margin: 0 auto; }

.vz-entrar__titulo { font-size: 1.3rem; font-weight: 700; margin-bottom: .35rem; }

.vz-rotulo {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: #475467;
    margin: 1rem 0 .35rem;
}

.vz-campo {
    width: 100%;
    min-height: 56px;
    border: 2px solid #d0d5dd;
    border-radius: 14px;
    padding: 0 1rem;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.vz-campo:focus { outline: 3px solid rgba(26, 86, 219, .35); border-color: var(--vz-primaria, #1a56db); }

.vz-campo--codigo {
    text-align: center;
    letter-spacing: .6rem;
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.vz-entrar__rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

/* Passageiro --------------------------------------------------------- */

.vz-passageiro__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}

.vz-passageiro__titulo { font-size: 1.35rem; font-weight: 700; margin: 0; }

.vz-aproximacao__nota {
    display: block;
    font-size: .75rem;
    color: #667085;
    margin-top: .25rem;
}

.vz-favoritos, .vz-viagens { list-style: none; padding: 0; margin: 0; }

.vz-favorito {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "apelido botao" "endereco botao";
    gap: 0 .75rem;
    align-items: center;
    padding: .65rem 0;
    border-bottom: 1px solid #f2f4f7;
}

.vz-favorito__apelido { grid-area: apelido; font-weight: 700; text-transform: capitalize; }
.vz-favorito__endereco { grid-area: endereco; font-size: .82rem; color: #667085; }
.vz-favorito .btn { grid-area: botao; width: auto; padding: 0 1rem; min-height: 44px; }

.vz-viagem { padding: .75rem 0; border-bottom: 1px solid #f2f4f7; }
.vz-viagem:last-child { border-bottom: 0; }
.vz-viagem--encomenda { border-left: 3px solid #dc6803; padding-left: .6rem; }

.vz-viagem__topo { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.vz-viagem__destino { font-weight: 600; }
.vz-viagem__valor { white-space: nowrap; }
.vz-viagem__meta { font-size: .8rem; color: #667085; }
.vz-viagem__aviso { font-size: .78rem; color: #b54708; }

.vz-viagem__recibo {
    background: none;
    border: 0;
    padding: .4rem 0;
    min-height: 44px;
    color: var(--vz-primaria, #1a56db);
    font-size: .85rem;
    font-weight: 600;
}

.vz-recibo { font-size: .85rem; padding: .5rem 0; }

.vz-estrelas { display: flex; gap: .35rem; justify-content: center; }

.vz-estrela {
    background: none;
    border: 0;
    /* 48px: avaliar e um toque unico e desatento. Estrela pequena faz a
       pessoa dar 3 querendo dar 4, e a nota do motorista paga por isso. */
    min-width: 48px;
    min-height: 48px;
    font-size: 2rem;
    line-height: 1;
    color: #fdb022;
}

.vz-offline__titulo { font-size: 1.4rem; font-weight: 700; }
.vz-offline__texto { color: #475467; }
.vz-offline__lista { font-size: .88rem; color: #475467; padding-left: 1.1rem; margin-bottom: 1.25rem; }

/* =====================================================================
   Acompanhamento publico (link do WhatsApp)

   Largura cheia: quem abre esta no celular e precisa de mapa. Dentro do
   cartao de login de 430px o mapa virava uma faixa onde nao dava para ver
   de que lado o carro vinha.
   ===================================================================== */

.vz-publico--cheio { background: #f6f7f9; }

.vz-publico__area--cheio {
    max-width: 720px;
    width: 100%;
    padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
    margin: 0 auto;
}

.vz-publico__bloco { width: 100%; }

.vz-marca--compacta { text-align: center; margin-bottom: 1rem; }

.vz-acompanhar__vazio { text-align: center; padding: 2rem 1rem; }

.vz-acompanhar__topo { text-align: center; margin-bottom: .75rem; }
.vz-acompanhar__titulo { font-size: 1.25rem; font-weight: 700; margin: 0; }
.vz-acompanhar__sub { font-size: .85rem; color: #667085; margin: 0; }

/* A RESPOSTA. Maior elemento da tela porque e a unica pergunta que quem
   abriu este link tem: quanto falta. */
.vz-acompanhar__distancia {
    text-align: center;
    background: #fff;
    border-radius: 18px;
    padding: 1.1rem 1rem .9rem;
    margin-bottom: .5rem;
}

.vz-acompanhar__numero {
    display: block;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--vz-primaria, #1a56db);
}

.vz-acompanhar__texto { display: block; font-size: .92rem; color: #475467; }

.vz-acompanhar__frescor {
    text-align: center;
    font-size: .82rem;
    margin: 0 0 .85rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    color: #667085;
}

.vz-acompanhar__frescor--vivo { color: #067647; background: #dcfae6; }
.vz-acompanhar__frescor--velho { color: #93370d; background: #fef0c7; }

/* Pulso do "ao vivo": movimento e a forma mais rapida de dizer que aquilo
   esta acontecendo agora. Some para quem pediu menos animacao. */
.vz-pulso {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #12b76a;
    margin-right: .3rem;
    animation: vz-pulsar 1.6s ease-in-out infinite;
}

@keyframes vz-pulsar {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
    .vz-pulso { animation: none; }
    .vz-oferta__barra i { transition: none; }
}

/* O mapa que faltava. As classes existiam no HTML e em CSS nenhum: o
   elemento ficava com altura zero e a pagina parecia so uma lista. */
.vz-acompanhar__mapa {
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    background: #e4e7ec;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vz-acompanhar__semmapa { font-size: .85rem; color: #667085; text-align: center; padding: 1rem; margin: 0; }

.vz-veiculo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

.vz-veiculo--vivo { border: 3px solid #12b76a; }
/* Cinza = posicao velha. A cor conta a historia antes de a pessoa ler. */
.vz-veiculo--velho { border: 3px solid #98a2b3; filter: grayscale(.6); }

.vz-acompanhar__cartao {
    background: #fff;
    border-radius: 16px;
    padding: .9rem 1rem;
    margin-bottom: .75rem;
}

.vz-acompanhar__cartao-titulo {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #667085;
    margin-bottom: .5rem;
}

.vz-acompanhar__linha {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-bottom: 1px solid #f2f4f7;
    font-size: .92rem;
}

.vz-acompanhar__linha:last-child { border-bottom: 0; }

.vz-acompanhar__ponto { font-size: .95rem; padding: .4rem 0; }

.vz-acompanhar__ponto small {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #667085;
}

.vz-acompanhar__botoes { display: grid; gap: .5rem; }
.vz-acompanhar__cartao--emergencia { border: 1px solid #fda29b; }

.vz-acompanhar__aviso {
    font-size: .78rem;
    color: #667085;
    text-align: center;
    margin: 1rem 0 0;
}

/* Telas maiores: o mapa ganha altura, mas a coluna nao passa de 720px —
   linha longa demais e pior de ler, e esta pagina e feita para o celular. */
@media (min-width: 600px) {
    .vz-acompanhar__mapa { height: 380px; }
    .vz-acompanhar__botoes { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* Modo escuro: o motorista roda a noite, e uma tela branca em rodovia
   escura ofusca a ponto de atrapalhar a direcao. */
@media (prefers-color-scheme: dark) {
    .vz-conexao--offline { background: #912018; }

    .vz-oferta,
    .vz-corrida,
    .vz-acompanhar__distancia,
    .vz-acompanhar__cartao,
    .vz-publico--cheio { background: #111827; color: #e5e7eb; }

    .vz-publico--cheio { background: #0b1220; }

    .vz-online__estado,
    .vz-corrida__estado,
    .vz-corrida__endereco,
    .vz-acompanhar__titulo,
    .vz-viagem__destino { color: #e5e7eb; }

    .vz-botao-secundario { background: #1f2937; color: #e5e7eb; border-color: #374151; }
    .vz-campo, .vz-pin { background: #111827; color: #e5e7eb; border-color: #374151; }
    .vz-app { color-scheme: dark; }
    .vz-entrar .vz-rotulo { color: #d1d5db; }
    .vz-entrar .vz-nota { color: #a9b5c8; }
    .vz-entrar .vz-campo::placeholder { color: #9ca3af; opacity: 1; }
    .vz-entrar a:not(.btn),
    .vz-entrar .btn-link { color: #8ab4ff; }
    .vz-entrar .btn-outline-secondary { color: #cbd5e1; border-color: #64748b; }
    .vz-entrar .btn-outline-secondary:hover,
    .vz-entrar .btn-outline-secondary:focus-visible {
        background: #374151;
        border-color: #94a3b8;
        color: #fff;
    }
    .vz-acompanhar__mapa { background: #1f2937; }
}