/* Tela do motorista: mobile-first, botões e campos grandes para uso na rua.
   Visual no padrão fu2re.ai: fundo branco, verde-azulado e laranja do logo. */

:root {
    --fu2re-verde: #0e7c86;
    --fu2re-verde-escuro: #0a6069;
    --fu2re-laranja: #ff4f00;
    --fu2re-texto: #1f2328;
    --fu2re-cinza: #5f6b76;
    --fu2re-borda: #e4e7ec;
}

html {
    font-size: 16px;
}

body {
    background: #fff;
    color: var(--fu2re-texto);
    min-height: 100vh;
    font-family: "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

main.container {
    max-width: 520px;
}

/* Botões e destaques no verde-azulado (Bootstrap 5.1 do template: cores direto, sem --bs-btn-*) */
.btn-primary,
.btn-primary:disabled {
    background-color: var(--fu2re-verde);
    border-color: var(--fu2re-verde);
    color: #fff;
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-check:checked + .btn-primary {
    background-color: var(--fu2re-verde-escuro);
    border-color: var(--fu2re-verde-escuro);
    color: #fff;
}

.btn-primary:focus,
.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(14, 124, 134, 0.3);
}

.btn-outline-primary {
    color: var(--fu2re-verde);
    border-color: var(--fu2re-verde);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--fu2re-verde);
    border-color: var(--fu2re-verde);
    color: #fff;
}

.btn-lg,
.btn-login {
    border-radius: 0.6rem;
    padding: 0.8rem 1rem;
}

.btn-link,
a {
    color: var(--fu2re-verde);
}

.form-control,
.form-select {
    border-color: var(--fu2re-borda);
    border-radius: 0.6rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fu2re-verde);
    box-shadow: 0 0 0 0.2rem rgba(14, 124, 134, 0.2);
}

.form-text {
    color: var(--fu2re-cinza);
}

/* Logo oficial (mesmo arquivo do servicedesk.fu2re.com.br) */
.logo-fu2re {
    display: block;
    height: 40px;
    width: auto;
}

.logo-fu2re-pequeno {
    height: 22px;
}

/* Barra do topo (telas internas) */
.barra-topo {
    background: #fff;
    border-bottom: 1px solid var(--fu2re-borda);
    padding: 0.7rem 0;
}

.barra-topo .container {
    max-width: 520px;
}

.nome-usuario {
    max-width: 30vw;
}

/* Logo do cliente ao lado do logo fu2re */
.divisor-logos {
    width: 1px;
    height: 22px;
    background: var(--fu2re-borda);
}

.logo-cliente {
    height: 26px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
}

.nome-cliente {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fu2re-texto);
    max-width: 30vw;
}

/* Menu do topo */
.nav-topo {
    color: var(--fu2re-cinza);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.3rem 0.55rem;
    border-radius: 0.4rem;
}

.nav-topo.ativo {
    color: var(--fu2re-verde);
    background: rgba(14, 124, 134, 0.1);
    font-weight: 600;
}

/* Páginas largas (relatório): usa mais largura no computador */
.pagina-larga main.container,
.pagina-larga .barra-topo .container {
    max-width: 1140px;
}

.relatorio-card {
    background: #fff;
    border: 1px solid var(--fu2re-borda);
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
    height: 100%;
}

.relatorio-card .resumo-num {
    font-size: 1.5rem;
}

.relatorio-card.destaque {
    border-color: var(--fu2re-verde);
    background: rgba(14, 124, 134, 0.05);
}

.tabela-relatorio {
    font-size: 0.85rem;
}

.tabela-relatorio th,
.tabela-relatorio td {
    white-space: nowrap;
}

.barra-percentual {
    height: 6px;
    background: var(--fu2re-borda);
    border-radius: 3px;
    min-width: 60px;
}

.barra-percentual > span {
    display: block;
    height: 100%;
    background: var(--fu2re-verde);
    border-radius: 3px;
}

/* Tela de login */
.tela-login {
    max-width: 420px;
    margin: 8vh auto 0;
}

.login-subtitulo {
    color: #3d4852;
    font-size: 1.1rem;
}

.login-rotulo {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.login-campo {
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
}

.btn-login {
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

/* Cartões de escolha (plano / veículo) */
.opcao-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.opcao-card input[type="radio"] {
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
}

.opcao-card input[type="radio"] {
    accent-color: var(--fu2re-verde);
}

/* Rigs em grade de 3 colunas (nomes curtos: RIG01, RIG06...) */
.grade-rigs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.opcao-card-compacta {
    margin-bottom: 0;
    padding: 0.7rem 0.75rem;
}

.opcao-card:has(input:checked) {
    border-color: var(--fu2re-verde);
    box-shadow: 0 0 0 2px rgba(14, 124, 134, 0.25);
}

.campo-km {
    font-size: 1.6rem;
    letter-spacing: 0.05em;
}

/* esconde as setinhas do campo numérico */
.campo-km::-webkit-outer-spin-button,
.campo-km::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.campo-km[type=number] {
    -moz-appearance: textfield;
}

/* Resumo e grid de capturas por plano */
.resumo-num {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
}

.resumo-rotulo {
    font-size: 0.75rem;
    color: #6c757d;
}

.grid-capturas {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.6rem;
}

.grid-capturas table {
    font-size: 0.85rem;
}

/* Filtros recolhidos atrás do ícone de funil */
.btn-filtros {
    padding: 0.4rem 0.6rem;
    line-height: 1;
    flex-shrink: 0;
}

.filtro-chip {
    background-color: rgba(14, 124, 134, 0.12);
    color: var(--fu2re-verde-escuro);
    font-weight: 500;
}

.min-w-0 {
    min-width: 0;
}

#painel-filtros {
    background: #f7f9fa;
    border: 1px solid var(--fu2re-borda);
    border-radius: 0.6rem;
    padding: 0.75rem 0.5rem;
    margin-left: 0;
    margin-right: 0;
}

/* Lançamento inutilizado (fora dos totais) e manual */
.linha-inutilizada td {
    color: #9aa3ab;
}

.linha-inutilizada td:not(:first-child):not(:nth-child(2)):not(:last-child) {
    text-decoration: line-through;
}

.badge-manual {
    background: rgba(255, 79, 0, 0.12);
    color: #b33a00;
    font-weight: 600;
}

/* Fotos: miniaturas no formulário */
.miniatura {
    position: relative;
    width: 84px;
    height: 84px;
}

.miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid var(--fu2re-borda);
}

.miniatura-remover {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #d6332a;
    color: #fff;
    font-size: 0.8rem;
    line-height: 26px;
    padding: 0;
}

/* Fotos: botões no grid e galeria */
.btn-fotos {
    padding: 0.1rem 0.35rem;
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: nowrap;
}

#galeria-fotos .carousel-item img {
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
    background: #111;
}

.modal-fullscreen-sm-down #galeria-fotos .carousel-item img {
    max-height: calc(100vh - 140px);
}

/* Mapa do lançamento (modal) */
#mapa-lancamento {
    width: 100%;
    height: 60vh;
    min-height: 320px;
}

.modal-fullscreen-sm-down #mapa-lancamento {
    height: calc(100vh - 140px);
}

.legenda-ponto {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}

.legenda-inicio {
    background: #1a9b4b;
}

.legenda-fim {
    background: #d6332a;
}

.btn-mapa {
    padding: 0.1rem 0.45rem;
    line-height: 1.4;
}

.grid-capturas th,
.grid-capturas td {
    white-space: nowrap;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.card,
.list-group {
    border-radius: 0.6rem;
}