/* INFRAMETRIA — folha de estilo única. Os textos já são escritos em caixa alta no HTML; não se usa text-transform, para preservar a grafia técnica das unidades (m, cm, m², m³, kg, t). */ /* A paleta da marca: preto, asfalto, amarelo e branco. Não há verde. O amarelo é a faixa da rodovia: fio de marca e sinal de atenção. Ele nunca é fundo largo nem texto corrido. Estado positivo não tem cor própria — é cinza neutro com texto escuro. TEMA. O claro é o padrão. O escuro entra em duas situações: quando o aparelho está em modo escuro (prefers-color-scheme) e ninguém forçou o claro, ou quando a pessoa escolheu "escuro" no seletor — o que grava data-tema no . Tudo o que muda entre os dois está nestas variáveis; o resto da folha só as usa. */ :root { --preto: #000000; --grafite: #0B1014; --asfalto: #2B3338; --amarelo: #F2C230; --branco: #F2F6F8; /* nomes antigos, mantidos porque a folha os usa em centenas de lugares */ --navy: var(--painel-forte); --navy-forte: var(--acao); --navy-claro: var(--painel-forte); --ambar: var(--amarelo); /* superfícies e texto — tema claro */ --fundo-pagina: #E9EDF0; --fundo: #F2F6F8; --superficie: #FFFFFF; --superficie-2: #E9EEF2; --superficie-3: #F2F5F7; --texto: #131A20; --texto-suave: #5E7280; --texto-fraco: #7A8B96; --borda: #DEE5EA; --borda-campo: #B7C3CC; --sombra: #0B101414; --foco: #2B3338; /* a marca: fundo, tinta e pista do logotipo */ --superficie-marca: #FFFFFF; --tinta-marca: #000000; --marca-pista: #2B3338; --borda-marca: #DEE5EA; --sobre-escuro: #5E7280; /* texto secundário ao lado da marca */ /* blocos fortes (resultado, total) e ações */ --painel-forte: #2B3338; --painel-forte-texto: #F2F6F8; --painel-forte-borda: transparent; --acao: #000000; --acao-texto: #FFFFFF; /* alerta (amarelo) e erro (vermelho) */ --alerta-fundo: #FFF6E3; --alerta-texto: #6B5310; --erro-fundo: #FDECEA; --erro-texto: #8D2B1F; } /* Tema escuro: pelo aparelho, salvo quem forçou o claro… */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo-pagina: #05080A; --fundo: #0B1014; --superficie: #121A22; --superficie-2: #1A242D; --superficie-3: #16202A; --texto: #F2F6F8; --texto-suave: #93A6B2; --texto-fraco: #6F8391; --borda: #223039; --borda-campo: #34454F; --sombra: #00000055; --foco: #F2C230; --superficie-marca: #0B1014; --tinta-marca: #F2F6F8; --marca-pista: #F2F6F8; --borda-marca: #223039; --sobre-escuro: #93A6B2; --painel-forte: #1A242D; --painel-forte-texto: #F2F6F8; --painel-forte-borda: #2C3A45; --acao: #F2F6F8; --acao-texto: #0B1014; --alerta-fundo: #3A3012; --alerta-texto: #F2C230; --erro-fundo: #3B1A17; --erro-texto: #F0B7B7; } } /* …ou por escolha da pessoa. */ :root[data-tema="escuro"] { --fundo-pagina: #05080A; --fundo: #0B1014; --superficie: #121A22; --superficie-2: #1A242D; --superficie-3: #16202A; --texto: #F2F6F8; --texto-suave: #93A6B2; --texto-fraco: #6F8391; --borda: #223039; --borda-campo: #34454F; --sombra: #00000055; --foco: #F2C230; --superficie-marca: #0B1014; --tinta-marca: #F2F6F8; --marca-pista: #F2F6F8; --borda-marca: #223039; --sobre-escuro: #93A6B2; --painel-forte: #1A242D; --painel-forte-texto: #F2F6F8; --painel-forte-borda: #2C3A45; --acao: #F2F6F8; --acao-texto: #0B1014; --alerta-fundo: #3A3012; --alerta-texto: #F2C230; --erro-fundo: #3B1A17; --erro-texto: #F0B7B7; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fundo-pagina); color: var(--texto); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.55; } h1, h2, h3 { margin: 0; } p { margin: 0 0 10px; } .oculto { display: none !important; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; } /* ------------------------------------------------------------- estruturas */ .tela-carregando { display: grid; place-items: center; min-height: 100vh; color: var(--texto-suave); letter-spacing: 1px; } .tela-acesso, .tela-termo { max-width: 660px; min-height: 100vh; margin: auto; padding: 24px 18px; background: var(--fundo); } .cartao-topo { background: var(--superficie-marca); border: 1px solid var(--borda-marca); border-bottom: 0; border-radius: 10px 10px 0 0; color: var(--tinta-marca); padding: 22px; } .cartao-topo strong { letter-spacing: 2px; font-size: 17px; } .cartao-topo p { color: var(--sobre-escuro); font-size: 12px; margin: 8px 0 0; } .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 0 0 10px 10px; padding: 24px; } .cartao h1 { font-size: 21px; font-weight: 700; line-height: 1.3; margin: 0 0 20px; } .abas-acesso { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; background: var(--superficie-2); border-radius: 9px; padding: 5px; margin-bottom: 22px; } .aba-acesso { border: 0; background: transparent; border-radius: 6px; min-height: 38px; font-size: 14px; font-weight: 600; color: var(--texto-suave); } .aba-acesso.ativa { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 4px var(--sombra); } .form-acesso .primary { margin-top: 6px; } .link { display: block; width: 100%; margin-top: 14px; padding: 8px; border: 0; background: none; color: var(--texto); font-size: 14px; font-weight: 600; text-decoration: underline; } /* ----------------------------------------------------------------- termo */ #termo-texto p { font-size: 14px; line-height: 1.7; margin-bottom: 18px; } .termo-check { display: flex; align-items: flex-start; gap: 12px; border-top: 1px solid var(--borda); margin: 12px 0 18px; padding: 18px 0; font-size: 14px; font-weight: 600; cursor: pointer; } .termo-check input { width: 22px; height: 22px; margin-top: 3px; flex-shrink: 0; accent-color: var(--acao); } /* ------------------------------------------------------------ aplicativo */ .app { width: 100%; max-width: 560px; min-height: 100vh; margin: auto; padding-bottom: 15px; background: var(--fundo); box-shadow: 0 0 65px var(--sombra); } /* CABEÇALHO Linha 1: símbolo e nome à esquerda, "VERSÃO 1.0" à direita, com a primeira linha da versão alinhada à linha do nome do aplicativo. Linha 2: crédito do desenvolvedor abaixo de todo o conjunto do logo. */ .masthead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 16px; row-gap: 12px; background: var(--superficie-marca); /* Sem fio amarelo aqui: a rodovia do logotipo já é a faixa. Dois fios amarelos a 40 px um do outro leem como erro. */ border-bottom: 1px solid var(--borda-marca); color: var(--tinta-marca); padding: 20px 22px; } .masthead .version { grid-area: 1 / 2; justify-self: end; text-align: right; font-family: Arial, Helvetica, sans-serif; letter-spacing: .5px; } .masthead .version .rotulo { display: block; font-size: 12px; line-height: 22px; color: var(--sobre-escuro); } .masthead .version b { display: block; font-size: 21px; line-height: 1.15; color: var(--tinta-marca); } .masthead .brand { grid-area: 1 / 1; color: inherit; text-decoration: none; justify-self: start; display: flex; align-items: flex-start; gap: 12px; min-width: 0; } /* --------------------------------------------------------------- a marca */ /* O sprite só guarda as definições; nada dele é desenhado. */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* O logotipo é contorno, não fonte: herda a cor do texto e a altura vem do corpo, então acompanha qualquer ajuste de tamanho sem perder proporção. A razão 787,3 / 186,2 é a da mancha da assinatura completa. Em fundo escuro a pista é branca como o nome; em fundo claro, --marca-pista a pinta de asfalto. */ .marca-assinatura { display: block; width: 100%; max-width: 250px; height: auto; aspect-ratio: 787.3 / 186.2; color: inherit; } .brand .marca-assinatura { max-width: 236px; } .cartao-topo .marca-assinatura { max-width: 290px; } .brand-sub { display: block; margin-top: 2px; color: var(--sobre-escuro); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; } .brand-credit { grid-column: 1 / -1; margin: 0; text-align: left; color: var(--sobre-escuro); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; } .barra-conta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 22px; background: var(--superficie-2); border-bottom: 1px solid var(--borda); color: var(--texto-suave); font-size: 13px; } #conta-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barra-conta .link { width: auto; flex-shrink: 0; margin: 0; padding: 4px 0; font-size: 13px; } .barra-conta .tema { font-size: 11.5px; letter-spacing: .6px; text-decoration: none; color: var(--texto-suave); } .intro { padding: 26px 22px 20px; } .eyebrow { letter-spacing: 1.6px; color: var(--texto-suave); font-size: 12px; font-weight: 700; margin: 0 0 10px; } .intro h1 { font-size: 33px; font-weight: 700; line-height: 1.12; letter-spacing: -1px; margin: 0 0 12px; } .intro > p:last-child { color: var(--texto-suave); font-size: 15px; margin: 0; } .main-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0 20px 14px; padding: 5px; background: var(--superficie-2); border-radius: 9px; } .tab { border: 0; background: transparent; border-radius: 6px; min-height: 40px; font-size: 14px; font-weight: 600; color: var(--texto-suave); } .tab.ativa { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 4px var(--sombra); } .count { background: var(--borda); border-radius: 4px; padding: 0 6px; font-size: 12px; } .tab.ativa .count { background: var(--superficie-2); } .panel { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; margin: 0 20px 16px; padding: 22px; } .section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .section-title > span { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; white-space: nowrap; background: var(--superficie-2); border-radius: 5px; color: var(--texto-suave); font: 700 13px monospace; } .section-title h2 { font-size: 17px; font-weight: 700; letter-spacing: -.2px; } .section-help { color: var(--texto-suave); font-size: 14px; margin: -12px 0 20px; } /* ---------------------------------------------------------------- campos */ .field { margin-bottom: 18px; min-width: 0; } /* Etapa 01: no celular uma coluna; a partir de 641 px os campos vão em pares, lado a lado, e .largo ocupa a linha inteira (TRECHO, RESPONSÁVEL, OBSERVAÇÕES). */ .campos-duplos { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 14px; } .campos-duplos .field { min-width: 0; } @media (min-width: 641px) { .campos-duplos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .campos-duplos .field.largo { grid-column: 1 / -1; } } .field.destaque { padding: 12px 14px 4px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px; } .field label { display: block; margin-bottom: 7px; color: var(--texto); font-size: 13.5px; font-weight: 600; } .field input, .field select { width: 100%; min-height: 48px; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borda-campo); border-radius: 6px; color: var(--texto); font-size: 16px; font-family: inherit; } .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%), linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%); background-position: right 18px center, right 12px center; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 34px; } .field input:focus, .field select:focus { outline: 2px solid var(--foco); outline-offset: 1px; } /* Opção em linha (caixa + texto), usada na Etapa 03. */ .opcao-linha { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 12px; font-size: 12.5px; color: var(--texto-suave); cursor: pointer; } .opcao-linha input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; accent-color: var(--amarelo); } #botao-salvar-fotos { margin-bottom: 16px; } /* Campo calculado pelo sistema (ex.: consumo de emulsão do microrrevestimento). */ .field input[readonly] { background: var(--superficie-2); color: var(--texto-suave); cursor: default; } /* Resumo da dosagem do microrrevestimento, acima da tabela de insumos. */ .resumo-mraf { margin: 0 0 14px; padding: 10px 12px; background: var(--superficie-2); border-radius: 8px; } .resumo-mraf .result-line { padding: 6px 0; } .resumo-mraf .hint { margin: 6px 0 0; } /* Campo de senha com o "olho" à direita, dentro do campo. O botão não entra no envio do formulário (type=button) e é acessível por teclado. */ .campo-senha { position: relative; } .campo-senha input { padding-right: 48px; } .campo-senha .olho { position: absolute; top: 0; right: 0; height: 100%; width: 46px; display: grid; place-items: center; background: transparent; border: 0; padding: 0; margin: 0; color: var(--texto-suave); cursor: pointer; border-radius: 0 6px 6px 0; } .campo-senha .olho:hover { color: var(--texto); } .campo-senha .olho:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; } .campo-senha .olho svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .campo-senha .olho .olho-fechado { display: none; } .campo-senha .olho[aria-pressed="true"] .olho-aberto { display: none; } .campo-senha .olho[aria-pressed="true"] .olho-fechado { display: block; } .required { color: var(--alerta-texto); } .hint { color: var(--texto-suave); font-size: 13px; line-height: 1.5; margin: 7px 0 0; } .notice { background: var(--alerta-fundo); border-left: 3px solid var(--amarelo); color: var(--alerta-texto); font-size: 14px; line-height: 1.55; margin: 4px 0 0; padding: 12px; } .feedback { color: var(--texto); font-size: 14px; margin: 12px 0 0; } .feedback:empty { display: none; } .feedback.erro { color: var(--erro-texto); } .primary, .secondary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 16px; border-radius: 6px; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center; } .primary { width: 100%; background: var(--acao); border: 1px solid var(--acao); color: var(--acao-texto); } .primary:hover:not(:disabled) { opacity: .88; } .secondary { background: var(--superficie); border: 1px solid var(--borda-campo); color: var(--texto); } .wide { width: 100%; margin-top: 10px; } button:disabled { opacity: .55; cursor: not-allowed; } /* -------------------------------------------------------------- resultado */ .geometry-summary { display: flex; flex-direction: column; gap: 2px; background: var(--superficie-2); border-left: 3px solid var(--asfalto); border-radius: 0 6px 6px 0; margin: 6px 0 20px; padding: 16px 18px; } .geometry-summary span { color: var(--texto-suave); font-size: 13px; } .geometry-summary strong { font-size: 21px; font-variant-numeric: tabular-nums; margin-bottom: 10px; } .geometry-summary strong:last-child { margin-bottom: 0; } .result { background: var(--painel-forte); border: 1px solid var(--painel-forte-borda); border-top: 4px solid var(--ambar); border-radius: 12px; color: var(--painel-forte-texto); margin: 0 20px 14px; padding: 24px; } .result .eyebrow { color: #C7D3DA; } .big-number { font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -1px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .big-number span { color: #b6cdd9; font-size: 22px; font-weight: 400; } .result > p { color: #cedee6; margin: 5px 0 20px; } .result-line { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid #ffffff22; margin-top: 12px; padding-top: 12px; } .result-line span { color: #bfd0da; font-size: 13px; } .result-line strong { font-size: 19px; font-weight: 600; } .empty-result { display: flex; align-items: center; gap: 15px; border: 1px dashed var(--borda-campo); border-radius: 12px; color: var(--texto-suave); margin: 0 20px 16px; padding: 22px; } .empty-result p { margin: 0; font-size: 14px; } .painting-result { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px; margin: 0 20px 16px; padding: 20px; } .painting-result > strong { display: block; font-size: 28px; font-weight: 700; } .painting-result p { color: var(--texto-suave); font-size: 14px; margin: 8px 0; } .combined { display: flex; flex-direction: column; border-top: 1px solid var(--borda); margin-top: 14px; padding-top: 14px; font-size: 14px; } .combined b { font-size: 22px; } details { border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); margin: 8px 0 20px; padding: 12px 0; } summary { cursor: pointer; font-size: 14px; font-weight: 600; } .memory { color: var(--texto-suave); margin: 0 22px 24px; } .memory p { font-size: 13.5px; } .micro-note { background: var(--superficie-2); border-radius: 8px; color: var(--texto-suave); font-size: 14px; margin: 0 22px 20px; padding: 14px; } /* -------------------------------------------------------------- histórico */ .exports button, .exports a { min-height: 48px; } .file-ready { display: flex; flex-direction: column; gap: 8px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px; margin-top: 16px; padding: 16px; } .file-ready > strong { font-size: 14px; overflow-wrap: anywhere; } .file-ready > span { color: var(--texto-suave); font-size: 13px; } .file-ready a { text-decoration: none; } .file-ready .file-open { text-align: center; margin-top: 6px; font-size: 14px; text-decoration: underline; color: var(--texto); } .report-heading { margin: 22px 22px 16px; } .report-heading h2 { font-size: 21px; font-weight: 700; margin: 0 0 4px; } .report-heading p { margin-top: 6px; } .empty { border: 1px dashed var(--borda-campo); border-radius: 12px; color: var(--texto-suave); margin: 0 20px 20px; padding: 30px 20px; text-align: center; } .empty h3 { font-size: 17px; font-weight: 600; } .empty p { font-size: 14px; } .record { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; margin: 0 20px 16px; padding: 20px; overflow-wrap: anywhere; } .record-top { display: flex; align-items: center; justify-content: space-between; color: var(--texto-suave); font-size: 14px; } .pill { background: var(--superficie-2); border-radius: 4px; color: var(--texto); font-size: 12px; font-weight: 600; letter-spacing: .4px; padding: 4px 8px; } .record h3 { font-size: 21px; font-weight: 700; line-height: 1.2; margin: 14px 0 3px; } .record-name { color: var(--texto-suave); font-size: 15px; margin: 0 0 18px; } .record dl { margin: 0; } .record dt { color: var(--texto-fraco); font-size: 12px; letter-spacing: .5px; margin-top: 14px; } .record dd { font-size: 14px; margin: 3px 0 0; } .record footer { border-top: 1px solid var(--borda); color: var(--texto-suave); font-size: 12px; margin-top: 18px; padding-top: 14px; } .next-service { background: var(--alerta-fundo); border-radius: 5px; color: var(--alerta-texto); font-size: 13px; margin-top: 18px; padding: 12px; } .app-footer { color: var(--texto-fraco); font-size: 12px; line-height: 1.7; padding: 18px 22px; text-align: center; } /* ------------------------------------------------------------ responsivo */ .rotate { display: none; } @media (max-width: 400px) { .masthead { padding: 18px 16px; column-gap: 10px; } .masthead .brand { gap: 9px; } .brand .marca-assinatura { max-width: 200px; } .brand-sub { font-size: 12px; } .panel, .record, .result, .painting-result { margin-left: 12px; margin-right: 12px; } .panel, .record { padding: 17px; } .intro { padding: 22px 16px 18px; } .intro h1 { font-size: 29px; } .big-number { font-size: 34px; } .main-tabs { margin-left: 12px; margin-right: 12px; } } @media (max-width: 330px) { .masthead { grid-template-columns: minmax(0, 1fr); row-gap: 10px; } .masthead .brand { grid-area: auto; justify-self: start; } .masthead .version { grid-area: auto; justify-self: start; text-align: left; } .masthead .version .rotulo { line-height: 1.4; } .brand-credit { text-align: left; } } @media (orientation: landscape) and (max-height: 500px) and (hover: none) { .app, .tela-acesso, .tela-termo, .tela-carregando { display: none !important; } .rotate { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; padding: 24px; text-align: center; background: var(--grafite); color: #fff; } .rotate h1 { font-size: 24px; font-weight: 700; margin-bottom: 10px; } } @page { size: A4 portrait; margin: 16mm; } @media print { body { background: #fff; font-size: 12px; } .app { max-width: none; box-shadow: none; background: #fff; padding: 0; } .rotate, .no-print, .app-footer { display: none !important; } .masthead { background: #fff; color: #000; --marca-pista: var(--asfalto); border-bottom: 2px solid #000; padding: 0 0 12px; } .brand-sub, .brand-credit { color: var(--texto-suave); } .record { border: 1px solid #aab9c1; break-inside: avoid; margin: 0 0 18px; padding: 16px; } .panel, .result, .painting-result { margin-left: 0; margin-right: 0; } } /* ------------------------------------------------ estado da sincronização */ .barra-sincronizacao { margin: 0; padding: 9px 22px; font-size: 12.5px; font-weight: 600; letter-spacing: .3px; border-bottom: 1px solid var(--borda); } .barra-sincronizacao.ok { background: var(--superficie-2); color: var(--texto); } .barra-sincronizacao.enviando { background: var(--superficie-2); color: var(--texto-suave); } .barra-sincronizacao.aguardando { background: var(--alerta-fundo); color: var(--alerta-texto); } .barra-sincronizacao.erro { background: var(--erro-fundo); color: var(--erro-texto); } .record .pendente { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 4px; background: var(--alerta-fundo); color: var(--alerta-texto); font-size: 11px; font-weight: 600; } .record .pendente.erro { background: var(--erro-fundo); color: var(--erro-texto); } /* ------------------------------------- apresentação horizontal no computador */ @media (min-width: 1024px) { body { background: var(--fundo-pagina); } .app { max-width: 1400px; padding-bottom: 28px; } .masthead { padding: 22px 32px; } .barra-conta, .barra-sincronizacao { padding-left: 32px; padding-right: 32px; } .intro { padding: 30px 32px 22px; } .intro h1 { font-size: 38px; } .main-tabs { margin: 0 32px 18px; max-width: 520px; } /* Cálculo: formulário à esquerda, resultado fixo à direita. */ #aba-calculo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: start; column-gap: 24px; padding: 0 32px; } #aba-calculo > .panel, #aba-calculo > .micro-note { grid-column: 1; margin-left: 0; margin-right: 0; } #aba-calculo > #bloco-resultado { grid-column: 2; grid-row: 1 / span 99; position: sticky; top: 18px; } #bloco-resultado > .result, #bloco-resultado > .painting-result, #bloco-resultado > .empty-result { margin-left: 0; margin-right: 0; } #bloco-resultado > .memory { margin-left: 0; margin-right: 0; } /* Histórico: filtros e relatórios à esquerda, lançamentos à direita. */ #aba-historico { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; column-gap: 24px; padding: 0 32px; } #aba-historico > .panel { grid-column: 1; margin-left: 0; margin-right: 0; position: sticky; top: 18px; } .report-heading { grid-column: 2; margin-left: 0; margin-right: 0; } #lista-registros { grid-column: 2; } #lista-registros .record, #lista-registros .empty { margin-left: 0; margin-right: 0; } /* Campos lado a lado dentro de cada painel. */ .panel { padding: 24px; } #aba-calculo .panel > .field { display: inline-block; width: calc(50% - 9px); vertical-align: top; } #aba-calculo .panel > .field:nth-of-type(odd) { margin-right: 14px; } #aba-calculo .panel > .section-title { display: flex; width: 100%; } #aba-calculo .panel > .section-help, #aba-calculo .panel > .notice, #aba-calculo .panel > .primary, #aba-calculo .panel > .feedback, #aba-calculo .panel > .geometry-summary { display: block; width: 100%; } } @media (min-width: 1400px) { .app { box-shadow: 0 0 80px var(--sombra); } } /* ---------------------------------- versão 1.1: intervenção e orçamento */ .section-title .sufixo { font-size: 0.7em; opacity: 0.75; } .sequencia { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--borda); border-left: 4px solid var(--amarelo); border-radius: 6px; background: var(--alerta-fundo); } .sequencia-titulo { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } .sequencia ol { margin: 0; padding-left: 20px; } .sequencia li { font-size: 13px; margin-bottom: 4px; } .etapa-titulo { margin: 20px 0 10px; padding-top: 14px; border-top: 1px solid var(--borda); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--texto-suave); } .etapa-obrigatoria { margin: 18px 0 10px; padding: 8px 10px; border-radius: 5px; background: #FFF6E3; color: #6B5310; font-size: 12px; font-weight: 700; } .campo-peneira label { font-size: 11px; } .referencia-preco { margin-top: 6px; font-size: 12px; } #avisos-tecnicos .aviso-linha { display: block; margin-bottom: 6px; } .tabela-valor { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 13px; } .tabela-valor th, .tabela-valor td { padding: 7px 6px; border-bottom: 1px solid var(--borda); text-align: left; } .tabela-valor th { font-size: 11px; letter-spacing: 0.04em; color: var(--texto-suave); } .tabela-valor .num { text-align: right; font-variant-numeric: tabular-nums; } .valor-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 12px 0; padding: 12px 14px; border-radius: 6px; background: var(--painel-forte); border: 1px solid var(--painel-forte-borda); color: var(--painel-forte-texto); } .valor-total strong { font-size: 20px; font-variant-numeric: tabular-nums; } .ressalva { margin: 10px 0 16px; padding: 10px 12px; border-radius: 5px; background: var(--superficie-3); font-size: 11px; line-height: 1.5; font-weight: 600; } #detalhes-curva { margin-top: 12px; } #detalhes-curva summary { cursor: pointer; font-size: 12px; font-weight: 700; padding: 8px 0; } @media (min-width: 1024px) { #bloco-agregados .field, #bloco-curva .field, #bloco-orcamento .field { display: inline-block; width: calc(50% - 9px); vertical-align: top; } } /* ------------------------------------------- fotos e coordenadas (1.1) */ .acoes-foto { display: grid; gap: 10px; margin-bottom: 14px; } .botao-captura { display: grid; place-items: center; min-height: 62px; padding: 12px 16px; border-radius: 8px; background: var(--acao); color: var(--acao-texto); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-align: center; cursor: pointer; } .botao-captura.secundario { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda-campo); } .botao-captura:active { filter: brightness(1.15); } .cronometro { margin: 10px 0 0; padding: 10px 12px; border-radius: 6px; background: #FFF6E3; color: #6B5310; font-weight: 700; font-variant-numeric: tabular-nums; } .foto { margin: 14px 0 0; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; background: #fff; } .foto img { display: block; width: 100%; height: auto; } .foto figcaption { display: grid; gap: 4px; padding: 10px 12px; font-size: 12px; color: var(--texto-suave); } .foto figcaption strong { color: var(--texto); font-size: 12px; letter-spacing: 0.04em; } .foto figcaption .link { width: auto; justify-self: start; margin: 4px 0 0; padding: 0; font-size: 12px; } #resumo-extensao { margin-top: 12px; } /* --------------------- histórico em tabela, no computador (versão 1.1) */ @media (min-width: 1024px) { #lista-registros { display: block; } /* Os cartões empilhados viram linhas com as colunas principais lado a lado. */ #lista-registros .record { display: grid; grid-template-columns: 120px minmax(0, 1.4fr) minmax(0, 1fr) 120px 150px; align-items: start; column-gap: 14px; margin: 0 0 -1px; padding: 12px 14px; border-radius: 0; } #lista-registros .record:first-child { border-radius: 8px 8px 0 0; } #lista-registros .record:last-child { border-radius: 0 0 8px 8px; } #lista-registros .record-top { grid-column: 1; display: grid; gap: 4px; } #lista-registros .record h3 { grid-column: 2; font-size: 14px; } #lista-registros .record-name { grid-column: 2; margin: 2px 0 0; font-size: 12px; } #lista-registros .record .pendente { grid-column: 1 / -1; margin-left: 0; } #lista-registros .record dl { grid-column: 1 / -1; margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--borda); columns: 2; column-gap: 26px; } #lista-registros .record dl > div { break-inside: avoid; } } /* ------------------------------------------------ camera do aplicativo Tela cheia, preta, com o video ocupando o espaco todo e os controles embaixo. Preta de proposito: em campo, sob sol, qualquer claridade em volta atrapalha enquadrar a pista. */ .camera-tela { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: #000; } .camera-tela.oculto { display: none; } .camera-tela video { flex: 1; width: 100%; min-height: 0; object-fit: contain; background: #000; } .camera-aviso { margin: 0; padding: 10px 16px; color: var(--amarelo); background: rgba(0, 0, 0, 0.6); font-size: 13px; letter-spacing: 0.02em; text-align: center; min-height: 1em; } .camera-acoes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); background: #000; } .camera-acoes button { font: inherit; letter-spacing: 0.06em; cursor: pointer; } .camera-cancelar, .camera-virar { background: none; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; color: #fff; padding: 12px 10px; font-size: 13px; } .camera-virar { justify-self: end; } .camera-cancelar { justify-self: start; } /* Disparo grande: e o alvo de quem esta com luva, no sol, em pe na pista. */ .camera-disparo { width: 76px; height: 76px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, 0.9); background: var(--amarelo); } .camera-disparo:active { filter: brightness(0.85); } .camera-disparo[disabled] { opacity: 0.4; } /* ---------------------------------------- camera: palco, sinal e carimbo */ .camera-palco { position: relative; flex: 1; min-height: 0; display: flex; } .camera-palco video { flex: 1; width: 100%; min-height: 0; object-fit: contain; background: #000; } /* Canto superior direito, verde, com contraste sobre qualquer cena. */ .camera-sinal { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 7px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.62); color: #3DDC84; font-size: 13px; line-height: 1.25; letter-spacing: 0.03em; text-align: right; } .camera-sinal strong { font-size: 15px; font-weight: 700; } .camera-sinal[data-qualidade="ruim"] strong { color: #F2C230; } .camera-sinal[data-qualidade="sem"] strong { color: #FF6B6B; } .camera-ajuda { position: absolute; top: 10px; left: 10px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(0, 0, 0, 0.55); color: #fff; font: 700 17px system-ui, sans-serif; cursor: pointer; } /* A previa do carimbo espelha a tarja da imagem: fundo grafite, filete amarelo em cima, texto branco a direita. */ .camera-carimbo { background: #0B1014; border-top: 3px solid #F2C230; color: #fff; padding: 10px 14px; text-align: right; font-size: 12px; line-height: 1.45; letter-spacing: 0.02em; max-height: 34vh; overflow-y: auto; } .camera-carimbo .assinatura { color: #F2C230; font-size: 10px; margin-top: 3px; } .camera-carimbo .buscando { color: #F2C230; } .camera-carimbo .sem-coordenada { color: #FF8A8A; } /* ------------------------------------------------ tela de permissao */ .permissao-tela { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0, 0, 0, 0.72); } .permissao-tela.oculto { display: none; } .permissao-caixa { width: 100%; max-width: 480px; max-height: 86vh; overflow-y: auto; background: var(--superficie); color: var(--texto); border-radius: 12px; border-top: 5px solid var(--amarelo); padding: 20px; } .permissao-caixa h3 { margin: 0 0 12px; font-size: 16px; letter-spacing: 0.04em; } .permissao-caixa p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; } .permissao-aviso, .permissao-caminho { background: var(--superficie-2); border-left: 3px solid var(--amarelo); padding: 10px 12px; font-size: 13px; } .permissao-caminho { font-family: ui-monospace, Consolas, monospace; } .permissao-acoes { display: flex; gap: 10px; margin-top: 16px; } .permissao-acoes button { flex: 1; }