/* AppTransporte — estilo do aplicativo do motorista.
 *
 * Desenhado para uma mão, tela pequena, luz do sol e, às vezes, luva: alvos de toque grandes,
 * contraste alto e pouca informação por tela. Nada aqui depende de hover. */

:root {
    --azul: #0d4f8b;
    --azul-escuro: #093a67;
    --verde: #1b7f3b;
    --laranja: #b35c00;
    --vermelho: #b3261e;
    --cinza-fundo: #f2f4f7;
    --cinza-borda: #d7dce3;
    --texto: #1a1d21;
    --texto-fraco: #5b6472;

    /* Alvo de toque mínimo confortável com luva. */
    --alvo: 3rem;
}

html, body {
    margin: 0;
    background: var(--cinza-fundo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

.app-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.app-conteudo {
    flex: 1;
    padding-bottom: 2rem;
}

.app-shell-login {
    justify-content: center;
}

/* ----------------------------------------------------------- Barra de sincronização */

.barra-sync {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1rem;
    padding-top: calc(.65rem + env(safe-area-inset-top));
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
}

.barra-sync-ok { background: var(--verde); }
.barra-sync-offline { background: var(--laranja); }
.barra-sync-erro { background: var(--vermelho); }
.barra-sync-atencao { background: var(--azul-escuro); }

.barra-sync-icone { font-size: 1.1rem; }
.barra-sync-texto { flex: 1; }

.barra-sync-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar .8s linear infinite;
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------- Estrutura de tela */

.tela-titulo {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    padding: 1rem 1rem .25rem;
}

.tela-subtitulo {
    margin: 0;
    padding: 0 1rem 1rem;
    color: var(--texto-fraco);
}

.cabecalho-viagem {
    background: #fff;
    border-bottom: 1px solid var(--cinza-borda);
}

.voltar {
    display: inline-block;
    padding: .75rem 1rem .25rem;
    color: var(--azul);
    text-decoration: none;
    font-weight: 600;
}

.secao { padding: 1rem; }

.secao-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.secao-titulo {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--texto-fraco);
    margin: 0 0 .5rem;
}

.contador { color: var(--texto-fraco); font-weight: 600; }

/* ----------------------------------------------------------- Cartões */

.cartao {
    display: block;
    background: #fff;
    border: 1px solid var(--cinza-borda);
    border-radius: .75rem;
    padding: .9rem;
    margin-bottom: .6rem;
    color: inherit;
    text-decoration: none;
}

.cartao-clicavel:active { background: #eef2f7; }

.cartao-ok { border-left: 4px solid var(--verde); }
.cartao-erro { border-left: 4px solid var(--vermelho); }

.cartao-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.cartao-detalhe {
    margin-top: .2rem;
    font-size: .9rem;
    line-height: 1.35;
}

.marcadores {
    display: flex;
    gap: 1rem;
    color: var(--texto-fraco);
}

.valor-destaque {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--azul);
}

/* ----------------------------------------------------------- Etiquetas e chips */

.etiqueta {
    flex: none;
    padding: .15rem .5rem;
    border-radius: 1rem;
    background: var(--cinza-fundo);
    border: 1px solid var(--cinza-borda);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.etiqueta-ok { background: #e3f4e8; border-color: var(--verde); color: var(--verde); }
.etiqueta-erro { background: #fbe9e8; border-color: var(--vermelho); color: var(--vermelho); }
.etiqueta-andamento { background: #fff3e0; border-color: var(--laranja); color: var(--laranja); }

.filtros-status, .abas {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding-bottom: .6rem;
}

.chip {
    flex: none;
    min-height: 2.5rem;
    padding: .4rem .9rem;
    border-radius: 1.25rem;
    border: 1px solid var(--cinza-borda);
    background: #fff;
    font-weight: 600;
    color: var(--texto-fraco);
}

.chip-ativo {
    background: var(--azul);
    border-color: var(--azul);
    color: #fff;
}

/* ----------------------------------------------------------- Formulários */

.filtros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.form-control, .form-select {
    min-height: var(--alvo);
    font-size: 1rem;
}

/* ----------------------------------------------------------- Botões
 *
 * O Bootstrap 5.3 monta cada variante a partir de custom properties --bs-btn-*. Redefinir essas
 * variáveis, em vez de sobrescrever `color` e `background`, cobre de uma vez o repouso, o toque,
 * o foco e o desabilitado — senão o azul do Bootstrap reaparece no primeiro estado que se
 * esqueceu de tratar. Era o que acontecia com os botões de moldura: repouso certo, toque azul
 * genérico. */

.btn {
    min-height: var(--alvo);
    font-weight: 600;
    border-radius: .75rem;

    /* Centraliza o conteúdo em <button> E em <a>. Com min-height e o display padrão, o texto do
       link encosta no topo da caixa de 48px enquanto o do botão fica no meio — o degrau que
       aparecia entre "Meu perfil" e "Sair", e que afeta todo `<a class="btn">` do aplicativo. */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Anel de foco na cor da casa, não no azul do Bootstrap. */
    --bs-btn-focus-shadow-rgb: 13, 79, 139;
}

/* Preenchidos. */

.btn-primary {
    --bs-btn-bg: var(--azul);
    --bs-btn-border-color: var(--azul);
    --bs-btn-hover-bg: var(--azul);
    --bs-btn-hover-border-color: var(--azul);
    --bs-btn-active-bg: var(--azul-escuro);
    --bs-btn-active-border-color: var(--azul-escuro);
    --bs-btn-disabled-bg: var(--azul);
    --bs-btn-disabled-border-color: var(--azul);
}

.btn-success {
    --bs-btn-bg: var(--verde);
    --bs-btn-border-color: var(--verde);
    --bs-btn-hover-bg: var(--verde);
    --bs-btn-hover-border-color: var(--verde);
    --bs-btn-active-bg: #14622d;
    --bs-btn-active-border-color: #14622d;
    --bs-btn-disabled-bg: var(--verde);
    --bs-btn-disabled-border-color: var(--verde);
}

.btn-danger {
    --bs-btn-bg: var(--vermelho);
    --bs-btn-border-color: var(--vermelho);
    --bs-btn-hover-bg: var(--vermelho);
    --bs-btn-hover-border-color: var(--vermelho);
    --bs-btn-active-bg: #8d1e17;
    --bs-btn-active-border-color: #8d1e17;
    --bs-btn-disabled-bg: var(--vermelho);
    --bs-btn-disabled-border-color: var(--vermelho);
    --bs-btn-focus-shadow-rgb: 179, 38, 30;
}

/* De moldura. O estado de toque preenche: num celular ao sol, mudar só a borda não se enxerga.
 *
 * O hover repete o repouso de propósito. No celular ele gruda depois do toque, e o botão fica
 * preenchido até o dedo cair em outro lugar — parecendo pressionado sem estar. */

.btn-outline-primary {
    --bs-btn-color: var(--azul);
    --bs-btn-border-color: var(--azul);
    --bs-btn-hover-color: var(--azul);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--azul);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--azul-escuro);
    --bs-btn-active-border-color: var(--azul-escuro);
    --bs-btn-disabled-color: var(--texto-fraco);
    --bs-btn-disabled-border-color: var(--cinza-borda);
}

.btn-outline-secondary {
    --bs-btn-color: var(--texto);
    --bs-btn-border-color: var(--cinza-borda);
    --bs-btn-hover-color: var(--texto);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--cinza-borda);
    --bs-btn-active-color: var(--texto);
    --bs-btn-active-bg: var(--cinza-fundo);
    --bs-btn-active-border-color: var(--cinza-borda);
    --bs-btn-disabled-color: var(--texto-fraco);
    --bs-btn-disabled-border-color: var(--cinza-borda);
}

.btn-outline-danger {
    --bs-btn-color: var(--vermelho);
    --bs-btn-border-color: #e0bebb;
    --bs-btn-hover-color: var(--vermelho);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: #e0bebb;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--vermelho);
    --bs-btn-active-border-color: var(--vermelho);
    --bs-btn-disabled-color: var(--texto-fraco);
    --bs-btn-disabled-border-color: var(--cinza-borda);
    --bs-btn-focus-shadow-rgb: 179, 38, 30;
}

/* Não há `.btn-link` no aplicativo. As ações que eram texto sublinhado — refazer assinatura,
   cancelar chegada, cancelar saída, entrar com outro usuário — viraram botões de moldura: um
   link de 1 px no meio de botões de 48 px é difícil de acertar com luva e fácil de não ver ao
   sol. Se algum voltar, precisa de uma regra aqui, senão herda o azul do Bootstrap. */

/* ----------------------------------------------------------- Ações de rodapé */

.rodape-acoes {
    display: flex;
    gap: .75rem;
    margin-top: 1.5rem;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--cinza-borda);
}

/* inline-flex nos dois: um é <a> e o outro é <button>. Alinhados pela linha de base, como
   ficavam antes, o texto do botão sai centralizado pelo navegador e o do link encosta no topo —
   o degrau que aparecia entre "Meu perfil" e "Sair". Centralizar o conteúdo de cada um resolve
   sem depender de como o agente do usuário trata cada elemento. */
.acao-rodape {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--alvo);
    padding: .5rem .75rem;
    border: 1px solid var(--cinza-borda);
    border-radius: .75rem;
    background: #fff;
    color: var(--azul);
    font-weight: 600;
    text-decoration: none;
}

/* Sair encerra a sessão e apaga o perfil do aparelho. A moldura vermelha é o aviso de que é
   uma ação de saída, não mais um item de navegação — sem virar alarme. */
.acao-rodape-sair {
    color: var(--vermelho);
    border-color: #e0bebb;
}

/* Sem :hover de propósito: no celular ele gruda depois do toque. */
.acao-rodape:active { background: var(--cinza-fundo); }
.acao-rodape:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* ----------------------------------------------------------- Linha do tempo */

.linha-tempo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    text-align: center;
}

.linha-tempo-item {
    padding: .6rem;
    border-radius: .5rem;
    background: var(--cinza-fundo);
    border: 1px solid var(--cinza-borda);
}

.linha-tempo-item span {
    display: block;
    font-size: .8rem;
    color: var(--texto-fraco);
}

.linha-tempo-item strong { font-size: 1.2rem; }

.linha-tempo-item.feito {
    background: #e3f4e8;
    border-color: var(--verde);
}

/* ----------------------------------------------------------- Conciliação */

.conciliacao {
    display: grid;
    gap: .4rem;
}

.conciliacao > div {
    display: flex;
    justify-content: space-between;
    padding: .35rem 0;
    border-bottom: 1px solid var(--cinza-borda);
}

.conciliacao > div:last-child { border-bottom: none; }

.destaque-atencao strong { color: var(--laranja); }
.destaque-erro strong { color: var(--vermelho); }

/* ----------------------------------------------------------- Login */

.login {
    max-width: 26rem;
    margin: 0 auto;
    padding: 2rem 1.25rem;
}

.login-marca {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--azul);
    margin-bottom: .25rem;
}

.login-subtitulo {
    text-align: center;
    color: var(--texto-fraco);
    margin-bottom: 1.5rem;
}

.login-pin {
    letter-spacing: .6rem;
    font-size: 1.5rem;
}

.login-aviso {
    font-size: .85rem;
    color: var(--texto-fraco);
    text-align: center;
}

/* ----------------------------------------------------------- Carregamento e erro */

.carregando {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    gap: .5rem;
}

.carregando-marca {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--azul);
}

.carregando-texto { color: var(--texto-fraco); }

#blazor-error-ui {
    background: var(--vermelho);
    color: #fff;
    bottom: 0;
    display: none;
    left: 0;
    padding: .8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

#blazor-error-ui .reload { color: #fff; }

/* ----------------------------------------------------------- Mídias */

.oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.anexo-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 0;
    border-top: 1px solid var(--cinza-borda);
}

.anexo-miniatura {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: .4rem;
    border: 1px solid var(--cinza-borda);
    flex: none;
}

.anexo-miniatura-vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3f4e8;
    border-color: var(--verde);
    color: var(--verde);
    font-size: 1.4rem;
}

.anexo-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: .88rem;
}

.anexo-erro { color: var(--vermelho); font-size: .8rem; }

.texto-ok { color: var(--verde); font-weight: 600; }
.texto-erro { color: var(--vermelho); font-weight: 600; }
.texto-aguardando { color: var(--laranja); font-weight: 600; }

/* O quadro precisa ser alto o bastante para uma assinatura com o dedo, sem empurrar o botão
   de confirmar para fora da tela. */
.assinatura-canvas {
    display: block;
    width: 100%;
    height: 11rem;
    margin-top: .5rem;
    border: 2px dashed var(--cinza-borda);
    border-radius: .5rem;
    background: #fff;
    touch-action: none;
}

.assinatura-acoes {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: .5rem;
    margin-top: .5rem;
}

.assinatura-registrada {
    display: block;
    width: 100%;
    margin-top: .5rem;
    border: 1px solid var(--cinza-borda);
    border-radius: .5rem;
    background: #fff;
}