/* ============================================ RESET E BASE ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --cor-primaria: #365E87; --cor-primaria-texto: #365E87; /* texto/links na cor da marca */ --cor-primaria-escura: #172B40; --cor-fundo: #F5F7FA; --cor-fundo-suave: #EAF0F6; --cor-superficie: #FFFFFF; /* fundo de cards, inputs, modais */ --cor-texto: #152536; --cor-texto-suave: #52657A; --cor-borda: #D8E0E9; --cor-erro: #9A411C; --cor-sucesso: #255C52; --cor-receita: #255C52; --cor-receita-clara: #dcfce7; --cor-despesa: #9A411C; --cor-despesa-clara: #fee2e2; --sombra: 0 10px 40px rgba(51, 65, 85, 0.15); --sombra-leve: 0 2px 8px rgba(0,0,0,0.05); /* Famílias de acento (badges/avisos/planos) — par fundo+texto por matiz */ --tom-ambar-bg: #fef3c7; --tom-ambar-borda: #fde68a; --tom-ambar-suave: #fffbeb; --tom-ambar-texto: #b45309; --tom-ambar-forte: #92400e; --tom-ambar-escuro: #78350f; --tom-ambar-acento: #f59e0b; --tom-azul-bg: #dbeafe; --tom-azul-texto: #1e40af; --tom-azul-acento: #3b82f6; --tom-roxo-bg: #f3e8ff; --tom-roxo-texto: #7c3aed; --tom-roxo-acento: #a855f7; --tom-verde-borda: #bbf7d0; --tom-verde-texto: #166534; --tom-verde-acento: #16a34a; --tom-verm-borda: #fecaca; --tom-verm-acento: #dc2626; /* Gráficos (Chart.js lê estes tokens via JS) */ --grafico-texto: #52657A; --grafico-grade: #D8E0E9; --cor-borda-controle:#7A8A9B; --cor-foco:#9A411C; --cor-marca:#F56820; --cor-sobre-marca:#251308; --cor-menu:#172B40; --cor-menu-texto:#E7EEF6; --cor-menu-suave:#B6C5D5; --cor-menu-ativo:#29425D; } /* ============================================ TEMA ESCURO — motorista trabalha à noite: fundo escuro real, texto sem branco puro (ofusca no carro), semânticos recalibrados. Os templates de PDF NÃO usam tokens de propósito (impressão é sempre clara). Aplicado via data-tema no (anti-flash no do index.html). ============================================ */ :root[data-tema="escuro"] { --cor-primaria: #365E87; /* botões: mais claro p/ contraste no escuro */ --cor-primaria-texto: #A9C7E7; /* texto de marca legível no escuro */ --cor-primaria-escura: #21344A; --cor-fundo: #0E1824; --cor-fundo-suave: #21344A; --cor-superficie: #182738; --cor-texto: #F1F5F9; --cor-texto-suave: #B3C1D1; --cor-borda: #3C526B; --cor-erro: #FFB99B; --cor-sucesso: #B0E0D3; --cor-receita: #B0E0D3; --cor-receita-clara: #14532d; --cor-despesa: #FFB99B; --cor-despesa-clara: #601b1b; --sombra: 0 10px 40px rgba(0, 0, 0, 0.45); --sombra-leve: 0 2px 8px rgba(0, 0, 0, 0.35); --tom-ambar-bg: #3b2a10; --tom-ambar-borda: #78350f; --tom-ambar-suave: #2c2110; --tom-ambar-texto: #fbbf24; --tom-ambar-forte: #fcd34d; --tom-ambar-escuro: #fde68a; --tom-ambar-acento: #f59e0b; --tom-azul-bg: #1b2a4a; --tom-azul-texto: #93c5fd; --tom-azul-acento: #60a5fa; --tom-roxo-bg: #341b52; --tom-roxo-texto: #d8b4fe; --tom-roxo-acento: #c084fc; --tom-verde-borda: #166534; --tom-verde-texto: #86efac; --tom-verde-acento: #4ade80; --tom-verm-borda: #7f1d1d; --tom-verm-acento: #f87171; --grafico-texto: #B3C1D1; --grafico-grade: #3C526B; color-scheme: dark; /* inputs/scrollbars nativos escurecem junto */ --cor-borda-controle:#7890A8; --cor-foco:#FFAA70; --cor-marca:#F56820; --cor-sobre-marca:#251308; --cor-menu:#172B40; --cor-menu-texto:#E7EEF6; --cor-menu-suave:#B6C5D5; --cor-menu-ativo:#29425D; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: linear-gradient(135deg, var(--cor-fundo) 0%, var(--cor-fundo-suave) 100%); color: var(--cor-texto); min-height: 100vh; -webkit-font-smoothing: antialiased; } /* Acessibilidade: foco visível por teclado (WCAG 2.4.7) */ :focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; } /* ============================================ CONTROLE DE TELAS ============================================ */ .tela { display: none; min-height: 100vh; } .tela.ativa { display: flex; } /* ============================================ TELA DE AUTENTICAÇÃO ============================================ */ /* Acesso consolidado em access.css. */ .campo { display: flex; flex-direction: column; gap: 6px; } .campo label { font-size: 14px; font-weight: 600; color: var(--cor-texto); } .campo input, .campo select { padding: 14px 16px; border: 2px solid var(--cor-borda); border-radius: 10px; font-size: 15px; transition: border-color 0.2s; font-family: inherit; background: var(--cor-superficie); color: var(--cor-texto); } .campo input:focus, .campo select:focus { border-color: var(--cor-primaria-texto); } /* ============================================ BOTÕES ============================================ */ .botao-principal { background: var(--cor-primaria); color: white; padding: 14px; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; margin-top: 8px; font-family: inherit; } .botao-principal:hover:not(:disabled) { background: var(--cor-primaria-escura); } .botao-principal:disabled { opacity: 0.6; cursor: not-allowed; } .botao-secundario { background: transparent; color: var(--cor-texto); padding: 8px 16px; border: 2px solid var(--cor-borda); border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; } .botao-secundario:hover { background: var(--cor-fundo); border-color: var(--cor-primaria-texto); } .botao-voltar { background: transparent; border: none; color: var(--cor-primaria-texto); font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px; font-family: inherit; } .botao-voltar:hover { text-decoration: underline; } /* ============================================ MENSAGENS ============================================ */ .mensagem { margin-top: 16px; padding: 12px; border-radius: 8px; font-size: 14px; text-align: center; display: none; } .mensagem.erro { display: block; background: var(--cor-despesa-clara); color: var(--cor-erro); border: 1px solid var(--tom-verm-borda); } .mensagem.sucesso { display: block; background: var(--cor-receita-clara); color: var(--cor-sucesso); border: 1px solid var(--tom-verde-borda); } /* ============================================ DASHBOARD ============================================ */ #tela-dashboard, #tela-escolha-tipo, #tela-formulario, #tela-minha-conta { flex-direction: column; } .topo { background: var(--cor-superficie); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--sombra-leve); position: sticky; top: 0; z-index: 10; } .topo-marca { display: flex; align-items: center; } .topo strong { margin-left: 8px; color: var(--cor-primaria-texto); font-size: 18px; } .logo-icone-pequeno { font-size: 24px; } .conteudo { padding: 32px 24px; max-width: 800px; width: 100%; margin: 0 auto; flex: 1; } .conteudo h2 { color: var(--cor-primaria-texto); margin-bottom: 8px; } .texto-suave { color: var(--cor-texto-suave); margin-bottom: 24px; } /* ============================================ CARDS DE RESUMO ============================================ */ .resumo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .card-resumo { background: var(--cor-superficie); padding: 20px; border-radius: 14px; display: flex; align-items: center; gap: 16px; box-shadow: var(--sombra-leve); border-left: 4px solid var(--cor-primaria); } .card-resumo.card-receita { border-left-color: var(--cor-receita); } .card-resumo.card-despesa { border-left-color: var(--cor-despesa); } .card-resumo.card-lucro { border-left-color: var(--cor-primaria-texto); } .card-icone { font-size: 32px; } .card-info { display: flex; flex-direction: column; gap: 2px; } .card-titulo { font-size: 13px; color: var(--cor-texto-suave); font-weight: 500; } .card-valor { font-size: 22px; font-weight: 700; color: var(--cor-texto); } .card-receita .card-valor { color: var(--cor-receita); } .card-despesa .card-valor { color: var(--cor-despesa); } /* ============================================ BOTÃO GRANDE DE LANÇAR ============================================ */ .botao-lancar { width: 100%; padding: 20px; background: var(--cor-primaria); color: white; border: none; border-radius: 14px; font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; transition: all 0.2s; margin-bottom: 32px; font-family: inherit; box-shadow: 0 4px 14px rgba(51, 65, 85, 0.3); } .botao-lancar:hover { background: var(--cor-primaria-escura); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(51, 65, 85, 0.4); } .botao-lancar-mais { font-size: 28px; line-height: 1; } /* ============================================ LISTA DE MOVIMENTAÇÕES ============================================ */ .secao-lista h3 { color: var(--cor-texto); margin-bottom: 16px; font-size: 18px; } .lista-movimentacoes { display: flex; flex-direction: column; gap: 10px; } .item-movimentacao { background: var(--cor-superficie); padding: 16px; border-radius: 12px; display: flex; align-items: center; gap: 14px; box-shadow: var(--sombra-leve); transition: transform 0.15s; } .item-movimentacao:hover { transform: translateX(2px); } .item-icone { font-size: 24px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; flex-shrink: 0; } .item-receita .item-icone { background: var(--cor-receita-clara); } .item-despesa .item-icone { background: var(--cor-despesa-clara); } .item-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .item-categoria { font-weight: 600; color: var(--cor-texto); font-size: 15px; } .item-detalhes { font-size: 13px; color: var(--cor-texto-suave); } .item-valor { font-weight: 700; font-size: 16px; white-space: nowrap; } .item-receita .item-valor { color: var(--cor-receita); } .item-despesa .item-valor { color: var(--cor-despesa); } .item-excluir { background: transparent; border: none; font-size: 18px; cursor: pointer; padding: 8px; border-radius: 8px; color: var(--cor-texto-suave); transition: all 0.2s; /* FASE 9.5 (C) — alvo de toque mínimo 44x44 (WCAG 2.5.8), ação destrutiva */ min-width: 44px; min-height: 44px; } .item-excluir:hover { background: var(--cor-despesa-clara); color: var(--cor-despesa); } .texto-vazio { text-align: center; color: var(--cor-texto-suave); padding: 32px 16px; background: var(--cor-superficie); border-radius: 12px; font-size: 14px; box-shadow: var(--sombra-leve); } /* ============================================ TELA DE ESCOLHA DE TIPO ============================================ */ .opcoes-tipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; } .opcao-tipo { background: var(--cor-superficie); border: 3px solid transparent; border-radius: 16px; padding: 32px 24px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: all 0.2s; font-family: inherit; text-align: center; box-shadow: var(--sombra-leve); } .opcao-tipo:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .opcao-receita:hover { border-color: var(--cor-receita); } .opcao-despesa:hover { border-color: var(--cor-despesa); } .opcao-icone { font-size: 56px; margin-bottom: 8px; } .opcao-tipo strong { font-size: 22px; color: var(--cor-texto); } .opcao-receita strong { color: var(--cor-receita); } .opcao-despesa strong { color: var(--cor-despesa); } .opcao-tipo small { color: var(--cor-texto-suave); font-size: 13px; line-height: 1.4; } /* ============================================ FORMULÁRIO DE MOVIMENTAÇÃO ============================================ */ .formulario-mov { background: var(--cor-superficie); padding: 24px; border-radius: 14px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sombra-leve); } /* ============================================ RESPONSIVO ============================================ */ @media (max-width: 480px) { .card { padding: 32px 24px; } .logo h1 { font-size: 24px; } .conteudo { padding: 20px 16px; } .topo { padding: 14px 16px; } .card-valor { font-size: 18px; } .card-icone { font-size: 26px; } .botao-lancar { font-size: 16px; padding: 18px; } .opcao-icone { font-size: 44px; } } /* ============================================ DASHBOARD COM SUB-TELAS ============================================ */ .dashboard-conteudo { flex: 1; padding-bottom: 80px; /* espaço para o menu inferior fixo */ overflow-y: auto; } .sub-tela { display: none; padding: 32px 24px; max-width: 800px; width: 100%; margin: 0 auto; } .sub-tela.ativa { display: block; animation: fade-in 0.25s ease-out; } @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .sub-tela h2 { color: var(--cor-primaria-texto); margin-bottom: 8px; } /* ============================================ MENU INFERIOR (sub-abas) ============================================ */ /* ============================================ AVISO (placeholder em construção) ============================================ */ .aviso { background: var(--cor-superficie); padding: 24px; border-radius: 12px; border-left: 4px solid var(--cor-primaria); box-shadow: var(--sombra-leve); } .aviso strong { display: block; margin-bottom: 8px; color: var(--cor-primaria-texto); } .aviso p { color: var(--cor-texto-suave); font-size: 14px; line-height: 1.5; } /* ============================================ AJUSTES MOBILE PARA MENU INFERIOR ============================================ */ @media (max-width: 480px) { .sub-tela { padding: 20px 16px; } .dashboard-conteudo { padding-bottom: 76px; } .menu-icone { font-size: 22px; } } /* ============================================ CARD DO VEÍCULO (quando já cadastrado) ============================================ */ .card-veiculo { background: var(--cor-superficie); padding: 24px; border-radius: 16px; box-shadow: var(--sombra-leve); margin-bottom: 16px; border-left: 4px solid var(--cor-primaria); } .card-veiculo-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .card-veiculo-icone { font-size: 56px; flex-shrink: 0; } .card-veiculo-info { flex: 1; min-width: 0; } .card-veiculo-apelido { font-size: 20px; font-weight: 700; color: var(--cor-primaria-texto); margin-bottom: 2px; word-break: break-word; } .card-veiculo-modelo { color: var(--cor-texto); font-size: 14px; } .card-veiculo-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; padding-top: 16px; border-top: 1px solid var(--cor-borda); } .dado-veiculo { display: flex; flex-direction: column; gap: 2px; } .dado-rotulo { font-size: 12px; color: var(--cor-texto-suave); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .dado-valor { font-size: 16px; font-weight: 700; color: var(--cor-texto); } .acoes-veiculo { display: flex; gap: 8px; margin-top: 16px; } .acoes-veiculo .botao-principal, .acoes-veiculo .botao-secundario { flex: 1; margin: 0; } /* ============================================ ESTADO VAZIO DO VEÍCULO ============================================ */ .veiculo-vazio { background: var(--cor-superficie); padding: 40px 24px; border-radius: 16px; text-align: center; box-shadow: var(--sombra-leve); } .veiculo-vazio-icone { font-size: 64px; margin-bottom: 16px; opacity: 0.6; } .veiculo-vazio h3 { color: var(--cor-texto); margin-bottom: 8px; } .veiculo-vazio p { color: var(--cor-texto-suave); margin-bottom: 24px; font-size: 14px; line-height: 1.5; } /* ============================================ BOTÃO DE EXCLUIR VEÍCULO ============================================ */ .botao-excluir-veiculo { background: transparent; color: var(--cor-despesa); padding: 12px; border: 2px solid var(--cor-despesa); border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; margin-top: 8px; } .botao-excluir-veiculo:hover { background: var(--cor-despesa-clara); } /* ============================================ CABEÇALHO DE SEÇÃO + BOTÃO MINI ============================================ */ .cabecalho-secao { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 12px; } .cabecalho-secao h3 { color: var(--cor-texto); font-size: 18px; } .botao-mini { background: var(--cor-primaria); color: white; border: none; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.2s; } .botao-mini:hover { background: var(--cor-primaria-escura); } /* ============================================ LISTA DE MANUTENÇÕES ============================================ */ .lista-manutencoes { display: flex; flex-direction: column; gap: 10px; } .item-manutencao { background: var(--cor-superficie); padding: 14px 16px; border-radius: 12px; display: flex; align-items: center; gap: 12px; box-shadow: var(--sombra-leve); border-left: 4px solid var(--cor-primaria); } .item-manutencao.alerta-amarelo { border-left-color: var(--tom-ambar-acento); background: var(--tom-ambar-suave); } .item-manutencao.alerta-vermelho { border-left-color: var(--cor-despesa); background: var(--cor-despesa-clara); } .manut-icone { font-size: 26px; flex-shrink: 0; } .manut-info { flex: 1; min-width: 0; } .manut-tipo { font-weight: 600; color: var(--cor-texto); font-size: 15px; } .manut-detalhes { font-size: 12px; color: var(--cor-texto-suave); margin-top: 2px; } .manut-status { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; text-transform: uppercase; white-space: nowrap; } .status-ok { background: var(--cor-receita-clara); color: var(--cor-receita); } .status-atencao { background: var(--tom-ambar-bg); color: var(--tom-ambar-texto); } .status-vencido { background: var(--cor-despesa-clara); color: var(--cor-despesa); } .manut-excluir { background: transparent; border: none; font-size: 16px; cursor: pointer; padding: 6px; color: var(--cor-texto-suave); } .manut-excluir:hover { color: var(--cor-despesa); } /* P04–P06: componentes consolidados em fluxo-shell.css. */ /* ============================================ CORREÇÕES DE LAYOUT — Etapa 3.4 ============================================ */ /* Telas internas (formulários) NÃO devem ter padding-bottom do menu inferior */ #tela-form-veiculo .conteudo, #tela-form-manutencao .conteudo { padding-bottom: 32px; width: 100%; } /* Garantir centralização correta em qualquer largura */ #tela-form-veiculo, #tela-form-manutencao, #tela-escolha-tipo, #tela-formulario { width: 100%; } /* Cabeçalho das seções no mobile (deixar mais arejado) */ @media (max-width: 480px) { .cabecalho-secao { margin: 20px 0 10px; } .cabecalho-secao h3 { font-size: 16px; } .item-manutencao { padding: 12px; gap: 10px; } .manut-icone { font-size: 22px; } .manut-tipo { font-size: 14px; } .manut-detalhes { font-size: 11px; } .manut-status { font-size: 10px; padding: 3px 6px; } /* Card do veículo no mobile fica mais compacto */ .card-veiculo { padding: 18px; } .card-veiculo-icone { font-size: 44px; } .card-veiculo-apelido { font-size: 18px; } /* Streak banner mais compacto */ .streak-banner { padding: 12px 16px; } .streak-icone { font-size: 28px; } .streak-banner strong { font-size: 22px; } } /* ============================================ CORREÇÃO DEFINITIVA — Etapa 5.3 (v4) Inclui agora as telas de clientes + perfil + recibos hub ============================================ */ /* Todas as telas internas devem ocupar viewport inteira */ #tela-form-veiculo, #tela-form-manutencao, #tela-escolha-tipo, #tela-formulario, #tela-iniciar-jornada, #tela-encerrar-jornada, #tela-recibos-hub, #tela-perfil, #tela-clientes, #tela-form-cliente { display: none; flex-direction: column; width: 100%; min-height: 100vh; background: transparent; } #tela-form-veiculo.ativa, #tela-form-manutencao.ativa, #tela-escolha-tipo.ativa, #tela-formulario.ativa, #tela-iniciar-jornada.ativa, #tela-encerrar-jornada.ativa, #tela-recibos-hub.ativa, #tela-perfil.ativa, #tela-clientes.ativa, #tela-form-cliente.ativa { display: flex; } #tela-form-veiculo .conteudo, #tela-form-manutencao .conteudo, #tela-escolha-tipo .conteudo, #tela-formulario .conteudo, #tela-iniciar-jornada .conteudo, #tela-encerrar-jornada .conteudo, #tela-recibos-hub .conteudo, #tela-perfil .conteudo, #tela-clientes .conteudo, #tela-form-cliente .conteudo { flex: 1; width: 100%; max-width: 800px; margin: 0 auto; padding: 24px 20px 32px; } #tela-form-veiculo .topo, #tela-form-manutencao .topo, #tela-escolha-tipo .topo, #tela-formulario .topo, #tela-iniciar-jornada .topo, #tela-encerrar-jornada .topo, #tela-recibos-hub .topo, #tela-perfil .topo, #tela-clientes .topo, #tela-form-cliente .topo { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--cor-superficie); box-shadow: var(--sombra-leve); } #tela-form-veiculo .topo strong, #tela-form-manutencao .topo strong, #tela-escolha-tipo .topo strong, #tela-formulario .topo strong, #tela-iniciar-jornada .topo strong, #tela-encerrar-jornada .topo strong, #tela-recibos-hub .topo strong, #tela-perfil .topo strong, #tela-clientes .topo strong, #tela-form-cliente .topo strong { color: var(--cor-primaria-texto); font-size: 16px; } @media (max-width: 480px) { #tela-form-veiculo .conteudo, #tela-form-manutencao .conteudo, #tela-escolha-tipo .conteudo, #tela-formulario .conteudo, #tela-iniciar-jornada .conteudo, #tela-encerrar-jornada .conteudo, #tela-recibos-hub .conteudo, #tela-perfil .conteudo, #tela-clientes .conteudo, #tela-form-cliente .conteudo { padding: 20px 16px 32px; } #tela-form-veiculo .topo, #tela-form-manutencao .topo, #tela-escolha-tipo .topo, #tela-formulario .topo, #tela-iniciar-jornada .topo, #tela-encerrar-jornada .topo, #tela-recibos-hub .topo, #tela-perfil .topo, #tela-clientes .topo, #tela-form-cliente .topo { padding: 12px 16px; } } /* ============================================ AJUSTES PARA MENU COM 4 ABAS ============================================ */ @media (max-width: 480px) { .menu-item { margin: 0 2px; padding: 8px 2px; } .menu-rotulo { font-size: 10px; } .menu-icone { font-size: 20px; } } /* P04–P06: componentes consolidados em fluxo-shell.css. */ /* ============================================ BOTÕES NA ABA FINANCEIRO (Lançar + Recibos) ============================================ */ .botoes-financeiro { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 32px; } .botao-recibos { background: var(--cor-superficie); color: var(--cor-primaria-texto); padding: 20px 24px; border: 2px solid var(--cor-primaria); border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: all 0.2s; font-family: inherit; min-width: 100px; } .botao-recibos:hover { background: var(--cor-fundo); transform: translateY(-2px); } .botao-recibos span:first-child { font-size: 24px; } @media (max-width: 480px) { .botoes-financeiro { grid-template-columns: 1fr; } .botao-recibos { flex-direction: row; padding: 14px; } .botao-recibos span:first-child { font-size: 22px; } } /* ============================================ AVISO IMPORTANTE (perfil incompleto) ============================================ */ .aviso-importante { background: var(--tom-ambar-bg); border-left: 4px solid var(--tom-ambar-acento); padding: 16px 18px; border-radius: 12px; display: flex; gap: 14px; align-items: flex-start; margin-bottom: 24px; } .aviso-icone { font-size: 28px; flex-shrink: 0; } .aviso-importante strong { display: block; color: var(--tom-ambar-escuro); margin-bottom: 4px; font-size: 15px; } .aviso-importante p { color: var(--tom-ambar-forte); font-size: 13px; line-height: 1.5; margin: 0; } /* ============================================ MODAL DE COMPARTILHAR ============================================ */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; backdrop-filter: blur(4px); animation: fade-in 0.2s ease-out; } .modal-conteudo { background: var(--cor-superficie); border-radius: 18px; padding: 28px 24px; max-width: 480px; width: 100%; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: slide-up 0.25s ease-out; /* FASE 9.5 (C) — em telas baixas o modal longo era cortado; agora rola dentro de si */ max-height: calc(100vh - 40px); overflow-y: auto; } @keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .modal-fechar { position: absolute; top: 12px; right: 14px; background: transparent; border: none; font-size: 22px; cursor: pointer; color: var(--cor-texto-suave); width: 44px; /* FASE 9.5 (C) — alvo de toque mínimo 44x44 */ height: 44px; border-radius: 50%; transition: all 0.2s; } .modal-fechar:hover { background: var(--cor-fundo); color: var(--cor-despesa); } .modal-conteudo h3 { color: var(--cor-primaria-texto); margin-bottom: 6px; } .modal-conteudo .texto-suave { margin-bottom: 20px; } /* ============================================ FASE 9.5.5 — DOCUMENTOS LEGAIS (Política/Termos) ============================================ */ .doc-versao { font-size: 12px; margin-bottom: 14px; } .doc-legal-corpo { max-height: 55vh; overflow-y: auto; padding-right: 8px; text-align: left; } .doc-legal-corpo h4 { color: var(--cor-texto); font-size: 15px; margin: 16px 0 4px; } .doc-legal-corpo p { font-size: 14px; color: var(--cor-texto-suave); line-height: 1.5; margin-bottom: 8px; } .doc-aviso { background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--cor-texto); } /* Checkbox de aceite no cadastro */ .campo-aceite { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 16px; font-size: 13px; color: var(--cor-texto-suave); text-align: left; cursor: pointer; } .campo-aceite input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--cor-primaria-texto); cursor: pointer; } .link-inline { background: none; border: none; padding: 0; font: inherit; color: var(--cor-primaria-texto); text-decoration: underline; cursor: pointer; } /* Alvo de toque adequado (WCAG 2.5.8, >=24px) nos controles de ação que reusam .link-inline — o ✕ do onboarding e os botões da meta ficavam pequenos demais para o dedo num app mobile-first. */ #btn-fechar-onboarding, #btn-editar-meta, #meta-remover { display: inline-block; min-width: 24px; min-height: 24px; padding: 4px 8px; line-height: 1.4; } .conta-privacidade p { font-size: 14px; color: var(--cor-texto-suave); line-height: 1.5; margin-bottom: 8px; } .auth-instalar { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cor-borda); text-align: center; } .auth-instalar p { margin: 0 0 12px; color: var(--cor-texto-suave); font-size: 13px; line-height: 1.5; } .auth-instalar .botao-secundario { width: 100%; min-height: 44px; } .auth-rodape { text-align: center; font-size: 13px; margin-top: 16px; color: var(--cor-texto-suave); } .reaceite-links { text-align: center; margin: 18px 0; } .reaceite-acoes { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } /* ============================================ OPÇÕES DE COMPARTILHAR ============================================ */ .opcoes-compartilhar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .opcao-compartilhar { background: var(--cor-superficie); border: 2px solid var(--cor-borda); border-radius: 12px; padding: 18px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all 0.2s; font-family: inherit; text-align: center; } .opcao-compartilhar:hover { border-color: var(--cor-primaria-texto); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); } .comp-icone { font-size: 32px; margin-bottom: 4px; } .opcao-compartilhar strong { font-size: 14px; color: var(--cor-texto); } .opcao-compartilhar small { font-size: 11px; color: var(--cor-texto-suave); line-height: 1.3; } /* Botão PDF agora ATIVO (não mais "em breve") */ .botao-pdf { background: var(--cor-primaria); color: white; padding: 14px; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.2s; } .botao-pdf:hover { background: var(--cor-primaria-escura); transform: translateY(-2px); } /* ============================================ TEMPLATE DO RECIBO PARA PDF (Fica posicionado fora da tela mas ainda renderizado) ============================================ */ .recibo-template-pdf { position: fixed; top: -10000px; left: 0; width: 794px; /* tamanho A4 em pixels (210mm) */ background: white; padding: 40px 50px; font-family: "Segoe UI", Roboto, sans-serif; color: #1e293b; box-sizing: border-box; } .pdf-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 4px solid #334155; padding-bottom: 20px; margin-bottom: 30px; } .pdf-marca { display: flex; align-items: center; gap: 12px; } .pdf-marca-icone { font-size: 48px; } /* FASE 8.5 bônus — foto de perfil no cabeçalho do recibo */ .pdf-foto-prestador { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid #334155; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .pdf-marca-nome { font-size: 26px; font-weight: 800; color: #334155; } .pdf-marca-tagline { font-size: 12px; color: #64748b; } .pdf-numero-bloco { text-align: right; } .pdf-numero-rotulo { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; } .pdf-numero { font-size: 30px; font-weight: 800; color: #334155; } .pdf-data { font-size: 13px; color: #64748b; margin-top: 4px; } .pdf-titulo { text-align: center; font-size: 22px; font-weight: 800; color: #334155; margin-bottom: 6px; letter-spacing: 1px; } .pdf-subtitulo { text-align: center; color: #64748b; font-size: 13px; margin-bottom: 30px; } .pdf-valor-destaque { background: linear-gradient(135deg, #dcfce7, #bbf7d0); border-left: 6px solid #16a34a; padding: 20px 24px; border-radius: 12px; margin-bottom: 28px; display: flex; justify-content: space-between; align-items: center; } .pdf-valor-rotulo { font-size: 13px; color: #1e293b; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .pdf-valor-numero { font-size: 32px; font-weight: 800; color: #16a34a; } .pdf-secao { margin-bottom: 22px; } .pdf-secao-titulo { font-size: 11px; color: #334155; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 8px; border-bottom: 1px solid #f1f5f9; padding-bottom: 4px; } .pdf-secao-conteudo { font-size: 14px; line-height: 1.7; color: #1e293b; } .pdf-linha { display: flex; margin-bottom: 4px; } .pdf-linha-rotulo { font-weight: 600; min-width: 100px; color: #64748b; } .pdf-rodape { margin-top: 40px; padding-top: 20px; border-top: 2px solid #f1f5f9; display: flex; justify-content: space-between; align-items: flex-end; } .pdf-emissor { font-size: 12px; color: #64748b; line-height: 1.6; max-width: 60%; } .pdf-emissor strong { color: #1e293b; font-size: 13px; } .pdf-assinatura { text-align: center; font-size: 12px; color: #64748b; border-top: 1px solid #1e293b; padding-top: 6px; min-width: 220px; } .pdf-validade { margin-top: 24px; text-align: center; font-size: 11px; color: #64748b; font-style: italic; } /* ============================================ AJUSTES MOBILE - MODAL ============================================ */ @media (max-width: 480px) { .modal-conteudo { padding: 24px 18px; } .opcoes-compartilhar { gap: 8px; } .opcao-compartilhar { padding: 14px 8px; } .comp-icone { font-size: 28px; } .opcao-compartilhar strong { font-size: 13px; } } /* ============================================ PDF DO RELATÓRIO (estilos do template oculto) ============================================ */ .pdf-relatorio-tabela { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 12px; } .pdf-relatorio-tabela thead { background: #334155; color: white; } .pdf-relatorio-tabela th { padding: 10px 8px; text-align: left; font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; } .pdf-relatorio-tabela td { padding: 8px; border-bottom: 1px solid #f1f5f9; color: #1e293b; } .pdf-relatorio-tabela tbody tr:nth-child(even) { background: #f8fafc; } .pdf-relatorio-tabela .col-valor { text-align: right; font-weight: 600; color: #16a34a; white-space: nowrap; } .pdf-relatorio-total { background: #dcfce7; font-weight: 800; font-size: 14px; } .pdf-relatorio-total td { padding: 12px 8px; color: #166534; } .pdf-relatorio-total .col-valor { font-size: 16px; color: #16a34a; } .pdf-status-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 8px; text-transform: uppercase; } .pdf-status-badge.pendente { background: #fef3c7; color: #b45309; } .pdf-status-badge.enviado { background: #dbeafe; color: #1e40af; } .pdf-status-badge.em_analise { background: #f3e8ff; color: #7c3aed; } .pdf-status-badge.pago { background: #dcfce7; color: #16a34a; } /* ============================================ CONFIGURAÇÃO DO RELATÓRIO ============================================ */ /* P10: período, gráficos, indicadores e exportação em report.css. */ /* ============================================ COMPONENTE DE ANEXO DE FOTO (FASE 8.3) ============================================ */ .campo-anexo { margin-top: 8px; } .botao-anexar { width: 100%; background: var(--cor-superficie); border: 2px dashed var(--cor-primaria); color: var(--cor-primaria-texto); padding: 14px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } .botao-anexar:hover { background: var(--cor-fundo); border-style: solid; transform: translateY(-1px); } /* ============================================ PREVIEW DE FOTO SELECIONADA ============================================ */ .preview-anexo { display: flex; align-items: center; gap: 12px; background: var(--cor-fundo); border: 2px solid var(--cor-primaria); border-radius: 12px; padding: 12px; position: relative; } .preview-anexo img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .preview-info { flex: 1; min-width: 0; } .preview-info strong { display: block; font-size: 13px; color: var(--cor-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .preview-info small { display: block; font-size: 11px; color: var(--cor-texto-suave); margin-top: 2px; } .botao-remover-anexo { background: var(--cor-despesa); color: white; border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; } .botao-remover-anexo:hover { background: #b91c1c; transform: scale(1.1); } /* ============================================ PROGRESSO DE UPLOAD ============================================ */ .preview-anexo.enviando { opacity: 0.7; pointer-events: none; } .preview-anexo.enviando::after { content: "⏳ Enviando..."; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--cor-primaria); color: white; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; } /* ============================================ ÍCONE DE ANEXO NA LISTA DE MOVIMENTAÇÕES ============================================ */ .indicador-anexo { display: inline-flex; align-items: center; gap: 3px; background: var(--cor-fundo); padding: 8px 10px; /* FASE 9.5 (C) — área de toque maior (era ~20px de altura) */ border-radius: 10px; font-size: 11px; color: var(--cor-primaria-texto); font-weight: 600; margin-left: 6px; } .indicador-anexo:hover { background: var(--cor-primaria); color: white; cursor: pointer; } /* ============================================ MODAL DE VISUALIZAÇÃO DE FOTO ============================================ */ .modal-foto-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal-foto-conteudo { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; } .modal-foto-imagem { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 12px; background: var(--cor-superficie); box-shadow: 0 8px 32px rgba(0,0,0,0.5); } .modal-foto-controles { display: flex; gap: 10px; margin-top: 16px; } .botao-foto-modal { background: rgba(255,255,255,0.95); border: none; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px; transition: all 0.2s; } .botao-foto-modal:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .botao-foto-modal.reenviar { background: var(--cor-primaria, #2563eb); color: white; } .botao-foto-modal.reenviar:hover { background: var(--cor-primaria-hover, #1d4ed8); } .botao-foto-modal.excluir { background: var(--cor-despesa); color: white; } .btn-anexar-mov:hover { opacity: 1 !important; color: var(--cor-primaria, #2563eb); } .modal-foto-fechar { position: absolute; top: -40px; right: 0; background: rgba(255,255,255,0.2); color: white; border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; font-family: inherit; } .modal-foto-fechar:hover { background: rgba(255,255,255,0.4); } /* Mobile responsivo */ @media (max-width: 480px) { .preview-anexo { padding: 10px; gap: 10px; } .preview-anexo img { width: 56px; height: 56px; } .preview-info strong { font-size: 12px; } } /* ============================================ FASE 8.5.2 — FOTO DE PERFIL DO MOTORISTA ============================================ */ /* Foto única (perfil e veículo compartilham este visual — seletor duplo) */ .campo-anexo-perfil, .campo-anexo-foto-unica { text-align: center; padding: 16px; background: var(--cor-fundo); border-radius: 12px; } .campo-anexo-perfil > label, .campo-anexo-foto-unica > label { display: block; text-align: left; } .campo-anexo-perfil .texto-suave, .campo-anexo-foto-unica .texto-suave { text-align: left; } .perfil-foto-area, .foto-unica-area { display: flex; flex-direction: column; align-items: center; gap: 16px; } .perfil-avatar-wrapper, .foto-unica-avatar-wrapper { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 4px solid white; box-shadow: 0 4px 16px rgba(0,0,0,0.15); background: var(--cor-fundo); } .perfil-avatar, .foto-unica-avatar { width: 100%; height: 100%; object-fit: cover; display: block; } .perfil-foto-acoes, .foto-unica-acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } /* FASE 8.5.3 — miniatura da foto no card do veículo */ .card-veiculo-foto-img { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex-shrink: 0; } .card-veiculo-foto-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .botao-secundario { background: var(--cor-superficie); border: 2px solid var(--cor-primaria); color: var(--cor-primaria-texto); padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; } .botao-secundario:hover { background: var(--cor-primaria); color: white; } .botao-secundario.botao-vermelho { border-color: var(--cor-despesa); color: var(--cor-despesa); } .botao-secundario.botao-vermelho:hover { background: var(--cor-despesa); color: white; } /* ============================================ FASE 8.6 — TELA "MINHA CONTA" ============================================ */ .topo-acoes { display: flex; align-items: center; gap: 8px; } .botao-icone-topo { padding: 8px 12px; font-size: 18px; line-height: 1; } /* Conta, banners e planos consolidados em access.css. */ /* P04–P06: componentes consolidados em fluxo-shell.css. */ /* Link de texto (esqueci senha / voltar) — Fase 9.5.3 */ .link-texto { background: none; border: none; color: var(--cor-primaria-texto); font-size: 14px; cursor: pointer; margin-top: 12px; text-decoration: underline; width: 100%; text-align: center; } .link-texto:hover { color: var(--cor-primaria-escura); } /* ============================================ FASE TESTE (I2) — CARD DE META DIÁRIA ============================================ */ .card-meta { background: var(--cor-superficie); border-radius: 14px; padding: 14px 16px; margin-top: 14px; box-shadow: var(--sombra-leve); } .card-meta-topo { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--cor-primaria-texto); margin-bottom: 6px; } .card-meta .meta-editor { display: flex; gap: 8px; align-items: center; margin-top: 4px; } .card-meta .meta-editor input { flex: 1; padding: 8px 10px; border: 1px solid var(--cor-borda); border-radius: 8px; font-size: 15px; } /* FASE TESTE (I5) — onboarding "primeiros passos" */ .onboarding-passo { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--cor-fundo-suave); font-size: 14px; } .onboarding-passo:last-child { border-bottom: none; } .onboarding-passo.feito span { color: var(--cor-texto-suave); text-decoration: line-through; } /* Pós-deploy — "olhinho" de mostrar/ocultar senha (injetado por JS) */ .botao-olhinho { position: absolute; right: 8px; bottom: 6px; width: 36px; height: 36px; background: transparent; border: none; cursor: pointer; font-size: 18px; border-radius: 8px; } .botao-olhinho:hover { background: var(--cor-fundo); } /* ============================================ SELETOR DE TEMA (Minha Conta → Aparência) ============================================ */ .tema-seletor { display: flex; gap: 8px; } .tema-opcao { flex: 1; padding: 10px 6px; border-radius: 10px; border: 1px solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-texto); font: inherit; font-size: 14px; cursor: pointer; } .tema-opcao.ativa { border-color: var(--cor-primaria-texto); background: var(--cor-fundo-suave); font-weight: 600; } :root[data-tema="escuro"] :focus-visible { outline-color: #94a3b8; } /* Revisão local: navegação completa e painel Meu Veículo. */ .paginacao-financeiro { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 20px 0; font-size: 14px; } .paginacao-financeiro[hidden], .veiculo-historico[hidden] { display: none; } .paginacao-financeiro button { min-height: 40px; padding: 8px 16px; border: 1px solid var(--cor-borda); border-radius: 8px; background: var(--cor-superficie); color: var(--cor-texto); cursor: pointer; } .paginacao-financeiro button:disabled { opacity: .5; cursor: default; } /* Embalo / Fluxo: marca integrada. O vento invade apenas a primeira haste do m. */ .embalo-marca { --marca-tamanho: 36px; display: inline-flex; align-items: center; isolation: isolate; font-size: var(--marca-tamanho); line-height: 1; font-family: 'Segoe UI', Arial, sans-serif; font-weight: 800; letter-spacing: -.065em; white-space: nowrap; color: inherit; } .embalo-marca img { width: 1.3em; height: 1.23em; flex: 0 0 1.3em; position: relative; z-index: 2; object-fit: contain; } .embalo-marca > span { margin-left: -.47em; position: relative; z-index: 1; padding-bottom: .02em; } .embalo-assinatura { font-size: 11px; font-weight: 400; letter-spacing: .02em; } .embalo-login-marca { margin: 0 !important; } .embalo-login-marca .embalo-marca { --marca-tamanho: 48px; } .topo-marca .embalo-marca { --marca-tamanho: 26px; } /* Tokens medidos nos dois temas; laranja reservado à ação principal. */ .veiculo-painel { --veiculo-canvas:var(--cor-fundo); --veiculo-bg:var(--cor-superficie); --veiculo-line:var(--cor-borda); --veiculo-text:var(--cor-texto); --veiculo-muted:var(--cor-texto-suave); --veiculo-accent:var(--cor-primaria-texto); --veiculo-tint:var(--cor-fundo-suave); --veiculo-alert-bg:var(--tom-ambar-suave); --veiculo-alert-line:var(--tom-ambar-borda); --veiculo-alert-text:var(--tom-ambar-forte); --veiculo-focus:var(--cor-foco); color:var(--veiculo-text); } .veiculo-painel [hidden] { display: none !important; } .veiculo-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 28px; } .veiculo-painel h1 { font-size: clamp(30px, 3vw, 44px); line-height: 1.14; margin: 9px 0 7px; letter-spacing: -1.4px; font-weight: 750; } .veiculo-painel h2 { font-size: 20px; margin: 0; letter-spacing: -.55px; line-height: 1.3; } .veiculo-eyebrow { color: var(--veiculo-muted); font-size: 10px; letter-spacing: 1.5px; font-weight: 600; } .veiculo-cabecalho p { font-size: 14px; line-height: 1.55; color: var(--veiculo-muted); margin: 0; } .veiculo-topo-acoes { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .veiculo-tema, .veiculo-conta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; background: transparent; color: var(--veiculo-text); min-width: 44px; min-height: 44px; cursor: pointer; } .veiculo-conta { font-size: 13px; font-weight: 600; } #veiculo-conta-nome { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #veiculo-conta-avatar { display: grid; place-items: center; border-radius: 50%; width: 42px; height: 42px; color: var(--veiculo-accent); background: var(--veiculo-tint); } .veiculo-prioridade { display: flex; align-items: center; gap: 20px; padding: 24px; margin-bottom: 24px; background: var(--veiculo-alert-bg); border: 1px solid var(--veiculo-alert-line); border-radius: 12px; } .veiculo-prioridade-icone { display: grid; place-items: center; width: 60px; height: 60px; flex: 0 0 60px; background: color-mix(in srgb, #f5aa43 18%, transparent); border-radius: 50%; color: var(--veiculo-alert-text); } .veiculo-prioridade-resumo { flex: 1 1 auto; min-width: 0; } .veiculo-prioridade-resumo > span { display: block; font-size: 12px; color: var(--veiculo-alert-text); margin-bottom: 5px; } .veiculo-prioridade h2 { font-size: 20px; letter-spacing: -.45px; } .veiculo-prioridade p { font-size: 13px; line-height: 1.6; margin: 5px 0 0; } .veiculo-prioridade-apoio { flex: 0 1 235px; border-left: 1px solid var(--veiculo-alert-line); padding-left: 24px; color: var(--veiculo-alert-text); } .veiculo-registrar, .veiculo-painel .botao-principal { background: #f56820; color: #251308; border: 1px solid #f56820; border-radius: 8px; min-height: 48px; padding: 11px 18px; font-weight: 750; font-size: 13px; cursor: pointer; } .veiculo-registrar { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: 0 0 auto; } .veiculo-registrar > span { font-size: 24px; line-height: 1; font-weight: 400; } .veiculo-registrar:disabled { opacity: .5; cursor: default; } .veiculo-registrar:hover:not(:disabled) { background: #ff823f; } .veiculo-prioridade[data-estado="vencida"] { border-color: #b84a2b; } .veiculo-prioridade[data-estado="vencida"] #veiculo-prioridade-detalhe { color: var(--veiculo-alert-text); font-weight: 700; } .veiculo-painel .veiculo-grid-desktop { display: grid; grid-template-columns: minmax(255px, .94fr) minmax(0, 2.25fr); gap: 20px; align-items: stretch; } .veiculo-painel #conteudo-veiculo, .veiculo-registros { background: var(--veiculo-bg); border: 1px solid var(--veiculo-line); border-radius: 12px; box-shadow: none; min-width: 0; } .veiculo-painel #conteudo-veiculo { padding: 6px; } .veiculo-painel .card-veiculo { background: transparent; color: var(--veiculo-text); padding: 0; border: 0; box-shadow: none; margin: 0; border-radius: 0; } .veiculo-painel #card-veiculo-foto { width: 100%; height: auto; aspect-ratio: 1.6; border-radius: 8px 8px 0 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; background: var(--veiculo-tint); color: var(--veiculo-muted); overflow: hidden; margin: 0; } .veiculo-painel #card-veiculo-foto img { width: 100%; height: 100%; object-fit: cover; } .veiculo-painel #card-veiculo-foto span { font-size: 14px; font-weight: 600; } .veiculo-painel #card-veiculo-foto small { font-size: 11px; } .veiculo-painel .card-veiculo-info { padding: 16px 14px 0; } .veiculo-painel .card-veiculo-modelo { color: var(--veiculo-text); font-size: 24px; font-weight: 750; line-height: 1.15; overflow-wrap: anywhere; margin: 0 0 8px; } .card-veiculo-identificacao { display: flex; gap: 12px; align-items: center; font-size: 15px; } .veiculo-painel .card-veiculo-apelido { color: var(--veiculo-muted); font-size: 12px; font-weight: 400; line-height: 1.5; margin: 7px 0 0; overflow-wrap: anywhere; } .veiculo-painel .card-veiculo-dados { margin: 12px 14px 0; border-top: 1px solid var(--veiculo-line); padding: 14px 0 0; display: block; } .veiculo-painel .dado-rotulo { color: var(--veiculo-muted); font-size: 12px; } .veiculo-painel .dado-valor { color: var(--veiculo-text); font-size: 30px; font-weight: 750; letter-spacing: -.8px; font-variant-numeric: tabular-nums; margin-top: 3px; } .veiculo-painel .acoes-veiculo { margin: 16px 14px 18px; } .veiculo-painel .botao-secundario { display: inline-flex; gap: 10px; align-items: center; justify-content: center; color: var(--veiculo-accent); background: transparent; border: 1px solid var(--veiculo-line); border-radius: 7px; min-height: 44px; padding: 10px 14px; font-size: 13px; cursor: pointer; } .veiculo-painel .acoes-veiculo button { width: 100%; } .veiculo-checklist { background: var(--veiculo-tint); border-radius: 9px; padding: 16px; margin: 0; color: var(--veiculo-accent); } .veiculo-checklist > div { display: flex; align-items: center; gap: 18px; } .veiculo-checklist svg { flex: 0 0 28px; } .veiculo-checklist h3 { margin: 0 0 4px; font-size: 13px; color: var(--veiculo-text); } .veiculo-checklist p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--veiculo-muted); } .veiculo-checklist button { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--veiculo-bg); color: var(--veiculo-accent); border: 1px solid color-mix(in srgb, var(--veiculo-accent) 45%, transparent); border-radius: 7px; padding: 8px 16px; min-height: 44px; font-size: 13px; font-weight: 700; cursor: pointer; margin-top: 15px; } .veiculo-checklist button span { font-size: 24px; line-height: 1; } .veiculo-cuidado { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--veiculo-muted); font-size: 10px; line-height: 1.5; padding: 14px; margin: 0; } .veiculo-cuidado img { width: 20px; height: 20px; } .veiculo-abas { display: flex; gap: 26px; margin: 0 24px; border-bottom: 1px solid var(--veiculo-line); } .veiculo-abas button { position: relative; min-height: 60px; padding: 0 5px; border: 0; background: transparent; color: var(--veiculo-muted); font-size: 15px; cursor: pointer; } .veiculo-abas button[aria-selected="true"] { color: var(--veiculo-accent); font-weight: 700; } .veiculo-abas button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--veiculo-accent); border-radius: 3px 3px 0 0; } .veiculo-historico, .veiculo-painel #secao-manutencoes { padding: 26px 24px 24px; margin: 0; background: transparent; border: 0; box-shadow: none; min-width: 0; } .veiculo-historico-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px; } .veiculo-historico-topo span, .veiculo-historico-topo p { display: block; color: var(--veiculo-muted); font-size: 12px; line-height: 1.5; margin: 5px 0 0; } #manutencoes-total-registros { font-size: 11px; } .veiculo-custo-total { text-align: right; flex-shrink: 0; } .veiculo-custo-total span { margin-top: 0; } .veiculo-custo-total strong { display: block; font-size: 28px; letter-spacing: -.9px; margin-top: 4px; font-variant-numeric: tabular-nums; } .veiculo-tabela-scroll { overflow-x: auto; } .veiculo-tabela:has(td.texto-vazio) { min-width: 0; table-layout: fixed; } .veiculo-tabela:has(td.texto-vazio) thead, .veiculo-historico:has(td.texto-vazio) .veiculo-tabela-ajuda { display: none; } .veiculo-tabela td.texto-vazio { white-space: normal; overflow-wrap: anywhere; text-align: left; } .veiculo-tabela-ajuda { display: none; } .veiculo-tabela { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; } .veiculo-tabela thead { background: var(--veiculo-tint); } .veiculo-tabela th { color: var(--veiculo-muted); font-weight: 600; font-size: 12px; } .veiculo-tabela th, .veiculo-tabela td { padding: 15px 10px; border-bottom: 1px solid var(--veiculo-line); white-space: nowrap; } .veiculo-tabela th:first-child { border-radius: 8px 0 0 0; } .veiculo-tabela th:last-child { border-radius: 0 8px 0 0; } .veiculo-tabela td:nth-child(2) { white-space: normal; min-width: 140px; } .veiculo-tabela td { line-height: 1.55; font-variant-numeric: tabular-nums; } .veiculo-tabela small { display: block; color: var(--veiculo-muted); margin-top: 4px; font-size: 11px; white-space: normal; max-width: 220px; } .veiculo-comprovante { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 10px; border: 1px solid var(--veiculo-line); border-radius: 7px; background: transparent; color: var(--veiculo-accent); font-size: 11px; cursor: pointer; } .veiculo-historico-nota { margin: 28px 0 0; padding: 18px; border-radius: 8px; background: var(--veiculo-tint); color: var(--veiculo-muted); font-size: 12px; line-height: 1.6; } .veiculo-painel .cabecalho-secao { margin: 0 0 8px; } .veiculo-proximas-nota { font-size: 13px; color: var(--veiculo-muted); line-height: 1.6; margin: 0 0 12px; } .veiculo-painel .item-manutencao { background: transparent; border: 0; border-bottom: 1px solid var(--veiculo-line); border-radius: 0; padding: 20px 0; box-shadow: none; gap: 12px; flex-wrap: wrap; } .veiculo-painel .item-manutencao:last-child { border-bottom: 0; } .veiculo-painel .manut-info { min-width: 140px; } .veiculo-painel .manut-tipo { color: var(--veiculo-text); font-size: 14px; } .veiculo-painel .manut-detalhes { color: var(--veiculo-muted); font-size: 12px; line-height: 1.6; } .veiculo-painel .manut-icone { color: var(--veiculo-accent); } .veiculo-painel .manut-excluir { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; color: var(--veiculo-muted); border: 0; background: transparent; cursor: pointer; border-radius: 6px; } .veiculo-painel .manut-excluir:hover { background: var(--veiculo-tint); } .veiculo-painel .manut-status { font-size: 10px; letter-spacing: .3px; padding: 5px 8px; } .veiculo-painel .status-ok { background: #dcfce7; color: #166534; } .veiculo-painel .status-atencao { background: #fef3c7; color: #854d0e; } .veiculo-painel .status-vencido { background: #fee2e2; color: #991b1b; } .veiculo-painel .texto-vazio { color: var(--veiculo-muted); font-size: 14px; line-height: 1.6; } .veiculo-painel .link-inline { color: var(--veiculo-accent); min-height: 40px; } .veiculo-estado { padding: 32px 24px; color: var(--veiculo-muted); font-size: 14px; } .veiculo-painel button:focus-visible, .veiculo-painel [tabindex]:focus-visible { outline: 3px solid var(--veiculo-focus); outline-offset: 3px; } .menu-item:focus-visible, .paginacao-financeiro button:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; } :root[data-tema="escuro"] .menu-item:focus-visible, :root[data-tema="escuro"] .paginacao-financeiro button:focus-visible { outline-color: #ff9b54; } .veiculo-grid-desktop:has(> .veiculo-registros[hidden]) { grid-template-columns: minmax(0, 1fr); } .veiculo-painel #conteudo-veiculo > .botao-secundario { margin: 0 24px 24px; } @media (min-width: 900px) { .veiculo-painel { max-width:1440px; } } @media (min-width: 900px) and (max-width: 1240px) { .veiculo-prioridade-apoio { display: none; } .veiculo-painel .veiculo-grid-desktop { grid-template-columns: minmax(240px, .9fr) minmax(0, 2fr); gap: 16px; } .veiculo-historico-topo { flex-direction: column; } .veiculo-custo-total { text-align: left; } .veiculo-topo-acoes { gap: 6px; } #veiculo-conta-nome { display: none; } } @media (max-width: 899px) { .veiculo-painel { padding: 22px 0; } .veiculo-cabecalho { align-items: flex-start; margin-bottom: 22px; } .veiculo-cabecalho p { font-size: 13px; } .veiculo-topo-acoes { display: none; } .veiculo-eyebrow { font-size: 9px; letter-spacing: 1.1px; } .veiculo-prioridade { flex-wrap: wrap; gap: 14px; padding: 18px; } .veiculo-prioridade-icone { width: 44px; height: 44px; flex-basis: 44px; } .veiculo-prioridade-resumo { flex: 1 1 calc(100% - 60px); } .veiculo-prioridade h2 { font-size: 18px; } .veiculo-prioridade-apoio { display: none; } .veiculo-registrar { width: 100%; } .veiculo-painel .veiculo-grid-desktop { grid-template-columns: minmax(0, 1fr); gap: 20px; } .veiculo-painel #card-veiculo-foto { max-height: 310px; } .veiculo-historico, .veiculo-painel #secao-manutencoes { padding: 22px 16px; } .veiculo-abas { margin: 0 16px; gap: 22px; } .veiculo-historico-topo { align-items: flex-start; flex-direction: column; gap: 16px; } .veiculo-custo-total { text-align: left; } .veiculo-tabela { min-width: 610px; } .veiculo-tabela-ajuda { display: block; color: var(--veiculo-muted); font-size: 11px; line-height: 1.6; margin: 0 0 12px; } .paginacao-financeiro { gap: 10px; justify-content: center; flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { .veiculo-painel *, .menu-item { transition: none !important; animation: none !important; } }