/* =========================================================================
   Frota Municipal — complementos ao sigma.css (cópia do SIGMA).
   Só usa os tokens do SIGMA: para mudar cores, mexa no :root do sigma.css.
   Telas do motorista são pensadas primeiro para o celular.
   ========================================================================= */

/* Seções do menu lateral */
.nav-section {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cor-texto-fraca);
    padding: 1rem 0.9rem 0.35rem;
}
.nav-section:first-child { padding-top: 0.25rem; }
.nav-dot-verde { background: var(--cor-primaria); box-shadow: 0 0 0 3px var(--cor-primaria-suave); }
.btn-sidebar-toggle svg { width: 22px; height: 22px; }
.last-update svg { width: 13px; height: 13px; }
.user-menu-item svg { width: 18px; height: 18px; }
.logo-link { display: flex; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-sm svg { width: 14px; height: 14px; }
.page-header h1 svg { width: 24px; height: 24px; color: var(--cor-primaria); }
.section h2 svg { width: 18px; height: 18px; color: var(--cor-primaria); }

/* ── Botões grandes de ação (polegar) ───────────────────────────────── */
.btn-lg {
    padding: 0.9rem 1.25rem;
    font-size: 1rem;
    border-radius: var(--raio-medio);
}
.btn-bloco { width: 100%; }

.acoes-rapidas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.acao-rapida {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda-suave);
    border-radius: var(--raio-grande);
    box-shadow: var(--sombra-1);
    color: var(--cor-texto);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.acao-rapida:hover { border-color: var(--cor-primaria); box-shadow: var(--sombra-2); }
.acao-rapida:active { transform: scale(.98); }
.acao-rapida small { color: var(--cor-texto-suave); font-weight: 400; font-size: 0.76rem; line-height: 1.35; }
.acao-rapida .acao-icone {
    width: 40px; height: 40px;
    border-radius: var(--raio-medio);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cor-primaria-suave); color: var(--cor-primaria);
}
.acao-rapida .acao-icone svg { width: 20px; height: 20px; }
.acao-rapida.laranja .acao-icone { background: var(--cor-destaque-suave); color: var(--cor-destaque); }
.acao-rapida.vermelho .acao-icone { background: var(--alerta-perigo-fundo); color: var(--cor-perigo); }
.acao-rapida.neutro .acao-icone { background: var(--cor-fundo); color: var(--cor-texto-suave); }

/* ── Cartão da viagem em andamento ──────────────────────────────────── */
.viagem-atual {
    background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
    color: #fff;
    border-radius: var(--raio-grande);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 10px 24px rgba(var(--cor-primaria-rgb), .28);
}
.viagem-atual-topo { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 600; opacity: .9; text-transform: uppercase; letter-spacing: .05em; }
.viagem-atual-topo .pulso { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: pulso 1.6s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.viagem-atual h2 { font-size: 1.3rem; font-weight: 800; margin: 0.35rem 0 0.1rem; letter-spacing: -0.01em; }
.viagem-atual .placa-txt { font-size: 0.85rem; opacity: .9; }
.viagem-atual-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; margin: 1rem 0; font-size: 0.85rem; }
.viagem-atual-dados span { display: block; font-size: 0.7rem; opacity: .8; text-transform: uppercase; letter-spacing: .04em; }
.viagem-atual-dados strong { font-size: 1rem; }
.viagem-atual .btn { background: #fff; color: var(--cor-primaria-escura); }
.viagem-atual .btn:hover { background: var(--cor-primaria-suave); }
.viagem-atual .btn-transparente { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.35); }
.viagem-atual .btn-transparente:hover { background: rgba(255,255,255,.25); }
.viagem-atual-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.viagem-atual-acoes .btn { flex: 1; }

/* ── Escolha do veículo (cartões com radio) ─────────────────────────── */
.veiculos-busca { margin-bottom: 0.75rem; }
.veiculos-grupo-titulo {
    font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--cor-texto-suave); margin: 1rem 0 0.5rem;
}
.veiculos-lista { display: grid; gap: 0.6rem; }
.veiculo-opcao { position: relative; display: block; cursor: pointer; }
.veiculo-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.veiculo-cartao {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--cor-superficie);
    border: 1.5px solid var(--cor-borda);
    border-radius: var(--raio-grande);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.veiculo-cartao .vc-icone {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--raio-medio);
    background: var(--cor-fundo); color: var(--cor-texto-suave);
    display: inline-flex; align-items: center; justify-content: center;
}
.veiculo-cartao .vc-icone svg { width: 24px; height: 24px; }
.veiculo-cartao .vc-info { flex: 1; min-width: 0; line-height: 1.35; }
.veiculo-cartao .vc-modelo { font-weight: 700; font-size: 0.95rem; }
.veiculo-cartao .vc-sub { font-size: 0.78rem; color: var(--cor-texto-suave); }
.veiculo-cartao .vc-placa {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 0.82rem;
    padding: 0.15rem 0.5rem; border: 1.5px solid var(--cor-texto); border-radius: 5px; background: #fff; letter-spacing: .04em;
    white-space: nowrap;
}
.veiculo-opcao input:checked + .veiculo-cartao {
    border-color: var(--cor-primaria); background: var(--cor-primaria-suave); box-shadow: var(--anel-foco);
}
.veiculo-opcao input:checked + .veiculo-cartao .vc-icone { background: var(--cor-primaria); color: #fff; }
.veiculo-opcao input:focus-visible + .veiculo-cartao { box-shadow: var(--anel-foco); }
.veiculo-opcao.indisponivel { cursor: not-allowed; }
.veiculo-opcao.indisponivel .veiculo-cartao { opacity: .6; background: var(--cor-fundo-suave); border-style: dashed; }
.veiculo-opcao .vc-aviso { display: block; font-size: 0.74rem; color: var(--cor-aviso-escura); font-weight: 600; margin-top: 0.15rem; }

/* Veículo escolhido (lista recolhida) */
.veiculo-escolhido { display: flex; align-items: center; gap: 0.75rem; }
.veiculo-escolhido[hidden], #listaVeiculos[hidden] { display: none; }
.veiculo-escolhido-cartao { flex: 1; min-width: 0; max-width: 520px; }
.veiculo-escolhido-cartao .veiculo-cartao {
    border-color: var(--cor-primaria); background: var(--cor-primaria-suave);
}
.veiculo-escolhido-cartao .vc-icone { background: var(--cor-primaria); color: #fff; }
.veiculo-escolhido .btn { flex-shrink: 0; }
#passoSaida { scroll-margin-top: calc(var(--altura-topo) + 12px); }

/* ── Marcador de tanque ─────────────────────────────────────────────── */
.tanque { display: flex; gap: 4px; }
.tanque input { position: absolute; opacity: 0; width: 0; height: 0; }
.form-group .tanque label {
    flex: 1; height: 44px; margin: 0; cursor: pointer;
    background: var(--cor-fundo); border: 1px solid var(--cor-borda);
    transition: background-color .12s, border-color .12s;
}
.form-group .tanque label:first-of-type { border-radius: var(--raio) 0 0 var(--raio); }
.form-group .tanque label:last-of-type  { border-radius: 0 var(--raio) var(--raio) 0; }
.form-group .tanque label.cheio { background: var(--cor-primaria); border-color: var(--cor-primaria-escura); }
/* Até 1/4 o tanque está na reserva: pinta de laranja */
.form-group .tanque:has(input[value="0"]:checked) label.cheio,
.form-group .tanque:has(input[value="1"]:checked) label.cheio,
.form-group .tanque:has(input[value="2"]:checked) label.cheio { background: var(--cor-destaque); border-color: var(--cor-destaque-escura); }
.tanque input:focus-visible + label { box-shadow: var(--anel-foco); position: relative; z-index: 1; }
.tanque-legenda { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--cor-texto-fraca); margin-top: 0.3rem; }
.tanque-valor { font-weight: 700; color: var(--cor-primaria-escura); margin-left: 0.35rem; }

/* ── Fotos ──────────────────────────────────────────────────────────── */
.foto-picker-botao {
    position: relative;
    display: flex !important; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.85rem 1rem;
    border: 1.5px dashed var(--cor-borda);
    border-radius: var(--raio-medio);
    background: var(--cor-fundo-suave);
    color: #46536b !important; font-weight: 600 !important; font-size: 0.9rem !important;
    cursor: pointer; margin: 0 !important;
}
.foto-picker-botao:hover { border-color: var(--cor-primaria); color: var(--cor-primaria-escura) !important; }
.foto-picker-botao svg { width: 20px; height: 20px; }
.foto-picker-botao input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100% !important; }
.foto-picker-previews { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.foto-picker-previews:empty { display: none; }
.foto-preview { position: relative; width: 76px; height: 76px; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--cor-borda); background: var(--cor-fundo); }
.foto-preview img { width: 100%; height: 100%; object-fit: cover; }
.foto-preview-carregando { display: flex; align-items: center; justify-content: center; font-size: 0.68rem; color: var(--cor-texto-suave); }
.foto-preview-remover {
    position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%;
    border: none; background: rgba(15,23,42,.7); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
}
.fotos-galeria { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.fotos-galeria-titulo { width: 100%; font-size: 0.78rem; font-weight: 600; color: var(--cor-texto-suave); }
.fotos-galeria a { display: block; width: 96px; height: 96px; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--cor-borda); }
.fotos-galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.fotos-galeria a:hover img { transform: scale(1.05); }

/* ── GPS ────────────────────────────────────────────────────────────── */
.gps-bloco {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 0.9rem; margin-bottom: 1.35rem;
    border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-medio); background: var(--cor-fundo-suave);
}
.gps-bloco .gps-icone { width: 22px; height: 22px; color: var(--cor-texto-fraca); flex-shrink: 0; }
.gps-bloco.ok { border-color: var(--alerta-sucesso-borda); background: #f2fbf6; }
.gps-bloco.ok .gps-icone { color: var(--cor-primaria); }
.gps-texto { flex: 1; min-width: 0; line-height: 1.3; }
.gps-texto strong { display: block; font-size: 0.84rem; }
.gps-status { font-size: 0.76rem; color: var(--cor-texto-suave); }
.link-mapa { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: var(--cor-primaria); text-decoration: none; }
.link-mapa svg { width: 13px; height: 13px; }

/* ── Campos maiores e com 16px no celular (o iOS dá zoom abaixo disso) ── */
.input-km { font-size: 1.35rem !important; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.km-rodados { font-size: 0.82rem; font-weight: 600; color: var(--cor-primaria-escura); margin-top: 0.3rem; min-height: 1.2em; }
.km-rodados.erro { color: var(--cor-perigo); }
.form-passo {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cor-texto-suave);
    margin: 0.25rem 0 0.9rem;
}
.form-passo span {
    width: 24px; height: 24px; border-radius: 50%; background: var(--cor-primaria); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem;
}
.form-group .checkbox-label { display: flex; font-weight: 500; }
.form-group .checkbox-label input { width: auto; }
.resumo-veiculo {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; margin-bottom: 1.25rem;
    border-radius: var(--raio-medio); background: var(--cor-primaria-suave); color: var(--cor-primaria-escura);
}
.resumo-veiculo svg { width: 26px; height: 26px; flex-shrink: 0; }
.resumo-veiculo strong { display: block; color: var(--cor-texto); }
.resumo-veiculo small { font-size: 0.78rem; }

/* ── Listas em cartão (substituem tabela no celular) ────────────────── */
.lista-cartoes { display: grid; gap: 0.6rem; }
.cartao-registro {
    display: block; padding: 0.9rem 1rem;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-grande);
    box-shadow: var(--sombra-1); color: inherit; text-decoration: none;
}
a.cartao-registro:hover { border-color: var(--cor-primaria); }
.cartao-registro-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.cartao-registro-titulo { font-weight: 700; font-size: 0.92rem; }
.cartao-registro-sub { font-size: 0.78rem; color: var(--cor-texto-suave); margin-top: 0.15rem; }
.cartao-registro-dados { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.55rem; font-size: 0.8rem; color: #46536b; }
.cartao-registro-dados b { color: var(--cor-texto); }

/* Pares rótulo/valor no detalhe */
.dados-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.85rem 1.25rem; }
.dado span { display: block; font-size: 0.72rem; font-weight: 600; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.dado strong { font-size: 0.95rem; font-weight: 600; }
.dado-largo { grid-column: 1 / -1; }

/* Alertas do painel */
.alertas-lista { display: grid; gap: 0.5rem; }
.alerta-item {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem;
    border-radius: var(--raio-medio); text-decoration: none; color: inherit;
    background: var(--alerta-aviso-fundo); border: 1px solid var(--alerta-aviso-borda);
}
.alerta-item.critico { background: var(--alerta-perigo-fundo); border-color: var(--alerta-perigo-borda); }
.alerta-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--alerta-aviso-texto); }
.alerta-item.critico svg { color: var(--cor-perigo); }
.alerta-item .alerta-tipo { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-suave); }
.alerta-item .alerta-texto { font-size: 0.86rem; }

.stat-card .stat-icon svg { width: 20px; height: 20px; }
.texto-suave { color: var(--cor-texto-suave); }
.placa { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.direita { text-align: right !important; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.form-actions .btn { min-width: 120px; }
.filtros-inline { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.filtros-inline .form-group { margin-bottom: 0; min-width: 150px; flex: 1; }
.checkbox-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.35rem 1rem; max-height: 220px; overflow-y: auto; padding: 0.6rem 0.75rem; border: 1px solid var(--cor-borda); border-radius: var(--raio); }
.checkbox-grade .checkbox-label { font-weight: 400; font-size: 0.88rem; margin: 0; }
.tag-km-divergente { font-size: 0.72rem; font-weight: 700; color: var(--cor-aviso-escura); }

svg.mini { width: 12px; height: 12px; vertical-align: -1px; }

/* ── Multas ─────────────────────────────────────────────────────────── */
.condutor-previa { border-radius: var(--raio-medio); padding: 0.8rem 0.95rem; margin: -0.35rem 0 1.25rem; font-size: 0.86rem; border: 1px solid; }
.condutor-previa[hidden] { display: none; }
.condutor-previa.ok      { background: #f2fbf6; border-color: var(--alerta-sucesso-borda); }
.condutor-previa.atencao { background: var(--alerta-aviso-fundo); border-color: var(--alerta-aviso-borda); }
.condutor-previa.erro    { background: var(--alerta-perigo-fundo); border-color: var(--alerta-perigo-borda); }
.condutor-previa p { margin: 0.2rem 0 0.4rem; color: var(--cor-texto-suave); }
.cp-titulo { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-suave); margin-bottom: 0.35rem; }
.condutor-previa.ok .cp-titulo { color: var(--cor-primaria-escura); }
.condutor-previa.erro .cp-titulo { color: var(--alerta-perigo-texto); }
.cp-viagem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; padding: 0.2rem 0; }
.cp-viagem strong { font-size: 0.95rem; }
.cp-viagem small { color: var(--cor-texto-suave); }
.cp-rot { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--cor-texto-fraca); min-width: 44px; }

.condutor-cartao { margin-top: 0.75rem; padding: 1rem 1.1rem; border-radius: var(--raio-medio); background: var(--cor-primaria-suave); border: 1px solid var(--alerta-sucesso-borda); }
.condutor-cartao.manual { background: var(--cor-fundo-suave); border-color: var(--cor-borda); }
.condutor-nome { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.condutor-sub { font-size: 0.8rem; color: var(--cor-texto-suave); margin-top: 0.1rem; }
.condutor-origem { font-size: 0.84rem; margin-top: 0.6rem; display: flex; align-items: center; gap: 0.35rem; }
.condutor-pontos { font-size: 0.8rem; color: var(--cor-texto-suave); margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--cor-borda); }
.condutor-pontos strong { font-size: 1rem; color: var(--cor-texto); }
.condutor-pontos.alto strong { color: var(--cor-perigo); }

.linha-tempo { position: relative; margin-top: 0.75rem; padding-left: 0.4rem; }
.linha-tempo::before { content: ''; position: absolute; left: 3.15rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--cor-borda-suave); }
.lt-item { position: relative; display: flex; gap: 1.1rem; align-items: flex-start; padding: 0.5rem 0.6rem 0.5rem 0; color: inherit; text-decoration: none; font-size: 0.86rem; border-radius: var(--raio); }
a.lt-item:hover { background: var(--cor-fundo-suave); }
.lt-hora { width: 2.4rem; flex-shrink: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cor-texto-suave); }
.lt-item > div { position: relative; padding-left: 0.9rem; }
.lt-item > div::before { content: ''; position: absolute; left: -0.62rem; top: 0.3rem; width: 10px; height: 10px; border-radius: 50%; background: var(--cor-superficie); border: 2px solid var(--cor-texto-fraca); }
.lt-item small { color: var(--cor-texto-suave); }
.lt-cobre > div::before { border-color: var(--cor-primaria); background: var(--cor-primaria); }
.lt-cobre { background: var(--cor-primaria-suave); }
.lt-multa { color: var(--alerta-perigo-texto); }
.lt-multa .lt-hora { color: var(--cor-perigo); }
.lt-multa > div::before { border-color: var(--cor-perigo); background: var(--cor-perigo); box-shadow: 0 0 0 3px var(--alerta-perigo-fundo); }

/* Login */
.login-campo-cpf { letter-spacing: .04em; }
.login-manter { font-size: 0.88rem; color: var(--cor-texto); margin-top: -0.25rem; }
.login-manter input { width: auto; accent-color: var(--cor-primaria); }
.login-manter-dica { display: block; font-size: 0.75rem; color: var(--cor-texto-fraca); margin: 0.2rem 0 0 1.5rem; line-height: 1.4; }

/* ── Celular ────────────────────────────────────────────────────────── */
.bottom-nav { display: none; }

@media (max-width: 768px) {
    .top-header-content { padding: 0 0.75rem; }
    .logo-top { height: 34px; max-width: 170px; }
    .btn-sidebar-toggle { margin-right: 0.35rem; }
    .main-content { padding: 1rem 0.85rem 1.5rem; }
    .page-header h1 { font-size: 1.2rem; }
    .form { padding: 1.1rem; }
    .section { padding: 1rem; }
    .grid-2 { grid-template-columns: 1fr; }
    .form-group input, .form-group select, .form-group textarea { font-size: 16px; min-height: 46px; }
    .form-group textarea { min-height: 80px; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions .btn { width: 100%; padding: 0.85rem 1rem; font-size: 0.95rem; }
    .app-modal-overlay { padding: 0; align-items: flex-end; }
    .app-modal { border-radius: 16px 16px 0 0; max-height: 94vh; overflow-y: auto; }
    .app-modal-header { padding: 1.1rem 1.1rem 0; }
    .app-modal-body { padding: 0 1.1rem 1.25rem; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .stat-card { padding: 0.9rem; }
    .stat-card .stat-number { font-size: 1.4rem; }
    .some-celular { display: none !important; }
    .veiculo-escolhido { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .veiculo-escolhido-cartao { max-width: none; }

    /* Barra inferior do motorista */
    /* Barra inferior do motorista: a opção da tela atual sobe num círculo
       verde e a barra "abraça" o círculo com uma lombada curva. A sombra vem
       do filter (e não de box-shadow) para contornar também a lombada. */
    body.area-app .bottom-nav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
        background: var(--cor-superficie);
        filter: drop-shadow(0 -1px 0 rgba(16,24,40,.07)) drop-shadow(0 -6px 10px rgba(16,24,40,.06));
        padding: 0.4rem 0.25rem calc(0.4rem + env(safe-area-inset-bottom));
    }
    body.area-app .bottom-nav a {
        position: relative;
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 0.3rem 0; color: var(--cor-texto-fraca); text-decoration: none;
        font-size: 0.66rem; font-weight: 600;
        -webkit-tap-highlight-color: transparent;
    }
    body.area-app .bottom-nav a svg { position: relative; z-index: 1; width: 22px; height: 22px; transition: color .2s; }
    body.area-app .bottom-nav a:active svg { transform: scale(.92); }

    /* Lombada: forma da barra subindo em volta do círculo */
    body.area-app .bottom-nav a.active::before {
        content: '';
        position: absolute; left: 50%; top: calc(-0.4rem - 13px);
        width: 116px; height: 14px; transform: translateX(-50%);
        background: var(--cor-superficie);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14C26 14 34 0 58 0S90 14 116 14Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14C26 14 34 0 58 0S90 14 116 14Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    }
    body.area-app .bottom-nav a.active { color: var(--cor-primaria-escura); }
    body.area-app .bottom-nav a.active svg {
        width: 40px; height: 40px; padding: 10px; margin: -15px 0 -3px;
        background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
        color: #fff; border-radius: 50%;
        box-shadow: 0 4px 10px rgba(var(--cor-primaria-rgb), .3);
        animation: navSobe .35s cubic-bezier(.34, 1.56, .64, 1);
    }
    @keyframes navSobe {
        from { transform: translateY(14px) scale(.7); opacity: .4; }
        to   { transform: translateY(0) scale(1); opacity: 1; }
    }
    /* Viagem em andamento: pontinho verde pulsando quando não é a tela atual */
    body.area-app .bottom-nav a.em-andamento:not(.active)::after {
        content: ''; position: absolute; top: 4px; left: calc(50% + 8px);
        width: 9px; height: 9px; border-radius: 50%; background: var(--cor-primaria);
        box-shadow: 0 0 0 2px var(--cor-superficie); animation: pulsoVerde 1.6s infinite;
    }
    body.area-app .bottom-nav a.em-andamento:not(.active) { color: var(--cor-primaria-escura); }
    @keyframes pulsoVerde {
        0%   { box-shadow: 0 0 0 2px var(--cor-superficie), 0 0 0 2px rgba(var(--cor-primaria-rgb), .5); }
        70%  { box-shadow: 0 0 0 2px var(--cor-superficie), 0 0 0 8px rgba(var(--cor-primaria-rgb), 0); }
        100% { box-shadow: 0 0 0 2px var(--cor-superficie), 0 0 0 2px rgba(var(--cor-primaria-rgb), 0); }
    }
    @media (prefers-reduced-motion: reduce) {
        body.area-app .bottom-nav a.active svg, body.area-app .bottom-nav a.em-andamento::after { animation: none; }
    }
    body.area-app .main-content { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
    body.area-app .footer { display: none; }
}

@media (min-width: 769px) {
    .so-celular { display: none !important; }
    /* Telas do motorista ocupam a largura toda no desktop, em colunas */
    .acoes-rapidas { grid-template-columns: repeat(4, 1fr); }
    .veiculos-lista,
    .lista-cartoes { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    .viagem-atual-dados { grid-template-columns: repeat(4, 1fr); }
    .viagem-atual-acoes { max-width: 520px; }
    .app-estreito > .btn-bloco { max-width: 360px; }
}

@media print {
    .top-header, .sidebar, .bottom-nav, .footer, .nao-imprimir { display: none !important; }
    .app-layout { margin: 0; }
    .main-content { margin: 0; padding: 0; background: #fff; }
    .section, .table { box-shadow: none; }
}