/* Pace — sistema visual unico, carregado por TODAS as paginas. Antes disto o home.html nao lia este arquivo e mantinha um segundo conjunto de cores paralelo, quase igual e nunca igual. Se for preciso um valor novo, ele entra aqui como token, nao como hex solto na pagina. A paleta sai do objeto: aluminio anodizado, o escuro da medalha e a marca que o laser abre no metal. Nao existe cor de marca — a unica inversao do sistema e a placa. Verde e vermelho so aparecem como estado. O claro e o padrao do lado do atleta, porque a tela e aberta no sol. O painel do operador troca o padrao para escuro no proprio : ele trabalha embaixo de lona e ate depois do por do sol. */ :root{ color-scheme:light; /* as cinco cores nomeadas */ --aluminio:#E9EBE8; --grafite:#1C1F1E; --gravado:#EDEDE9; --sombra:#5B625E; --risco:#C7CCC8; /* papeis */ --ground:var(--aluminio); --surface:#F3F5F2; --campo:#FFFFFF; --ink:var(--grafite); --muted:var(--sombra); --line:var(--risco); --placa:#1C1F1E; --placa-borda:transparent; --placa-tempo:#B9BEB8; /* estado, nunca identidade */ --ok:#2F5D45; --ok-fundo:#E2EDE7; --alerta:#8C3A2B; --alerta-fundo:#F3E3DF; /* tipo */ --f-display:'Archivo','Helvetica Neue',Arial,sans-serif; --f-corpo:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --t13:.8125rem; --t15:.9375rem; --t17:1.0625rem; --t21:1.3125rem; --t26:1.625rem; --t33:2.0625rem; --t41:2.5625rem; --raio:3px; } html[data-theme="dark"]{ color-scheme:dark; --ground:#161918; --surface:#1E2321; --campo:#121514; --ink:#E4E7E3; --muted:#98A09B; --line:#333A37; --placa:#0F1211; --placa-borda:#333A37; --placa-tempo:#9AA29D; --ok:#7FBFA0; --ok-fundo:#1B2A23; --alerta:#D08978; --alerta-fundo:#2C1E1B; } *{box-sizing:border-box} body{ margin:0; /* a folga de baixo e para o botao de tema, que e fixo no canto: sem ela ele cobre o ultimo elemento da pagina — que costuma ser o botao principal */ padding:24px 0 88px; background:var(--ground); color:var(--ink); font-family:var(--f-corpo); font-size:var(--t17); line-height:1.55; min-height:100vh; -webkit-font-smoothing:antialiased; } h1,h2,h3{margin:0;text-wrap:balance;line-height:1.15} h1{font-family:var(--f-display);font-weight:700;font-stretch:125%;font-size:var(--t33);letter-spacing:-.01em} h2{font-family:var(--f-display);font-weight:600;font-stretch:125%;font-size:var(--t26)} h3{font-weight:600;font-size:var(--t21)} p{margin:0;max-width:65ch} a{color:inherit;text-underline-offset:3px} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px} .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .hidden{display:none!important} .logo{font-family:var(--f-display);font-weight:700;font-stretch:125%;font-size:var(--t21);letter-spacing:-.01em} .logo span{color:var(--muted)} .muted,.small,.sub,.hint{color:var(--muted)} .small,.hint{font-size:var(--t15)} .sub{font-size:var(--t17)} /* Nem tudo e card. Borda, preenchimento e raio sao gastos por funcao: uma superficie agrupa campos, e so. Sem sombra, sem raio grande. */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--raio); padding:20px; margin:0 0 14px; } label{display:block;font-size:var(--t15);color:var(--muted);margin:12px 0 6px} input,select,textarea{ width:100%; font-family:inherit; font-size:var(--t17); color:var(--ink); background:var(--campo); border:1px solid var(--line); border-radius:var(--raio); padding:.7rem .8rem; } input::placeholder{color:var(--muted);opacity:.75} button,.btn{ font-family:inherit; font-size:var(--t17); font-weight:600; border:1px solid var(--ink); border-radius:var(--raio); padding:.7rem 1.1rem; background:var(--ink); color:var(--ground); cursor:pointer; text-decoration:none; display:inline-flex; gap:8px; align-items:center; justify-content:center; } .btn.wide,button.wide{width:100%} .ghost,.btn2{background:transparent;color:var(--ink);border-color:var(--line)} .danger{background:var(--alerta);border-color:var(--alerta);color:#fff} .ok{background:var(--ok-fundo);border-color:var(--ok);color:var(--ok)} button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; } .pill{ display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:5px 11px; color:var(--muted); font-size:var(--t15); margin-right:6px; } /* A placa: o unico objeto com peso no sistema. Sempre a mesma coisa, seja heroi da pagina de vendas, conferencia no cadastro ou linha da fila. */ .placa{ background:var(--placa); box-shadow:inset 0 0 0 1px var(--placa-borda); color:var(--gravado); border-radius:var(--raio); padding:28px 20px; display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; } .placa-nome{ font-family:var(--f-display); font-weight:600; font-stretch:125%; font-size:clamp(var(--t21),6vw,var(--t33)); letter-spacing:.14em; text-transform:uppercase; line-height:1.1; word-break:break-word; } .placa-tempo{ font-size:var(--t21); font-variant-numeric:tabular-nums; letter-spacing:.06em; color:var(--placa-tempo); } .placa + .placa{margin-top:10px} /* numero e conteudo */ .num{font-variant-numeric:tabular-nums} .metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--raio);padding:16px} .metric b{display:block;font-size:var(--t26);font-variant-numeric:tabular-nums} .metric span{color:var(--muted);font-size:var(--t15)} .ath{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:12px 0;gap:10px} .order{border:1px solid var(--line);border-radius:var(--raio);padding:16px;margin:12px 0;background:var(--surface)} .debug{ font-family:var(--f-mono);white-space:pre-wrap; background:var(--campo);border:1px solid var(--line);border-radius:var(--raio); padding:14px;color:var(--muted);font-size:var(--t13); } .toast{ display:none;position:fixed;right:22px;bottom:22px;z-index:99; background:var(--surface);color:var(--ink); border:1px solid var(--line);border-radius:var(--raio); padding:14px 16px;max-width:min(22rem,calc(100vw - 44px)); } .toast.ok{border-color:var(--ok);color:var(--ok);background:var(--ok-fundo)} .toast.err{border-color:var(--alerta);color:var(--alerta);background:var(--alerta-fundo)} .themeToggle{ position:fixed;right:18px;bottom:18px;z-index:98; border:1px solid var(--line);background:var(--surface);color:var(--ink); border-radius:999px;padding:10px 13px;font-size:var(--t17);line-height:1;cursor:pointer; } @media(max-width:650px){ body{padding:14px 0 84px} .wrap{padding:0 14px} .card{padding:16px} .grid{grid-template-columns:1fr} .themeToggle{right:14px;bottom:14px} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} }