/* Integração do modelo V8.4.8 com o sistema real — somente correções e estados que o modelo não define. O visual aprovado está em /portal.css e não é sobrescrito aqui. */ /* Correção: no modelo, "N/A" selecionado não tinha destaque no checklist do Gestor. */ .choice.na { background: #f1f3f6; color: #3f4756; border-color: #aab3bf; } /* Ações que o sistema ainda não executa ficam visíveis, porém desabilitadas. */ button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; } button:disabled:not(.op-answer) { opacity: .55; } .flow-form-error { margin: 8px 0 0; color: #b42318; font-size: 12px; font-weight: 700; } .auth-glass .flow-form-error { margin: 0 0 10px; } /* ===== Tela única (regra do PO, 02/10/2026) ===== O ambiente do Gestor ocupa exatamente a altura da tela. A página não rola: só a área de dados (linhas das tabelas, editor de seções dos modelos) rola por dentro, com cabeçalhos fixos. */ #appShell:not(.hidden) { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr); } #appShell .sidebar { height: 100%; } #appShell .main { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; } #appShell .appbar { flex-shrink: 0; } #appShell .content { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 14px 18px; } #appShell .app-page.active { flex: 1; min-height: 0; display: flex; flex-direction: column; } #appShell .app-page.active > * { flex-shrink: 0; } #appShell :is(#p-dashboard, #p-equipamentos, #p-usuarios, #p-pendencias, #p-historico) > .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; } #appShell :is(#flowReportTable, #flowEquipmentTable, #flowAuditTable) { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 0; } #appShell :is(.flow-tablewrap, .flow-audit-scroll) { flex: 1; min-height: 0; overflow: auto; } #appShell .flow-page-head { margin-bottom: 10px; } /* Painel / Relatórios: métricas e linhas compactas para mostrar mais registros. */ #p-dashboard .flow-metrics { margin-bottom: 8px; } #p-dashboard .flow-metric { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "badge value"; align-items: center; padding: 9px 14px; border-radius: 13px; } #p-dashboard .flow-metric small { grid-area: label; } #p-dashboard .flow-metric strong { grid-area: value; margin: 0; font-size: 26px; line-height: 1; } #p-dashboard .flow-metric .flow-badge { grid-area: badge; justify-self: start; margin-top: 5px; } #p-dashboard > .card { padding: 12px 14px; } #flowReportMeta { margin: 6px 0 !important; } :is(#flowReportTable, #flowEquipmentTable, #p-usuarios, #p-pendencias) .flow-table td { padding-top: 6px; padding-bottom: 6px; } :is(#flowReportTable, #flowEquipmentTable) .flow-table td .flow-sub { display: inline; margin: 0 0 0 6px; } #flowReportTable .flow-table td .btn { padding: 4px 10px !important; } /* Modelos de Checklist: topo e lista fixos; só as seções/perguntas rolam. */ #p-modelos .flow-list-layout { flex: 1; min-height: 0; align-items: stretch; } #p-modelos .flow-model-list { position: static; max-height: none; min-height: 0; overflow: auto; } #p-modelos .flow-model-editor { min-height: 0; display: flex; flex-direction: column; overflow: hidden; } #p-modelos .flow-model-editor > * { flex-shrink: 0; } #p-modelos .flow-editor-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: 10px; padding-right: 4px; } /* Celular: o modelo vira gaveta; o shell continua com a altura da tela. */ @media (max-width: 650px) { #appShell:not(.hidden) { display: flex; flex-direction: column; } #appShell .main { flex: 1; } #appShell .content { padding: 10px; } #p-modelos .flow-list-layout { grid-template-rows: auto minmax(0, 1fr); } #p-modelos .flow-model-list { margin: 0 0 8px; } } /* Menu do usuário (canto superior direito): Trocar de usuário / Sair. */ .user-menu { position: relative; } .user-menu-trigger { appearance: none; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #66766f; font: inherit; font-size: 13.33px; padding: 6px 10px; cursor: pointer; } .user-menu-trigger::after { content: " ▾"; font-size: 10px; } .user-menu-trigger:hover, .user-menu-trigger[aria-expanded="true"] { border-color: #dbe6e1; background: #f8f9fc; color: #14231f; } .user-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 120; min-width: 210px; padding: 6px; border: 1px solid #e2e5ed; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(23, 26, 43, .16); } .user-menu-list button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: #171a2b; font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; } .user-menu-list button:hover, .user-menu-list button:focus-visible { background: #f1f2fb; color: #3e4095; } .user-menu-list button[data-action="logout"] { color: #b42318; } .op-topbar .user-menu-list { top: calc(100% + 8px); } /* ===== Modais em tela única: nenhum modal rola (nem vertical, nem horizontal) ===== */ .flow-modal-backdrop { padding: 10px; } .flow-modal { display: flex; flex-direction: column; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); overflow: hidden; padding: 14px 16px; } .flow-modal-head { flex-shrink: 0; margin-bottom: 10px; padding-bottom: 8px; } .flow-modal-head h2 { font-size: 17px; margin: 0; } #flowModalBody { min-height: 0; } .flow-modal .field label { font-size: 11px; margin-bottom: 3px; } .flow-modal .field :is(input:not([type="checkbox"]):not([type="file"]), select) { height: 34px; padding: 5px 9px; font-size: 13px; border-radius: 9px; } .flow-modal .field input[type="file"] { padding: 5px 6px; font-size: 12px; border-radius: 9px; } .flow-modal .field textarea { padding: 6px 9px; font-size: 13px; border-radius: 9px; resize: none; } .flow-modal .flow-form-grid { gap: 7px 10px; } .flow-modal .flow-form-grid.dense { grid-template-columns: repeat(4, minmax(0, 1fr)); } .flow-modal-actions { flex-shrink: 0; margin-top: 10px; } .flow-modal .flow-action-grid button { padding: 10px 12px; } .flow-modal .flow-tablewrap { overflow: visible; } .flow-modal .flow-table { min-width: 0; table-layout: fixed; } .flow-modal .flow-table :is(th, td) { white-space: normal; overflow-wrap: anywhere; padding: 6px 8px; } .flow-modal .card { margin: 0; } .flow-modal .flow-correction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .flow-modal .flow-correction-grid .flow-form-grid { grid-template-columns: 1fr 1fr; } .flow-modal p.muted { margin: 0 0 8px; } /* Tabelas das telas: sem largura mínima fixa (o modelo usava 880 px); o texto quebra. */ #appShell .flow-table { min-width: 0 !important; } #appShell .flow-table td { overflow-wrap: anywhere; } #appShell .flow-audit-scroll .flow-table td { white-space: normal; } @media (max-width: 1100px) { .flow-modal .flow-form-grid.dense { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .flow-modal { padding: 12px; border-radius: 16px; } .flow-modal .flow-form-grid, .flow-modal .flow-form-grid.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow-modal .flow-action-grid { grid-template-columns: 1fr 1fr; } .flow-modal .flow-action-grid button span { display: none; } .flow-modal .flow-correction-grid { grid-template-columns: 1fr; } .flow-modal .flow-correction-grid .card { padding: 8px !important; } .flow-modal .flow-correction-grid .flow-form-grid { grid-template-columns: 1fr 1.4fr; } .flow-modal .flow-table { font-size: 11px; } /* Telas: no celular cada linha vira um cartão com rótulos (sem rolagem lateral). */ #appShell .flow-table thead { display: none; } #appShell .flow-table, #appShell .flow-table tbody, #appShell .flow-table tr, #appShell .flow-table td { display: block; width: 100%; } #appShell .flow-table tr { padding: 8px 10px; border-bottom: 1px solid #eceef3; } #appShell .flow-table td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 3px 0; border: 0; text-align: left; } #appShell .flow-table td::before { content: attr(data-label); color: #636a7d; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; } #appShell .flow-table td[colspan] { display: block; } #appShell .flow-table td[colspan]::before { display: none; } .flow-modal .flow-table thead { display: table-header-group; } } /* Segurança: se uma tela de formulário não couber (ex.: celular), só a área da tela rola — topo, menu e rodapé continuam fixos e nenhum conteúdo fica escondido. */ #appShell .app-page.active { overflow-x: hidden; overflow-y: auto; } /* Dados da Empresa compacto para caber na tela. */ #p-empresa .card { padding: 14px 16px; } #p-empresa .flow-form-grid { gap: 8px 10px; } #p-empresa .field label { margin-bottom: 3px; } #p-empresa .field input:not([type="file"]):not([type="range"]) { height: 38px; padding: 7px 10px; } #p-empresa .flow-modal-actions { margin-top: 10px; } @media (max-width: 650px) { /* Celular: só o que os blocos de ≤760px não cobrem (auditoria 03/10/2026). */ #appShell .flow-table td .flow-badge { display: inline-block; } } /* Telas públicas: a área da Consulta desconta o rodapé fixo (no modelo sobravam 38 px de rolagem). */ #consulta .consult-v71-shell { min-height: calc(100vh - var(--unified-footer-h, 38px)); min-height: calc(100dvh - var(--unified-footer-h, 38px)); } @media (max-width: 650px) { /* Consulta com resultado em tela única no celular. */ #consulta.has-result .consult-v71-intro { display: none; } #consultResult .consult-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } #consultResult .consult-result-grid > div { padding: 7px 9px; } #consultResult .consult-result-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } #consultResult .consult-result-actions .btn { min-height: 36px; padding: 6px 4px; font-size: 11.5px; line-height: 1.15; } } #consulta.has-result .consult-v71-shell { padding-bottom: 8px; } /* App operacional: no modelo a navegação inferior ficava parcialmente sob o rodapé fixo. A barra e a área rolável passam a respeitar a altura do rodapé (--unified-footer-h do modelo). */ #operatorApp .op-bottom-nav { bottom: calc(var(--unified-footer-h, 38px) + 7px) !important; } #operatorApp .op-main { bottom: calc(62px + var(--unified-footer-h, 38px)) !important; } /* App operacional: com "Insuficiente" aberto, as respostas viram uma linha compacta para a observação caber na tela. */ .op-question-card.issue-open .op-answer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } .op-question-card.issue-open .op-answer { min-height: 0 !important; padding: 8px 6px !important; flex-direction: column; justify-content: center; text-align: center; } .op-question-card.issue-open .op-answer small { display: none !important; } .op-question-card.issue-open .op-answer span { display: none !important; } .op-question-card.issue-open .op-answer.bad { outline: 2px solid #ed3237; outline-offset: 1px; } .op-question-card.issue-open > p { display: none; } /* Modelos: com a tela fixa, o cabeçalho do editor não precisa mais "grudar" (o deslocamento de 66 px do modelo o empurrava sobre os campos). */ #p-modelos .flow-editor-head { position: static; top: auto; } /* Gestor › Fazer Checklist: observações mais baixas para os três itens caberem na tela. */ #p-checklist .question textarea { height: 52px; min-height: 0; padding: 7px 9px !important; margin-top: 6px !important; resize: none; } #p-checklist #c3 .question { margin-bottom: 8px; } /* Home (V8.4.12): endereço, telefone e e-mail sempre em uma única linha. Se faltar espaço, só o endereço é abreviado com "…" (texto completo no title); telefone e e-mail não encolhem. */ #home .home-company-contact { flex-wrap: nowrap; white-space: nowrap; } #home .home-contact-item { white-space: nowrap; } #home .home-contact-address { flex: 0 1 auto; min-width: 0; overflow: hidden; } #home .home-contact-address > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #home a.home-contact-item { flex: 0 0 auto; } /* Home no celular (PO, 02/10/2026): os 3 cards ficam no centro vertical da área entre o topo e o rodapé; título e contato ocupam o espaço acima. Usa a altura visível real (svh, já sem a barra do navegador). */ @media (max-width: 760px) and (min-height: 620px) { #home.codex-home .codex-main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); align-content: stretch; box-sizing: border-box; height: calc(100vh - 70px - var(--unified-footer-h, 32px)); height: calc(100svh - 70px - var(--unified-footer-h, 32px)); padding-top: 12px; padding-bottom: 12px; } #home.codex-home .codex-copy { grid-row: 1; align-self: end; min-height: 0; } #home.codex-home .codex-access { grid-row: 2; } } /* Celulares mais baixos: título e cards mais compactos para o texto caber na metade de cima. */ @media (max-width: 760px) and (min-height: 620px) and (max-height: 860px) { #home.codex-home .codex-copy { padding-bottom: 10px; } #home.codex-home .codex-copy h1 { font-size: clamp(26px, 8.2vw, 31px); margin: 4px 0 8px; } #home.codex-home .codex-copy p { line-height: 1.4; } #home.codex-home .codex-access { gap: 8px; } #home.codex-home .codex-option { padding-top: 11px; padding-bottom: 11px; } } /* Celulares baixos (ex.: 375×667): compactação extra para o título não encostar no topo. */ @media (max-width: 760px) and (min-height: 620px) and (max-height: 700px) { #home.codex-home .codex-main { padding-top: 8px; padding-bottom: 8px; } #home.codex-home .codex-copy { padding-bottom: 6px; } #home.codex-home .codex-copy h1 { font-size: 24px; margin: 0 0 6px; } #home.codex-home .codex-option { padding-top: 8px; padding-bottom: 8px; } } /* Logo da barra do topo (Home, Operação, Gestão, Consulta): centralizada na vertical e inteira. No modelo a caixa tinha 56 px e a imagem 75 px presa ao topo, cortando "EMPREENDIMENTOS". A caixa passa a ter a altura da barra e a imagem mantém o tamanho do modelo. */ #home.codex-home .portal-topbar-logo, .auth-topbar .portal-topbar-logo, .consult-topbar .portal-topbar-logo { height: 100% !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; } #home.codex-home .portal-topbar-logo img, .auth-topbar .portal-topbar-logo img, .consult-topbar .portal-topbar-logo img { width: 100% !important; height: auto !important; max-height: calc(100% - 8px) !important; object-fit: contain !important; object-position: left center !important; } /* Logo da sidebar (pedido do PO, 02/10/2026): maior e sem caixa branca, fundo transparente. */ #appShell .sidebrand #sideLogo { width: 168px !important; height: 92px !important; max-width: 100% !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } #appShell .sidebrand #sideLogo img { padding: 0 !important; } /* Home em tela inteira (PO, 02/10/2026). O modelo reservava a faixa da barra de rolagem em todas as telas (scrollbar-gutter: stable), que aparecia como uma barra clara na lateral; as telas já cabem no viewport. */ html { scrollbar-gutter: auto !important; } /* A área do rodapé (padding da shell) entra na altura da tela em vez de somar a ela. */ #home.codex-home .codex-shell { box-sizing: border-box !important; } /* Telas de computador baixas (ex.: 1366×657 com a barra do navegador): título e cards mais compactos. */ /* Gestor em largura total (PO, 02/10/2026): o bloco de conteúdo ocupa toda a área ao lado da sidebar em todos os menus. No modelo, max-width: 1450px + margin: auto dentro da coluna flex encolhia o bloco e deixava faixas vazias nos lados. */ #appShell .content { max-width: none !important; width: 100% !important; margin: 0 !important; } /* Fotos dos itens insuficientes (checklist, revisão, visualização e correção). */ .flow-photo-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .flow-photo-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line, #d8dbe5); vertical-align: middle; } .flow-photo-link { display: inline-block; margin-left: 6px; vertical-align: middle; } .flow-corr-photo { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .flow-corr-photo .btn { padding: 5px 9px; font-size: 10px; } #flowPhotoState .flow-photo-thumb { width: 34px; height: 34px; margin-right: 4px; } /* Contato da empresa abaixo dos cards, centralizado e 30% maior (PO, 02/10/2026). Continua em uma única linha: só o endereço é abreviado com "…" se faltar espaço. */ #home.codex-home .home-company-contact { justify-content: center !important; width: 100% !important; max-width: 100% !important; margin: 18px 0 0 !important; } #home.codex-home .home-contact-item { min-height: 44px !important; padding: 9px 13px !important; gap: 9px !important; font-size: 13.5px !important; border-radius: 13px !important; } #home.codex-home .home-contact-icon { width: 25px !important; height: 25px !important; flex-basis: 25px !important; font-size: 14px !important; border-radius: 8px !important; } @media (max-width: 760px) { #home.codex-home .home-company-contact { margin-top: 10px !important; gap: 5px !important; } #home.codex-home .home-contact-item { min-height: 34px !important; padding: 6px 8px !important; gap: 5px !important; font-size: clamp(9px, 1.95vw, 11.7px) !important; border-radius: 10px !important; } #home.codex-home .home-contact-icon { width: 19px !important; height: 19px !important; flex-basis: 19px !important; font-size: 10px !important; } } @media (max-width: 430px) { #home.codex-home .home-company-contact { gap: 4px !important; } #home.codex-home .home-contact-item { min-height: 30px !important; padding: 5px !important; gap: 3px !important; font-size: clamp(7.5px, 1.85vw, 9px) !important; } #home.codex-home .home-contact-icon { display: none !important; } } /* Celular: os cards continuam no centro; o contato fica logo abaixo deles. */ @media (max-width: 760px) and (min-height: 620px) { #home.codex-home .home-company-contact { grid-row: 3; align-self: center; margin-top: 0 !important; } } /* Telefone e e-mail nunca encolhem; só o endereço é abreviado com "…" quando a largura não basta. */ #home.codex-home a.home-contact-item { flex: 0 0 auto !important; } #home.codex-home .home-contact-address { flex: 0 1 auto !important; min-width: 0 !important; overflow: hidden !important; } /* Home: endereço, telefone e e-mail sem contorno (PO, 02/10/2026). A borda fica transparente para não mudar as medidas. */ #home.codex-home .home-contact-item, #home.codex-home a.home-contact-item:hover, #home.codex-home a.home-contact-item:focus-visible { border-color: transparent !important; } /* Operação no computador (PO, 02/10/2026 — opção "Coluna central"): conteúdo numa coluna centralizada de 760 px e, a partir de 1100 px, o menu Checklist / Meus / Pendências / Sair vira abas no topo. Celular sem mudança. */ @media (min-width: 761px) { #operatorApp .op-page { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; } #operatorApp .op-bottom-nav { width: min(760px, calc(100% - 32px)) !important; left: 50% !important; right: auto !important; transform: translateX(-50%); } } @media (min-width: 1100px) { #operatorApp .op-bottom-nav { position: fixed !important; top: 11px !important; bottom: auto !important; width: auto !important; grid-template-columns: repeat(4, auto) !important; gap: 4px !important; padding: 3px !important; border-radius: 12px !important; z-index: 30 !important; } #operatorApp .op-bottom-nav button { flex-direction: row !important; gap: 7px !important; height: 32px !important; padding: 0 16px !important; font-size: 13px !important; } #operatorApp .op-bottom-nav button b { font-size: 12px !important; } #operatorApp .op-main { bottom: var(--unified-footer-h, 38px) !important; } } @media (min-width: 761px) { #operatorApp .op-bottom-nav { transform: translateX(-50%) !important; } } @media (min-width: 1100px) { #operatorApp .op-bottom-nav { height: auto !important; min-height: 0 !important; top: 12px !important; } #operatorApp .op-bottom-nav button { min-height: 0 !important; } } /* Com o menu no topo não é preciso reservar espaço embaixo; em telas de computador baixas, respostas e observação mais compactas para a pergunta caber sem rolagem. */ @media (min-width: 1100px) { #operatorApp .op-main { padding-bottom: 16px !important; } } @media (min-width: 761px) and (max-height: 800px) { #operatorApp .op-main { padding-top: 14px !important; } #operatorApp .op-answer { min-height: 0 !important; height: auto !important; padding-top: 10px !important; padding-bottom: 10px !important; } #operatorApp .op-answer-grid { min-height: 0 !important; } #operatorApp .op-issue-box { margin-top: 8px !important; } #operatorApp .op-issue-box textarea { min-height: 56px !important; height: 56px !important; } #operatorApp .op-question-number { display: none !important; } } /* Revisão no computador: só a lista de itens rola (área de dados); resultado e "Finalizar" ficam sempre visíveis. */ @media (min-width: 761px) { #operatorApp .op-review-list { max-height: max(96px, calc(100svh - 500px)); overflow-y: auto; overscroll-behavior: contain; } } @media (min-width: 761px) and (max-width: 1099px) and (max-height: 800px) { #operatorApp .op-main { padding-top: 4px !important; } } @media (min-width: 761px) and (max-width: 1099px) { #operatorApp .op-review-list { max-height: max(96px, calc(100svh - 650px)); } } /* Topo "Pílula flutuante" (proposta A, aprovada pelo PO em 02/10/2026) — Home, Operação, Gestão e Consulta, computador e celular: a barra deixa de ser uma caixa; o logo fica numa pílula de vidro no centro e o Voltar é um botão redondo branco no lado direito. O nome da tela fica na etiqueta da página (ex.: Gestão - Veículos e Equipamentos). */ #home.codex-home .codex-header.portal-topbar, .auth-topbar.portal-topbar, .consult-topbar.portal-topbar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; align-items: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; } .portal-topbar-pill { grid-column: 2; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 22px; border-radius: 999px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); min-width: 0; } .portal-topbar-pill .portal-topbar-brand { height: 100% !important; width: auto !important; margin: 0 !important; } #home.codex-home .portal-topbar-pill .portal-topbar-logo, .auth-topbar .portal-topbar-pill .portal-topbar-logo, .consult-topbar .portal-topbar-pill .portal-topbar-logo { width: 82px !important; height: 100% !important; } #home.codex-home .portal-topbar-pill .portal-topbar-logo img, .auth-topbar .portal-topbar-pill .portal-topbar-logo img, .consult-topbar .portal-topbar-pill .portal-topbar-logo img { max-height: calc(100% - 10px) !important; object-position: center !important; } .auth-topbar > .portal-back, .consult-topbar > .portal-back { grid-column: 3; justify-self: end; width: 42px !important; height: 42px !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; display: grid !important; place-items: center !important; font-size: 18px !important; line-height: 1 !important; } @media (max-width: 760px) { .portal-topbar-pill { height: 46px; gap: 9px; padding: 0 18px; } #home.codex-home .portal-topbar-pill .portal-topbar-logo, .auth-topbar .portal-topbar-pill .portal-topbar-logo, .consult-topbar .portal-topbar-pill .portal-topbar-logo { width: 64px !important; } .auth-topbar > .portal-back, .consult-topbar > .portal-back { width: 38px !important; height: 38px !important; font-size: 16px !important; } } /* Voltar maior e branco (PO, 02/10/2026). */ .auth-topbar > .portal-back, .consult-topbar > .portal-back { width: 52px !important; height: 52px !important; background: #fff !important; color: #1b2a5c !important; border: 0 !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .28) !important; font-size: 22px !important; font-weight: 800 !important; } .auth-topbar > .portal-back:hover, .consult-topbar > .portal-back:hover { background: #eef2ff !important; color: #1b2a5c !important; } @media (max-width: 760px) { .auth-topbar > .portal-back, .consult-topbar > .portal-back { width: 46px !important; height: 46px !important; font-size: 20px !important; } } /* Consulta no celular (PO, 02/10/2026): o texto sobe para logo abaixo do topo e a caixa de pesquisa fica no centro da tela (faixas de cima e de baixo iguais). Depois do resultado (has-result) vale o layout compacto anterior. */ @media (max-width: 760px) { #consulta:not(.has-result) .consult-v71-shell { display: grid !important; grid-template-rows: minmax(max-content, 1fr) auto minmax(0, 1fr) !important; align-content: stretch !important; padding-top: 0 !important; padding-bottom: 0 !important; } #consulta:not(.has-result) .consult-v71-intro { grid-row: 1; align-self: start; padding-top: 78px !important; margin: 0 !important; } #consulta:not(.has-result) .consult-v71-workspace { grid-row: 2; align-self: center; margin: 0 !important; } } /* Logins: a área desconta o rodapé fixo, senão a página rolava a altura dele (32 px) sem nada a mostrar. */ #login-gestor .auth-stage, #login-checklist .auth-stage { box-sizing: border-box !important; min-height: calc(100vh - var(--unified-footer-h, 32px)) !important; min-height: calc(100svh - var(--unified-footer-h, 32px)) !important; } /* Home no computador (PO, 02/10/2026): o logo sai da pílula do topo e fica grande à direita do título. Só na Home; as outras telas mantêm a pílula. No celular o logo continua na pílula do topo. */ .home-hero-logo { display: none; } @media (min-width: 761px) { #home.codex-home .codex-header.portal-topbar.home-portal-topbar { display: none !important; } #home.codex-home .codex-main { grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 32px !important; } #home.codex-home .codex-copy { grid-column: 1; } #home.codex-home .home-hero-logo { display: flex; grid-column: 2; grid-row: 2; align-self: center; justify-self: end; } #home.codex-home .home-hero-logo img { display: block; height: clamp(110px, 21vh, 200px); width: auto; max-width: 34vw; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35)); } #home.codex-home .codex-access, #home.codex-home .home-company-contact { grid-column: 1 / -1 !important; } } @media (min-width: 761px) { #home.codex-home .codex-shell > .codex-main { grid-row: 2 !important; } } /* Home no celular (PO, 02/10/2026): endereço e contatos logo acima do rodapé. */ @media (max-width: 760px) and (min-height: 620px) { #home.codex-home .home-company-contact { align-self: end !important; margin-bottom: 0 !important; } } /* Celular — altura padrão do texto (PO, 02/10/2026): o texto de abertura de Home, Gestão, Operação e Consulta começa sempre a 104 px do topo da tela (logo abaixo da pílula). Na Home isso abre espaço entre o texto e os cards. */ @media (max-width: 760px) { #home.codex-home .codex-copy { align-self: start !important; margin-top: 18px !important; } #login-gestor .auth-stage, #login-checklist .auth-stage { justify-content: flex-start !important; padding-top: 101px !important; } #consulta:not(.has-result) .consult-v71-intro { padding-top: 101px !important; } } @media (max-width: 760px) { #home.codex-home .codex-main { padding-top: 12px !important; } #home.codex-home .codex-copy h1 { margin-top: 4px !important; } } /* Home no celular (PO, 02/10/2026): contato em lista — endereço, e-mail e telefone, um por linha, com letra legível. No computador continua tudo numa linha. */ @media (max-width: 760px) { #home.codex-home .home-company-contact { flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } #home.codex-home .home-contact-item { flex: 0 0 auto !important; max-width: 100% !important; min-height: 0 !important; padding: 3px 8px !important; gap: 6px !important; font-size: 12px !important; letter-spacing: 0 !important; background: transparent !important; } #home.codex-home .home-contact-icon { display: grid !important; width: 18px !important; height: 18px !important; flex: 0 0 18px !important; font-size: 10px !important; } #home.codex-home .home-contact-address { order: 1; } #home.codex-home #homeCompanyEmailLink { order: 2; } #home.codex-home #homeCompanyPhoneLink { order: 3; } } @media (max-width: 760px) { #home.codex-home .home-contact-address, #home.codex-home .home-contact-address > span:last-child { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; text-align: center !important; } #home.codex-home .home-contact-item { align-items: center !important; line-height: 1.3 !important; } } /* Celular (PO, 02/10/2026): cada item do contato em uma única linha; a letra do endereço acompanha a largura da tela. Os ícones usam a forma de texto (U+FE0E) para o iPhone não trocá-los por emoji colorido. */ @media (max-width: 760px) { #home.codex-home .home-contact-address, #home.codex-home .home-contact-address > span:last-child { white-space: nowrap !important; text-align: left !important; } #home.codex-home .home-contact-address { font-size: clamp(9.5px, 2.7vw, 12px) !important; } #home.codex-home .home-contact-icon { font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif !important; color: #9fcaff !important; } } /* Pílula do logo branca (aprovada pelo PO em 02/10/2026): o logo mantém as cores originais e destaca no fundo escuro. */ .portal-topbar-pill { background: #fff !important; border-color: #fff !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .30) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #home.codex-home .portal-topbar-pill .portal-topbar-logo img, .auth-topbar .portal-topbar-pill .portal-topbar-logo img, .consult-topbar .portal-topbar-pill .portal-topbar-logo img { filter: none !important; } /* ===== Home no computador — conceito E "Painel de vidro sobre a foto" (aprovado pelo PO em 02/10/2026) ===== A foto da frota aparece nítida; à esquerda flutua um painel de vidro com o logo (fundo branco), o título, os três acessos em linhas (Fazer checklist em destaque) e o contato. Celular sem mudança. */ .home-hero-badge { display: none; } @media (min-width: 761px) { #home.codex-home > .codex-bg { background: linear-gradient(90deg, rgba(5, 14, 32, .62) 0%, rgba(5, 14, 32, .22) 46%, rgba(5, 14, 32, .04) 75%), linear-gradient(0deg, rgba(5, 14, 32, .45), rgba(5, 14, 32, 0) 35%), url("/assets/frota-premium.jpg") center/cover no-repeat !important; } #home.codex-home .codex-shell { background: none !important; } #home.codex-home .codex-shell > .codex-main { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; align-self: center !important; justify-self: start !important; width: min(540px, 46vw) !important; max-width: none !important; margin: 16px 0 calc(var(--unified-footer-h, 38px) + 16px) clamp(24px, 4vw, 64px) !important; padding: 30px 32px !important; border-radius: 28px !important; background: rgba(10, 24, 52, .55) !important; border: 1px solid rgba(255, 255, 255, .18) !important; backdrop-filter: blur(22px) saturate(1.3) !important; -webkit-backdrop-filter: blur(22px) saturate(1.3) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, .45) !important; } #home.codex-home .codex-main > * { margin-left: 0 !important; margin-right: 0 !important; } #home.codex-home .home-hero-logo { order: 1; display: inline-flex !important; align-self: flex-start !important; padding: 12px 20px; border-radius: 14px; background: #fff; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); } #home.codex-home .home-hero-logo img { height: 52px !important; max-width: none !important; filter: none !important; } #home.codex-home .codex-copy { order: 2; max-width: none !important; width: auto !important; margin: 22px 0 0 !important; padding: 0 !important; text-align: left !important; } #home.codex-home .codex-copy h1 { font-size: clamp(34px, 3.4vw, 48px) !important; line-height: 1.04 !important; letter-spacing: -.035em !important; margin: 0 !important; } #home.codex-home .codex-copy h1 span { background: linear-gradient(90deg, #6fb4ff, #4ee0b4); -webkit-background-clip: text; background-clip: text; color: transparent !important; } #home.codex-home .codex-copy p { margin: 12px 0 0 !important; font-size: 15px !important; color: #c9d8f0 !important; } /* Acessos em linhas: ícone | título + descrição | seta. */ #home.codex-home .codex-access { order: 3; display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 22px 0 0 !important; width: 100% !important; max-width: none !important; grid-template-columns: none !important; } #home.codex-home .codex-access .codex-option { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important; column-gap: 16px !important; row-gap: 2px !important; align-items: center !important; width: 100% !important; min-height: 0 !important; height: auto !important; padding: 14px 16px !important; border-radius: 16px !important; text-align: left !important; background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(255, 255, 255, .12) !important; box-shadow: none !important; transform: none !important; } #home.codex-home .codex-access .codex-option:hover { background: rgba(255, 255, 255, .12) !important; border-color: rgba(255, 255, 255, .22) !important; } #home.codex-home .codex-access .codex-option.operator { order: -1; background: linear-gradient(135deg, #1fb488, #0d7a5b) !important; border-color: transparent !important; box-shadow: 0 14px 34px rgba(31, 180, 136, .28) !important; } #home.codex-home .codex-access .codex-option.operator:hover { filter: brightness(1.06); } #home.codex-home .codex-access .codex-option-top, #home.codex-home .codex-access .codex-option-foot { display: contents !important; } #home.codex-home .codex-access .codex-num, #home.codex-home .codex-access .codex-option-foot > span:first-child { display: none !important; } #home.codex-home .codex-access .codex-icon { grid-column: 1; grid-row: 1 / 3; width: 42px !important; height: 42px !important; margin: 0 !important; border-radius: 12px !important; background: rgba(255, 255, 255, .12) !important; border: 0 !important; } #home.codex-home .codex-access .codex-option strong { grid-column: 2; grid-row: 1; margin: 0 !important; font-size: 17px !important; line-height: 1.2 !important; } #home.codex-home .codex-access .codex-desc { grid-column: 2; grid-row: 2; margin: 0 !important; font-size: 12.5px !important; line-height: 1.35 !important; color: #c9d8f0 !important; } #home.codex-home .codex-access .operator .codex-desc { color: #e4fff4 !important; } #home.codex-home .codex-access .codex-arrow { grid-column: 3; grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 50%; display: grid !important; place-items: center; background: rgba(255, 255, 255, .14); font-size: 16px !important; margin: 0 !important; } /* Contato dentro do painel, em até duas linhas. */ #home.codex-home .home-company-contact { order: 4; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 6px 18px !important; width: 100% !important; max-width: none !important; margin: 20px 0 0 !important; white-space: normal !important; } #home.codex-home .home-contact-item { min-height: 0 !important; padding: 0 !important; gap: 7px !important; font-size: 12px !important; background: transparent !important; border: 0 !important; } #home.codex-home .home-contact-address, #home.codex-home .home-contact-address > span:last-child { white-space: normal !important; overflow: visible !important; } #home.codex-home .home-contact-icon { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; font-size: 10px !important; } /* Etiqueta no canto inferior direito, sobre a foto. */ #home.codex-home .home-hero-badge { display: block; position: absolute; z-index: 2; right: clamp(24px, 4vw, 56px); bottom: calc(var(--unified-footer-h, 38px) + 28px); padding: 14px 18px; border-radius: 16px; background: rgba(10, 24, 52, .55); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 13px; color: #b9cbe6; } #home.codex-home .home-hero-badge b { display: block; margin-top: 4px; font-size: 18px; color: #fff; } } /* Conceito E em telas de computador mais baixas (PO, 02/10/2026): o painel encolhe para caber sem rolagem. */ /* Home em computador mais baixo (até 860 px de altura): logo do painel com respiro menor. */ @media (min-width: 761px) and (max-height: 860px) { #home.codex-home .home-hero-logo { padding: 9px 16px; } } @media (min-width: 761px) and (max-height: 680px) { #home.codex-home .codex-access .codex-option { grid-template-rows: auto !important; } } /* Home (computador): contato sem fundo nem contorno em nenhum estado; só ícone e texto (PO, 02/10/2026). */ @media (min-width: 761px) { #home.codex-home .home-contact-item, #home.codex-home a.home-contact-item:hover, #home.codex-home a.home-contact-item:focus-visible { background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #home.codex-home .home-contact-icon { background: transparent !important; width: auto !important; flex-basis: auto !important; } } /* Etiqueta "Portal Operacional" com a base na mesma linha da base do painel (PO, 02/10/2026): fica dentro do painel e é deslocada até o canto direito da tela (largura e margem do painel são as mesmas fórmulas usadas acima). */ @media (min-width: 761px) { #home.codex-home .codex-shell > .codex-main { position: relative !important; } #home.codex-home .codex-main > .home-hero-badge { order: 9; bottom: -1px !important; left: auto !important; right: calc(-1 * (100vw - clamp(24px, 4vw, 64px) - min(540px, 46vw)) + clamp(24px, 4vw, 56px)) !important; margin: 0 !important; } } /* ===== Celular — revisão geral do Gestor (PO, 02/10/2026): caber na tela, respirar e ser fácil de tocar ===== Só até 760 px. Campos com letra de 16 px (o iPhone não dá zoom ao tocar) e 44 px de altura; botões de 42–44 px; relatórios e listas em cartões legíveis; filtros em grade de duas colunas; nada passa da largura da tela. */ @media (max-width: 760px) { #appShell .content { padding: 12px !important; } #appShell .appbar { padding: 0 12px !important; } #appShell #pageTitle { font-size: 15px !important; } /* Cabeçalho das páginas: título, descrição e ações empilhados. */ #appShell .flow-page-head { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin-bottom: 12px !important; } #appShell .flow-page-head h2 { font-size: 20px !important; line-height: 1.2 !important; } #appShell .flow-page-head p { font-size: 13px !important; line-height: 1.4 !important; margin-top: 4px !important; } #appShell .flow-page-head > .btn, #appShell .flow-page-head .flow-actions { width: 100% !important; } #appShell .flow-page-head .flow-actions { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; grid-auto-flow: column; gap: 8px !important; } /* Botões e campos com tamanho de dedo. */ #appShell .btn, .flow-modal .btn { min-height: 42px !important; padding: 0 14px !important; font-size: 14px !important; border-radius: 12px !important; } #appShell .field label, .flow-modal .field label { font-size: 12.5px !important; margin-bottom: 5px !important; } #appShell .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), #appShell .field select, #appShell .field textarea, .flow-modal .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), .flow-modal .field select, .flow-modal .field textarea { font-size: 16px !important; min-height: 44px !important; height: auto !important; padding: 10px 12px !important; border-radius: 12px !important; } #appShell .field textarea, .flow-modal .field textarea { min-height: 88px !important; } /* Filtros: busca na linha inteira, filtros em duas colunas, botões dividindo a linha. */ #appShell .flow-toolbar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; align-items: end !important; } #appShell .flow-toolbar > .field.search, #appShell .flow-toolbar > .field:first-child { grid-column: 1 / -1 !important; } #appShell .flow-toolbar > .field { min-width: 0 !important; margin: 0 !important; } #appShell .flow-toolbar > .btn { width: 100% !important; } #appShell .flow-toolbar > .btn:last-child:nth-child(odd) { grid-column: 1 / -1 !important; } #appShell #flowReportMeta { font-size: 12px !important; margin: 8px 0 !important; } /* Indicadores do Painel em 2×2. */ #appShell .flow-metrics { gap: 10px !important; } #appShell .flow-metric { padding: 12px !important; min-height: 64px !important; } #appShell .flow-metric small { font-size: 12.5px !important; } #appShell .flow-metric strong { font-size: 24px !important; } /* Tabelas viram cartões legíveis; o botão de ação ocupa a linha inteira. */ #appShell .flow-tablewrap { border: 0 !important; background: transparent !important; } #appShell .flow-table tr { margin: 0 0 10px !important; padding: 12px 14px !important; border: 1px solid #e3e7ef !important; border-radius: 14px !important; background: #fff !important; box-shadow: 0 2px 8px rgba(20, 30, 60, .05) !important; } #appShell .flow-table td { grid-template-columns: 108px minmax(0, 1fr) !important; gap: 10px !important; padding: 5px 0 !important; font-size: 14px !important; line-height: 1.35 !important; align-items: center !important; overflow-wrap: anywhere; } #appShell .flow-table td::before { font-size: 11px !important; color: #6b7286 !important; } #appShell .flow-table td .flow-sub { font-size: 12px !important; } #appShell .flow-table td .flow-badge { font-size: 11.5px !important; padding: 4px 9px !important; justify-self: start; } #appShell .flow-table td:last-child { grid-template-columns: 1fr !important; padding-top: 10px !important; } #appShell .flow-table td:last-child::before { display: none !important; } #appShell .flow-table td .btn, #appShell .flow-table td button { width: 100% !important; min-height: 42px !important; font-size: 14px !important; padding: 0 14px !important; } /* Modelos: lista de modelos em faixa horizontal (deslizar) acima do editor; perguntas empilhadas. */ #appShell .flow-list-layout { display: flex !important; flex-direction: column !important; gap: 12px !important; min-height: 0 !important; } #appShell .flow-model-list { display: flex !important; flex-direction: row !important; gap: 8px !important; overflow-x: auto !important; padding: 8px !important; max-width: 100% !important; flex: 0 0 auto !important; } #appShell .flow-model-list button { flex: 0 0 auto !important; width: auto !important; max-width: 220px !important; min-height: 52px !important; text-align: left !important; } #appShell .flow-model-editor { min-width: 0 !important; } #appShell .flow-model-editor .flow-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } #appShell .flow-qrow { grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; } #appShell .flow-qrow > span:first-child { display: none !important; } #appShell .flow-qrow > input[aria-label="Pergunta"] { grid-column: 1 / -1 !important; font-size: 16px !important; min-height: 44px !important; } #appShell .flow-qrow > select { min-height: 42px !important; font-size: 15px !important; } #appShell .flow-qrow .mini-check { font-size: 13px !important; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; } #appShell .flow-icon-btn { min-width: 40px !important; min-height: 40px !important; } /* Dados da Empresa: uma coluna, com logo e controles mais confortáveis. */ #appShell #p-empresa .flow-form-grid { grid-template-columns: 1fr !important; } /* Modais: ocupam a largura do celular; ações grandes e fáceis de tocar. */ .flow-modal { width: calc(100vw - 16px) !important; max-width: none !important; max-height: calc(100dvh - 16px) !important; } .flow-modal .flow-modal-actions { gap: 8px !important; } .flow-modal .flow-modal-actions .btn { flex: 1 1 0 !important; min-height: 44px !important; } .flow-modal .flow-action-grid button { min-height: 56px !important; } .flow-modal .flow-action-grid button b { font-size: 14px !important; } } @media (max-width: 760px) { /* Toda tabela do Gestor (inclusive o Histórico, que tinha largura mínima) vira cartões. */ #appShell .flow-table { min-width: 0 !important; width: 100% !important; table-layout: auto !important; } #appShell .flow-table td { display: grid !important; width: 100% !important; min-width: 0 !important; white-space: normal !important; } #appShell .flow-table td[colspan] { display: block !important; } /* Textos pequenos que sobraram: etiquetas, legendas e lista de modelos. */ #appShell .flow-metric .flow-badge { font-size: 11px !important; } #appShell .flow-model-list small { font-size: 12px !important; } #appShell .flow-model-editor .flow-sub { font-size: 11.5px !important; } #appShell .flow-qrow .flow-badge { font-size: 11px !important; } #appShell .flow-section-head input, #appShell .flow-model-editor input:not([type="checkbox"]), #appShell .flow-model-editor select { font-size: 16px !important; min-height: 44px !important; } /* Dados da Empresa: duas colunas (formulário mais curto). */ #appShell #p-empresa .flow-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } } @media (max-width: 760px) { #appShell .flow-table td .flow-badge { white-space: normal !important; max-width: 100% !important; text-align: left !important; line-height: 1.25 !important; } /* Dados da Empresa no celular: compacto. */ #appShell #p-empresa .card { padding: 12px !important; } #appShell #p-empresa .flow-page-head p { display: none !important; } } @media (max-width: 760px) { /* Empresa no celular: espaçamentos compactos. */ #appShell #p-empresa .flow-form-grid { gap: 8px 10px !important; } #appShell #p-empresa .field label { margin-bottom: 3px !important; } #appShell #p-empresa .flow-company-grid { gap: 10px !important; } #appShell #p-empresa .flow-modal-actions { margin-top: 10px !important; } } @media (max-width: 760px) { #appShell #p-empresa .flow-page-head { margin-bottom: 8px !important; } } @media (max-width: 760px) { .flow-modal input[type="file"], #appShell input[type="file"] { min-height: 44px !important; font-size: 14px !important; padding: 8px !important; } } @media (max-width: 760px) { /* Correção: a lista de itens é a área que rola; motivo e "Salvar correção" ficam sempre visíveis. */ .flow-modal .flow-correction-grid { max-height: max(140px, calc(100dvh - 360px)) !important; overflow-y: auto !important; overscroll-behavior: contain; } } /* ===== Celular — revisão geral da Operação (PO, 02/10/2026) ===== */ @media (max-width: 760px) { #operatorApp { overflow-x: hidden !important; } /* Topo: marca, voltar e perfil com letra legível; o nome do usuário fica no menu do perfil. */ #operatorApp .op-topbar strong#flowOpCompany { font-size: 13px !important; } #operatorApp .op-topbar #opClock { font-size: 11px !important; } #operatorApp .flow-manager-return { min-height: 36px !important; padding: 0 12px !important; font-size: 12.5px !important; border-radius: 10px !important; white-space: nowrap; } #operatorApp .flow-manager-return { font-size: 0 !important; } #operatorApp .flow-manager-return::after { content: "← Gestor"; font-size: 12.5px; font-weight: 800; } #operatorApp .op-profile { min-height: 40px !important; gap: 6px !important; } #operatorApp .op-profile .op-avatar { width: 34px !important; height: 34px !important; font-size: 12px !important; } #operatorApp .op-profile > span:not(.op-avatar), #operatorApp .op-profile div, #operatorApp .op-profile b, #operatorApp .op-profile small { display: none !important; } /* Menu de baixo: rótulos legíveis. */ #operatorApp .op-bottom-nav button { min-height: 48px !important; } #operatorApp .op-bottom-nav button b { font-size: 11px !important; } #operatorApp .op-bottom-nav button span { font-size: 16px !important; } /* Campos e botões do fluxo. */ #operatorApp input:not([type="checkbox"]):not([type="file"]), #operatorApp textarea, #operatorApp select { font-size: 16px !important; } #operatorApp .op-link { min-height: 42px !important; font-size: 14px !important; } #operatorApp .flow-review-row button { min-height: 36px !important; padding: 0 14px !important; font-size: 13px !important; } #operatorApp .op-kicker { font-size: 11px !important; } #operatorApp small, #operatorApp .flow-review-note { font-size: 12px !important; } /* Meus checklists e Pendências: cartões com letra legível. */ #operatorApp .op-history-card, #operatorApp .op-pendency-card { font-size: 14px !important; } #operatorApp .op-history-card span, #operatorApp .op-history-card small, #operatorApp .op-history-date { font-size: 12px !important; } } @media (max-width: 760px) { #operatorApp .op-flow-head p { font-size: 13px !important; line-height: 1.4 !important; } #operatorApp .op-step-badge { font-size: 12px !important; } #operatorApp label { font-size: 13px !important; } #operatorApp .flow-badge { font-size: 11px !important; } #operatorApp .op-pendency-card p, #operatorApp .op-pendency-card small { font-size: 13px !important; } #operatorApp .op-asset-name span, #operatorApp .op-asset-details small, #operatorApp .op-question-top span, #operatorApp .op-summary-grid small { font-size: 12px !important; } #operatorApp .op-history-card b, #operatorApp .op-history-card div span { font-size: 13px !important; } } @media (max-width: 760px) { #operatorApp .op-mini-info span, #operatorApp #flowPhotoState { font-size: 12px !important; } #operatorApp .op-asset-name p, #operatorApp .op-asset-details b { font-size: 13px !important; } #operatorApp .op-question-card p { font-size: 12.5px !important; } #operatorApp .flow-review-row span, #operatorApp .flow-review-row b { font-size: 13px !important; } /* Revisão: só a lista de itens rola; resultado e "Finalizar checklist" sempre visíveis. */ #operatorApp .op-review-list { max-height: max(110px, calc(100svh - 520px)); overflow-y: auto; overscroll-behavior: contain; } } @media (max-width: 760px) and (max-height: 780px) { #operatorApp .op-answer small { display: none !important; } #operatorApp .op-answer { min-height: 0 !important; padding-top: 12px !important; padding-bottom: 12px !important; } #operatorApp .op-issue-box textarea { min-height: 64px !important; height: 64px !important; } #operatorApp .op-question-card h3 { margin-bottom: 6px !important; } } @media (max-width: 760px) and (max-height: 780px) { #operatorApp .op-flow-head p { display: none !important; } #operatorApp .op-flow-head { min-height: 0 !important; margin-bottom: 6px !important; } #operatorApp .op-review-list { max-height: max(90px, calc(100svh - 580px)) !important; } #operatorApp .op-result-alert span { display: none !important; } #operatorApp .op-result-alert { padding: 10px 12px !important; } #operatorApp .op-review-head { margin-bottom: 8px !important; } #operatorApp .op-issue-box { margin-top: 8px !important; padding-top: 10px !important; } #operatorApp .op-photo-row { margin: 6px 0 !important; } } @media (max-width: 760px) and (max-height: 780px) { #operatorApp .op-main { padding-bottom: 6px !important; padding-top: 8px !important; } #operatorApp .op-question-top { margin-bottom: 6px !important; } #operatorApp .op-summary-grid { margin: 8px 0 !important; } #operatorApp .op-summary-grid > div { padding: 8px !important; } } @media (max-width: 760px) { /* Painel no celular: a lista do relatório é a prioridade. Busca na linha inteira, Resultado e Período lado a lado, Limpar / Imprimir / Exportar dividindo uma linha; indicadores 2×2 mais baixos. */ #appShell #p-dashboard .flow-toolbar { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 8px !important; } #appShell #p-dashboard .flow-toolbar > .field { grid-column: span 3 !important; } #appShell #p-dashboard .flow-toolbar > .field:first-child { grid-column: 1 / -1 !important; } #appShell #p-dashboard .flow-toolbar > .btn { grid-column: span 2 !important; padding: 0 6px !important; font-size: 13px !important; } #appShell #p-dashboard .flow-toolbar .field label { font-size: 11.5px !important; margin-bottom: 3px !important; } #appShell #p-dashboard > .card { padding: 10px !important; } #appShell #p-dashboard .flow-metrics { gap: 8px !important; margin-bottom: 10px !important; } #appShell #p-dashboard .flow-metric { min-height: 0 !important; padding: 8px 10px !important; } #appShell #p-dashboard .flow-metric strong { font-size: 20px !important; } #appShell #p-dashboard .flow-metric .flow-badge { display: none !important; } #appShell #flowReportTable .flow-tablewrap { min-height: 160px !important; } } @media (max-width: 760px) { /* Cartões das tabelas: duas colunas de campos, cada um com o rótulo em cima do valor (sem quebrar letra por letra); o botão de ação ocupa a linha inteira no fim do cartão. */ #appShell .flow-table tr { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 14px !important; row-gap: 8px !important; } #appShell .flow-table td { display: flex !important; flex-direction: column !important; gap: 2px !important; padding: 0 !important; min-width: 0 !important; word-break: normal !important; overflow-wrap: break-word !important; } #appShell .flow-table td::before { padding: 0 !important; } #appShell .flow-table td:last-child, #appShell .flow-table td[colspan] { grid-column: 1 / -1 !important; } #appShell .flow-table td:last-child { padding-top: 4px !important; } } @media (max-width: 760px) { #appShell .flow-table td { text-align: left !important; align-items: flex-start !important; } #appShell .flow-table td:last-child { align-items: stretch !important; } } @media (max-width: 760px) { /* Botão Limpar ao lado do último filtro (sem ocupar uma linha sozinho). */ #appShell .flow-toolbar > .btn:last-child:nth-child(odd) { grid-column: auto !important; } } @media (max-width: 760px) { #appShell .flow-editor-head .row.space { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } #appShell .flow-editor-head .flow-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; } #appShell .flow-editor-head .flow-actions .btn { white-space: nowrap !important; } } /* ===== Acessibilidade — checklist (Operação) e Consulta (PO, 02/10/2026; simulação de usuário de 60 anos) ===== Textos de apoio com 13–16 px e contraste mínimo de 4,5:1 (mais escuros sobre os cartões claros), "Alterar" com 44 px e confirmação visível "✓ Marcado" ao responder. Vale em todas as larguras. */ #operatorApp .op-flow-head p { font-size: 14.5px !important; } #operatorApp .op-question-top span { font-size: 13px !important; } #operatorApp .op-question-top b { font-size: 15px !important; } #operatorApp .op-question-card p { font-size: 15px !important; font-weight: 600 !important; color: #334155 !important; } #operatorApp .op-answer .flow-op-answer-title { font-size: 17px !important; } #operatorApp .op-answer small { font-size: 13.5px !important; opacity: 1 !important; } #operatorApp .op-answer:disabled { opacity: 1 !important; cursor: default; } #operatorApp .op-answer { position: relative !important; } #operatorApp .op-answer.is-marked { box-shadow: 0 0 0 3px #22c55e, 0 10px 26px rgba(34, 197, 94, .25) !important; } #operatorApp .op-answer.is-marked::after { content: "✓ Marcado"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); padding: 6px 12px; border-radius: 999px; background: #15803d; color: #fff; font-size: 14px; font-weight: 800; } #operatorApp label { font-size: 15px !important; } #operatorApp .op-asset-details small, #operatorApp .op-summary-grid small { font-size: 13px !important; color: #475569 !important; } #operatorApp .op-asset-details b { font-size: 15px !important; } #operatorApp #flowPhotoState { font-size: 14px !important; font-weight: 600 !important; color: #334155 !important; } #operatorApp .flow-review-row span { font-size: 15px !important; } #operatorApp .flow-review-row b { font-size: 14px !important; } #operatorApp .flow-review-row button { min-height: 44px !important; font-size: 15px !important; } #operatorApp .op-result-alert b { font-size: 16px !important; } #operatorApp .op-mini-info span { font-size: 13.5px !important; } #operatorApp .op-bottom-nav button b { font-size: 12.5px !important; } /* Consulta: pesquisa e resultado. */ #consulta .consult-kicker { font-size: 12px !important; } #consulta label { font-size: 14px !important; } #consulta .consult-mobile-head span, #consulta .consult-mobile-head p { font-size: 14px !important; color: #475569 !important; } #consulta .btn-sub { font-size: 12.5px !important; } #consultResult .consult-result-top b { font-size: 17px !important; } #consultResult .consult-result-top span { font-size: 14px !important; color: #475569 !important; } #consultResult .consult-status { font-size: 14px !important; } #consultResult .consult-result-grid small { font-size: 12.5px !important; color: #475569 !important; } #consultResult .consult-result-grid b { font-size: 15px !important; } /* Janela "Checklist consultado" (aberta pela Consulta). */ #flowModalRoot:has([data-action="public-print"]) .flow-table th { font-size: 12px !important; } #flowModalRoot:has([data-action="public-print"]) .flow-table td { font-size: 14px !important; } #flowModalRoot:has([data-action="public-print"]) .flow-sub { font-size: 13px !important; } #flowModalRoot:has([data-action="public-print"]) .flow-badge { font-size: 12px !important; } /* Acessibilidade — ajustes finais da medição. */ #operatorApp .op-kicker { font-size: 12.5px !important; } #operatorApp .op-kicker.dark { color: #1e3a8a !important; } #operatorApp .op-step-badge { font-size: 13px !important; } #operatorApp .op-asset-name span { font-size: 13.5px !important; color: #334155 !important; } #operatorApp .op-asset-name p { font-size: 14px !important; color: #334155 !important; } #operatorApp .op-answer small { color: #1f2937 !important; } #operatorApp .op-question-number { display: none !important; } #operatorApp .op-review-list { max-height: max(96px, calc(100svh - 560px)) !important; } /* Senha com botão "Mostrar" (acessibilidade, PO 02/10/2026). */ .pass-field { position: relative; } .pass-field input { padding-right: 92px !important; } .pass-field .pass-toggle { position: absolute; right: 6px; bottom: 6px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid #cbd5e1; background: #f1f5f9; color: #1e293b; font-size: 14px; font-weight: 700; cursor: pointer; } .pass-field .pass-toggle:hover { background: #e2e8f0; } /* Operação: últimos equipamentos inspecionados (um toque, sem digitar). */ #operatorApp .op-recent { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } #operatorApp .op-recent-title { font-size: 14px; font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); } #operatorApp .op-recent-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; width: 100%; min-height: 60px; padding: 10px 16px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .95); color: #0f172a; text-align: left; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); cursor: pointer; } #operatorApp .op-recent-btn b { grid-column: 1; font-size: 18px; letter-spacing: .02em; } #operatorApp .op-recent-btn small { grid-column: 1; font-size: 14px !important; color: #334155 !important; } #operatorApp .op-recent-btn span { grid-column: 2; grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #1e3a8a; color: #fff; font-size: 18px; } @media (max-width: 760px) and (max-height: 780px) { #operatorApp .op-qr[disabled] { display: none !important; } #operatorApp .op-recent { margin-top: 10px !important; gap: 8px !important; } #operatorApp .op-recent-btn { min-height: 52px !important; padding: 8px 14px !important; } #operatorApp .op-recent-btn:nth-of-type(n+3) { display: none !important; } #operatorApp .op-question-card.issue-open > p { display: none !important; } #operatorApp .op-review-list { max-height: max(90px, calc(100svh - 600px)) !important; } } @media (max-width: 760px) and (max-height: 780px) { /* Problema aberto: as três respostas encolhem para uma linha (ícone + nome), dando espaço à observação e à foto. */ #operatorApp .op-question-card.issue-open .op-answer-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } #operatorApp .op-question-card.issue-open .op-answer { min-height: 52px !important; padding: 6px 4px !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; gap: 2px !important; } #operatorApp .op-question-card.issue-open .op-answer > span { width: 22px !important; height: 22px !important; font-size: 13px !important; margin: 0 !important; } #operatorApp .op-question-card.issue-open .op-answer .flow-op-answer-title { font-size: 12.5px !important; line-height: 1.1 !important; } #operatorApp .op-question-card.issue-open .op-answer small { display: none !important; } } @media (max-width: 760px) and (max-height: 700px) { #operatorApp .op-issue-box textarea { min-height: 50px !important; height: 50px !important; } #operatorApp .op-question-card h3 { font-size: 20px !important; } } /* Consulta — checklist completo em leitura fácil (PO, 02/10/2026). Letra grande, cores claras e só a lista rola. */ .pub-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .pub-head .pub-plate { display: block; font-size: 24px; font-weight: 800; letter-spacing: .02em; color: #0f172a; } .pub-head .pub-model { display: block; font-size: 16px; color: #1f2937; margin-top: 2px; } .pub-head .pub-meta { display: block; font-size: 14px; color: #475569; margin-top: 4px; } .pub-head .flow-badge { font-size: 14px !important; padding: 6px 12px !important; white-space: normal; text-align: center; } .pub-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .pub-summary span { padding: 7px 12px; border-radius: 999px; font-size: 15px; font-weight: 700; } .pub-summary .good, .pub-answer.good { background: #dcfce7; color: #14532d; } .pub-summary .bad, .pub-answer.bad { background: #fee2e2; color: #7f1d1d; } .pub-summary .na, .pub-answer.na { background: #e2e8f0; color: #1e293b; } .pub-list { max-height: calc(100dvh - 330px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; } .pub-section h4 { margin: 10px 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #334155; } .pub-item { padding: 12px 14px; border: 1px solid #e2e8f0; border-left: 5px solid #94a3b8; border-radius: 14px; background: #fff; margin-bottom: 8px; } .pub-item.good { border-left-color: #16a34a; } .pub-item.bad { border-left-color: #dc2626; background: #fffafa; } .pub-item-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .pub-item-head b { font-size: 17px; line-height: 1.3; color: #0f172a; } .pub-answer { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 800; white-space: nowrap; } .pub-item p { margin: 8px 0 0; font-size: 16px; line-height: 1.4; color: #1f2937; } .pub-item p small { font-size: 13px; font-weight: 700; color: #475569; } #flowModalRoot:has(.pub-list) .flow-modal-actions .btn { min-height: 46px !important; font-size: 15px !important; } @media (max-width: 760px) { .pub-item-head { flex-direction: column; align-items: flex-start; } .pub-list { max-height: calc(100dvh - 300px); } } /* A lista do checklist ocupa só o espaço que sobra na janela (rola por dentro); cabeçalho, resumo e botões sempre visíveis. */ #flowModalRoot:has(.pub-list) .flow-modal { display: flex !important; flex-direction: column !important; } #flowModalRoot:has(.pub-list) #flowModalBody { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #flowModalRoot:has(.pub-list) .pub-list { flex: 1 1 auto !important; min-height: 90px !important; max-height: none !important; } #flowModalRoot:has(.pub-list) .pub-head, #flowModalRoot:has(.pub-list) .pub-summary, #flowModalRoot:has(.pub-list) .flow-modal-actions { flex: 0 0 auto !important; } /* Equipamentos: "Abrir" e "QR Code" lado a lado em cada linha. */ .flow-row-actions { display: flex; gap: 6px; flex-wrap: wrap; } @media (max-width: 760px) { #appShell .flow-row-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100%; } } /* ===== Leitura fácil (Seu Zé, 60+): Meus Checklists e Checklist finalizado ===== */ #operatorApp .op-history-card { padding: 14px 16px !important; gap: 6px 10px !important; } #operatorApp .op-history-card .op-history-date { font-size: 15px !important; font-weight: 700 !important; color: #334155 !important; letter-spacing: .02em !important; } #operatorApp .op-history-card div b { font-size: 19px !important; color: #0f172a !important; } #operatorApp .op-history-card div span { font-size: 15px !important; color: #334155 !important; margin-top: 3px !important; } #operatorApp .op-history-card > small { font-size: 14px !important; color: #475569 !important; font-weight: 600 !important; } #operatorApp .op-history-card .flow-badge, #operatorApp .op-result-card .flow-badge { font-size: 14px !important; padding: 6px 12px !important; } #operatorApp .op-result-card > p { font-size: 16px !important; color: #334155 !important; font-weight: 600 !important; } #operatorApp .op-result-data small { font-size: 14px !important; color: #475569 !important; font-weight: 600 !important; } #operatorApp .op-result-data b { font-size: 17px !important; color: #0f172a !important; line-height: 1.3 !important; } /* Checklist finalizado: letra maior sem rolar — rótulo ao lado do valor, botões Imprimir/Visualizar lado a lado. */ #operatorApp .op-result-icon { width: 44px !important; height: 44px !important; margin-bottom: 8px !important; font-size: 22px !important; } #operatorApp .op-result-data { margin: 10px 0 !important; gap: 6px !important; } #operatorApp .op-result-data > div { display: grid !important; grid-template-columns: 112px 1fr !important; align-items: center !important; gap: 8px !important; padding: 9px 12px !important; } #operatorApp .op-result-data small { margin: 0 !important; line-height: 1.25 !important; } #operatorApp .flow-op-final-actions { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } #operatorApp .flow-op-final-actions .op-link { grid-column: 1 / -1 !important; } #operatorApp .flow-op-final-actions .op-primary, #operatorApp .flow-op-final-actions .op-secondary { min-height: 50px !important; font-size: 16px !important; } @media (max-height: 760px) { #operatorApp .op-result-icon { display: none !important; } #operatorApp .op-result-card h3 { font-size: 22px !important; } } @media (max-height: 700px) { #operatorApp .op-result-data { margin: 6px 0 !important; } #operatorApp .op-result-card > p { margin-bottom: 6px !important; } } @media (max-width: 760px) { #operatorApp .op-result-data > div:first-child { grid-template-columns: 1fr !important; gap: 2px !important; } } /* Painel: "Atualizar" na mesma linha da pesquisa, depois de "Exportar"; blocos de números mais baixos. */ #p-dashboard .flow-toolbar { grid-template-columns: minmax(220px, 1.6fr) minmax(130px, .7fr) minmax(130px, .7fr) repeat(4, auto) !important; } #p-dashboard .flow-refresh { font-weight: 700; white-space: nowrap; } #appShell #p-dashboard .flow-metrics { gap: 8px !important; margin-bottom: 8px !important; } #appShell #p-dashboard .flow-metric { min-height: 0 !important; padding: 7px 12px !important; border-radius: 12px !important; } #appShell #p-dashboard .flow-metric strong { font-size: 22px !important; } #appShell #p-dashboard .flow-metric .flow-badge { margin-top: 3px !important; padding: 2px 8px !important; } @media (max-width: 760px) { #appShell #p-dashboard .flow-toolbar { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; } #appShell #p-dashboard .flow-toolbar > .field { grid-column: span 6 !important; } #appShell #p-dashboard .flow-toolbar > .field:first-child { grid-column: 1 / -1 !important; } #appShell #p-dashboard .flow-toolbar > .btn { grid-column: span 3 !important; padding: 0 4px !important; font-size: 12.5px !important; } #appShell #p-dashboard .flow-metric { padding: 6px 10px !important; } #appShell #p-dashboard .flow-metric strong { font-size: 19px !important; } } /* Painel / Relatórios no PC: letras maiores (leitura fácil). */ @media (min-width: 761px) { #appShell #p-dashboard .flow-metric small { font-size: 15px !important; } #appShell #p-dashboard .flow-metric .flow-badge { font-size: 11.5px !important; } #appShell #p-dashboard .flow-toolbar label { font-size: 12.5px !important; font-weight: 700 !important; margin-bottom: 4px !important; } #appShell #p-dashboard .flow-toolbar :is(input, select) { font-size: 14.5px !important; } #appShell #p-dashboard .flow-toolbar > .btn { font-size: 15px !important; } #flowReportMeta { font-size: 13px !important; } #flowReportTable .flow-table th { font-size: 12px !important; } #flowReportTable .flow-table td { font-size: 14.5px !important; } #flowReportTable .flow-table td .flow-sub { font-size: 12px !important; } #flowReportTable .flow-table td .flow-badge { font-size: 11.5px !important; } #flowReportTable .flow-table td .btn { font-size: 13px !important; } } /* Gestor no PC: letras maiores em todas as listas e filtros (mesmo padrão do Painel). */ @media (min-width: 761px) { #appShell .flow-toolbar label, #appShell .flow-toolbar .field label { font-size: 12.5px !important; font-weight: 700 !important; margin-bottom: 4px !important; } #appShell .flow-toolbar :is(input, select) { font-size: 14.5px !important; } #appShell .flow-page-head p, #appShell .flow-page-head span { font-size: 15px !important; } #appShell .flow-table th { font-size: 12.5px !important; } #appShell .flow-table td { font-size: 15px !important; } #appShell .flow-table td .flow-sub { font-size: 12.5px !important; } #appShell .flow-table td .flow-badge { font-size: 12px !important; } #appShell .flow-table td .btn { font-size: 13.5px !important; } #appShell #p-dashboard .flow-table td { font-size: 15px !important; } } /* Gerar QR Code: lista de veículos marcáveis (só a lista rola) + tamanhos. */ .qr-pick { display: flex; flex-direction: column; gap: 10px; min-height: 0; } .qr-pick-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .qr-pick-head > b, .qr-pick-title { font-size: 15px; } .qr-pick-head > span { flex: 1; font-size: 13px; color: #475569; font-weight: 600; } .qr-pick-head .btn { min-height: 36px; padding: 0 12px; font-size: 13px; } .qr-pick-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: min(34vh, 260px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; } .qr-pick-item { display: grid; grid-template-columns: 22px auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; font-size: 14px; } .qr-pick-item:has(input:checked) { border-color: #4338ca; background: #eef2ff; } .qr-pick-item input { width: 20px; height: 20px; margin: 0; accent-color: #4338ca; } .qr-pick-item b { font-size: 15px; } .qr-pick-item span { color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .qr-pick-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } @media (max-width: 760px) { .qr-pick-list { grid-template-columns: 1fr; max-height: 30vh; } .qr-pick-item { min-height: 44px; } } /* PC: linhas de uma altura só — botões da ação lado a lado, colunas curtas sem quebra (só descrição/tipo quebram). */ @media (min-width: 761px) { #appShell .flow-row-actions { flex-wrap: nowrap !important; } #appShell .flow-table td:last-child:has(.btn, button) { white-space: nowrap !important; } #appShell .flow-table td .flow-sub { white-space: nowrap !important; } #flowEquipmentTable .flow-table td:is(:nth-child(1), :nth-child(4), :nth-child(5), :nth-child(7)) { white-space: nowrap !important; overflow-wrap: normal !important; } #flowEquipmentTable .flow-table td:nth-child(6) .flow-badge { white-space: normal !important; line-height: 1.25 !important; } #appShell .flow-table :is(th, td) { padding-left: 10px !important; padding-right: 10px !important; } #flowEquipmentTable .flow-table th { white-space: normal !important; line-height: 1.25 !important; } } /* Histórico: data/hora numa linha só no PC. */ @media (min-width: 761px) { #flowAuditTable .flow-table td.audit-date, #flowAuditTable .flow-table td:nth-child(5), #flowAuditTable .flow-table td:nth-child(3) { white-space: nowrap !important; overflow-wrap: normal !important; } } /* Home (computador): painel com cantos maiores e ícones/setas proporcionais à tela (PO, 02/10/2026). */ @media (min-width: 761px) { #home.codex-home { --home-panel-w: clamp(540px, 50vw, 960px); } #home.codex-home .codex-shell > .codex-main { border-radius: 32px !important; } #home.codex-home .codex-main > .home-hero-badge { right: calc(-1 * (100vw - clamp(24px, 4vw, 64px) - var(--home-panel-w)) + clamp(24px, 4vw, 56px)) !important; } #home.codex-home .codex-access .codex-option { border-radius: 20px !important; } #home.codex-home .codex-access .codex-icon { font-size: clamp(16px, 1.3vw, 22px) !important; } #home.codex-home .codex-access .codex-arrow { font-size: clamp(16px, 1.2vw, 20px) !important; } #home.codex-home .home-contact-item { border-radius: 12px !important; } #home.codex-home .home-contact-icon { border-radius: 7px !important; } } /* Home (computador): "Fazer checklist" no meio, entre Gestor e Consultar veículos (PO, 02/10/2026). */ @media (min-width: 761px) { #home.codex-home .codex-access .codex-option.manager { order: 1 !important; } #home.codex-home .codex-access .codex-option.operator { order: 2 !important; } #home.codex-home .codex-access .codex-option.public { order: 3 !important; } } /* Modais do Gestor no PC (PO, 02/10/2026): janela mais larga e letras maiores — Ações, Checklist, Equipamento etc. */ @media (min-width: 761px) { .flow-modal { width: min(1100px, 94vw) !important; padding: 20px 26px !important; border-radius: 24px !important; } .flow-modal-head h2, #flowModalTitle { font-size: 24px !important; } .flow-modal .flow-action-grid { gap: 12px !important; } .flow-modal .flow-action-grid button { padding: 16px 20px !important; border-radius: 16px !important; } .flow-modal .flow-action-grid button b { font-size: 18px !important; } .flow-modal .flow-action-grid button span { font-size: 14.5px !important; margin-top: 4px !important; color: #475569 !important; } .flow-modal .flow-table th { font-size: 13px !important; } .flow-modal .flow-table td { font-size: 16px !important; } .flow-modal .flow-table td .flow-badge { font-size: 12.5px !important; padding: 4px 10px !important; } .flow-modal .flow-table :is(th, td) { padding: 10px 12px !important; } .flow-modal .row.space b { font-size: 22px !important; } .flow-modal .row.space .flow-sub { font-size: 15px !important; color: #475569 !important; margin-top: 4px !important; } .flow-modal .row.space > .flow-badge { font-size: 14px !important; padding: 6px 14px !important; } .flow-modal .flow-photo-thumb { width: 72px !important; height: 72px !important; } .flow-modal .field label { font-size: 13.5px !important; } .flow-modal .field :is(input:not([type="checkbox"]):not([type="file"]), select) { height: 42px !important; font-size: 15px !important; } .flow-modal .field textarea { font-size: 15px !important; } .flow-modal .flow-modal-actions .btn { min-height: 46px !important; font-size: 16px !important; } } /* Modal com tabela (ex.: Checklist): só a tabela rola; título e botões sempre visíveis. */ #flowModalBody:has(> .flow-tablewrap) { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } #flowModalBody > .flow-tablewrap { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; overscroll-behavior: contain; } #flowModalBody > .flow-tablewrap thead th { position: sticky; top: 0; z-index: 1; background: #f6f7fb; } #flowModalBody:has(> .flow-tablewrap) > :not(.flow-tablewrap) { flex: none; } /* Celular — Editar equipamento: só os campos rolam; Observações e botões ficam fixos embaixo. */ @media (max-width: 760px) { .flow-modal:has(#feFleet) { overflow: hidden !important; } #flowModalBody:has(> .flow-form-grid.dense) { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } #flowModalBody > .flow-form-grid.dense { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; padding: 2px 2px 6px !important; } #flowModalBody:has(> .flow-form-grid.dense) > :not(.flow-form-grid) { flex: none !important; } #flowModalBody:has(> .flow-form-grid.dense) textarea { min-height: 56px !important; height: 56px !important; } } /* Etapas do login: MFA e senha nova (PO, 02/10/2026) — letra grande e passos numerados. */ .login-step { display: flex; flex-direction: column; gap: 12px; } .login-step-lead { margin: 0; font-size: 16px; line-height: 1.45; color: #1e293b; } .login-step-setup { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: center; } .login-step-qr { width: 180px; height: 180px; image-rendering: pixelated; border: 1px solid #e2e8f0; border-radius: 12px; padding: 6px; background: #fff; } .login-step-setup ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.4; color: #1e293b; } .login-step-key { margin: 0; font-size: 13.5px; color: #475569; line-height: 1.4; } .login-step-key b { font-family: Consolas, monospace; font-size: 14px; letter-spacing: .04em; color: #0f172a; word-break: break-all; } .flow-modal input.login-step-code { font-size: 26px !important; height: 56px !important; letter-spacing: .3em; text-align: center; font-weight: 700; max-width: 260px; } .fu-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.3; cursor: pointer; } .fu-check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #0d7a5b; } .fu-mfa-reset { margin-top: 6px; font-size: 12.5px; color: #92400e; } @media (max-width: 760px) { .login-step-setup { grid-template-columns: 1fr; justify-items: center; gap: 10px; } .login-step-qr { width: 160px; height: 160px; } .login-step-setup ol { font-size: 14px; } .flow-modal input.login-step-code { max-width: none; } } /* Avisos sempre por cima dos modais (antes ficavam escondidos atrás do fundo escuro) e fáceis de ler. */ #toast.toast { z-index: 3000 !important; max-width: min(460px, calc(100vw - 32px)) !important; font-size: 15px !important; line-height: 1.4 !important; padding: 14px 18px !important; } .flow-modal .flow-form-error { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; font-size: 14px; font-weight: 600; } /* Listas do Gestor: ordenar por qualquer coluna e ajustar a largura arrastando a borda do título (PO, 02/10/2026). */ #appShell .flow-table th { position: relative; } #appShell .flow-table th.col-sort { cursor: pointer; user-select: none; padding-right: 26px !important; } #appShell .flow-table th.col-sort::after { content: "↕"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .35; } #appShell .flow-table th.col-sort:hover { color: #312e81; background: #eef2ff; } #appShell .flow-table th[aria-sort="ascending"]::after { content: "▲"; opacity: 1; color: #4338ca; font-size: 10px; } #appShell .flow-table th[aria-sort="descending"]::after { content: "▼"; opacity: 1; color: #4338ca; font-size: 10px; } #appShell .flow-table th[aria-sort] { color: #312e81; } #appShell .flow-table th:focus-visible { outline: 2px solid #4338ca; outline-offset: -2px; } #appShell .col-grip { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 2; } #appShell .col-grip::before { content: ""; position: absolute; left: 4px; top: 22%; bottom: 22%; width: 2px; border-radius: 2px; background: #cbd5e1; opacity: 0; transition: opacity .15s; } #appShell .flow-table th:hover .col-grip::before, body.col-resizing .col-grip::before { opacity: 1; } #appShell .flow-table.cols-fixed { table-layout: fixed !important; } #appShell .flow-table.cols-fixed td { overflow: hidden; text-overflow: ellipsis; } body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; } @media (max-width: 760px) { #appShell .col-grip { display: none; } } /* ===== Home (computador) — Modelo A aprovado pelo PO (02/10/2026): coluna estreita à esquerda, alta (quase toda a tela), conteúdo distribuído na altura e contato no pé do painel. Substitui o painel largo anterior. ===== */ /* Base dos 3 modelos: painel alto (do topo até perto do rodapé), conteúdo distribuído na altura. */ @media (min-width: 761px) { #home.codex-home .codex-shell > .codex-main { height: calc(100svh - var(--unified-footer-h, 38px) - 48px) !important; margin-top: 24px !important; margin-bottom: calc(var(--unified-footer-h, 38px) + 24px) !important; align-self: start !important; justify-content: space-between !important; padding: clamp(26px, 4vh, 44px) clamp(26px, 2.4vw, 40px) !important; } #home.codex-home .home-hero-logo img { height: clamp(44px, 7vh, 72px) !important; } #home.codex-home .codex-copy { margin-top: 0 !important; } #home.codex-home .codex-copy h1 { font-size: clamp(32px, 5.4vh, 52px) !important; } #home.codex-home .codex-copy p { font-size: clamp(14px, 2vh, 18px) !important; margin-top: 1.4vh !important; } #home.codex-home .codex-access { margin-top: 0 !important; gap: clamp(8px, 1.6vh, 16px) !important; } #home.codex-home .codex-access .codex-option { padding: clamp(12px, 2.4vh, 24px) 20px !important; } #home.codex-home .codex-access .codex-option strong { font-size: clamp(17px, 2.5vh, 23px) !important; } #home.codex-home .codex-access .codex-desc { display: block !important; font-size: clamp(12.5px, 1.75vh, 16px) !important; } #home.codex-home .codex-access .codex-icon { width: clamp(38px, 5.6vh, 54px) !important; height: clamp(38px, 5.6vh, 54px) !important; grid-row: 1 / 3 !important; } #home.codex-home .codex-access .codex-arrow { grid-row: 1 / 3 !important; } #home.codex-home .home-company-contact { margin-top: 0 !important; } #home.codex-home .home-contact-item { font-size: clamp(12px, 1.7vh, 15px) !important; } } @media (min-width: 761px) { #home.codex-home .codex-copy { margin-top: 2.2vh !important; } #home.codex-home .codex-copy h1 { font-size: clamp(28px, min(4.6vh, 2.6vw), 44px) !important; } #home.codex-home .codex-access { margin-top: 2.4vh !important; } #home.codex-home .home-company-contact { margin-top: 2.4vh !important; align-items: flex-start !important; } #home.codex-home .home-contact-item { justify-content: flex-start !important; text-align: left !important; } } /* Notebook (altura até 820): tudo um pouco mais junto para caber sem rolar. */ @media (min-width: 761px) and (max-height: 820px) { #home.codex-home .codex-shell > .codex-main { padding-top: 22px !important; padding-bottom: 20px !important; } #home.codex-home .home-hero-logo img { height: 44px !important; } #home.codex-home .codex-copy { margin-top: 1.6vh !important; } #home.codex-home .codex-access { margin-top: 1.8vh !important; gap: 1.2vh !important; } #home.codex-home .codex-access .codex-option { padding-top: 1.6vh !important; padding-bottom: 1.6vh !important; } #home.codex-home .home-company-contact { margin-top: 1.6vh !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 4px 16px !important; padding-top: 1.2vh !important; } } /* Modelo A — Coluna alta à esquerda: estreita (≈ 1/3 da tela), da altura da tela, contato no pé do painel. */ @media (min-width: 761px) { #home.codex-home { --home-panel-w: clamp(440px, 33vw, 580px); } #home.codex-home .codex-shell > .codex-main { width: var(--home-panel-w) !important; } #home.codex-home .home-company-contact { flex-direction: column !important; gap: 8px !important; padding-top: 16px !important; border-top: 1px solid rgba(255,255,255,.14) !important; } } @media (min-width: 761px) and (max-height: 820px) { #home.codex-home .home-company-contact { flex-direction: row !important; flex-wrap: wrap !important; gap: 4px 16px !important; } #home.codex-home .codex-access .codex-option { padding-top: 1.4vh !important; padding-bottom: 1.4vh !important; row-gap: .4vh !important; } } /* Modelo A em tela bem baixa (até 680 px de altura): um pouco mais junto para o contato não encostar na borda. */ @media (min-width: 761px) and (max-height: 680px) { #home.codex-home .codex-shell > .codex-main { padding-top: 16px !important; padding-bottom: 16px !important; margin-top: 14px !important; height: calc(100svh - var(--unified-footer-h, 38px) - 28px) !important; } #home.codex-home .home-hero-logo img { height: 36px !important; } #home.codex-home .codex-copy p { font-size: 13.5px !important; margin-top: 4px !important; } #home.codex-home .codex-access { gap: 6px !important; margin-top: 10px !important; } #home.codex-home .codex-access .codex-option { padding-top: 7px !important; padding-bottom: 7px !important; } #home.codex-home .home-company-contact { margin-top: 8px !important; padding-top: 8px !important; } } /* Pendências: abas "Em aberto" / "Tratativas realizadas" e janela de detalhe da tratativa (PO, 02/10/2026). */ .pend-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .pend-tab { border: 1px solid #e2e8f0; background: #fff; color: #334155; border-radius: 999px; padding: 9px 16px; font-size: 15px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .pend-tab b { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #e2e8f0; color: #0f172a; font-size: 13px; text-align: center; } .pend-tab.active { background: #312e81; border-color: #312e81; color: #fff; } .pend-tab.active b { background: rgba(255,255,255,.22); color: #fff; } #p-pendencias .flow-table td { white-space: normal !important; } #p-pendencias .flow-table td:last-child { white-space: nowrap !important; } .tv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; } .tv-data { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; } .tv-row { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 10px; } .tv-row small { font-size: 13px; color: #475569; font-weight: 600; } .tv-row b { font-size: 15.5px; color: #0f172a; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; } .tv-photo { display: flex; flex-direction: column; gap: 6px; align-items: center; text-decoration: none; color: #4338ca; font-size: 13.5px; font-weight: 600; } .tv-photo img { width: 260px; max-height: 300px; object-fit: contain; border-radius: 12px; border: 1px solid #e2e8f0; background: #f8fafc; } .tv-nophoto { height: 160px; justify-content: center; border: 1px dashed #cbd5e1; border-radius: 12px; color: #64748b; } @media (max-width: 760px) { .tv-grid { grid-template-columns: 1fr; } .tv-data { grid-template-columns: 1fr; } .tv-photo img { width: 100%; max-height: 200px; } .pend-tab { flex: 1; justify-content: center; } } #appShell .flow-table th:last-child .col-grip { right: 0; } /* Home (computador) — robustez para MacBook/Safari (fonte do sistema mais larga e alta), PO 02/10/2026: o painel cresce se o conteúdo precisar (contato nunca fica fora do bloco) e o endereço fica numa linha só. */ @media (min-width: 761px) { #home.codex-home { --home-panel-w: clamp(470px, 35vw, 600px); } #home.codex-home .codex-shell > .codex-main { height: auto !important; min-height: calc(100svh - var(--unified-footer-h, 38px) - 48px) !important; padding-left: clamp(24px, 2.2vw, 36px) !important; padding-right: clamp(24px, 2.2vw, 36px) !important; } #home.codex-home .home-contact-address, #home.codex-home .home-contact-address > span:last-child { white-space: nowrap !important; overflow: visible !important; } #home.codex-home .home-contact-item { font-size: clamp(11.5px, min(1.6vh, .92vw), 15px) !important; letter-spacing: -.005em; } } @media (min-width: 761px) and (max-height: 680px) { #home.codex-home .codex-shell > .codex-main { min-height: calc(100svh - var(--unified-footer-h, 38px) - 28px) !important; } } /* Home: níveis de aperto do fitHome() (fontes maiores no Mac, zoom). O restante fica no bloco #home.codex-home.home-fit-N abaixo. */ @media (min-width: 761px) { #home.home-fit-1 .codex-copy p { line-height: 1.35 !important; } #home.home-fit-1 .home-company-contact { padding-top: 10px !important; } #home.home-fit-1 .codex-access .codex-option { padding-top: 9px !important; padding-bottom: 9px !important; } #home.home-fit-2 .codex-access .codex-desc { line-height: 1.3 !important; } #home.home-fit-3 .codex-access .codex-icon, #home.home-fit-3 .codex-access .codex-arrow { grid-row: 1 !important; } } /* Home (computador): conteúdo cresce com a altura da tela e o espaço que sobra é distribuído por igual (sem buracos). */ @media (min-width: 761px) { #home.codex-home .codex-shell > .codex-main { justify-content: space-evenly !important; } #home.codex-home .home-hero-logo img { height: clamp(48px, 8.5vh, 92px) !important; } #home.codex-home .codex-copy { margin-top: 0 !important; } #home.codex-home .codex-copy h1 { font-size: clamp(30px, min(5.4vh, 3.1vw), 54px) !important; } #home.codex-home .codex-copy p { font-size: clamp(14px, min(2vh, 1.15vw), 19px) !important; } #home.codex-home .codex-access { margin-top: 0 !important; gap: clamp(8px, 1.8vh, 18px) !important; } #home.codex-home .codex-access .codex-option { padding-top: clamp(10px, 2.2vh, 24px) !important; padding-bottom: clamp(10px, 2.2vh, 24px) !important; } #home.codex-home .codex-access .codex-option strong { font-size: clamp(17px, min(2.7vh, 1.6vw), 25px) !important; } #home.codex-home .codex-access .codex-desc { font-size: clamp(12.5px, min(1.9vh, 1.1vw), 17px) !important; } #home.codex-home .codex-access .codex-icon { width: clamp(38px, 6vh, 58px) !important; height: clamp(38px, 6vh, 58px) !important; } #home.codex-home .codex-access .codex-arrow { width: clamp(34px, 5vh, 50px); height: clamp(34px, 5vh, 50px); } #home.codex-home .home-company-contact { margin-top: 0 !important; } } /* Níveis de aperto (fitHome) com prioridade sobre o tamanho por altura acima — só agem quando o conteúdo não cabe. */ @media (min-width: 761px) { #home.codex-home.home-fit-1 .codex-shell > .codex-main { justify-content: space-between !important; padding-top: 18px !important; padding-bottom: 16px !important; margin-top: 14px !important; } #home.codex-home.home-fit-1 .home-hero-logo img { height: 44px !important; } #home.codex-home.home-fit-1 .codex-copy { margin-top: 12px !important; } #home.codex-home.home-fit-1 .codex-copy h1 { font-size: clamp(26px, 3.8vh, 38px) !important; } #home.codex-home.home-fit-1 .codex-copy p { margin-top: 6px !important; font-size: 13.5px !important; } #home.codex-home.home-fit-1 .codex-access { margin-top: 12px !important; gap: 8px !important; } #home.codex-home.home-fit-1 .codex-access .codex-option { padding-top: 9px !important; padding-bottom: 9px !important; } #home.codex-home.home-fit-1 .codex-access .codex-option strong { font-size: 17px !important; } #home.codex-home.home-fit-1 .codex-access .codex-desc { font-size: 12.5px !important; } #home.codex-home.home-fit-1 .codex-access .codex-icon { width: 36px !important; height: 36px !important; } #home.codex-home.home-fit-1 .home-company-contact { margin-top: 10px !important; } #home.codex-home.home-fit-2 .codex-copy p { display: none !important; } #home.codex-home.home-fit-3 .codex-access .codex-desc { display: none !important; } #home.codex-home.home-fit-4 .home-hero-logo img { height: 32px !important; } #home.codex-home.home-fit-4 .codex-copy h1 { font-size: 24px !important; } } /* Home (computador): altura do painel medida pelo fitHome() na janela real (Safari/Chrome iguais). */ @media (min-width: 761px) { #home.codex-home[style*="--home-h"] .codex-shell > .codex-main { height: var(--home-h) !important; min-height: 0 !important; margin-top: var(--home-gap) !important; margin-bottom: calc(var(--home-foot) + var(--home-gap)) !important; } } /* Home no computador nunca rola: o painel já é medido para caber (fitHome); trava extra contra diferença de 1–2 px. */ @media (min-width: 761px) { html:has(#home.codex-home:not(.hidden)), body:has(#home.codex-home:not(.hidden)) { overflow: hidden !important; overscroll-behavior: none; } } @media (min-width: 761px) { #home.codex-home:not(.hidden) { overflow: hidden !important; } } /* Home (computador): contato sempre em 2 linhas — endereço sozinho; telefone e e-mail juntos (PO, 02/10/2026). */ @media (min-width: 761px) { #home.codex-home .home-company-contact, #home.codex-home[class*="home-fit"] .home-company-contact { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 22px !important; } #home.codex-home .home-company-contact > .home-contact-address { flex: 0 0 100% !important; } #home.codex-home .home-company-contact > .home-contact-item:not(.home-contact-address) { flex: 0 0 auto !important; } } /* Editor de modelos: nome editável no próprio título. O corpo do editor fica só com as seções (PO, 02/10/2026). */ #flowModelEditor .fm-title { flex: 1; min-width: 0; } #flowModelEditor .fm-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; } #flowModelEditor .fm-title-input { flex: 1 1 260px; min-width: 180px; font-size: 20px !important; font-weight: 800 !important; color: #0f172a; height: 38px !important; padding: 2px 8px !important; margin-left: -8px; border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; } #flowModelEditor .fm-title-input:hover { border-color: #e2e8f0 !important; background: #f8fafc !important; } #flowModelEditor .fm-title-input:focus { border-color: #6366f1 !important; background: #fff !important; outline: none; } #appShell #flowModelEditor .fm-title-input { font-size: 20px !important; height: 38px !important; min-height: 38px !important; } /* Editor de modelos: seções logo abaixo do título (sem espaço vazio) e linhas de pergunta mais baixas (PO, 02/10/2026). */ #appShell #flowModelEditor .flow-editor-head { margin-bottom: 6px !important; padding-bottom: 10px !important; } #appShell #flowModelEditor .flow-editor-scroll { margin-top: 0 !important; padding-top: 2px !important; } #appShell #flowModelEditor .flow-section { margin-top: 0 !important; padding-top: 10px !important; } #appShell #flowModelEditor .flow-section + .flow-section { margin-top: 10px !important; } #appShell #flowModelEditor .flow-section-head { margin-bottom: 8px !important; } #appShell #flowModelEditor .flow-section-head input { height: 40px !important; min-height: 40px !important; } #appShell #flowModelEditor .flow-qrow { padding-top: 7px !important; padding-bottom: 7px !important; margin-bottom: 6px !important; row-gap: 4px !important; } /* Excluir / Descartar modelo */ #appShell #flowModelEditor .fm-delete { color: #b91c1c !important; border-color: #fecaca !important; } #appShell #flowModelEditor .fm-delete:hover { background: #fef2f2 !important; } .flow-modal .btn.danger { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important; } .tv-confirm { font-size: 16px; margin: 0 0 8px; } /* Editor de modelos: Status com o mesmo tamanho/cantos/letra dos botões ao lado (usa a classe .btn); sem "v1, v2". */ #appShell #flowModelEditor .fm-status { appearance: none; -webkit-appearance: none; cursor: pointer; width: auto !important; padding-right: 36px !important; text-align: left; background-image: linear-gradient(45deg, transparent 50%, #334155 50%), linear-gradient(135deg, #334155 50%, transparent 50%) !important; background-size: 6px 6px, 6px 6px !important; background-repeat: no-repeat !important; background-position: right 20px center, right 14px center !important; background-color: #fff !important; } #appShell #flowModelEditor .fm-status.is-off { color: #b91c1c !important; border-color: #fecaca !important; background-color: #fef2f2 !important; } #appShell #flowModelEditor .flow-editor-head .flow-actions { align-items: center; } #appShell #flowModelEditor .flow-editor-head .flow-actions > :is(.btn, select) { height: 44px !important; min-height: 44px !important; line-height: 1 !important; display: inline-flex; align-items: center; box-sizing: border-box !important; } /* Ao atualizar (F5): nada aparece até o site saber se a pessoa está logada — evita "piscar" a Home antes do Gestor. */ body.booting { background: #0b1a33 !important; } body.booting > section, body.booting #appShell, body.booting #operatorApp { visibility: hidden !important; } /* Esqueci minha senha: link nos logins, pedidos para o gestor em Usuários (PO, 02/10/2026). */ .link-forgot { align-self: flex-end; margin: -2px 0 10px auto; display: block; background: none; border: 0; padding: 4px 2px; color: #4338ca; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .link-forgot:hover { color: #312e81; } .fg-done { margin: 0 0 6px; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.45; color: #1e293b; } .pwreq-box { margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; display: grid; gap: 6px; } .pwreq-box > b { font-size: 16px; } .pwreq-box > span { font-size: 14px; } .pwreq-box ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; } .pwreq-box li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 10px; font-size: 14.5px; color: #1e293b; } .pwreq-box li > span:last-child { display: flex; gap: 6px; } /* Consulta: leitor de QR Code (PO, 03/10/2026). */ .consult-scan-btn { width: 100%; min-height: 50px; margin-top: 10px; font-size: 16px !important; font-weight: 800 !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; border-radius: 14px !important; } .consult-scan-btn span { font-size: 20px; } .scan-box { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 1 / 1; max-height: 56vh; border-radius: 16px; overflow: hidden; background: #0f172a; } .scan-video { width: 100%; height: 100%; object-fit: cover; display: block; } .scan-frame { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); } .scan-msg { margin: 10px 0 0; text-align: center; font-size: 15.5px; color: #1e293b; font-weight: 600; } .scan-msg.bad { color: #b91c1c; } /* Modais pequenos e médios (PO, 03/10/2026): formulários curtos não ficam esticados na largura das tabelas. */ @media (min-width: 761px) { .flow-modal.modal-sm { width: min(480px, 94vw) !important; padding: 22px 26px 22px !important; } .flow-modal.modal-md { width: min(640px, 94vw) !important; padding: 22px 26px 22px !important; } } .flow-modal:is(.modal-sm, .modal-md) .flow-modal-head { padding-bottom: 12px !important; margin-bottom: 14px !important; } .flow-modal:is(.modal-sm, .modal-md) .flow-modal-head h2, .flow-modal:is(.modal-sm, .modal-md) #flowModalTitle { font-size: 21px !important; } .flow-modal:is(.modal-sm, .modal-md) .login-step-lead { font-size: 15px !important; line-height: 1.5 !important; color: #475569 !important; margin: 0 0 16px !important; } .flow-modal:is(.modal-sm, .modal-md) .field { margin-bottom: 4px; } .flow-modal:is(.modal-sm, .modal-md) .field label { margin-bottom: 6px !important; } .flow-modal.modal-sm .flow-form-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .flow-modal:is(.modal-sm, .modal-md) .flow-modal-actions { margin-top: 18px !important; padding-top: 16px; border-top: 1px solid #eef0f4; display: flex; justify-content: flex-end; gap: 10px; } .flow-modal.modal-sm .flow-modal-actions .btn { min-width: 120px; } .flow-modal:is(.modal-sm, .modal-md) .fg-done { margin-bottom: 0; } /* Tempo de sessão no rodapé (PO, 03/10/2026). */ #globalPortalFooter .session-timer { margin-left: 14px; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.12); color: #e2e8f0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } #globalPortalFooter .session-timer.warn { background: #b91c1c; color: #fff; animation: session-blink 1s steps(2) infinite; } @keyframes session-blink { 50% { opacity: .65; } } @media (prefers-reduced-motion: reduce) { #globalPortalFooter .session-timer.warn { animation: none; } } /* Usuário: campo repetido em vermelho; linha da regra da senha verde/vermelha conforme o que é digitado (PO, 03/10/2026). */ .flow-modal .field input.field-dup { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important; background: #fff7f7 !important; } .flow-modal .fu-pass-rule.ok { color: #047857 !important; font-weight: 700; } .flow-modal .fu-pass-rule.bad { color: #b91c1c !important; font-weight: 700; } .flow-modal .fu-pass-rule { font-size: 13px !important; } .flow-modal .field select.field-dup { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important; } /* Número de pedidos de nova senha no menu "Usuários" (PO, 03/10/2026). */ .navbtn .nav-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #f59e0b; color: #1f2937; font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(255,255,255,.25); animation: nav-badge-pop .35s ease-out; } .navbtn .nav-badge[hidden] { display: none; } @keyframes nav-badge-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .navbtn .nav-badge { animation: none; } } /* Rodapé: "Precisando de ajuda?" discreto (ícone + texto, fundo transparente); o número não aparece — o link abre o WhatsApp do suporte com a mensagem pronta (PO, 03/10/2026). */ #globalPortalFooter .footer-help { display: inline-flex; align-items: center; gap: 5px; background: transparent; color: #fff !important; text-decoration: none; font-weight: 600; white-space: nowrap; opacity: .92; transition: opacity .15s; } #globalPortalFooter .footer-help-ico { width: 1.45em; height: 1.45em; flex: none; color: #25d366; } #globalPortalFooter .footer-help:hover, #globalPortalFooter .footer-help:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 2px; outline: none; } #globalPortalFooter .footer-help:focus-visible .footer-help-ico { filter: drop-shadow(0 0 3px #25d366); } /* Telas estreitas: o rodapé nunca passa da largura — sai o copyright. */ @media (max-width: 760px) { #globalPortalFooter .footer-copy { display: none !important; } } @media (max-width: 330px) { #globalPortalFooter .footer-dev, #globalPortalFooter .footer-help-sep { display: none !important; } } /* Gestor › Fazer Checklist: identificação digitada | lista dos equipamentos ativos, lado a lado (PO, 03/10/2026). */ #p-checklist .desk-find-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 14px; } #p-checklist .desk-find-grid .field { margin: 0; } @media (max-width: 760px) { #p-checklist .desk-find-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } } /* Dados da Empresa: Baixar backup e Zerar dados no topo; janela de zerar sem rolagem (PO, 03/10/2026). */ #p-empresa .company-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; } .reset-note { font-size: 13px; margin: 0 0 10px; } .reset-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-bottom: 12px; } .reset-part { display: flex !important; align-items: flex-start; gap: 8px; padding: 7px 9px; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; } .reset-part span { display: flex; flex-direction: column; line-height: 1.25; } .reset-part small { color: #64748b; font-size: 11.5px; } .reset-part:has(input:checked) { border-color: #fca5a5; background: #fef2f2; } .reset-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .9fr); gap: 10px; } .reset-steps .field { margin: 0; } .reset-code-row { display: flex; gap: 6px; } .reset-code-row input { min-width: 0; flex: 1; } .reset-code-row .btn { white-space: nowrap; } .reset-sent { font-size: 12.5px; margin: 8px 0 0; color: #15803d !important; } @media (max-width: 760px) { .reset-parts { grid-template-columns: minmax(0, 1fr); gap: 5px; } .reset-part { padding: 5px 8px; } .reset-steps { grid-template-columns: minmax(0, 1fr); gap: 6px; } } /* Restaurar backup: origem (servidor | computador) lado a lado; no celular, um embaixo do outro. */ .restore-source { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; margin-bottom: 10px; } .restore-source .field { margin: 0; } .restore-source input[type="file"] { font-size: 12.5px; } @media (max-width: 760px) { .restore-source { grid-template-columns: minmax(0, 1fr); gap: 6px; } } /* Home conforme o horário de Brasília (PO, 03/10/2026): a MESMA foto, mudando só o céu — amanhecer (5h–12h), tarde (12h–18h) e noite (18h–5h, céu estrelado com lua). Caminhões, galpão e chão ficam iguais à foto original. As 3 versões foram feitas a partir de frota-premium.jpg (só o céu recolorido). O app.js marca html[data-daypart]. */ @media (min-width: 761px) { html[data-daypart="manha"] #home.codex-home > .codex-bg { background-image: linear-gradient(90deg, rgba(5, 14, 32, .62) 0%, rgba(5, 14, 32, .22) 46%, rgba(5, 14, 32, .04) 75%), linear-gradient(0deg, rgba(5, 14, 32, .45), rgba(5, 14, 32, 0) 35%), url("/assets/frota-amanhecer.jpg") !important; } html[data-daypart="tarde"] #home.codex-home > .codex-bg { background-image: linear-gradient(90deg, rgba(5, 14, 32, .62) 0%, rgba(5, 14, 32, .22) 46%, rgba(5, 14, 32, .04) 75%), linear-gradient(0deg, rgba(5, 14, 32, .45), rgba(5, 14, 32, 0) 35%), url("/assets/frota-tarde.jpg") !important; } html[data-daypart="noite"] #home.codex-home > .codex-bg { background-image: linear-gradient(90deg, rgba(5, 14, 32, .62) 0%, rgba(5, 14, 32, .22) 46%, rgba(5, 14, 32, .04) 75%), linear-gradient(0deg, rgba(5, 14, 32, .45), rgba(5, 14, 32, 0) 35%), url("/assets/frota-noite.jpg") !important; } } @media (max-width: 760px) { html[data-daypart="manha"] #home.codex-home .codex-bg { background-image: radial-gradient(circle at 78% 20%, rgba(33, 113, 255, .24), transparent 34%), linear-gradient(90deg, rgba(4, 20, 43, .97) 0%, rgba(5, 29, 62, .88) 42%, rgba(5, 35, 75, .44) 100%), linear-gradient(0deg, rgba(4, 18, 39, .90), rgba(4, 24, 52, .10) 72%), url("/assets/frota-amanhecer.jpg") !important; } html[data-daypart="tarde"] #home.codex-home .codex-bg { background-image: radial-gradient(circle at 78% 20%, rgba(33, 113, 255, .24), transparent 34%), linear-gradient(90deg, rgba(4, 20, 43, .97) 0%, rgba(5, 29, 62, .88) 42%, rgba(5, 35, 75, .44) 100%), linear-gradient(0deg, rgba(4, 18, 39, .90), rgba(4, 24, 52, .10) 72%), url("/assets/frota-tarde.jpg") !important; } html[data-daypart="noite"] #home.codex-home .codex-bg { background-image: radial-gradient(circle at 78% 20%, rgba(33, 113, 255, .24), transparent 34%), linear-gradient(90deg, rgba(4, 20, 43, .97) 0%, rgba(5, 29, 62, .88) 42%, rgba(5, 35, 75, .44) 100%), linear-gradient(0deg, rgba(4, 18, 39, .90), rgba(4, 24, 52, .10) 72%), url("/assets/frota-noite.jpg") !important; } } /* Corretiva antes do novo checklist (PO, 03/10/2026): aviso de pendências e formulário da corretiva, sem rolagem. */ .corr-alert { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; font-size: 13.5px; line-height: 1.4; } .corr-alert b { font-size: 15px; color: #7c2d12; } .corr-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; } .corr-list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 10px; } .corr-list li > div { display: flex; flex-direction: column; min-width: 0; } .corr-list small { color: #64748b; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch; } .corr-list .corr-more { justify-content: center; color: #64748b; font-size: 12.5px; } /* Item com defeito (INSUFICIENTE) em vermelho na revisão final e na visualização do checklist (PO, 03/10/2026). */ #operatorApp .op-review-list > div.issue { background: #fee2e2 !important; box-shadow: inset 4px 0 0 #dc2626; } #operatorApp .op-review-list > div.issue > span { color: #7f1d1d !important; font-weight: 700; } #operatorApp .op-review-list > div.issue .flow-review-note { color: #991b1b !important; } #operatorApp .op-review-list > div.issue button { background: #fecaca !important; color: #7f1d1d !important; } #c4 tr.issue-row td, .flow-table tr.issue-row td { background: #fee2e2 !important; color: #7f1d1d; } #c4 tr.issue-row td:first-child, .flow-table tr.issue-row td:first-child { box-shadow: inset 4px 0 0 #dc2626; font-weight: 700; } #c4 tr.issue-row small.muted { color: #991b1b !important; } /* Tela de checklist finalizado no celular (PO, 03/10/2026): letras maiores e só os itens com problema, em vermelho. */ #operatorApp .op-result-card h3 { font-size: 26px !important; } #operatorApp .op-result-card > p { font-size: 17px !important; } #operatorApp .op-result-card .flow-badge { font-size: 16px !important; padding: 7px 14px !important; } #operatorApp .op-result-data small { font-size: 14px !important; } #operatorApp .op-result-data b { font-size: 17px !important; } #operatorApp .op-final-issues { text-align: left; margin: 12px 0 4px; display: grid; gap: 8px; } #operatorApp .op-final-title { font-size: 17px; color: #991b1b; } #operatorApp .op-final-issue { background: #fee2e2; border-radius: 12px; box-shadow: inset 4px 0 0 #dc2626; padding: 10px 12px 10px 14px; } #operatorApp .op-final-issue > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } #operatorApp .op-final-issue span { font-size: 17px; font-weight: 800; color: #7f1d1d; } #operatorApp .op-final-issue em { font-style: normal; font-size: 13px; font-weight: 700; color: #b91c1c; white-space: nowrap; } #operatorApp .op-final-issue small { display: block; margin-top: 4px; font-size: 15px; color: #7f1d1d; line-height: 1.35; } #operatorApp .op-final-ok { margin: 12px 0 4px; padding: 12px; border-radius: 12px; background: #dcfce7; color: #166534; font-size: 16px; font-weight: 700; } /* Inspeção no celular (PO, 03/10/2026): placa em destaque, como uma plaquinha; "INSUFICIENTE" cabe no botão compacto. */ #operatorApp .op-question-top .op-asset-pill { font-size: 19px !important; font-weight: 900; letter-spacing: .06em; padding: 6px 14px !important; background: #fff !important; color: #0f172a !important; border: 2px solid #1e3a8a !important; border-radius: 8px !important; box-shadow: inset 0 5px 0 #1e40af; padding-top: 9px !important; } #operatorApp .op-question-card.issue-open .flow-op-answer-title { font-size: 12.5px !important; letter-spacing: 0 !important; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; } /* Login do checklist: senha só com teclado numérico (PIN do motorista) — PO, 03/10/2026. */ /* Confirmar equipamento no celular (PO, 03/10/2026): tipo, placa e modelo centralizados, letra maior, uma linha só (a fonte diminui sozinha só se o nome não couber); "Checklist vinculado" ocupa a linha toda. */ #operatorApp .op-asset-card .op-asset-top { position: relative; flex-direction: column; align-items: center; text-align: center; gap: 2px; } #operatorApp .op-asset-card .op-asset-icon { display: none !important; } #operatorApp .op-asset-card .op-asset-top > .flow-badge { position: absolute; top: 0; right: 0; } #operatorApp .op-asset-card .op-asset-name { width: 100%; } #operatorApp .op-asset-card .op-asset-name > * { white-space: nowrap; overflow: hidden; margin-left: auto; margin-right: auto; max-width: 100%; } #operatorApp .op-asset-card .op-asset-name span { font-size: 15px !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; display: block; padding: 0 56px; } #operatorApp .op-asset-card .op-asset-name h3 { font-size: 34px !important; letter-spacing: .03em; margin: 2px 0 !important; } #operatorApp .op-asset-card .op-asset-name p { font-size: 18px !important; font-weight: 700; color: #1e293b !important; } #operatorApp .op-asset-card .op-asset-details > div:first-child { grid-column: 1 / -1; } #operatorApp .op-asset-card .op-asset-details b { white-space: nowrap; overflow: hidden; font-size: 17px !important; } /* Barra de baixo do app do motorista (PO, 03/10/2026): Início | Feitos | Pendências | Sair, cada um na cor do que faz: Início azul, Feitos verde, Pendências laranja, Sair vermelho. Selecionado = cor cheia; os outros = cor clara. */ #operatorApp .op-bottom-nav button { border-radius: 14px !important; transition: background .15s, color .15s; } #operatorApp .op-bottom-nav button span, #operatorApp .op-bottom-nav button b { color: inherit !important; } #operatorApp .op-bottom-nav .nav-inicio { --nav: #2563eb; } #operatorApp .op-bottom-nav .nav-feitos { --nav: #16a34a; } #operatorApp .op-bottom-nav .nav-pend { --nav: #ea580c; } #operatorApp .op-bottom-nav .nav-sair { --nav: #dc2626; } #operatorApp .op-bottom-nav button[class*="nav-"] { background: color-mix(in srgb, var(--nav) 22%, transparent) !important; color: color-mix(in srgb, var(--nav) 35%, #fff) !important; border: 1px solid color-mix(in srgb, var(--nav) 45%, transparent) !important; } #operatorApp .op-bottom-nav button[class*="nav-"].active { background: var(--nav) !important; color: #fff !important; border-color: var(--nav) !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--nav) 45%, transparent); } #operatorApp .op-bottom-nav button[class*="nav-"] span { font-size: 18px !important; } #operatorApp .op-bottom-nav button[class*="nav-"] b { font-weight: 800 !important; } /* Coluna STATUS do Painel (PO, 03/10/2026): selo em maiúsculas, mesma altura dos de Resultado. */ #appShell .report-status { text-transform: uppercase; white-space: nowrap; } /* Regra "checklists por dia" em Dados da Empresa (PO, 03/10/2026). */ #appShell .company-rule { margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; } #appShell .company-rule .field { margin: 0; } #appShell .company-rule small { font-size: 10.5px; line-height: 1.3; } @media (max-width: 760px) { #appShell .company-rule { grid-template-columns: 1fr; gap: 4px; } } /* Histórico do checklist em linha do tempo (PO, 03/10/2026). */ .flow-modal .hist-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; font-size: 12px; } .flow-modal .hist-line { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid #e2e8f0; display: grid; gap: 10px; } .flow-modal .hist-line > li { position: relative; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; } .flow-modal .hist-line > li::before { content: ""; position: absolute; left: -26px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 3px #fff; } .flow-modal .hist-line > li.hist-good::before { background: #16a34a; } .flow-modal .hist-line > li.hist-warn::before { background: #ea580c; } .flow-modal .hist-line > li.hist-bad::before { background: #dc2626; } .flow-modal .hist-line > li.hist-info::before { background: #2563eb; } .flow-modal .hist-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .flow-modal .hist-top .muted { font-size: 11px; white-space: nowrap; } .flow-modal .hist-text { font-size: 12px; margin-top: 4px; line-height: 1.4; } .flow-modal .hist-text small { font-size: 11px; color: #64748b; } .flow-modal .hist-bad { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; } .flow-modal .hist-bad li { background: #fee2e2; color: #991b1b; border-radius: 6px; padding: 4px 8px; } /* Resumo do equipamento — Diário / Semanal / Mensal (PO, 03/10/2026). */ .flow-modal .vsum-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, #24255f 0%, #3E4095 100%); color: #fff; } .flow-modal .vsum-id { display: flex; align-items: center; gap: 14px; min-width: 0; } .flow-modal .vsum-plate { background: #fff; color: #24255f; font-weight: 800; font-size: 18px; letter-spacing: .06em; padding: 7px 14px; border-radius: 8px; border-top: 5px solid #2563eb; box-shadow: 0 4px 14px rgba(0,0,0,.18); white-space: nowrap; } .flow-modal .vsum-id b { display: block; font-size: 15px; text-transform: uppercase; letter-spacing: .02em; } .flow-modal .vsum-id small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #c7c9f0; margin-top: 3px; } .flow-modal .vsum-periods { display: inline-flex; padding: 3px; gap: 3px; border-radius: 11px; background: rgba(255,255,255,.14); } .flow-modal .vsum-periods button { border: 0; background: transparent; color: #e0e1fb; padding: 8px 18px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s; } .flow-modal .vsum-periods button:hover { background: rgba(255,255,255,.12); } .flow-modal .vsum-periods button.on { background: #fff; color: #24255f; box-shadow: 0 2px 8px rgba(0,0,0,.15); } .flow-modal .vsum-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 10px; } .flow-modal .vsum-nav b { font-size: 16px; min-width: 240px; text-align: center; color: #24255f; } .flow-modal .vsum-nav button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d5d8e6; background: #fff; font-size: 22px; line-height: 1; color: #3E4095; cursor: pointer; transition: all .15s; } .flow-modal .vsum-nav button:hover:not(:disabled) { background: #3E4095; color: #fff; border-color: #3E4095; } .flow-modal .vsum-nav button:disabled { opacity: .35; cursor: default; } .flow-modal .vsum-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .flow-modal .vsum-card { position: relative; overflow: hidden; border: 1px solid #e6e8f0; border-radius: 12px; padding: 10px 12px 9px 15px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.06); } .flow-modal .vsum-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #94a3b8; } .flow-modal .vsum-card small { display: block; font-size: 10.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .03em; } .flow-modal .vsum-card b { display: block; font-size: 26px; line-height: 1.15; color: #0f172a; margin-top: 2px; } .flow-modal .vsum-card b small { display: inline; font-size: 14px; text-transform: none; letter-spacing: 0; color: #94a3b8; } .flow-modal .vsum-card em { display: block; font-style: normal; font-size: 10.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flow-modal .vsum-card.main::before { background: #3E4095; } .flow-modal .vsum-card.main b { color: #24255f; } .flow-modal .vsum-card.good::before { background: #16a34a; } .flow-modal .vsum-card.good b { color: #15803d; } .flow-modal .vsum-card.warn::before { background: #ea580c; } .flow-modal .vsum-card.warn b { color: #c2410c; } .flow-modal .vsum-card.bad::before { background: #dc2626; } .flow-modal .vsum-card.bad b { color: #dc2626; } .flow-modal .vsum-card.muted b { color: #94a3b8; } .flow-modal .vsum-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; margin-top: 12px; } .flow-modal .vsum-panel { border: 1px solid #e6e8f0; border-radius: 12px; padding: 12px 14px; background: #fafbfe; } .flow-modal .vsum-title { font-weight: 800; font-size: 12px; color: #24255f; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .flow-modal .vsum-title span { font-weight: 500; font-size: 10.5px; text-transform: none; letter-spacing: 0; color: #94a3b8; } .flow-modal .vsum-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .flow-modal .vsum-cal i { font-style: normal; font-size: 10px; text-align: center; color: #94a3b8; font-weight: 700; text-transform: uppercase; } .flow-modal .vsum-day { position: relative; display: grid; place-items: center; border: 0; border-radius: 8px; height: 30px; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .12s, box-shadow .12s; } .flow-modal button.vsum-day:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,23,42,.15); } .flow-modal .vsum-day.today { outline: 2px solid #3E4095; outline-offset: 1px; } .flow-modal .vsum-day.future { background: transparent; color: #cbd5e1; border: 1px dashed #e2e8f0; cursor: default; } .flow-modal .vsum-day sup { position: absolute; top: 2px; right: 4px; font-size: 8.5px; } .flow-modal .vsum-day.good { background: #16a34a; color: #fff; } .flow-modal .vsum-day.warn { background: #f97316; color: #fff; } .flow-modal .vsum-day.bad { background: #dc2626; color: #fff; } .flow-modal .vsum-day.none { background: #eef0f5; color: #94a3b8; } .flow-modal .vsum-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; font-size: 11px; color: #475569; } .flow-modal .vsum-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; } .flow-modal .vsum-legend .good::before { background: #16a34a; } .flow-modal .vsum-legend .warn::before { background: #f97316; } .flow-modal .vsum-legend .bad::before { background: #dc2626; } .flow-modal .vsum-legend .none::before { background: #eef0f5; border: 1px solid #d5d8e6; } .flow-modal .vsum-daylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .flow-modal .vsum-daylist li { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid #e6e8f0; border-left: 4px solid #94a3b8; border-radius: 9px; padding: 7px 10px; font-size: 12.5px; } .flow-modal .vsum-daylist li.good { border-left-color: #16a34a; } .flow-modal .vsum-daylist li.warn { border-left-color: #f97316; } .flow-modal .vsum-daylist li.bad { border-left-color: #dc2626; background: #fff5f5; } .flow-modal .vsum-daylist li > b { font-size: 14px; color: #24255f; } .flow-modal .vsum-daylist small { display: block; font-size: 10.5px; color: #64748b; } .flow-modal .vsum-top { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 5px; counter-reset: top; } .flow-modal .vsum-top li { counter-increment: top; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; background: #fff; border: 1px solid #fde2e2; border-radius: 8px; padding: 5px 9px; font-size: 12px; color: #7f1d1d; } .flow-modal .vsum-top li::before { content: counter(top); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 800; } .flow-modal .vsum-top li b { background: #fee2e2; border-radius: 999px; padding: 1px 8px; font-size: 11px; } .flow-modal .vsum-empty { font-size: 12px; margin: 0 0 12px; color: #15803d; font-weight: 600; } @media (max-width: 760px) { .flow-modal .vsum-hero { padding: 10px 12px; gap: 10px; } .flow-modal .vsum-plate { font-size: 15px; padding: 5px 10px; } .flow-modal .vsum-periods { width: 100%; } .flow-modal .vsum-periods button { flex: 1; padding: 7px 6px; } .flow-modal .vsum-nav { margin: 8px 0; } .flow-modal .vsum-nav b { min-width: 0; font-size: 14px; } .flow-modal .vsum-cards { grid-template-columns: repeat(3, 1fr); gap: 6px; } .flow-modal .vsum-card { padding: 7px 8px 6px 11px; } .flow-modal .vsum-card b { font-size: 19px; } .flow-modal .vsum-card em { display: none; } .flow-modal .vsum-body { grid-template-columns: 1fr; gap: 8px; } .flow-modal .vsum-day { height: 24px; font-size: 11px; } .flow-modal .vsum-id small span.vsum-lbl, .flow-modal .vsum-title span { display: none; } .flow-modal .vsum-id b { font-size: 13px; } .flow-modal .vsum-hero { gap: 8px; } .flow-modal .vsum-periods button { padding: 6px; font-size: 12px; } .flow-modal .vsum-nav button { width: 28px; height: 28px; font-size: 18px; } .flow-modal .vsum-card small { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flow-modal .vsum-card b { font-size: 17px; margin: 0; } .flow-modal .vsum-panel { padding: 8px 10px; } .flow-modal .vsum-title { margin-bottom: 5px; font-size: 11px; } .flow-modal .vsum-cal { gap: 3px; } .flow-modal .vsum-day { height: 21px; font-size: 10.5px; border-radius: 6px; } .flow-modal .vsum-cal i { font-size: 9px; } .flow-modal .vsum-legend { gap: 8px; font-size: 10px; margin-top: 5px; } .flow-modal .vsum-top { margin-bottom: 6px; } .flow-modal .vsum-top li:nth-child(n+4) { display: none; } .flow-modal .vsum-top li { padding: 3px 8px; font-size: 11px; } .flow-modal .vsum-daylist li { padding: 5px 8px; grid-template-columns: 38px 1fr auto; gap: 6px; font-size: 11.5px; } .flow-modal .vsum-daylist small { display: none; } .flow-modal .vsum-daylist .flow-badge { font-size: 8.5px; } .flow-modal .vsum-actions { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 6px; } .flow-modal .vsum-actions .btn { padding: 9px 6px; font-size: 12px; white-space: nowrap; } .flow-modal .vsum-actions [data-action="vsum-print"] { display: none; } } /* Dados da Empresa sem o editor de logo (PO, 03/10/2026): formulário ocupa a largura toda. */ #appShell #p-empresa .flow-company-grid.single { grid-template-columns: minmax(0, 1fr) !important; } @media (min-width: 981px) { #appShell #p-empresa .flow-company-grid.single .flow-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Equipamentos: item da pendência aberta embaixo da situação (PO, 03/10/2026). */ #appShell .op-pend { display: block; margin-top: 5px; padding: 3px 9px; border: 1px solid #fed7aa; border-radius: 999px; background: #fff7ed; color: #c2410c; font-family: inherit; font-weight: 600; font-size: 11.5px; line-height: 1.3; max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-align: left; } #appShell .op-pend:hover { background: #ffedd5; border-color: #fb923c; } /* Histórico do equipamento — linha do tempo (PO, 03/10/2026). */ .flow-modal .vtl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 8px; } .flow-modal .vtl-periods { display: inline-flex; flex-wrap: wrap; gap: 6px; } .flow-modal .vtl-periods button { border: 1px solid #d5d8e6; background: #fff; color: #334155; border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 12.5px; cursor: pointer; transition: all .15s; } .flow-modal .vtl-periods button:hover { border-color: #3E4095; color: #3E4095; } .flow-modal .vtl-periods button.on { background: #3E4095; border-color: #3E4095; color: #fff; box-shadow: 0 3px 10px rgba(62,64,149,.3); } .flow-modal .vtl-custom { display: flex; align-items: center; gap: 6px; } .flow-modal .vtl-custom input { border: 1px solid #d5d8e6; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12.5px; } .flow-modal .vtl-custom .btn { padding: 7px 12px; } .flow-modal .vtl-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 2px 8px; border-bottom: 1px solid #eef0f5; margin-bottom: 8px; } .flow-modal .vtl-summary b { color: #24255f; font-size: 14px; } .flow-modal .vtl-summary span { color: #64748b; font-size: 12px; } .flow-modal .vtl-line { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; } .flow-modal .vtl-line::before { content: ""; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(#c7c9f0, #eef0f5); } .flow-modal .vtl-day { position: relative; margin: 6px 0 6px 40px; font-size: 11px; font-weight: 800; color: #3E4095; text-transform: uppercase; letter-spacing: .05em; } .flow-modal .vtl-ev { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 10px; margin-bottom: 7px; animation: vtlIn .25s ease both; } @keyframes vtlIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .flow-modal .vtl-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: #fff; border: 2px solid #94a3b8; color: #475569; font-weight: 800; } .flow-modal .vtl-ev.good .vtl-dot { border-color: #16a34a; color: #16a34a; } .flow-modal .vtl-ev.warn .vtl-dot { border-color: #f97316; color: #ea580c; } .flow-modal .vtl-ev.bad .vtl-dot { border-color: #dc2626; background: #dc2626; color: #fff; } .flow-modal .vtl-ev.info .vtl-dot { border-color: #3E4095; color: #3E4095; } .flow-modal .vtl-card { background: #fff; border: 1px solid #e6e8f0; border-radius: 10px; padding: 7px 11px; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: box-shadow .15s; min-width: 0; } .flow-modal .vtl-card:hover { box-shadow: 0 4px 14px rgba(15,23,42,.08); } .flow-modal .vtl-ev.bad .vtl-card { border-left: 3px solid #dc2626; } .flow-modal .vtl-ev.warn .vtl-card { border-left: 3px solid #f97316; } .flow-modal .vtl-ev.good .vtl-card { border-left: 3px solid #16a34a; } .flow-modal .vtl-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .flow-modal .vtl-top span { color: #64748b; font-size: 11.5px; white-space: nowrap; } .flow-modal .vtl-text { font-size: 12px; margin-top: 3px; color: #334155; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .flow-modal .vtl-text .muted { color: #64748b; } .flow-modal .vtl-bad { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; width: 100%; } .flow-modal .vtl-bad li { background: #fee2e2; color: #991b1b; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; } .flow-modal .vtl-link { border: 0; background: none; padding: 0; margin-top: 3px; color: #3E4095; font-size: 11.5px; font-weight: 700; cursor: pointer; } .flow-modal .vtl-link:hover { text-decoration: underline; } .flow-modal .vtl-empty { padding: 28px; text-align: center; color: #64748b; background: #fafbfe; border: 1px dashed #d5d8e6; border-radius: 12px; font-size: 13px; } .flow-modal .vtl-actions { align-items: center; } .flow-modal .vtl-pager { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: 12px; color: #64748b; } .flow-modal .vtl-pager .btn { padding: 7px 10px; font-size: 12px; } @media (max-width: 760px) { .flow-modal .vtl-periods button { padding: 6px 10px; font-size: 11.5px; } .flow-modal .vtl-custom { width: 100%; } .flow-modal .vtl-custom input { flex: 1; min-width: 0; } .flow-modal .vtl-top { flex-direction: column; gap: 0; } .flow-modal .vtl-summary { flex-direction: column; gap: 0; } .flow-modal .vtl-pager { width: 100%; justify-content: space-between; margin: 0; } } /* Visualizar checklist em tela única (PO, 03/10/2026). */ .flow-modal .ckv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .flow-modal .ckv-head b { font-size: 17px; } .flow-modal .ckv-count { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; } .flow-modal .ckv-count span { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; background: #f1f5f9; color: #64748b; } .flow-modal .ckv-count .good { background: #dcfce7; color: #166534; } .flow-modal .ckv-count .bad { background: #fee2e2; color: #991b1b; } .flow-modal .ckv-title { margin: 10px 0 6px; font-size: 11.5px; font-weight: 800; color: #24255f; text-transform: uppercase; letter-spacing: .04em; } .flow-modal .ckv-bad { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .flow-modal .ckv-bad li { display: grid; grid-template-columns: minmax(160px, 1fr) 1.4fr auto auto; gap: 10px; align-items: center; background: #fff1f1; border: 1px solid #fecaca; border-left: 4px solid #dc2626; border-radius: 9px; padding: 6px 10px; font-size: 12.5px; } .flow-modal .ckv-bad li b { color: #991b1b; display: block; } .flow-modal .ckv-bad li small { color: #64748b; font-size: 10.5px; } .flow-modal .ckv-note { color: #7f1d1d; } .flow-modal .ckv-sections { columns: 3 220px; column-gap: 10px; } .flow-modal .ckv-sec { break-inside: avoid; background: #fafbfe; border: 1px solid #e6e8f0; border-radius: 10px; padding: 7px 9px; margin-bottom: 8px; } .flow-modal .ckv-sec > b { display: block; font-size: 11px; color: #3E4095; margin-bottom: 5px; } .flow-modal .ckv-sec > div { display: flex; flex-wrap: wrap; gap: 4px; } .flow-modal .ckv-chip { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #d1fae5; color: #166534; border-radius: 6px; padding: 2px 7px; font-size: 11.5px; } .flow-modal .ckv-chip.na { border-color: #e2e8f0; color: #94a3b8; } .flow-modal .ckv-sec > em { display: none; } .flow-modal .ckv-chip .flow-photo-thumb, .flow-modal .ckv-bad .flow-photo-thumb { width: 26px; height: 26px; } @media (max-width: 760px) { .flow-modal .ckv-head b { font-size: 15px; } .flow-modal .ckv-bad li { grid-template-columns: 1fr auto; gap: 2px 8px; padding: 5px 9px; font-size: 12px; } .flow-modal .ckv-bad li small { display: none; } .flow-modal .ckv-note { grid-column: 1 / -1; font-size: 11.5px; } .flow-modal .ckv-bad .flow-badge { grid-column: 2; grid-row: 1; } .flow-modal .ckv-sections { columns: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .flow-modal .ckv-sec { margin: 0; padding: 6px 8px; } .flow-modal .ckv-sec > div { display: none; } .flow-modal .ckv-sec > b { margin: 0; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flow-modal .ckv-sec > em { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: #15803d; } } /* Janelas acima do rodapé fixo (PO, 03/10/2026): o rodapé (z 10020) cobria os botões das janelas grandes. */ #flowModalRoot { z-index: 10030 !important; } .toast { z-index: 10040 !important; } /* Tecla Esc indicada no botão Limpar (PO, 03/10/2026). */ .kbd-esc { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 5px; background: #f8fafc; color: #64748b; font: 700 10px/1.4 inherit; font-family: inherit; vertical-align: 1px; } @media (hover: none), (max-width: 760px) { .kbd-esc { display: none; } } /* Dia selecionado no calendário do Resumo (PO, 03/10/2026). */ .flow-modal .vsum-day.sel { outline: 3px solid #f59e0b; outline-offset: 2px; transform: scale(1.06); } .flow-modal .vsum-dayclose { border: 0; background: #eef0f5; color: #475569; border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; } .flow-modal .vsum-dayclose:hover { background: #e2e8f0; } .flow-modal .vsum-daylist li[data-action] { cursor: pointer; transition: box-shadow .15s; } .flow-modal .vsum-daylist li[data-action]:hover { box-shadow: 0 3px 10px rgba(15,23,42,.1); } .flow-modal .vsum-none { margin: 0; padding: 10px 0; font-size: 12px; color: #94a3b8; font-weight: 600; } /* Histórico do checklist com letras maiores (PO, 03/10/2026: "pequena demais"). */ .flow-modal .hist-head { font-size: 15px; gap: 10px; margin-bottom: 16px; } .flow-modal .hist-head .flow-badge { font-size: 12.5px; padding: 5px 12px; } .flow-modal .hist-line { padding-left: 22px; gap: 12px; } .flow-modal .hist-line > li { padding: 12px 16px; border-radius: 12px; } .flow-modal .hist-line > li::before { left: -31px; top: 16px; width: 14px; height: 14px; } .flow-modal .hist-top { font-size: 17px; } .flow-modal .hist-top .muted { font-size: 14px; } .flow-modal .hist-text { font-size: 15.5px; margin-top: 6px; line-height: 1.45; } .flow-modal .hist-text small { font-size: 14px; } .flow-modal .hist-text .flow-badge { font-size: 12.5px; padding: 4px 11px; } .flow-modal .hist-bad { margin-top: 8px; gap: 6px; } .flow-modal .hist-bad li { font-size: 15.5px; padding: 7px 12px; border-radius: 8px; } @media (max-width: 760px) { .flow-modal .hist-top { font-size: 15px; flex-direction: column; gap: 1px; } .flow-modal .hist-top .muted { font-size: 12.5px; } .flow-modal .hist-text, .flow-modal .hist-bad li { font-size: 14px; } .flow-modal .hist-head { font-size: 13px; } } /* Histórico do checklist mais respirável (PO, 03/10/2026): janela mais estreita (sem vazio entre o texto e a data), mais margem interna e espaço entre os blocos. */ .flow-modal:has(.hist-line) { width: min(780px, calc(100vw - 32px)) !important; max-width: 780px !important; padding: 22px 28px 26px !important; } .flow-modal:has(.hist-line) .flow-modal-head, .flow-modal:has(.hist-line) h2, .flow-modal:has(.hist-line) h3 { margin-bottom: 4px; } .flow-modal .hist-head { padding: 12px 14px; margin: 4px 0 20px; background: #f8fafc; border: 1px solid #eef0f5; border-radius: 12px; } .flow-modal .hist-line { gap: 16px; margin-left: 6px; } .flow-modal .hist-line > li { padding: 14px 18px 15px; box-shadow: 0 1px 3px rgba(15,23,42,.05); } .flow-modal .hist-top { align-items: baseline; } .flow-modal .hist-text { margin-top: 8px; } .flow-modal .hist-bad { margin-top: 10px; } @media (max-width: 760px) { .flow-modal:has(.hist-line) { padding: 16px 14px 18px !important; } .flow-modal .hist-head { padding: 9px 10px; margin-bottom: 14px; } .flow-modal .hist-line { gap: 10px; } .flow-modal .hist-line > li { padding: 10px 12px; } } .flow-modal .hist-line.dense { gap: 9px; } .flow-modal .hist-line.dense > li { padding: 9px 16px 10px; } .flow-modal .hist-line.dense .hist-text { margin-top: 4px; } .flow-modal .hist-line.dense > li::before { top: 13px; } @media (max-width: 760px) { .flow-modal .hist-top { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; font-size: 14.5px; } .flow-modal .hist-top .muted { font-size: 11.5px; } .flow-modal .hist-line.dense { gap: 6px; } .flow-modal .hist-line.dense > li { padding: 7px 10px 8px; } .flow-modal .hist-line.dense .hist-text { margin-top: 2px; font-size: 13.5px; } .flow-modal .hist-line.dense .hist-bad { margin-top: 5px; gap: 4px; } .flow-modal .hist-line.dense .hist-bad li { padding: 4px 9px; font-size: 13.5px; } } /* Combustível (PO, 03/10/2026). Barra do motorista com 5 botões: Início | Abastecer (roxo) | Feitos | Pendências | Sair. */ #operatorApp .op-bottom-nav { grid-template-columns: repeat(5, 1fr) !important; } @media (min-width: 761px) { #operatorApp .op-bottom-nav { grid-template-columns: repeat(5, auto) !important; } } #operatorApp .op-bottom-nav .nav-fuel { --nav: #7c3aed; } @media (max-width: 400px) { #operatorApp .op-bottom-nav button b { font-size: 10px !important; } } /* Formulário (celular e janela do gestor) */ .fuel-card { padding: 16px !important; } .fuel-asset { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #f5f3ff; border: 1px solid #ddd6fe; margin-bottom: 12px; } .fuel-asset b { font-size: 18px; color: #4c1d95; letter-spacing: .03em; } .fuel-asset span { font-size: 13px; color: #334155; } .fuel-asset small { font-size: 12px; color: #6d28d9; font-weight: 600; } .fuel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; } .fuel-grid .field label { font-size: 12.5px; } .fuel-grid input { font-size: 17px !important; } .fuel-price { display: flex; align-items: center; min-height: 42px; padding: 0 12px; border-radius: 10px; background: #f1f5f9; font-weight: 800; color: #0f172a; font-size: 16px; } .fuel-receipt { grid-column: 1 / -1; } .fuel-receipt .btn { width: 100%; } .fuel-receipt span { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; } .fuel-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0; } .fuel-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 14px; } .fuel-actions:has(> :only-child) { grid-template-columns: 1fr; } .fuel-done { padding: 14px 16px; border-radius: 14px; background: #f0fdf4; border: 1px solid #bbf7d0; display: grid; gap: 4px; } .fuel-done b { font-size: 17px; color: #166534; } .fuel-done span { font-size: 14px; color: #334155; font-weight: 600; } .fuel-done.warn { background: #fff7ed; border-color: #fed7aa; } .fuel-done.warn b { color: #9a3412; } .fuel-done ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; color: #9a3412; } .fuel-done small { font-size: 12.5px; color: #64748b; } .fuel-mine-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.92); border: 1px solid #e2e8f0; margin-top: 6px; } .fuel-mine-row b { display: block; font-size: 14px; color: #0f172a; } .fuel-mine-row small { font-size: 12px; color: #64748b; } .fuel-mine-row i { font-style: normal; font-size: 12px; color: #15803d; font-weight: 700; white-space: nowrap; } .fuel-mini { border: 1px solid #ddd6fe; background: #f5f3ff; color: #5b21b6; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; } .fuel-hint { font-size: 13px; margin: 8px 0; } /* Página do gestor */ #p-combustivel .fuel-month { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -4px 0 10px; } #p-combustivel .fuel-month b { font-size: 17px; color: #24255f; min-width: 200px; text-align: center; } #p-combustivel .fuel-month button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d5d8e6; background: #fff; font-size: 22px; line-height: 1; color: #3E4095; cursor: pointer; } #p-combustivel .fuel-month button:hover:not(:disabled) { background: #3E4095; color: #fff; } #p-combustivel .fuel-month button:disabled { opacity: .35; cursor: default; } #p-combustivel .fuel-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .fuel-kpi { position: relative; overflow: hidden; background: #fff; border: 1px solid #e6e8f0; border-radius: 12px; padding: 10px 12px 9px 15px; box-shadow: 0 1px 3px rgba(15,23,42,.05); } .fuel-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #94a3b8; } .fuel-kpi.main::before { background: #7c3aed; } .fuel-kpi.good::before { background: #16a34a; } .fuel-kpi.warn::before { background: #ea580c; } .fuel-kpi small { display: block; font-size: 10.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .03em; } .fuel-kpi b { display: block; font-size: 22px; color: #0f172a; margin-top: 2px; white-space: nowrap; } .fuel-kpi.main b { color: #5b21b6; } .fuel-kpi.good b { color: #15803d; } .fuel-kpi.warn b { color: #c2410c; } .fuel-kpi em { display: block; font-style: normal; font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fuel-kpi em.up { color: #dc2626; font-weight: 700; } .fuel-kpi em.down { color: #15803d; font-weight: 700; } .fuel-table .fuel-row { cursor: pointer; } .fuel-table .fuel-row:hover td { background: #f5f3ff; } .fuel-bar { display: inline-block; width: 34px; height: 6px; border-radius: 999px; background: #ede9fe; margin-right: 6px; vertical-align: middle; overflow: hidden; } .fuel-bar i { display: block; height: 100%; background: #7c3aed; border-radius: inherit; } .fuel-flag { display: inline-block; margin: 1px 4px 1px 0; padding: 2px 7px; border-radius: 6px; background: #fff7ed; color: #9a3412; font-size: 11px; font-weight: 600; } .fuel-edited { display: inline-block; padding: 2px 7px; border-radius: 6px; background: #eef2ff; color: #3730a3; font-size: 11px; font-weight: 600; cursor: help; } .fuel-table tr.fuel-flagged td:first-child { box-shadow: inset 3px 0 0 #f97316; } .fuel-edit-btn { padding: 5px 10px !important; font-size: 11.5px !important; } .fuel-price-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; padding: 6px 2px; } .fuel-sub { font-weight: 800; font-size: 12px; color: #24255f; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; } .fuel-chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 210px; padding: 8px 4px 0; border-bottom: 1px solid #e2e8f0; } .fuel-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; } .fuel-col i { width: 70%; max-width: 48px; border-radius: 8px 8px 0 0; background: linear-gradient(#a78bfa, #7c3aed); } .fuel-col span { font-size: 11px; font-weight: 700; color: #334155; white-space: nowrap; } .fuel-col small { font-size: 11px; color: #64748b; margin-bottom: -18px; } .fuel-equip-head { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; } .fuel-equip-head span { background: #f5f3ff; border: 1px solid #ede9fe; border-radius: 10px; padding: 7px 10px; } .fuel-equip-head small { display: block; font-size: 10.5px; color: #6d28d9; font-weight: 700; text-transform: uppercase; } .fuel-equip-head b { font-size: 15px; color: #0f172a; } @media (max-width: 1100px) { #p-combustivel .fuel-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { #p-combustivel .fuel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .fuel-kpi b { font-size: 18px; } .fuel-price-grid { grid-template-columns: 1fr; } .fuel-equip-head { grid-template-columns: repeat(3, 1fr); } .fuel-grid { gap: 8px 10px; } } #p-combustivel .fuel-table td, #p-combustivel .fuel-table th, .flow-modal .fuel-table td { white-space: nowrap; } #p-combustivel .fuel-table td:first-child { white-space: normal; min-width: 150px; } #p-combustivel .fuel-table td .fuel-flag { white-space: normal; } .fuel-list td:nth-last-child(2) { white-space: normal !important; min-width: 130px; max-width: 230px; } .fuel-list .fuel-flag { display: block; margin: 2px 0; } .fuel-chart { height: 230px !important; border-bottom: 0 !important; } .fuel-col small { margin: 0 !important; padding-top: 4px; border-top: 1px solid #e2e8f0; width: 100%; text-align: center; } .fuel-barwrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; } .fuel-barwrap i { width: 70%; max-width: 48px; border-radius: 8px 8px 0 0; background: linear-gradient(#a78bfa, #7c3aed); } /* Formulário de abastecimento compacto: cabe na tela do celular sem rolar. */ .fuel-receipt { grid-column: auto !important; } .fuel-receipt span { margin-top: 4px !important; font-size: 11.5px !important; } @media (max-width: 760px) { #opPage-abastecer .op-flow-head p { display: none; } .fuel-card { padding: 12px !important; } .fuel-asset { padding: 8px 10px; margin-bottom: 8px; } .fuel-asset b { font-size: 16px; } .fuel-asset span { font-size: 12px; } .fuel-asset small { font-size: 11.5px; } .fuel-grid { gap: 6px 10px !important; } .fuel-grid .field { margin: 0 !important; } .fuel-grid .field label { font-size: 12px; margin-bottom: 3px !important; } .fuel-grid input, .fuel-price { min-height: 44px; } .fuel-actions { margin-top: 10px; } } /* Abastecer no celular para qualquer idade (PO, 03/10/2026): um campo por linha, letras grandes, foto da nota em destaque, posto em "mais detalhes" e o "Confira antes de salvar" só quando algo parece errado. Cabe na tela sem rolar. */ #operatorApp .fuel-op { padding: 14px 16px !important; } #operatorApp .fuel-op .fuel-asset { padding: 8px 12px; margin-bottom: 10px; } #operatorApp .fuel-op .fuel-asset b { font-size: 20px; } #operatorApp .fuel-op .fuel-asset span { font-size: 14px; } .fuel-op-fields { display: grid; gap: 10px; } .fuel-op-fields .field { margin: 0 !important; } #operatorApp .fuel-op-fields label, #operatorApp .fuel-more label { font-size: 16px !important; font-weight: 700 !important; color: #0f172a !important; margin-bottom: 4px !important; } #operatorApp .fuel-op-fields input { min-height: 52px !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: .02em; } #operatorApp .fuel-more input { min-height: 46px !important; font-size: 17px !important; } .fuel-last { display: block; margin-top: 4px; font-size: 14px; color: #475569; } .fuel-last b { color: #0f172a; } .fuel-photo-big { width: 100%; margin-top: 12px; min-height: 58px; border-radius: 14px; border: 2px dashed #7c3aed; background: #f5f3ff; color: #5b21b6; font-size: 18px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; } .fuel-photo-big span { display: flex; align-items: center; gap: 10px; } .fuel-photo-big small { font-size: 12.5px; font-weight: 600; color: #15803d; margin-left: 2px; } .fuel-photo-big.done { border-style: solid; border-color: #16a34a; background: #f0fdf4; color: #166534; font-size: 16px; } .fuel-more { margin-top: 10px; } .fuel-more summary { cursor: pointer; font-size: 15px; font-weight: 700; color: #3E4095; padding: 4px 0; list-style: none; } .fuel-more summary::-webkit-details-marker { display: none; } .fuel-more[open] summary { margin-bottom: 6px; } #operatorApp .fuel-op .fuel-actions { margin-top: 12px; } #operatorApp .fuel-op .fuel-actions button, #operatorApp .fuel-confirm-actions button { min-height: 54px !important; font-size: 17px !important; } .fuel-check { padding: 14px 16px; border-radius: 14px; background: #fff7ed; border: 1px solid #fed7aa; } .fuel-check > b { display: block; font-size: 19px; color: #9a3412; margin-bottom: 10px; } .fuel-check dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; } .fuel-check dl div { background: #fff; border: 1px solid #fde6c8; border-radius: 10px; padding: 8px; text-align: center; } .fuel-check dt { font-size: 13px; color: #64748b; font-weight: 700; } .fuel-check dd { margin: 2px 0 0; font-size: 17px; font-weight: 800; color: #0f172a; white-space: nowrap; } .fuel-check ul { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 6px; } .fuel-check li { font-size: 16px; line-height: 1.35; color: #7c2d12; font-weight: 600; } .fuel-check-photo { margin: 0; font-size: 16px; font-weight: 600; color: #7c2d12; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fuel-check-photo .fuel-mini { font-size: 14px; padding: 6px 12px; } .fuel-confirm-actions { display: grid; gap: 10px; margin-top: 12px; } @media (max-width: 400px) { .fuel-check dl { gap: 6px; } .fuel-check dd { font-size: 15px; } } @media (max-height: 700px) { #operatorApp .fuel-op-fields input { min-height: 46px !important; font-size: 20px !important; } .fuel-op-fields { gap: 6px; } .fuel-photo-big { min-height: 50px; margin-top: 8px; } #operatorApp .fuel-op .fuel-asset { margin-bottom: 6px; } } /* Resultado no celular: "salvo" em verde quando só falta a foto; botões grandes um embaixo do outro. */ #operatorApp .fuel-op-done .fuel-done { padding: 16px 18px; } #operatorApp .fuel-op-done .fuel-done > b { font-size: 21px; } #operatorApp .fuel-op-done .fuel-done > span { font-size: 16px; } #operatorApp .fuel-op-done .fuel-done li { font-size: 15px; } .fuel-done-photo { margin: 6px 0 0; font-size: 16px; font-weight: 600; color: #9a3412; line-height: 1.35; } .fuel-link { background: none; border: 0; color: #3E4095; font-size: 15px; font-weight: 700; padding: 6px; cursor: pointer; } /* Celular de tela baixa: tira o título da página e aperta os espaços para o "Salvar" ficar à vista sem rolar. */ @media (max-height: 700px) { #operatorApp #opPage-abastecer:has(.fuel-op) .op-flow-head { display: none !important; } #operatorApp .fuel-op { padding: 10px 14px !important; } #operatorApp .fuel-op .fuel-asset { padding: 6px 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } #operatorApp .fuel-op .fuel-asset b { font-size: 18px; } #operatorApp .fuel-op-fields label { font-size: 15px !important; margin-bottom: 2px !important; } #operatorApp .fuel-op-fields input { min-height: 44px !important; } .fuel-last { margin-top: 2px; font-size: 13px; } #operatorApp .fuel-op .fuel-actions { margin-top: 8px; } #operatorApp .fuel-op .fuel-actions button { min-height: 48px !important; } .fuel-more { margin-top: 6px; } .fuel-more summary { padding: 2px 0; } } /* Barra lateral do Gestor cabe na tela (PO, 03/10/2026): itens em uma linha só e, em telas baixas (notebook ou zoom do navegador), logo e espaçamentos menores para o "Sair" ficar sempre visível sem rolar. */ /* Preenche sempre a altura da tela: logo, letras e botões crescem ou encolhem com a altura (vh), sem sobrar nem faltar. */ #appShell .sidebar { display: flex !important; flex-direction: column !important; overflow: hidden !important; } #appShell .sidebar > * { flex: 0 0 auto; } #appShell .sidebrand { padding-bottom: clamp(6px, 1.6vh, 18px) !important; } #appShell .sidebrand .logo { height: clamp(52px, 11vh, 120px) !important; } #appShell .sidebrand .logo img { height: 100% !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; } #appShell #managerNav { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0; } #appShell .navlabel { margin-top: clamp(4px, 1.2vh, 16px) !important; } #appShell #managerNav .navbtn { flex: 1 1 0 !important; max-height: 64px; min-height: 30px; display: flex !important; align-items: center; gap: 6px; padding-top: 0 !important; padding-bottom: 0 !important; margin: 1px 0 !important; font-size: clamp(13.5px, 2.1vh, 18px) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #appShell .sidebar .navbtn.logout { flex: 0 0 auto !important; min-height: clamp(34px, 5vh, 52px); display: flex !important; align-items: center; margin-top: 6px !important; font-size: clamp(13.5px, 2.1vh, 18px) !important; } @media (max-height: 600px) { #appShell .sidebrand > div:last-child { display: none !important; } } /* Histórico do equipamento (PO, 03/10/2026): a janela cabe na tela e só a linha do tempo rola, do início ao fim. */ #flowModalRoot:has(.vtl-line, .vtl-empty) #flowModalBody { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #flowModalRoot:has(.vtl-line, .vtl-empty) #flowModalBody > * { flex: 0 0 auto; } .flow-modal .vtl-line { flex: 1 1 auto !important; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px !important; scrollbar-width: thin; scrollbar-color: #c7c9f0 transparent; } /* a linha vertical acompanha a rolagem (fundo "local" cobre todo o conteúdo, não só a parte visível) */ .flow-modal .vtl-line::before { display: none !important; } .flow-modal .vtl-line { background: linear-gradient(#c7c9f0, #c7c9f0) 17px 6px / 2px calc(100% - 12px) no-repeat local; } /* Situação atual no topo do Histórico/Resumo: selo maior e alinhado ao centro da linha. */ .flow-modal .vsum-id small { align-items: center !important; line-height: 1; font-size: 12.5px !important; } .flow-modal .vsum-id small .badge, .flow-modal .vsum-id small [class*="badge"] { font-size: 13px !important; padding: 5px 12px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; vertical-align: middle !important; margin: 0 !important; } /* Equipamentos (PO, 03/10/2026): Abrir | Resumo | Histórico na mesma linha sem rolar para o lado — o nome do modelo de checklist e a situação podem quebrar linha; os botões de ação ficam compactos. */ #p-equipamentos .flow-table td:nth-child(4) { white-space: normal !important; min-width: 120px; } #p-equipamentos .flow-table td:nth-child(6) { white-space: normal !important; } #p-equipamentos .flow-table th:nth-child(5), #p-equipamentos .flow-table th:nth-child(6) { white-space: normal !important; } #p-equipamentos .flow-row-actions { gap: 4px !important; flex-wrap: nowrap !important; } #p-equipamentos .flow-row-actions .btn { padding: 6px 9px !important; font-size: 12.5px !important; white-space: nowrap; } /* Situação atual em destaque no centro da barra azul (Histórico e Resumo do equipamento). */ .flow-modal .vsum-hero { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; } .flow-modal .vsum-hero > .vsum-periods { justify-self: end; } .flow-modal .vsum-status { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; } .flow-modal .vsum-status small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c7c9f0; } .flow-modal .vsum-status .flow-badge { font-size: 20px !important; font-weight: 800 !important; padding: 9px 26px !important; border-radius: 999px !important; line-height: 1 !important; letter-spacing: .04em; box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 0 0 3px rgba(255,255,255,.18); } @media (max-width: 760px) { .flow-modal .vsum-hero { grid-template-columns: 1fr auto; } .flow-modal .vsum-hero > .vsum-periods { grid-column: 1 / -1; justify-self: stretch; } .flow-modal .vsum-status .flow-badge { font-size: 13px !important; padding: 6px 12px !important; } .flow-modal .vsum-status small { font-size: 9.5px; } } /* Consumo de combustível por equipamento (PO, 03/10/2026): cabe na tela; só a lista de abastecimentos rola. */ #flowModalRoot:has(.feq-grid) #flowModalBody { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; gap: 10px; } #flowModalRoot:has(.feq-grid) #flowModalBody > * { flex: 0 0 auto; margin-top: 0; margin-bottom: 0; } .feq-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; background: linear-gradient(135deg, #24255f 0%, #3E4095 100%); color: #fff; } .feq-id { display: flex; align-items: center; gap: 14px; min-width: 0; } .feq-id b { display: block; font-size: 16px; } .feq-id small { display: block; font-size: 12px; color: #c7c9f0; margin-top: 2px; } .feq-month { display: flex; align-items: center; gap: 10px; } .feq-month b { font-size: 16px; min-width: 150px; text-align: center; } .feq-month button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; } .feq-month button:hover:not(:disabled) { background: #fff; color: #3E4095; } .feq-month button:disabled { opacity: .3; cursor: default; } #flowModalBody .fuel-equip-head { margin: 0; } .feq-alert { padding: 8px 12px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 13px; font-weight: 600; } .feq-grid { flex: 1 1 auto !important; min-height: 0; display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; } .feq-evo, .feq-list { min-height: 0; display: flex; flex-direction: column; border: 1px solid #e6e8f0; border-radius: 12px; padding: 10px 12px; background: #fff; } .feq-chart { flex: 1 1 auto; min-height: 120px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-items: stretch; } .feq-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; border: 0; background: none; border-radius: 8px; padding: 4px 0; cursor: pointer; min-width: 0; } .feq-col:hover { background: #f5f3ff; } .feq-col.on { background: #ede9fe; } .feq-col span { font-size: 10.5px; font-weight: 700; color: #334155; white-space: nowrap; } .feq-col i { width: 60%; max-width: 34px; min-height: 0; border-radius: 6px 6px 0 0; background: linear-gradient(#a78bfa, #7c3aed); } .feq-col.on i { background: linear-gradient(#7c3aed, #4c1d95); } .feq-col b { font-size: 11.5px; color: #24255f; text-transform: capitalize; } .feq-col small { font-size: 10.5px; color: #64748b; white-space: nowrap; } .feq-note { font-size: 11.5px; margin: 6px 0 0; } .feq-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } .feq-scroll thead th { position: sticky; top: 0; z-index: 1; background: #f8fafc; } .fe-fuel { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin-top: 9px; padding: 9px 12px; border-radius: 12px; background: #f5f3ff; border: 1px solid #ddd6fe; font-size: 13px; color: #475569; } .fe-fuel b { color: #0f172a; } .fe-fuel > span:first-child b { color: #5b21b6; } .fe-fuel .btn { margin-left: auto; padding: 6px 12px !important; font-size: 12.5px !important; } @media (max-width: 760px) { .feq-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .feq-chart { min-height: 100px; } .feq-month b { min-width: 120px; font-size: 14px; } } /* Equipamentos com 4 ações (Abrir | Resumo | Histórico | Combustível) sem rolar para o lado: a pendência fica embaixo da situação, com o nome do item encurtado (o nome inteiro aparece ao passar o mouse); espaços um pouco menores. */ #p-equipamentos .flow-table td, #p-equipamentos .flow-table th { padding-left: 8px !important; padding-right: 8px !important; } #p-equipamentos .flow-table td:nth-child(6) .op-pend { display: block; max-width: 170px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #p-equipamentos .flow-row-actions .btn { padding: 6px 7px !important; } .feq-grid { grid-template-columns: 250px 1fr !important; } .feq-scroll .flow-table { font-size: 12.5px; } .feq-scroll .flow-table td, .feq-scroll .flow-table th { white-space: nowrap; padding: 6px 7px !important; } .feq-scroll .flow-table td:nth-last-child(2) { white-space: normal; min-width: 90px; } .feq-grid { grid-template-columns: 290px 1fr !important; } .feq-col span { font-size: 10px; } .feq-col b { font-size: 11px; } .feq-col small { font-size: 10.5px; font-weight: 700; color: #475569; } /* Lista de abastecimentos: colunas do tamanho do conteúdo (hora não encosta no nome, "Comprovante" inteiro) e botão "✎ Correção" com nome (PO, 03/10/2026). */ .fuel-list { table-layout: auto !important; width: 100%; } .fuel-list .fuel-edit-btn { white-space: nowrap; } .feq-scroll .fuel-list td:nth-last-child(2) { min-width: 0 !important; } .feq-scroll .fuel-list .fuel-flag { white-space: nowrap; } .feq-scroll .fuel-list .fuel-edit-btn { padding: 5px 8px !important; overflow: visible; } /* Atalho de abastecimento no "Fazer Checklist" do gestor (PO, 03/10/2026). */ .desk-fuel-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: #f5f3ff; border: 1px solid #ddd6fe; font-size: 14px; color: #475569; } .desk-fuel-cta b { color: #5b21b6; } .desk-fuel-cta .btn { border-color: #c4b5fd; color: #5b21b6; font-weight: 700; } /* Equipamentos — ajuste geral das colunas (PO, 03/10/2026): os 4 botões com nome numa linha só. A frota fica embaixo da placa; descrição, tipo e checklist quebram linha quando precisam; os selos não quebram; Ações nunca quebra. */ #p-equipamentos .flow-table { table-layout: auto !important; width: 100%; } #p-equipamentos .flow-table th, #p-equipamentos .flow-table td { padding-left: 7px !important; padding-right: 7px !important; } #p-equipamentos .flow-table th { white-space: normal !important; font-size: 11.5px !important; } #p-equipamentos .flow-table td:first-child { white-space: nowrap !important; } #p-equipamentos .flow-table td:first-child .flow-sub { display: block; margin-left: 0 !important; } #p-equipamentos .flow-table td:nth-child(2), #p-equipamentos .flow-table td:nth-child(3) { white-space: normal !important; min-width: 70px; max-width: 150px; } #p-equipamentos .flow-table td:nth-child(4) { white-space: normal !important; min-width: 100px; max-width: 190px; } #p-equipamentos .flow-table td:nth-child(5) { white-space: nowrap !important; } #p-equipamentos .flow-table td:nth-child(6) { white-space: normal !important; max-width: 190px; } #p-equipamentos .flow-table td:last-child { white-space: nowrap !important; width: 1%; } #p-equipamentos .flow-row-actions { flex-wrap: nowrap !important; gap: 4px !important; } #p-equipamentos .flow-row-actions .btn { padding: 6px 8px !important; font-size: 12.5px !important; white-space: nowrap; } #p-equipamentos .flow-table td { overflow-wrap: normal !important; word-break: normal !important; hyphens: none; } #p-equipamentos .flow-table td:nth-child(3) { min-width: 86px; } #p-equipamentos .flow-table td:nth-child(6) .op-pend { max-width: 140px !important; } #p-equipamentos .flow-table td:nth-child(6) { max-width: 160px; } /* Consumo por equipamento: janela mais larga para a lista caber inteira (botão "Correção" sem cortar). */ #flowModalRoot:has(.feq-grid) .flow-modal { width: min(1440px, 96vw) !important; max-width: none !important; } .feq-grid { grid-template-columns: 270px 1fr !important; } /* Novo abastecimento: digitar a placa/frota ou escolher na lista, lado a lado. */ .fuel-pick-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px 14px; } .fuel-pick-grid small { display: block; min-height: 16px; margin-top: 3px; font-size: 12px; } .fuel-pick-grid .fuel-find-ok { color: #15803d; font-weight: 600; } @media (max-width: 760px) { .fuel-pick-grid { grid-template-columns: 1fr; } } /* Combustível (PO, 03/10/2026): título, mês, cartões e abas ficam fixos; só a tabela/aba rola por dentro. */ #appShell #p-combustivel.active > .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; } #appShell #p-combustivel.active > .card > .pend-tabs { flex-shrink: 0; } #appShell #p-combustivel.active > .card > .flow-tablewrap { flex: 1 1 auto; min-height: 0; overflow: auto; } #appShell #p-combustivel .flow-tablewrap thead th { position: sticky; top: 0; z-index: 2; } /* Consumo por equipamento: letra da lista um pouco menor e gráfico mais estreito, para a linha inteira (com "Correção") caber mesmo com nomes longos ou zoom do navegador. */ #flowModalRoot .feq-scroll .flow-table td, #flowModalRoot .feq-scroll .flow-table th { font-size: 14px !important; padding: 6px 6px !important; } #flowModalRoot .feq-scroll .flow-table .flow-sub { font-size: 11px !important; } #flowModalRoot .feq-scroll .fuel-edit-btn, #flowModalRoot .feq-scroll .fuel-mini, #flowModalRoot .feq-scroll .fuel-flag { font-size: 12px !important; } .feq-grid { grid-template-columns: 240px 1fr !important; gap: 12px !important; } /* Consumo por equipamento: altura fixa da área gráfico + lista (pela altura da tela). Trocar de mês muda só os dados, nunca o tamanho da janela; muitos abastecimentos rolam dentro da lista. */ #flowModalRoot .feq-grid { flex: 0 0 auto !important; height: clamp(240px, calc(100dvh - 360px), 480px); } .feq-alert.feq-info { background: #f8fafc; border-color: #e2e8f0; color: #475569; font-weight: 500; } .feq-alert { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Abastecimentos (PO, 04/10/2026): um abastecimento por linha, baixa — preço do litro em coluna própria, avisos numa linha (o texto inteiro aparece ao passar o mouse), botões e selos compactos; ajuste geral das colunas. */ .fuel-list td, .fuel-list th { white-space: nowrap !important; padding-top: 6px !important; padding-bottom: 6px !important; } #p-combustivel .fuel-list td, #p-combustivel .fuel-list th { padding-left: 9px !important; padding-right: 9px !important; } #p-combustivel .fuel-table.fuel-list td:first-child { min-width: 0 !important; white-space: nowrap !important; } .fuel-list td.fuel-ppl { color: #475569; } .fuel-list td:nth-last-child(2) { min-width: 0 !important; max-width: 200px; overflow: hidden; text-overflow: ellipsis; } .fuel-list td:nth-last-child(2) .fuel-flag { display: inline-block !important; margin: 0 4px 0 0 !important; white-space: nowrap; } .fuel-list .fuel-mini { padding: 3px 9px; } .fuel-list .fuel-edit-btn { padding: 4px 9px !important; } #p-combustivel .fuel-list td .fuel-flag, .flow-modal .fuel-list td .fuel-flag { white-space: nowrap !important; display: inline-block !important; } #p-combustivel .fuel-list td:nth-last-child(2), .flow-modal .fuel-list td:nth-last-child(2) { white-space: nowrap !important; } /* Avisos do combustível (PO, 04/10/2026): botão único na tabela e janela com o que é cada aviso. */ .fuel-alert-btn { border: 1px solid #fed7aa; background: #fff7ed; color: #9a3412; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .fuel-alert-btn:hover { background: #ffedd5; } #flowModalRoot:has(.fal-list) #flowModalBody { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #flowModalRoot:has(.fal-list) #flowModalBody > * { flex: 0 0 auto; } .fal-intro { margin: 0 0 10px; } .fal-list { flex: 1 1 auto !important; min-height: 0; overflow-y: auto; display: grid; gap: 8px; align-content: start; padding-right: 4px; } .fal-item { border: 1px solid #fed7aa; border-left: 4px solid #f97316; border-radius: 12px; padding: 10px 12px; background: #fff; } .fal-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; } .fal-head b { color: #0f172a; } .fal-head span { color: #475569; font-size: 13.5px; } .fal-item ul { margin: 6px 0; padding: 0; list-style: none; display: grid; gap: 3px; } .fal-item li { font-size: 13.5px; } .fal-item li b { color: #9a3412; } .fal-item li span { color: #475569; } .fal-actions { display: flex; gap: 8px; } .fal-actions .btn { padding: 5px 11px !important; font-size: 12.5px !important; } /* Lançar em lote (PO, 04/10/2026): tabela tipo planilha; a janela cabe na tela e só as linhas rolam. */ #flowModalRoot:has(.fb-table) .flow-modal { width: min(1280px, 96vw) !important; max-width: none !important; } #flowModalRoot:has(.fb-table) #flowModalBody { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #flowModalRoot:has(.fb-table) #flowModalBody > * { flex: 0 0 auto; } .fb-intro { margin: 0 0 8px; font-size: 13.5px; } .fb-wrap { flex: 1 1 auto !important; min-height: 120px; max-height: calc(100dvh - 300px); overflow: auto; border: 1px solid #e6e8f0; border-radius: 12px; } .fb-table { table-layout: auto; width: 100%; } .fb-table thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; font-size: 11.5px !important; white-space: nowrap; padding: 7px 6px !important; } .fb-table td { padding: 4px 4px !important; vertical-align: middle; } .fb-table input { width: 100%; min-width: 0; height: 36px; padding: 4px 8px; border: 1px solid #d5d8e6; border-radius: 8px; font-size: 14px; background: #fff; } .fb-table input:focus { outline: 2px solid #a5b4fc; border-color: #6366f1; } .fb-table td:nth-child(2) input { min-width: 150px; } .fb-table td:nth-child(3) input { min-width: 135px; } .fb-table td:nth-child(4) input, .fb-table td:nth-child(5) input, .fb-table td:nth-child(6) input { min-width: 90px; } .fb-table td:nth-child(8) input { min-width: 120px; } .fb-n { width: 28px; text-align: center; color: #94a3b8; font-size: 12px; } .fb-ppl { width: 60px; text-align: right; color: #475569; font-size: 13px; white-space: nowrap; } .fb-st { width: 22px; text-align: center; font-weight: 800; } .fb-st.ok { color: #16a34a; } .fb-st.bad { color: #dc2626; } .fb-del { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #94a3b8; font-size: 18px; cursor: pointer; } .fb-del:hover { background: #fee2e2; color: #b91c1c; } .fb-row.fb-bad td { background: #fef2f2; } .fb-row.fb-bad td:first-child { box-shadow: inset 3px 0 0 #dc2626; color: #b91c1c; font-weight: 700; } .fb-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .fb-foot .btn { padding: 6px 12px !important; font-size: 13px !important; } .fb-sum { margin-left: auto; font-weight: 700; color: #24255f; font-size: 14px; } #flowModalRoot .fb-table thead th { white-space: nowrap !important; } .fb-table td:nth-child(2) input { min-width: 170px; } /* Lançar em lote — visual premium (PO, 04/10/2026): colunas fixas proporcionais (nada se sobrepõe), campos uniformes, placa reconhecida no próprio campo, dicas em faixa e resumo no rodapé. */ #flowModalRoot .fb-tips { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 9px 14px; margin: 0 0 10px; border-radius: 12px; background: #f5f3ff; border: 1px solid #ede9fe; font-size: 13px; color: #4c1d95; } #flowModalRoot .fb-tips kbd { display: inline-block; padding: 1px 6px; border-radius: 5px; border: 1px solid #c4b5fd; border-bottom-width: 2px; background: #fff; font: 700 11.5px/1.4 inherit; color: #4c1d95; } #flowModalRoot .fb-wrap { border: 1px solid #e6e8f0; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.04); } #flowModalRoot .fb-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; } #flowModalRoot .fb-table col.c-n { width: 42px; } #flowModalRoot .fb-table col.c-eq { width: 21%; } #flowModalRoot .fb-table col.c-dt { width: 150px; } #flowModalRoot .fb-table col.c-km { width: 13%; } #flowModalRoot .fb-table col.c-l { width: 10%; } #flowModalRoot .fb-table col.c-v { width: 12%; } #flowModalRoot .fb-table col.c-p { width: 70px; } #flowModalRoot .fb-table col.c-st { width: auto; } #flowModalRoot .fb-table col.c-x { width: 44px; } #flowModalRoot .fb-table thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; border-bottom: 1px solid #e6e8f0; padding: 9px 8px !important; font-size: 11px !important; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #64748b; text-align: left; white-space: nowrap !important; } #flowModalRoot .fb-table th.r { text-align: right; } #flowModalRoot .fb-table td { padding: 7px 6px !important; border-bottom: 1px solid #f1f5f9; vertical-align: top; background: #fff; } #flowModalRoot .fb-table tbody tr:last-child td { border-bottom: 0; } #flowModalRoot .fb-table tbody tr:hover td { background: #fcfbff; } #flowModalRoot .fb-table input { box-sizing: border-box; width: 100% !important; min-width: 0 !important; height: 38px; padding: 0 10px; border: 1px solid #e2e8f0; border-radius: 9px; background: #f8fafc; font-size: 14px; color: #0f172a; transition: border-color .15s, background .15s, box-shadow .15s; } #flowModalRoot .fb-table input:hover { border-color: #cbd5e1; } #flowModalRoot .fb-table input:focus { outline: none; background: #fff; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.15); } #flowModalRoot .fb-table input[data-fb="meter"], #flowModalRoot .fb-table input[data-fb="liters"], #flowModalRoot .fb-table input[data-fb="total"] { text-align: right; font-variant-numeric: tabular-nums; } #flowModalRoot .fb-table input[data-fb="plate"] { text-transform: uppercase; font-weight: 700; letter-spacing: .03em; } #flowModalRoot .fb-table input[data-fb="plate"]::placeholder { text-transform: none; font-weight: 400; letter-spacing: 0; } #flowModalRoot .fb-table input.fb-ok { border-color: #86efac; background: #f0fdf4; } #flowModalRoot .fb-table input.fb-no { border-color: #fca5a5; background: #fef2f2; } #flowModalRoot .fb-hint { display: block; min-height: 14px; margin: 3px 2px 0; font-size: 11.5px; color: #15803d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #flowModalRoot .fb-hint.bad { color: #b91c1c; } #flowModalRoot .fb-n { padding-top: 15px !important; text-align: center; font-size: 12px; font-weight: 700; color: #94a3b8; } #flowModalRoot .fb-ppl { padding-top: 16px !important; text-align: right; font-size: 13px; font-weight: 700; color: #475569; font-variant-numeric: tabular-nums; } #flowModalRoot .fb-del { margin-top: 4px; } #flowModalRoot .fb-row.fb-bad td { background: #fef2f2 !important; } #flowModalRoot .fb-row.fb-bad td:first-child { box-shadow: inset 3px 0 0 #dc2626; color: #b91c1c; } #flowModalRoot .fb-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; } #flowModalRoot .fb-addbtn { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px dashed #c4b5fd; background: #faf8ff; color: #5b21b6; font-weight: 700; font-size: 13px; cursor: pointer; } #flowModalRoot .fb-addbtn:hover { background: #f5f3ff; border-style: solid; } #flowModalRoot .fb-sum { margin-left: auto; display: flex; gap: 8px; align-items: stretch; } #flowModalRoot .fb-sum > span:not(.muted) { display: flex; flex-direction: column; padding: 5px 14px; border-radius: 10px; background: #f5f3ff; border: 1px solid #ede9fe; min-width: 86px; } #flowModalRoot .fb-sum small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6d28d9; } #flowModalRoot .fb-sum b { font-size: 15px; color: #0f172a; font-variant-numeric: tabular-nums; } #flowModalRoot .fb-sum .muted { align-self: center; font-size: 13px; } #flowModalRoot .fb-ppl, #flowModalRoot .fb-n { padding-top: 0 !important; line-height: 52px; vertical-align: top; } /* Combustível por tipo (PO, 04/10/2026): seletor Todos/Diesel/Gasolina/Etanol…, cartões com preço e média por tipo e gráfico do preço do litro com uma cor por combustível. */ #p-combustivel .fuel-month { flex-wrap: wrap; } #p-combustivel .fuel-types { display: inline-flex; gap: 4px; margin-left: 18px; padding: 3px; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; } #p-combustivel .fuel-types button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: #334155; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; } #p-combustivel .fuel-types button:hover { background: #f1f5f9; } #p-combustivel .fuel-types button.on { background: #3E4095; color: #fff; } #p-combustivel .fuel-types i, .fuel-dot, .fuel-legend i, .fuel-kpi-types i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .fuel-dot { margin: 0 4px 0 0; vertical-align: middle; } .fuel-kpi.multi b { display: none; } .fuel-kpi-types { list-style: none; margin: 3px 0 0; padding: 0; display: grid; gap: 1px; } .fuel-kpi-types li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.35; color: #334155; min-width: 0; } .fuel-kpi-types li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fuel-kpi-types li b { display: inline !important; font-size: 14px !important; margin: 0 !important; color: #0f172a !important; white-space: nowrap; } .fuel-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 6px; font-size: 12px; color: #334155; font-weight: 600; } .fuel-legend span { display: inline-flex; align-items: center; gap: 6px; } .fuel-barwrap.multi { flex-direction: row !important; align-items: flex-end !important; justify-content: center; gap: 4px; } .fuel-bar1 { flex: 1 1 0; max-width: 34px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; } .fuel-bar1 span { font-size: 10px; font-weight: 700; color: #334155; white-space: nowrap; margin-bottom: 2px; } .fuel-bar1 i { display: block; width: 100%; border-radius: 6px 6px 0 0; } .fuel-var { font-weight: 700; font-size: 12.5px; } .fuel-var.up { color: #dc2626; } .fuel-var.down { color: #15803d; } #p-combustivel .fuel-month .fuel-types button { width: auto; height: 30px; border: 0; border-radius: 999px; font-size: 13px; line-height: normal; color: #334155; background: transparent; } #p-combustivel .fuel-month .fuel-types button:hover:not(.on) { background: #f1f5f9; color: #334155; } #p-combustivel .fuel-month .fuel-types button.on { background: #3E4095; color: #fff; } #p-combustivel .fuel-price-grid .flow-table td { white-space: nowrap; } /* Combustível no celular (PO, 04/10/2026): botões do topo em grade (nada cortado), seletor de combustível e abas numa linha que desliza para o lado, alvos de toque de 40px+. */ @media (max-width: 760px) { #p-combustivel .flow-page-head { flex-direction: column; align-items: stretch; gap: 10px; } #p-combustivel .flow-page-head .flow-actions { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; } #p-combustivel .flow-page-head .flow-actions .btn { grid-column: span 2; min-height: 42px; padding: 6px 4px !important; font-size: 13px !important; line-height: 1.15; white-space: nowrap; } #p-combustivel .flow-page-head .flow-actions [data-action="fuel-batch"], #p-combustivel .flow-page-head .flow-actions [data-action="fuel-form"] { grid-column: span 3; } #p-combustivel .fuel-month { margin: 0 0 8px; } #p-combustivel .fuel-types { order: 9; flex: 0 0 100%; margin: 8px 0 0 !important; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; border-radius: 14px; } #p-combustivel .fuel-types::-webkit-scrollbar { display: none; } #p-combustivel .fuel-month .fuel-types button { flex: 0 0 auto; height: 36px; } #p-combustivel .card > .pend-tabs { display: flex; flex-wrap: nowrap !important; overflow-x: auto; gap: 6px; scrollbar-width: none; padding-bottom: 2px; } #p-combustivel .card > .pend-tabs::-webkit-scrollbar { display: none; } #p-combustivel .card > .pend-tabs .pend-tab { flex: 0 0 auto; padding: 8px 14px !important; font-size: 14px !important; min-height: 40px; white-space: nowrap; } #p-combustivel .fuel-kpi-types li { font-size: 12px; } } @media (max-width: 760px) { #appShell #p-combustivel .flow-page-head .flow-actions { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; grid-auto-flow: row !important; } #appShell #p-combustivel .flow-page-head .flow-actions .btn { width: 100%; overflow: hidden; text-overflow: ellipsis; } /* no celular a página rola até a tabela; a tabela tem altura própria e rola por dentro */ #appShell #p-combustivel.active > .card { flex: 0 0 auto !important; } #appShell #p-combustivel.active > .card > .flow-tablewrap { flex: none !important; height: 68dvh; } } /* Consumo por equipamento no celular: gráfico em cima, lista embaixo (rola por dentro) e o "Fechar" sempre à vista. */ @media (max-width: 760px) { #flowModalRoot .feq-grid { display: flex !important; flex-direction: column; gap: 8px !important; height: auto !important; flex: 1 1 auto !important; min-height: 0; } #flowModalRoot .feq-evo { flex: 0 0 auto; padding: 8px 10px; } #flowModalRoot .feq-chart { height: 112px; min-height: 112px; flex: none; } #flowModalRoot .feq-note { display: none; } #flowModalRoot .feq-list { flex: 1 1 auto; min-height: 150px; padding: 8px 10px; } #flowModalRoot .feq-alert { white-space: normal; font-size: 12.5px; padding: 6px 10px; } #flowModalRoot .feq-top { padding: 10px 12px; gap: 8px; } #flowModalRoot .feq-id b { font-size: 14px; } #flowModalRoot .fuel-equip-head { gap: 6px; } #flowModalRoot .fuel-equip-head span { padding: 5px 8px; } #flowModalRoot .fuel-equip-head b { font-size: 13.5px; } } /* Preço do litro: o gráfico ocupa a altura do quadro (meses sempre à vista, sem rolar). */ #appShell #p-combustivel .flow-tablewrap > .fuel-price-grid { height: 100%; box-sizing: border-box; align-items: stretch; } #appShell #p-combustivel .fuel-price-grid > div:first-child { display: flex; flex-direction: column; min-height: 0; } #appShell #p-combustivel .fuel-price-grid .fuel-chart { flex: 1 1 auto; height: auto; min-height: 130px; padding-bottom: 4px; } #appShell #p-combustivel .fuel-price-grid .fuel-col small { margin-bottom: 0; padding-top: 4px; font-weight: 700; color: #334155; } @media (max-width: 760px) { #appShell #p-combustivel .flow-tablewrap > .fuel-price-grid { height: auto; } #appShell #p-combustivel .fuel-price-grid .fuel-chart { height: 200px; flex: none; } } /* Preço do litro: nome do mês bem visível (etiqueta escura) e o mês escolhido em destaque roxo (PO, 04/10/2026). */ #appShell #p-combustivel .fuel-price-grid .fuel-col small { display: inline-block; margin-top: 6px; padding: 4px 10px !important; border-radius: 999px; background: #eef0f6; color: #24255f !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .02em; text-transform: capitalize; white-space: nowrap; } #appShell #p-combustivel .fuel-price-grid .fuel-col.cur small { background: #3E4095; color: #fff !important; box-shadow: 0 2px 6px rgba(62,64,149,.3); } #appShell #p-combustivel .fuel-price-grid .fuel-chart { border-bottom: 2px solid #e2e8f0; } /* Mês a mês (PO, 04/10/2026): gráfico do gasto mensal em cima e tabela com variação; mês escolhido em destaque. */ .fmm { padding: 10px 12px; } .fmm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .fmm-top .fuel-sub { margin: 0; } .fmm-span { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; } .fmm-span button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: 12.5px; color: #334155; cursor: pointer; } .fmm-span button.on { background: #3E4095; color: #fff; } .fmm-chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; height: 150px; align-items: end; border-bottom: 2px solid #e2e8f0; padding-top: 4px; margin-bottom: 10px; } .fmm-chart .fuel-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .fmm-chart .fuel-barwrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; } .fmm-chart .fuel-bar1 { max-width: 46px; width: 60%; } .fmm-chart .fuel-bar1 i { background: linear-gradient(#c4b5fd, #8b5cf6); } .fmm-chart .fuel-col.cur .fuel-bar1 i { background: linear-gradient(#7c3aed, #4c1d95); } .fmm-chart .fuel-col small { display: inline-block; margin-top: 5px; padding: 3px 9px; border-radius: 999px; background: #eef0f6; color: #24255f; font-size: 12px; font-weight: 800; text-transform: capitalize; white-space: nowrap; } .fmm-chart .fuel-col.cur small { background: #3E4095; color: #fff; } .fmm-table td, .fmm-table th { white-space: nowrap; } .fmm-table tr.fmm-cur td { background: #f5f3ff; } .fmm-table tr.fmm-total td { background: #f8fafc; border-top: 2px solid #e2e8f0; } .fmm-type { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; font-weight: 600; } .fmm-type i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } @media (max-width: 760px) { .fmm-top { flex-direction: column; align-items: flex-start; } .fmm-chart { height: 120px; gap: 4px; } .fmm-chart .fuel-col small { font-size: 10.5px; padding: 2px 6px; } } /* Comparativo mês a mês — tela inteira (PO, 04/10/2026). Cabeçalho e período fixos; os blocos (frota e cada combustível) rolam por dentro. */ #p-combustivel .fc-open { border-color: #c4b5fd !important; color: #5b21b6 !important; font-weight: 800 !important; } #p-combustivel .fc-bar { gap: 12px; } #p-combustivel .fc-bar b { min-width: 300px !important; } #p-combustivel .fc-bar .fmm-span button { width: auto; height: 28px; border-radius: 999px; font-size: 12.5px; } #appShell #p-combustivel.active > .fc-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: 14px; padding: 2px 4px 10px 0; align-content: start; } .fc-block { background: #fff; border: 1px solid #e6e8f0; border-left: 5px solid var(--fc, #3E4095); border-radius: 16px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(15,23,42,.05); } .fc-block.fleet { --fc: #3E4095; } .fc-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .fc-block-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 18px; color: #0f172a; } .fc-block-head h3 i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .fc-mini { display: flex; gap: 8px; flex-wrap: wrap; } .fc-mini span { display: flex; flex-direction: column; padding: 5px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #eef0f5; min-width: 110px; } .fc-mini small { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; } .fc-mini b { font-size: 15px; color: #0f172a; white-space: nowrap; } .fc-grid { display: grid; grid-template-columns: minmax(300px, 1fr) 1.7fr; gap: 16px; align-items: start; } .fc-chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; height: 190px; align-items: end; border-bottom: 2px solid #e2e8f0; padding-top: 4px; } .fc-chart.small { height: 160px; } .fc-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; } .fc-val { font-size: 10.5px; font-weight: 800; color: #334155; white-space: nowrap; margin-bottom: 2px; } .fc-stack { width: 64%; max-width: 46px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 0 0; overflow: hidden; } .fc-stack i { display: block; min-height: 1px; } .fc-col small { display: inline-block; margin: 5px 0 -26px; transform: translateY(100%); padding: 2px 8px; border-radius: 999px; background: #eef0f6; color: #24255f; font-size: 11.5px; font-weight: 800; text-transform: capitalize; white-space: nowrap; } .fc-col.cur small { background: #3E4095; color: #fff; } .fc-col.cur .fc-stack { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(62,64,149,.35); } .fc-chart { margin-bottom: 30px; } .fc-tw { max-height: 320px; overflow: auto; } .fc-table td, .fc-table th { white-space: nowrap; } .fc-table tr.fc-cur td { background: #f5f3ff; } .fc-table tr.fc-total td { background: #f8fafc; border-top: 2px solid #e2e8f0; } @media (max-width: 1100px) { .fc-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { #p-combustivel .fc-bar b { min-width: 0 !important; font-size: 14px; } #appShell #p-combustivel.active > .fc-scroll { overflow: visible; } .fc-mini span { min-width: 0; flex: 1 1 40%; } .fc-chart { height: 150px; gap: 3px; } .fc-col small { font-size: 9.5px; padding: 2px 4px; } .fc-val { font-size: 9px; } } /* Comparativo: frota com duas colunas por mês — Valor (R$) roxo e Litros verde-azulado (PO, 04/10/2026). */ .fc-chart.pair .fc-pair { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; min-height: 0; } .fc-chart.pair .fc-b { flex: 1 1 0; max-width: 34px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; } .fc-chart.pair .fc-b i { display: block; width: 100%; border-radius: 5px 5px 0 0; opacity: .7; } .fc-chart.pair .fc-cost { background: #7c3aed; } .fc-chart.pair .fc-lit { background: #0ea5a4; } .fc-chart.pair .fc-col.cur .fc-b i { opacity: 1; } .fc-chart.pair .fc-val { font-size: 10px; } .fc-block.fleet .fc-grid { grid-template-columns: 1fr; } .fc-block.fleet .fc-chart { height: 170px; } /* rótulo do mês colado na base das barras */ .fc-chart { margin-bottom: 0 !important; border-bottom: 0 !important; } .fc-col small { margin: 6px 0 0 !important; transform: none !important; } .fc-chart.pair .fc-pair, .fc-chart:not(.pair) .fc-col { border-bottom: 2px solid #e2e8f0; } .fc-chart:not(.pair) .fc-col { border-bottom: 0; } .fc-chart:not(.pair) .fc-stack { margin-bottom: 0; } /* Comparativo: barra do período (setas, 6/12 meses, Personalizado com mês inicial e final). */ #p-combustivel .fc-bar { justify-content: flex-start; flex-wrap: wrap; row-gap: 8px; } #p-combustivel .fuel-month .fmm-span button { width: auto; height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: #334155; font-size: 13px; font-weight: 700; line-height: normal; } #p-combustivel .fuel-month .fmm-span button:hover:not(.on) { background: #f1f5f9; color: #334155; } #p-combustivel .fuel-month .fmm-span button.on { background: #3E4095; color: #fff; } #p-combustivel .fc-range { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border: 1px solid #ddd6fe; border-radius: 999px; background: #faf8ff; } #p-combustivel .fc-range label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #4c1d95; margin: 0; } #p-combustivel .fc-range input { height: 32px; padding: 0 8px; border: 1px solid #d5d8e6; border-radius: 8px; font-size: 13.5px; background: #fff; } #p-combustivel .fuel-month .fc-range .btn { width: auto; height: 32px; border-radius: 999px; padding: 0 16px; font-size: 13px; } #p-combustivel .fuel-month .fc-range .btn { background: #3E4095; color: #fff; border: 0; font-weight: 700; } #p-combustivel .fuel-month .fc-range .btn:hover { background: #2f3178; color: #fff; } /* Combustível: botões do topo numa linha só (PO, 04/10/2026); se faltar espaço, a linha inteira desce abaixo do título. */ @media (min-width: 761px) { #appShell #p-combustivel .flow-page-head { flex-wrap: wrap; row-gap: 8px; } #appShell #p-combustivel .flow-page-head .flow-actions { display: flex !important; flex-wrap: nowrap !important; gap: 6px; margin-left: auto; } #appShell #p-combustivel .flow-page-head .flow-actions .btn { white-space: nowrap; padding-left: 14px !important; padding-right: 14px !important; } } /* Janela Exportar: três escolhas grandes */ .fx-intro { margin: 0 0 12px; } .fx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .fx-grid button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } .fx-grid button:hover, .fx-grid button:focus-visible { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.15); transform: translateY(-1px); outline: none; } .fx-grid span { font-size: 26px; line-height: 1; } .fx-grid b { font-size: 16px; color: #0f172a; } .fx-grid small { font-size: 12.5px; color: #64748b; line-height: 1.35; } @media (max-width: 760px) { .fx-grid { grid-template-columns: 1fr; } .fx-grid button { flex-direction: row; align-items: center; flex-wrap: wrap; } .fx-grid small { flex-basis: 100%; } } /* Combustível em duas linhas (PO, 04/10/2026): 1) ações à direita; 2) mês | combustível | abas. */ #appShell #p-combustivel .fuel-head { justify-content: flex-end; margin-bottom: 8px; } #appShell #p-combustivel .fuel-head .flow-actions { margin-left: 0; } #p-combustivel .fuel-month:not(.fc-bar) { justify-content: flex-start; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; } #p-combustivel .fuel-month:not(.fc-bar) > b { min-width: 0 !important; padding: 0 4px; white-space: nowrap; } #p-combustivel .fuel-month:not(.fc-bar) .fuel-types { margin-left: 4px; } #p-combustivel .fuel-tabs { display: inline-flex; gap: 6px; margin: 0 0 0 auto; padding: 0; border: 0; } #p-combustivel .fuel-month .fuel-tabs .pend-tab { width: auto; height: 36px; padding: 0 14px !important; border-radius: 999px; font-size: 13.5px !important; line-height: normal; white-space: nowrap; } #p-combustivel .fuel-month .fuel-tabs .pend-tab b { font-size: 11.5px; } @media (max-width: 760px) { #p-combustivel .fuel-tabs { order: 10; flex: 0 0 100%; margin: 6px 0 0; overflow-x: auto; scrollbar-width: none; } #p-combustivel .fuel-tabs::-webkit-scrollbar { display: none; } #p-combustivel .fuel-month .fuel-tabs .pend-tab { flex: 0 0 auto; height: 40px; } } #p-combustivel .fuel-month .fuel-tabs .pend-tab { background: #fff; border: 1px solid #e2e8f0; color: #334155; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; } #p-combustivel .fuel-month .fuel-tabs .pend-tab:hover:not(.active) { background: #f1f5f9; color: #334155; } #p-combustivel .fuel-month .fuel-tabs .pend-tab.active, #p-combustivel .fuel-month .fuel-tabs .pend-tab.active:hover { background: #312e81; border-color: #312e81; color: #fff; } #p-combustivel .fuel-month .fuel-tabs .pend-tab b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #eef0f6; color: #334155; display: inline-flex; align-items: center; justify-content: center; } #p-combustivel .fuel-month .fuel-tabs .pend-tab.active b { background: rgba(255,255,255,.22); color: #fff; } @media (max-width: 760px) { #p-combustivel .fc-long { display: none; } #p-combustivel .fuel-month .fuel-tabs { display: flex !important; flex-wrap: nowrap !important; } } /* Linha de filtros do Combustível com tudo do mesmo tamanho (PO, 04/10/2026): 40px de altura e a mesma letra. */ #p-combustivel .fuel-month:not(.fc-bar) { align-items: center; } #p-combustivel .fuel-month:not(.fc-bar) > button { width: 40px; height: 40px; font-size: 20px; flex: 0 0 40px; } #p-combustivel .fuel-month:not(.fc-bar) > b { font-size: 17px; line-height: 40px; } #p-combustivel .fuel-month:not(.fc-bar) .fuel-types { height: 40px; padding: 3px; align-items: center; box-sizing: border-box; } #p-combustivel .fuel-month:not(.fc-bar) .fuel-types button { height: 32px; font-size: 14px; padding: 0 14px; } #p-combustivel .fuel-month .fuel-tabs .pend-tab { height: 40px !important; font-size: 14px !important; padding: 0 16px !important; box-sizing: border-box; } #p-combustivel .fuel-month:not(.fc-bar) { gap: 8px; } #p-combustivel .fuel-month:not(.fc-bar) .fuel-types button { padding: 0 11px; } #p-combustivel .fuel-month .fuel-tabs .pend-tab { padding: 0 13px !important; } /* ===== Combustível — arrumação premium (PO, 04/10/2026) ===== Linha de cima: período | combustível | (direita) Lançar em lote, + Abastecimento. Quadro: cabeçalho com as abas à esquerda e as saídas à direita (Comparativo, Imprimir, Exportar). Tudo com 40px de altura, pílulas com a mesma borda e a mesma letra. */ #p-combustivel .fuel-toolbar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; } #p-combustivel .fuel-toolbar .fuel-month { display: inline-flex; align-items: center; gap: 2px; margin: 0; height: 40px; padding: 3px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; box-sizing: border-box; } #p-combustivel .fuel-toolbar .fuel-month button { width: 32px; height: 32px; flex: 0 0 32px; border: 0; border-radius: 50%; background: #f1f5f9; color: #3E4095; font-size: 18px; line-height: 1; } #p-combustivel .fuel-toolbar .fuel-month button:hover:not(:disabled) { background: #3E4095; color: #fff; } #p-combustivel .fuel-toolbar .fuel-month b { min-width: 150px !important; padding: 0 10px; font-size: 15px; line-height: 32px; text-align: center; color: #24255f; white-space: nowrap; } #p-combustivel .fuel-toolbar .fuel-types { margin: 0 !important; height: 40px; padding: 3px; box-sizing: border-box; align-items: center; } #p-combustivel .fuel-toolbar .fuel-types button { height: 32px; padding: 0 12px; font-size: 13.5px; border: 0; border-radius: 999px; background: transparent; color: #334155; } #p-combustivel .fuel-toolbar .fuel-types button:hover:not(.on) { background: #f1f5f9; } #p-combustivel .fuel-toolbar .fuel-types button.on { background: #3E4095; color: #fff; } #p-combustivel .fuel-create { display: flex; gap: 8px; margin-left: auto; } #p-combustivel .fuel-create .btn, #p-combustivel .fuel-out .btn { height: 40px; min-height: 40px; padding: 0 16px !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } #p-combustivel .fuel-create .btn.primary { box-shadow: 0 6px 16px rgba(62,64,149,.25); } /* quadro: cabeçalho com abas e saídas */ #p-combustivel .fuel-card-main { padding-top: 12px !important; } #p-combustivel .fuel-cardhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #eef0f5; flex-shrink: 0; } #p-combustivel .fuel-cardhead .fuel-tabs { display: inline-flex; gap: 4px; margin: 0; padding: 3px; height: 40px; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc; } #p-combustivel .fuel-cardhead .fuel-tabs .pend-tab { height: 32px !important; padding: 0 14px !important; border: 0 !important; border-radius: 999px; background: transparent; color: #475569; font-size: 13.5px !important; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; box-shadow: none; } #p-combustivel .fuel-cardhead .fuel-tabs .pend-tab:hover:not(.active) { background: #eef0f6; color: #24255f; } #p-combustivel .fuel-cardhead .fuel-tabs .pend-tab.active { background: #fff; color: #24255f; box-shadow: 0 1px 3px rgba(15,23,42,.12), 0 0 0 1px #e2e8f0; } #p-combustivel .fuel-cardhead .fuel-tabs .pend-tab b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #e9eaf6; color: #3E4095; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; } #p-combustivel .fuel-cardhead .fuel-tabs .pend-tab.active b { background: #3E4095; color: #fff; } #p-combustivel .fuel-out { display: flex; gap: 8px; margin-left: auto; } #p-combustivel .fuel-out .fc-open { border-color: #ddd6fe !important; background: #faf8ff !important; color: #5b21b6 !important; } @media (max-width: 760px) { #p-combustivel .fuel-toolbar { gap: 8px; } #p-combustivel .fuel-toolbar .fuel-month { flex: 1 1 100%; justify-content: space-between; } #p-combustivel .fuel-toolbar .fuel-types { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; } #p-combustivel .fuel-toolbar .fuel-types::-webkit-scrollbar { display: none; } #p-combustivel .fuel-toolbar .fuel-types button { flex: 0 0 auto; } #p-combustivel .fuel-create { flex: 1 1 100%; margin: 0; display: grid; grid-template-columns: 1fr 1fr; } #p-combustivel .fuel-cardhead .fuel-tabs { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; } #p-combustivel .fuel-cardhead .fuel-tabs::-webkit-scrollbar { display: none; } #p-combustivel .fuel-cardhead .fuel-tabs .pend-tab { flex: 0 0 auto; } #p-combustivel .fuel-out { flex: 1 1 100%; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); } #p-combustivel .fuel-out .btn, #p-combustivel .fuel-create .btn { padding: 0 8px !important; justify-content: center; font-size: 13px !important; } } /* Linha 2 (abas + saídas) lá em cima, logo abaixo da linha 1, antes dos cartões. */ #p-combustivel .fuel-cardhead.fuel-top2 { border-bottom: 0; padding-bottom: 0; margin: 0 0 12px; } #p-combustivel .fuel-toolbar { margin-bottom: 8px; } /* Linha 1: mês e Comparativo juntos (tudo que é de data); Linha 2: combustível e abas juntos (o que ver). */ #p-combustivel .fuel-toolbar .fc-open { height: 40px; min-height: 40px; padding: 0 16px !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; border-color: #ddd6fe !important; background: #faf8ff !important; color: #5b21b6 !important; } #p-combustivel .fuel-top2 .fuel-types { margin: 0 !important; height: 40px; padding: 3px; box-sizing: border-box; align-items: center; } #p-combustivel .fuel-top2 .fuel-types button { height: 32px; padding: 0 12px; font-size: 13.5px; border: 0; border-radius: 999px; background: transparent; color: #334155; } #p-combustivel .fuel-top2 .fuel-types button:hover:not(.on) { background: #f1f5f9; } #p-combustivel .fuel-top2 .fuel-types button.on { background: #3E4095; color: #fff; } @media (max-width: 760px) { #p-combustivel .fuel-toolbar .fc-open { flex: 1 1 100%; justify-content: center; } #p-combustivel .fuel-top2 .fuel-types { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; } #p-combustivel .fuel-top2 .fuel-types::-webkit-scrollbar { display: none; } #p-combustivel .fuel-top2 .fuel-types button { flex: 0 0 auto; } #p-combustivel .fuel-out { grid-template-columns: 1fr 1fr !important; } } /* Linha de cima com 4 ações (lote, +, exportar, imprimir); no celular, grade 2 × 2. */ @media (max-width: 760px) { #p-combustivel .fuel-create { grid-template-columns: 1fr 1fr; } } /* Combustível e abas com o mesmo padrão (PO, 04/10/2026): faixa igual (fundo claro, borda) e item escolhido em azul cheio com letra branca — dá para ver de relance o que está em uso em cada faixa. */ #p-combustivel .fuel-top2 .fuel-types, #p-combustivel .fuel-top2 .fuel-tabs { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 999px; height: 40px; padding: 3px; gap: 4px; box-sizing: border-box; } #p-combustivel .fuel-top2 .fuel-types button, #p-combustivel .fuel-top2 .fuel-tabs .pend-tab { height: 32px !important; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: #475569 !important; font-size: 13.5px !important; font-weight: 700 !important; box-shadow: none !important; } #p-combustivel .fuel-top2 .fuel-types button:hover:not(.on), #p-combustivel .fuel-top2 .fuel-tabs .pend-tab:hover:not(.active) { background: #eef0f6 !important; color: #24255f !important; } #p-combustivel .fuel-top2 .fuel-types button.on, #p-combustivel .fuel-top2 .fuel-tabs .pend-tab.active { background: #3E4095 !important; color: #fff !important; box-shadow: 0 2px 8px rgba(62,64,149,.28) !important; } #p-combustivel .fuel-top2 .fuel-types button.on i { box-shadow: 0 0 0 2px #fff; } #p-combustivel .fuel-top2 .fuel-tabs .pend-tab b { background: #e9eaf6 !important; color: #3E4095 !important; } #p-combustivel .fuel-top2 .fuel-tabs .pend-tab.active b { background: rgba(255,255,255,.25) !important; color: #fff !important; } /* Separador entre "Lançar em lote" e Exportar/Imprimir/+ Abastecimento */ #p-combustivel .fuel-sep { width: 1px; align-self: stretch; margin: 6px 4px; background: #d5d8e6; } @media (max-width: 760px) { #p-combustivel .fuel-sep { display: none; } } /* Celular: "Enviar comprovante" na lista do motorista com alvo de toque confortável (revisão 04/10/2026). */ #operatorApp .fuel-mini { min-height: 40px; padding: 8px 14px; font-size: 13.5px; } /* Lote: foto da nota por linha (PO, 04/10/2026). Botão 📷 vira a miniatura quando a foto é anexada. */ #flowModalRoot .fb-table col.c-ph { width: 58px; } #flowModalRoot .fb-table td.fb-ph { text-align: center; } #flowModalRoot .fb-photo { width: 40px; height: 38px; padding: 0; border: 1px dashed #c4b5fd; border-radius: 9px; background: #faf8ff; font-size: 16px; cursor: pointer; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; } #flowModalRoot .fb-photo:hover { border-style: solid; background: #f5f3ff; } #flowModalRoot .fb-photo.done { border: 2px solid #16a34a; background: #fff; } #flowModalRoot .fb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Comprovante em PDF: selo "PDF" no lugar da miniatura (PO, 04/10/2026). */ .fuel-pdf { display: inline-flex; align-items: center; justify-content: center; background: #fee2e2; color: #b91c1c; font-weight: 800; font-size: 11px; letter-spacing: .04em; border: 1px solid #fecaca; } span.fuel-thumb.fuel-pdf { width: 42px; height: 42px; border-radius: 8px; } #flowModalRoot .fb-photo .fb-prev { width: 100%; height: 100%; object-fit: cover; display: flex; } #flowModalRoot .fb-photo span.fb-prev { border: 0; font-size: 10.5px; } /* Novo abastecimento / correção (gestor) cabe na tela (PO, 04/10/2026): janela mais larga, campos em 3 colunas, equipamento numa faixa baixa e o comprovante numa linha (botão + selo ao lado). */ #flowModalRoot:has(#flMeter):not(:has(.fuel-op)) .flow-modal { width: min(980px, 96vw) !important; max-width: none !important; } #flowModalRoot:has(#flMeter) .fuel-pick-grid { gap: 8px 12px; } #flowModalRoot:has(#flMeter) .fuel-pick-grid small { min-height: 0; } #flowModalRoot:has(#flMeter) .fuel-asset { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; margin: 6px 0 10px; } #flowModalRoot:has(#flMeter) .fuel-asset b { font-size: 16px; } #flowModalRoot:has(#flMeter) .fuel-asset span, #flowModalRoot:has(#flMeter) .fuel-asset small { font-size: 12.5px; } @media (min-width: 761px) { #flowModalRoot:has(#flMeter) .fuel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px 12px !important; } #flowModalRoot:has(#flMeter) .fuel-grid .fuel-receipt { grid-column: 1 / -1 !important; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #flowModalRoot:has(#flMeter) .fuel-grid .fuel-receipt label { margin: 0 !important; } #flowModalRoot:has(#flMeter) .fuel-grid .fuel-receipt .btn { width: auto !important; min-width: 220px; } #flowModalRoot:has(#flMeter) .fuel-grid .fuel-receipt span { margin: 0 !important; } } #flowModalRoot:has(#flMeter) .fuel-grid input, #flowModalRoot:has(#flMeter) .fuel-price { min-height: 40px; height: 40px; } #flowModalRoot:has(#flMeter) .fuel-grid .field { margin: 0 !important; } #flowModalRoot:has(#flMeter) .fuel-grid .field label { margin-bottom: 4px !important; } #flowModalRoot:has(#flMeter) .flow-modal-actions { margin-top: 10px; } /* ARLA 32 (PO, 04/10/2026): selo na lista, coluna Produto no lote e escolha Diesel/ARLA no celular. */ .fuel-arla { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: #e0f2fe; color: #0369a1; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; vertical-align: middle; } #flowModalRoot .fb-table col.c-pr { width: 118px; } #flowModalRoot .fb-table select[data-fb="product"] { width: 100%; height: 38px; padding: 0 6px; border: 1px solid #e2e8f0; border-radius: 9px; background: #f8fafc; font-size: 13px; } .fuel-prod { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; } .fuel-prod label { margin: 0; cursor: pointer; } .fuel-prod input { position: absolute; opacity: 0; pointer-events: none; } .fuel-prod span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border: 2px solid #e2e8f0; border-radius: 12px; background: #fff; font-size: 16px; font-weight: 800; color: #334155; } .fuel-prod input:checked + span { border-color: #3E4095; background: #eef0ff; color: #24255f; } .fuel-prod input[value="ARLA 32"]:checked + span { border-color: #0ea5e9; background: #e0f2fe; color: #0369a1; } .fuel-prod input:focus-visible + span { outline: 3px solid #a5b4fc; } /* ===== Modelos de checklist — visual premium (PO, 05/10/2026) ===== Mesmos componentes do Resumo do equipamento: trilho segmentado com item ativo branco, botões redondos com borda suave (#d5d8e6) que viram azul (#3E4095) no hover, cartões claros. Uma linha por pergunta, em colunas. */ #appShell #flowModelEditor { container-type: inline-size; container-name: fmed; } #appShell #flowModelEditor { --fm-ink: #24255f; --fm-brand: #3E4095; --fm-line: #e4e7f0; --fm-track: #eef0f7; } /* cabeçalho */ #appShell #flowModelEditor .fm-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--fm-line); padding-bottom: 12px !important; margin-bottom: 10px !important; } #appShell #flowModelEditor .fm-head .fm-title { flex: 1 1 220px; min-width: 0; } #appShell #flowModelEditor .fm-head .fm-title-input { width: 100%; color: var(--fm-ink); } #appShell #flowModelEditor .fm-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #appShell #flowModelEditor .fm-status-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 11px; background: var(--fm-track); } #appShell #flowModelEditor .fm-status-seg label { position: relative; margin: 0; cursor: pointer; } #appShell #flowModelEditor .fm-status-seg input, #appShell #flowModelEditor .fm-seg input, #appShell #flowModelEditor .fm-tog input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } #appShell #flowModelEditor .fm-status-seg span { display: block; padding: 7px 14px; border-radius: 8px; font-weight: 700; font-size: 13px; color: #64748b; transition: .15s; } #appShell #flowModelEditor .fm-status-seg input:checked + span { background: #fff; color: var(--fm-ink); box-shadow: 0 2px 8px rgba(36, 37, 95, .14); } #appShell #flowModelEditor .fm-status-seg label:last-child input:checked + span { color: #b91c1c; } #appShell #flowModelEditor .fm-pill { height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid #d5d8e6; background: #fff; color: var(--fm-brand); font-weight: 700; font-size: 13px; cursor: pointer; transition: .15s; white-space: nowrap; } #appShell #flowModelEditor .fm-pill:hover { background: var(--fm-brand); border-color: var(--fm-brand); color: #fff; } #appShell #flowModelEditor .fm-pill.danger { color: #b91c1c; border-color: #f1d0d0; } #appShell #flowModelEditor .fm-pill.danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; } #appShell #flowModelEditor .fm-save { height: 40px !important; min-height: 40px !important; padding: 0 18px !important; border-radius: 10px !important; } #appShell #flowModelEditor .fm-save.fm-save-on { box-shadow: 0 0 0 3px rgba(245, 158, 11, .35); } #appShell #flowModelEditor .fm-dirty { font-size: 12px; font-weight: 800; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; padding: 5px 10px; border-radius: 999px; white-space: nowrap; } /* faixa das respostas (uma vez só) */ #appShell #flowModelEditor .fm-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: #64748b; margin: 0 0 10px; } #appShell #flowModelEditor .fm-legend > span { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; } #appShell #flowModelEditor .fm-legend > b { font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; } #appShell #flowModelEditor .fm-legend > b.good { background: #dcfce7; color: #15803d; } #appShell #flowModelEditor .fm-legend > b.bad { background: #fee2e2; color: #b91c1c; } #appShell #flowModelEditor .fm-legend > b.na { background: #f1f5f9; color: #64748b; } #appShell #flowModelEditor .fm-legend em { font-style: normal; margin-left: 6px; } /* botão redondo (igual às setas do Resumo) */ #appShell #flowModelEditor .fm-round { flex: none; width: 29px; height: 29px; border-radius: 50%; border: 1px solid #d5d8e6; background: #fff; color: var(--fm-brand); font-size: 15px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: .15s; padding: 0; } #appShell #flowModelEditor .fm-round:hover:not(:disabled) { background: var(--fm-brand); border-color: var(--fm-brand); color: #fff; } #appShell #flowModelEditor .fm-round.danger { color: #b91c1c; } #appShell #flowModelEditor .fm-round.danger:hover:not(:disabled) { background: #dc2626; border-color: #dc2626; color: #fff; } #appShell #flowModelEditor .fm-round:disabled { opacity: .3; cursor: default; } /* seção */ #appShell #flowModelEditor .fm-sec { background: #fff !important; border: 1px solid var(--fm-line) !important; border-radius: 16px !important; padding: 12px 14px !important; margin: 0 0 12px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } #appShell #flowModelEditor .fm-sec-head { display: flex; align-items: center; gap: 10px; } #appShell #flowModelEditor .fm-sec-n { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; white-space: nowrap; } #appShell #flowModelEditor .fm-sec-name { flex: 1 1 160px; min-width: 0; height: 36px !important; min-height: 36px !important; font-size: 16px !important; font-weight: 800 !important; color: var(--fm-ink) !important; border: 1px solid transparent !important; background: transparent !important; border-radius: 8px !important; padding: 0 8px !important; } #appShell #flowModelEditor .fm-sec-name:hover { border-color: var(--fm-line) !important; background: #f8fafc !important; } #appShell #flowModelEditor .fm-sec-name:focus { border-color: #6366f1 !important; background: #fff !important; outline: none; } #appShell #flowModelEditor .fm-sum { font-size: 12px; color: #64748b; white-space: nowrap; } #appShell #flowModelEditor .fm-sum b { font-weight: 800; } #appShell #flowModelEditor .fm-sum b.r { color: #dc2626; } #appShell #flowModelEditor .fm-sum b.p { color: #d97706; } #appShell #flowModelEditor .fm-sum b.g { color: #64748b; } #appShell #flowModelEditor .fm-sec-tools, #appShell #flowModelEditor .fm-q-tools { display: flex; gap: 6px; } #appShell #flowModelEditor .fm-sec-add { display: flex; gap: 8px; margin-top: 10px; } #appShell #flowModelEditor .fm-add-sec { width: 100%; height: 44px; border-style: dashed; } /* colunas: grip | nº | pergunta | se insuficiente | exige | ferramentas */ #appShell #flowModelEditor .fm-q, #appShell #flowModelEditor .fm-q-cols { display: grid; grid-template-columns: 18px 26px minmax(200px, 1fr) 252px 128px 64px; align-items: center; column-gap: 10px; } #appShell #flowModelEditor .fm-q-cols { margin: 12px 0 4px; padding: 0 11px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; } #appShell #flowModelEditor .fm-q-cols > span:nth-child(1) { grid-column: 1 / 3; } #appShell #flowModelEditor .fm-q-cols > span:nth-child(2) { padding-left: 10px; } #appShell #flowModelEditor .fm-q { padding: 6px 10px; border-radius: 12px; border: 1px solid transparent; transition: background .15s, border-color .15s; } #appShell #flowModelEditor .fm-q + .fm-q { border-top-color: #f1f3f8; } #appShell #flowModelEditor .fm-q:hover, #appShell #flowModelEditor .fm-q:focus-within { background: #f8f9fd; border-color: var(--fm-line); } #appShell #flowModelEditor .fm-q-grip { color: #b6bfd0; font-size: 14px; letter-spacing: -3px; cursor: grab; touch-action: none; user-select: none; text-align: center; } #appShell #flowModelEditor .fm-q:hover .fm-q-grip { color: var(--fm-brand); } #appShell #flowModelEditor .fm-q-n { width: 26px; height: 26px; border-radius: 50%; background: var(--fm-track); color: var(--fm-ink); font-weight: 800; font-size: 12px; display: grid; place-items: center; } #appShell #flowModelEditor .fm-q-text { width: 100%; height: 38px !important; min-height: 38px !important; font-size: 14.5px !important; font-weight: 600 !important; color: #1e293b !important; border: 1px solid transparent !important; background: transparent !important; border-radius: 9px !important; padding: 0 10px !important; outline: none; } #appShell #flowModelEditor .fm-q:hover .fm-q-text { border-color: var(--fm-line) !important; background: #fff !important; } #appShell #flowModelEditor .fm-q-text:focus { border-color: #6366f1 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); } #appShell #flowModelEditor .fm-seg .fm-m-lbl, #appShell #flowModelEditor .fm-req .fm-m-lbl { display: none; } /* Se INSUFICIENTE: trilho segmentado (ativo branco com ponto colorido) */ #appShell #flowModelEditor .fm-seg, #appShell #flowModelEditor .fm-req { display: flex; align-items: center; gap: 8px; min-width: 0; } #appShell #flowModelEditor .fm-track { display: flex; flex: 1; padding: 3px; gap: 2px; border-radius: 11px; background: var(--fm-track); } #appShell #flowModelEditor .fm-seg label { position: relative; flex: 1; margin: 0; cursor: pointer; } #appShell #flowModelEditor .fm-seg span { display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #64748b; transition: .15s; white-space: nowrap; } #appShell #flowModelEditor .fm-seg span i { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; flex: none; } #appShell #flowModelEditor .fm-seg label:hover span { color: var(--fm-ink); } #appShell #flowModelEditor .fm-seg input:checked + span { background: #fff; box-shadow: 0 2px 8px rgba(36, 37, 95, .14); } #appShell #flowModelEditor .fm-seg-retem input:checked + span { color: #b91c1c; } #appShell #flowModelEditor .fm-seg-retem span i { background: #fca5a5; } #appShell #flowModelEditor .fm-seg-retem input:checked + span i { background: #dc2626; } #appShell #flowModelEditor .fm-seg-pendencia input:checked + span { color: #b45309; } #appShell #flowModelEditor .fm-seg-pendencia span i { background: #fcd34d; } #appShell #flowModelEditor .fm-seg-pendencia input:checked + span i { background: #f59e0b; } #appShell #flowModelEditor .fm-seg-registro input:checked + span { color: #475569; } #appShell #flowModelEditor .fm-seg-registro input:checked + span i { background: #64748b; } /* Exige: dois botões que ligam/desligam, no mesmo trilho */ #appShell #flowModelEditor .fm-tog { position: relative; flex: 1; margin: 0; cursor: pointer; } #appShell #flowModelEditor .fm-tog span { display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #94a3b8; transition: .15s; white-space: nowrap; } #appShell #flowModelEditor .fm-tog span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #cbd5e1; background: #fff; box-sizing: border-box; display: grid; place-items: center; } #appShell #flowModelEditor .fm-tog input:checked + span { background: #fff; color: var(--fm-ink); box-shadow: 0 2px 8px rgba(36, 37, 95, .14); } #appShell #flowModelEditor .fm-tog input:checked + span::before { content: "✓"; background: var(--fm-brand); border-color: var(--fm-brand); color: #fff; font-size: 10px; line-height: 1; } #appShell #flowModelEditor :is(.fm-seg, .fm-tog, .fm-status-seg) input:focus-visible + span { outline: 2px solid #6366f1; outline-offset: 1px; } /* ferramentas discretas: acendem no hover/foco (no toque ficam sempre visíveis) */ #appShell #flowModelEditor .fm-q-tools .fm-arrow { display: none; } @media (hover: none) { #appShell #flowModelEditor .fm-q-tools .fm-arrow { display: grid; } } #appShell #flowModelEditor .fm-q-tools { justify-content: flex-end; opacity: .35; transition: opacity .15s; } #appShell #flowModelEditor .fm-q:hover .fm-q-tools, #appShell #flowModelEditor .fm-q:focus-within .fm-q-tools { opacity: 1; } @media (hover: none) { #appShell #flowModelEditor .fm-q-tools { opacity: 1; } } /* arrastar */ #appShell #flowModelEditor .fm-q.fm-dragging { opacity: .5; border: 1px dashed var(--fm-brand); background: #f5f6ff; } #appShell #flowModelEditor .fm-q.fm-drop-before { box-shadow: 0 -3px 0 0 var(--fm-brand); } #appShell #flowModelEditor .fm-q.fm-drop-after { box-shadow: 0 3px 0 0 var(--fm-brand); } #appShell #flowModelEditor .fm-q.fm-dropped { animation: fmDropped 1.2s ease-out; } @keyframes fmDropped { from { background: #e8eafc; } to { background: transparent; } } /* tela média: a regra e as exigências descem para a segunda linha, com rótulo */ @container fmed (max-width: 760px) { #appShell #flowModelEditor .fm-q-cols { display: none; } #appShell #flowModelEditor .fm-q { grid-template-columns: 18px 26px minmax(0, 1fr) auto auto; row-gap: 4px; padding: 8px 10px; } #appShell #flowModelEditor .fm-q-tools { grid-column: 4 / 6; grid-row: 1; } #appShell #flowModelEditor .fm-seg { grid-column: 3 / 5; grid-row: 2; justify-self: end; } #appShell #flowModelEditor .fm-seg .fm-track { width: 252px; flex: none; } #appShell #flowModelEditor .fm-req { grid-column: 5; grid-row: 2; width: 128px; } #appShell #flowModelEditor .fm-seg, #appShell #flowModelEditor .fm-req { flex-direction: column; align-items: stretch; gap: 3px; align-self: end; } #appShell #flowModelEditor .fm-seg .fm-m-lbl, #appShell #flowModelEditor .fm-req .fm-m-lbl { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; white-space: nowrap; padding-left: 4px; } #appShell #flowModelEditor .fm-seg .fm-m-lbl { color: #b91c1c; } } /* celular */ @media (max-width: 760px) { #appShell #flowModelEditor .fm-head-actions { width: 100%; } #appShell #flowModelEditor .fm-head-actions > * { flex: 1 1 auto; } #appShell #flowModelEditor .fm-save, #appShell #flowModelEditor .fm-dirty { flex: 1 1 100% !important; text-align: center; } #appShell #flowModelEditor .fm-legend em { display: block; margin: 2px 0 0; width: 100%; } #appShell #flowModelEditor .fm-sec { padding: 10px !important; } #appShell #flowModelEditor .fm-sec-head { flex-wrap: wrap; } #appShell #flowModelEditor .fm-sec-name { flex-basis: calc(100% - 130px); } #appShell #flowModelEditor .fm-sum { order: 5; flex: 1; } #appShell #flowModelEditor .fm-sec-tools { order: 6; } #appShell #flowModelEditor .fm-q { grid-template-columns: 26px 26px minmax(0, 1fr); padding: 10px 6px; border-top-color: var(--fm-line) !important; } #appShell #flowModelEditor .fm-q-grip { font-size: 18px; height: 40px; display: grid; place-items: center; } #appShell #flowModelEditor .fm-q-text { font-size: 16px !important; height: 44px !important; min-height: 44px !important; border-color: var(--fm-line) !important; background: #fff !important; } #appShell #flowModelEditor .fm-seg, #appShell #flowModelEditor .fm-req { grid-column: 1 / -1 !important; grid-row: auto !important; width: auto !important; flex-wrap: wrap; justify-self: stretch !important; } #appShell #flowModelEditor .fm-m-lbl, #appShell #flowModelEditor .fm-seg .fm-m-lbl { display: block !important; position: static !important; transform: none !important; flex: 1 1 100%; padding: 2px 4px 4px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; color: #64748b; } #appShell #flowModelEditor .fm-seg .fm-m-lbl { color: #b91c1c; } #appShell #flowModelEditor .fm-track { width: auto !important; flex: 1 1 100% !important; } #appShell #flowModelEditor .fm-seg span, #appShell #flowModelEditor .fm-tog span { height: 38px; } #appShell #flowModelEditor .fm-q-tools { grid-column: 1 / -1 !important; grid-row: auto !important; justify-content: flex-end; } #appShell #flowModelEditor .fm-round { width: 38px; height: 38px; } #appShell #flowModelEditor .fm-q-tools .fm-arrow { display: grid; } #appShell #flowModelEditor .fm-sec-add .fm-pill { flex: 1; height: 44px; } } /* Desfazer e janela "Várias perguntas" */ .fm-undo { position: fixed; left: 50%; bottom: 64px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .2s; z-index: 2000; display: flex; align-items: center; gap: 14px; background: #24255f; color: #fff; padding: 10px 10px 10px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font-size: 14px; max-width: calc(100vw - 32px); } .fm-undo.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .fm-undo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fm-undo button { flex: none; background: #fff; color: #24255f; border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 800; font-size: 14px; cursor: pointer; } #flowModalBody #fmPasteText { width: 100%; min-height: 170px; font-size: 15px; line-height: 1.5; resize: vertical; } #flowModalBody .fm-paste-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; margin-top: 10px; } #flowModalBody .fm-paste-opts select { min-width: 160px; } #flowModalBody .fm-paste-opts .mini-check { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; } #flowModalBody .fm-paste-count { margin: 8px 0 0; font-size: 13px; font-weight: 700; } /* Contato da empresa na tela inicial: item sem dado não aparece (o [hidden] perdia para os display dos temas); sem nenhum dado (instalação nova, antes de preencher Dados da Empresa), o bloco e a linha somem. (05/10/2026) */ #home .home-contact-item[hidden] { display: none !important; } #home .home-company-contact:not(:has(.home-contact-item:not([hidden]))) { display: none !important; } /* Dois contatos na tela inicial (PO, 05/10/2026): um embaixo do outro, ícone | nome | telefone alinhados em colunas. */ #home.codex-home .home-contact-phones { display: inline-grid; grid-template-columns: auto auto auto; column-gap: 6px; row-gap: 2px; align-items: center; justify-items: start; } #home.codex-home .home-contact-phones[hidden] { display: none !important; } #home.codex-home .home-contact-phones .home-contact-phone { display: grid !important; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; column-gap: 6px; } #home.codex-home .home-contact-phones .home-contact-phone[hidden] { display: none !important; } #home.codex-home .home-contact-name { font-weight: 700; white-space: nowrap; } @media (max-width: 760px) { /* celular: mantém a ordem endereço → e-mail → telefones, e os dois telefones na ordem principal → secundário */ #home.codex-home #homeCompanyPhones { order: 3; justify-self: center; align-self: center; } #home.codex-home #homeCompanyPhones > a { order: 0; } } /* Dados da Empresa: bloco de contatos (PO, 05/10/2026) — "Contato principal | Nome | Telefone" e o secundário embaixo. */ #appShell .company-contacts { grid-column: 1 / -1; display: grid; gap: 8px; padding: 10px 12px; border: 1px solid #e4e7f0; border-radius: 12px; background: #fafbfe; } #appShell .company-contact-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; } #appShell .company-contact-row .field { margin: 0 !important; } #appShell .company-contact-title { align-self: center; padding-top: 16px; font-size: 13px; font-weight: 800; color: #24255f; } @media (max-width: 760px) { #appShell .company-contact-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } #appShell .company-contact-title { grid-column: 1 / -1; padding-top: 0; } } @media (max-width: 760px) { #appShell .company-contact-row { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } } /* Tela inicial — contatos lado a lado (PO, 05/10/2026): "☎ Thiago (99) 99128-1111 | ☎ Wiliinn (63) 99999-9999" na primeira linha; endereço (e o e-mail, se couber) embaixo. Vale para computador e celular. */ #home.codex-home .home-company-contact > #homeCompanyPhones { order: 0 !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px 0; } #home.codex-home #homeCompanyPhones[hidden] { display: none !important; } #home.codex-home #homeCompanyPhones > .home-contact-phone { display: inline-flex !important; align-items: center; gap: 6px; order: 0 !important; } #home.codex-home #homeCompanyPhones > .home-contact-phone[hidden] { display: none !important; } #home.codex-home #homeCompanyPhoneLink:not([hidden]) + #homeCompanyPhone2Link:not([hidden])::before { content: "|"; margin: 0 12px 0 10px; opacity: .45; font-weight: 400; } #home.codex-home .home-company-contact > .home-contact-address { order: 1 !important; } #home.codex-home .home-company-contact > #homeCompanyEmailLink { order: 2 !important; } @media (min-width: 761px) { #home.codex-home .home-company-contact > #homeCompanyPhones { flex: 0 0 100% !important; } #home.codex-home .home-company-contact > .home-contact-address { flex: 0 0 auto !important; max-width: 100%; } } @media (max-width: 760px) { #home.codex-home .home-company-contact > #homeCompanyPhones { justify-content: center; align-self: center; } } @media (max-width: 760px) { /* celular: lado a lado quando couber; se quebrar, centraliza sem o "|" sobrando */ #home.codex-home #homeCompanyPhoneLink:not([hidden]) + #homeCompanyPhone2Link:not([hidden])::before { content: none; } #home.codex-home .home-company-contact > #homeCompanyPhones { column-gap: 16px; } #home.codex-home #homeCompanyPhones > .home-contact-phone { font-size: 12.5px !important; gap: 5px; } } /* Versão do sistema no rodapé (PO, 05/10/2026) — discreta, aparece também no celular. */ #globalPortalFooter .footer-version { opacity: .7; font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; } #globalPortalFooter .footer-version[hidden], #globalPortalFooter .footer-version-sep[hidden] { display: none !important; } /* Dados da Empresa sem rolagem (PO, 05/10/2026): contatos lado a lado (principal | secundário) e "Salvar dados" na mesma linha da regra de checklists por dia. */ #appShell .company-contacts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; } #appShell .company-contact-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; } #appShell .company-contact-title { grid-column: 1 / -1; padding-top: 0; font-size: 12.5px; } #p-empresa .flow-company-grid > .card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: end; } #p-empresa .flow-company-grid > .card > .flow-form-grid { grid-column: 1 / -1; } #p-empresa .flow-company-grid > .card > .flow-modal-actions { margin: 0 !important; padding: 0 !important; border: 0 !important; } @media (max-width: 1100px) { #appShell .company-contacts { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { #p-empresa .flow-company-grid > .card { grid-template-columns: minmax(0, 1fr); } #p-empresa .flow-company-grid > .card > .flow-modal-actions { margin-top: 10px !important; } } /* Home: o título é o que chama atenção (PO, 05/10/2026) — nos ajustes de espaço (fitHome) ele mantém o tamanho cheio nos níveis 1 a 3; quem cede são espaçamentos, logo e textos menores. Só o nível 4 (tela muito baixa) reduz. */ @media (min-width: 761px) { #home.codex-home.home-fit-1 .codex-copy h1, #home.codex-home.home-fit-2 .codex-copy h1, #home.codex-home.home-fit-3 .codex-copy h1 { font-size: clamp(32px, min(5.6vh, 3.2vw), 54px) !important; line-height: 1.02 !important; } #home.codex-home.home-fit-4 .codex-copy h1 { font-size: clamp(28px, 4.6vh, 40px) !important; } #home.codex-home.home-fit-1 .codex-copy { margin-top: 8px !important; } #home.codex-home.home-fit-1 .codex-access { margin-top: 10px !important; gap: 7px !important; } #home.codex-home.home-fit-1 .codex-access .codex-option { padding-top: 8px !important; padding-bottom: 8px !important; } } @media (min-width: 761px) { /* nível 2: a frase de apoio continua (menor) — só some no nível 3; logo um pouco menor para ceder espaço */ #home.codex-home.home-fit-2 .codex-copy p { display: block !important; font-size: 12.5px !important; margin-top: 4px !important; line-height: 1.3 !important; } #home.codex-home.home-fit-2 .home-hero-logo img { height: 40px !important; } #home.codex-home.home-fit-3 .codex-copy p { display: none !important; } } /* Home respirável no ajuste de espaço (PO, 05/10/2026): nos níveis 1–2 o título fica um pouco abaixo do máximo e os intervalos (logo→título→frase→cartões→contatos) voltam a ter folga, em vez de apertar tudo para o título caber cheio. */ @media (min-width: 761px) { #home.codex-home.home-fit-1 .codex-copy h1, #home.codex-home.home-fit-2 .codex-copy h1 { font-size: clamp(30px, min(5.1vh, 3vw), 50px) !important; } #home.codex-home.home-fit-1 .codex-copy, #home.codex-home.home-fit-2 .codex-copy { margin-top: 16px !important; } #home.codex-home.home-fit-1 .codex-copy p, #home.codex-home.home-fit-2 .codex-copy p { margin-top: 8px !important; } #home.codex-home.home-fit-1 .codex-access, #home.codex-home.home-fit-2 .codex-access { margin-top: 18px !important; gap: 9px !important; } #home.codex-home.home-fit-1 .codex-access .codex-option, #home.codex-home.home-fit-2 .codex-access .codex-option { padding-top: 7px !important; padding-bottom: 7px !important; } #home.codex-home.home-fit-1 .home-company-contact, #home.codex-home.home-fit-2 .home-company-contact { margin-top: 14px !important; padding-top: 12px !important; } } @media (min-width: 761px) { #home.codex-home .codex-copy p { margin-top: 8px !important; } } /* Home respirável em qualquer altura de tela (PO, 05/10/2026): os intervalos crescem com a tela (vh) e os cartões crescem um pouco menos, para sobrar respiro também em telas grandes — sem precisar do aperto automático. */ @media (min-width: 761px) { #home.codex-home:not([class*="home-fit"]) .codex-copy { margin-top: clamp(8px, 1.6vh, 22px) !important; } #home.codex-home:not([class*="home-fit"]) .codex-copy p { margin-top: clamp(6px, 1vh, 12px) !important; } #home.codex-home:not([class*="home-fit"]) .codex-access { margin-top: clamp(10px, 2vh, 26px) !important; } #home.codex-home:not([class*="home-fit"]) .home-company-contact { margin-top: clamp(8px, 1.6vh, 22px) !important; } #home.codex-home:not([class*="home-fit"]) .codex-access .codex-option { padding-top: clamp(9px, 1.7vh, 20px) !important; padding-bottom: clamp(9px, 1.7vh, 20px) !important; } #home.codex-home:not([class*="home-fit"]) .codex-copy h1 { font-size: clamp(30px, min(5.1vh, 3vw), 52px) !important; } }