/* ========================================================================== ControlCar - folha de estilo unica. Sem framework, sem build. Tema claro/escuro via prefers-color-scheme e atributo data-tema no (a preferencia explicita vence o sistema). ========================================================================== */ :root { --fundo: #f4f6fb; --superficie: #ffffff; --superficie-2: #f8fafc; --borda: #e2e8f0; --borda-forte: #cbd5e1; --texto: #0f172a; --texto-suave: #64748b; --primaria: #1d4ed8; --primaria-suave: #dbeafe; --primaria-texto: #ffffff; --ok: #15803d; --ok-suave: #dcfce7; --aviso: #b45309; --aviso-suave: #fef3c7; --erro: #b91c1c; --erro-suave: #fee2e2; --sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06); --raio: 12px; --raio-sm: 8px; --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo: #0b1220; --superficie: #131c2e; --superficie-2: #0f1729; --borda: #24314b; --borda-forte: #33415c; --texto: #e6edf7; --texto-suave: #94a3b8; --primaria: #60a5fa; --primaria-suave: #1e3a5f; --primaria-texto: #06101f; --ok: #4ade80; --ok-suave: #14321f; --aviso: #fbbf24; --aviso-suave: #3a2b0a; --erro: #f87171; --erro-suave: #3b1414; --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); } } :root[data-tema="escuro"] { --fundo: #0b1220; --superficie: #131c2e; --superficie-2: #0f1729; --borda: #24314b; --borda-forte: #33415c; --texto: #e6edf7; --texto-suave: #94a3b8; --primaria: #60a5fa; --primaria-suave: #1e3a5f; --primaria-texto: #06101f; --ok: #4ade80; --ok-suave: #14321f; --aviso: #fbbf24; --aviso-suave: #3a2b0a; --erro: #f87171; --erro-suave: #3b1414; } *, *::before, *::after { box-sizing: border-box; } /* `hidden` precisa vencer os display: flex/grid declarados adiante. Sem isto, elementos marcados como ocultos via JS (topo deslogado, pill da fila vazia) continuariam aparecendo. */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; font-family: var(--fonte); font-size: 15px; line-height: 1.55; color: var(--texto); background: var(--fundo); display: flex; flex-direction: column; -webkit-text-size-adjust: 100%; } h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 650; letter-spacing: -.01em; } h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } p { margin: 0 0 .75rem; } a { color: var(--primaria); } :focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; border-radius: 4px; } /* --------------------------------------------------------- barra de status */ .barra-status { padding: .45rem 1rem; text-align: center; font-size: .85rem; font-weight: 600; background: var(--aviso-suave); color: var(--aviso); border-bottom: 1px solid var(--borda); } .barra-status[data-tipo="sincronizando"] { background: var(--primaria-suave); color: var(--primaria); } .barra-status[data-tipo="ok"] { background: var(--ok-suave); color: var(--ok); } .barra-status[data-tipo="erro"] { background: var(--erro-suave); color: var(--erro); } /* ------------------------------------------------------------------- topo */ .topo { display: flex; align-items: center; gap: 1rem; padding: .6rem clamp(.75rem, 3vw, 1.5rem); background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 20; } .marca { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--texto); text-decoration: none; white-space: nowrap; } .marca-icone { width: 26px; height: 26px; fill: none; stroke: var(--primaria); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .nav { display: flex; gap: .25rem; flex: 1; overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav a { padding: .4rem .7rem; border-radius: var(--raio-sm); color: var(--texto-suave); text-decoration: none; font-weight: 550; font-size: .9rem; white-space: nowrap; } .nav a:hover { background: var(--superficie-2); color: var(--texto); } .nav a[aria-current="page"] { background: var(--primaria-suave); color: var(--primaria); } .topo-direita { display: flex; align-items: center; gap: .5rem; } .avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primaria-suave); color: var(--primaria); font-weight: 700; font-size: .78rem; } .menu-usuario { position: relative; } .menu-usuario summary { list-style: none; cursor: pointer; } .menu-usuario summary::-webkit-details-marker { display: none; } .menu-conteudo { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 240px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: .5rem; z-index: 30; } .menu-nome { margin: .25rem .5rem 0; font-weight: 650; } .menu-email { margin: 0 .5rem .5rem; font-size: .82rem; color: var(--texto-suave); word-break: break-all; } .menu-conteudo hr { border: 0; border-top: 1px solid var(--borda); margin: .4rem 0; } .menu-item { display: block; width: 100%; text-align: left; padding: .5rem; border: 0; border-radius: var(--raio-sm); background: transparent; color: var(--texto); font: inherit; cursor: pointer; } .menu-item:hover { background: var(--superficie-2); } .menu-item.perigo { color: var(--erro); } /* --------------------------------------------------------------- conteudo */ .conteudo { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(1rem, 3vw, 1.75rem); } .cabecalho-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .cabecalho-pagina p { color: var(--texto-suave); margin: 0; font-size: .9rem; } /* ------------------------------------------------------------------ cards */ .grade { display: grid; gap: 1rem; } .grade-kpi { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .grade-cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.1rem; box-shadow: var(--sombra); } .card-titulo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; } .card-titulo h2, .card-titulo h3 { margin: 0; } .kpi .kpi-rotulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); font-weight: 650; } .kpi .kpi-valor { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: .15rem 0; } .kpi .kpi-nota { font-size: .8rem; color: var(--texto-suave); } /* ------------------------------------------------------------- veiculo card */ .veiculo-card { display: flex; flex-direction: column; gap: .75rem; } .veiculo-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; } .placa { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; padding: .15rem .5rem; border: 1.5px solid var(--borda-forte); border-radius: 6px; background: var(--superficie-2); } .veiculo-modelo { color: var(--texto-suave); font-size: .88rem; } .mini-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; border-top: 1px solid var(--borda); padding-top: .75rem; } .mini-grade div { min-width: 0; } .mini-rotulo { font-size: .72rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; } .mini-valor { font-weight: 650; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- tabelas */ .tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--borda); white-space: nowrap; } th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); font-weight: 650; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } tbody tr:hover { background: var(--superficie-2); } /* Acoes em celula: separa os links para nao virarem um bloco unico de texto. */ td .link + .link { margin-left: .65rem; } .vazio { padding: 2rem 1rem; text-align: center; color: var(--texto-suave); } /* ------------------------------------------------------------ formularios */ .campo { margin-bottom: .9rem; } .campo > label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: .3rem; } .campo .dica { font-size: .78rem; color: var(--texto-suave); margin-top: .25rem; } .campo .erro { font-size: .8rem; color: var(--erro); margin-top: .25rem; font-weight: 550; } input, select, textarea { width: 100%; padding: .55rem .65rem; font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); } input:focus, select:focus, textarea:focus { border-color: var(--primaria); outline-offset: 1px; } input[aria-invalid="true"] { border-color: var(--erro); } textarea { min-height: 72px; resize: vertical; } .linha { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .checkbox { display: flex; align-items: center; gap: .5rem; } .checkbox input { width: auto; } .botoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } button, .botao { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .9rem; font: inherit; font-weight: 600; border-radius: var(--raio-sm); border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); cursor: pointer; text-decoration: none; } button:hover, .botao:hover { background: var(--superficie-2); } button:disabled { opacity: .55; cursor: not-allowed; } .botao-primario { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); } .botao-primario:hover { filter: brightness(1.08); background: var(--primaria); } .botao-perigo { color: var(--erro); border-color: var(--erro); background: transparent; } .botao-perigo:hover { background: var(--erro-suave); } .botao-pequeno { padding: .3rem .55rem; font-size: .82rem; } .link { background: none; border: 0; padding: 0; color: var(--primaria); font: inherit; cursor: pointer; text-decoration: underline; } /* ------------------------------------------------------------------ pills */ .pill { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 650; background: var(--superficie-2); color: var(--texto-suave); border: 1px solid var(--borda); white-space: nowrap; } .pill-ok { background: var(--ok-suave); color: var(--ok); border-color: transparent; } .pill-aviso { background: var(--aviso-suave); color: var(--aviso); border-color: transparent; } .pill-erro { background: var(--erro-suave); color: var(--erro); border-color: transparent; } .pill-info { background: var(--primaria-suave); color: var(--primaria); border-color: transparent; } /* ---------------------------------------------------------------- alertas */ .alerta { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .85rem; border-radius: var(--raio-sm); border: 1px solid var(--borda); background: var(--superficie-2); font-size: .88rem; margin-bottom: .5rem; } .alerta-critico { background: var(--erro-suave); color: var(--erro); border-color: transparent; } .alerta-atencao { background: var(--aviso-suave); color: var(--aviso); border-color: transparent; } .alerta-info { background: var(--primaria-suave); color: var(--primaria); border-color: transparent; } .alerta strong { font-weight: 700; } /* ---------------------------------------------------------------- avisos */ .avisos { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5rem; z-index: 60; width: min(440px, calc(100vw - 2rem)); pointer-events: none; } .aviso { padding: .7rem .9rem; border-radius: var(--raio-sm); background: var(--texto); color: var(--fundo); font-size: .88rem; font-weight: 550; box-shadow: var(--sombra); pointer-events: auto; } .aviso-erro { background: var(--erro); color: #fff; } .aviso-ok { background: var(--ok); color: #fff; } /* ----------------------------------------------------------------- modal */ .modal { width: min(560px, calc(100vw - 2rem)); max-height: min(86vh, 900px); overflow: auto; border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.25rem; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); } .modal::backdrop { background: rgba(2, 6, 23, .55); backdrop-filter: blur(2px); } .modal-fechar-form { float: right; margin: -.5rem -.5rem 0 0; } .modal-fechar { border: 0; background: transparent; color: var(--texto-suave); font-size: 1.5rem; line-height: 1; padding: .25rem .5rem; cursor: pointer; } /* ------------------------------------------------------------- autenticacao */ .tela-auth { min-height: 100%; display: grid; place-items: center; padding: 1.5rem; } .caixa-auth { width: min(420px, 100%); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.75rem; box-shadow: var(--sombra); } .caixa-auth .marca { justify-content: center; font-size: 1.25rem; margin-bottom: .25rem; } .caixa-auth .subtitulo { text-align: center; color: var(--texto-suave); font-size: .9rem; margin-bottom: 1.25rem; } .auth-rodape { margin-top: 1rem; text-align: center; font-size: .85rem; color: var(--texto-suave); } /* --------------------------------------------------------------- graficos */ .grafico { width: 100%; height: auto; display: block; overflow: visible; } .grafico .eixo { stroke: var(--borda); stroke-width: 1; } .grafico .grade-linha { stroke: var(--borda); stroke-width: 1; stroke-dasharray: 3 4; } .grafico .rotulo { fill: var(--texto-suave); font-size: 10px; font-family: var(--fonte); } .grafico .barra { fill: var(--primaria); } .grafico .linha-serie { fill: none; stroke: var(--primaria); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .grafico .ponto { fill: var(--primaria); } .grafico .area { fill: var(--primaria); opacity: .12; } /* ------------------------------------------------------------- carregando */ .carregando { display: grid; place-items: center; gap: .75rem; padding: 4rem 1rem; color: var(--texto-suave); } .spinner { width: 26px; height: 26px; border: 3px solid var(--borda); border-top-color: var(--primaria); border-radius: 50%; animation: girar .8s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } * { scroll-behavior: auto !important; } } /* ----------------------------------------------------------------- rodape */ .rodape { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding: 1.25rem; font-size: .8rem; color: var(--texto-suave); border-top: 1px solid var(--borda); } /* ------------------------------------------------------------------ utils */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .texto-suave { color: var(--texto-suave); } .num { font-variant-numeric: tabular-nums; } .empilhado { display: flex; flex-direction: column; gap: 1rem; } .entre { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } /* Utilitarios que substituem atributos style="" no HTML gerado. Nao e purismo: a CSP declara style-src 'self' (sem 'unsafe-inline'), entao todo estilo inline seria simplesmente bloqueado pelo navegador. Manter os estilos aqui e o que permite a politica continuar restritiva. */ .largura-total { flex: 1; width: 100%; } .sem-margem { margin: 0; } .sem-sublinhado { text-decoration: none; } .centralizado { justify-content: center; } .alinhado-inicio { justify-content: flex-start; } .pequeno { font-size: .85rem; } .maiusculo { text-transform: uppercase; } .mono { font-family: var(--mono); letter-spacing: .06em; } .codigo-destaque { font-family: var(--mono); font-size: 1.1rem; letter-spacing: .08em; text-align: center; } .celula-detalhe { white-space: normal; max-width: 340px; } .imagem-comprovante { width: 100%; height: auto; border-radius: var(--raio-sm); } .grade-duas { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .escolha-veiculo { justify-content: flex-start; gap: .6rem; } @media (max-width: 640px) { .topo { flex-wrap: wrap; } /* flex-basis: 100% (e nao apenas width) e o que de fato empurra a navegacao para uma linha propria; com `flex: 1` a base seria 0 e ela continuaria dividindo a linha com a marca e o menu do usuario. */ .nav { order: 3; flex: 0 0 100%; } .mini-grade { grid-template-columns: repeat(2, 1fr); } /* Dois KPIs por linha cabem em 375px; um so desperdicaria a tela. */ .grade-kpi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .65rem; } .kpi .kpi-valor { font-size: 1.35rem; } .cabecalho-pagina { align-items: stretch; } }