/* ===================================================================== Cascata — folha de estilo única (admin + cliente). Dono: arquiteto. Tokens em :root; tema escuro automático (prefers-color-scheme) ou forçado por . Sem framework, sem build. ===================================================================== */ :root { --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fonte-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace; --fundo: #f6f7f9; --superficie: #ffffff; --superficie-2: #f0f2f5; --borda: #dfe3e8; --texto: #17202b; --texto-2: #5a6674; --texto-3: #8792a0; --primaria: #1f6feb; --primaria-texto: #ffffff; --primaria-suave: #e6efff; --perigo: #cf222e; --perigo-suave: #ffebe9; --aviso: #9a6700; --aviso-suave: #fff8c5; --sucesso: #1a7f37; --sucesso-suave: #dafbe1; --info-suave: #ddf4ff; /* qualidade Meta */ --q-green: #1a7f37; --q-green-bg: #dafbe1; --q-yellow: #9a6700; --q-yellow-bg: #fff8c5; --q-red: #cf222e; --q-red-bg: #ffebe9; --q-unknown: #57606a; --q-unknown-bg: #eaeef2; --raio: 8px; --raio-sm: 5px; --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08); --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px; --nav-largura: 232px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo: #0e1117; --superficie: #161b22; --superficie-2: #1c2230; --borda: #2d3440; --texto: #e6edf3; --texto-2: #9aa6b2; --texto-3: #6e7781; --primaria: #4493f8; --primaria-texto: #0e1117; --primaria-suave: #132339; --perigo: #ff7b72; --perigo-suave: #3a1519; --aviso: #d29922; --aviso-suave: #33290d; --sucesso: #3fb950; --sucesso-suave: #12301b; --info-suave: #10263a; --q-green: #3fb950; --q-green-bg: #12301b; --q-yellow: #d29922; --q-yellow-bg: #33290d; --q-red: #ff7b72; --q-red-bg: #3a1519; --q-unknown: #9aa6b2; --q-unknown-bg: #262c36; --sombra: 0 1px 2px rgba(0, 0, 0, .4); color-scheme: dark; } } :root[data-tema="escuro"] { --fundo: #0e1117; --superficie: #161b22; --superficie-2: #1c2230; --borda: #2d3440; --texto: #e6edf3; --texto-2: #9aa6b2; --texto-3: #6e7781; --primaria: #4493f8; --primaria-texto: #0e1117; --primaria-suave: #132339; --perigo: #ff7b72; --perigo-suave: #3a1519; --aviso: #d29922; --aviso-suave: #33290d; --sucesso: #3fb950; --sucesso-suave: #12301b; --info-suave: #10263a; --q-green: #3fb950; --q-green-bg: #12301b; --q-yellow: #d29922; --q-yellow-bg: #33290d; --q-red: #ff7b72; --q-red-bg: #3a1519; --q-unknown: #9aa6b2; --q-unknown-bg: #262c36; --sombra: 0 1px 2px rgba(0, 0, 0, .4); color-scheme: dark; } /* ---------- base */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { font-family: var(--fonte); font-size: 14px; line-height: 1.5; background: var(--fundo); color: var(--texto); -webkit-font-smoothing: antialiased; } a { color: var(--primaria); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--esp-3); } h1 { font-size: 22px; font-weight: 650; } h2 { font-size: 17px; font-weight: 620; } h3 { font-size: 14px; font-weight: 620; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); } code, .mono { font-family: var(--fonte-mono); font-size: 12.5px; } pre { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: var(--esp-3); overflow-x: auto; font-family: var(--fonte-mono); font-size: 12.5px; } .muted { color: var(--texto-2); } .sutil { color: var(--texto-3); font-size: 12px; } .num { font-variant-numeric: tabular-nums; text-align: right; } /* ---------- layout */ .app { display: grid; grid-template-columns: var(--nav-largura) 1fr; min-height: 100vh; } .nav { background: var(--superficie); border-right: 1px solid var(--borda); padding: var(--esp-4) var(--esp-3); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .nav .marca { font-weight: 700; font-size: 16px; padding: var(--esp-2) var(--esp-3) var(--esp-4); display: block; color: var(--texto); } .nav .marca small { display: block; font-weight: 500; font-size: 11px; color: var(--texto-3); } .nav .grupo { margin: var(--esp-4) 0 var(--esp-1); padding: 0 var(--esp-3); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); } .nav a.item { display: flex; align-items: center; gap: var(--esp-2); padding: 7px var(--esp-3); border-radius: var(--raio-sm); color: var(--texto-2); font-weight: 500; } .nav a.item:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; } .nav a.item.ativo { background: var(--primaria-suave); color: var(--primaria); } .principal { padding: var(--esp-5) var(--esp-6); min-width: 0; } .topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); margin-bottom: var(--esp-5); flex-wrap: wrap; } .topo .relogio { font-size: 12px; color: var(--texto-2); } .grade { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .linha { display: flex; gap: var(--esp-3); align-items: center; flex-wrap: wrap; } .espaco { flex: 1; } /* ---------- cartões e métricas */ .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: var(--esp-4); margin-bottom: var(--esp-4); } .cartao > h2:first-child, .cartao > h3:first-child { margin-top: 0; } .metrica { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--esp-4); } .metrica .rotulo { font-size: 12px; color: var(--texto-2); } .metrica .valor { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; } .metrica .detalhe { font-size: 12px; color: var(--texto-3); } /* ---------- tabelas */ .tabela-wrap { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { padding: 8px 12px; border-bottom: 1px solid var(--borda); text-align: left; white-space: nowrap; } th { background: var(--superficie-2); font-weight: 600; color: var(--texto-2); font-size: 12px; position: sticky; top: 0; z-index: 1; } tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--superficie-2); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } tr.clicavel { cursor: pointer; } .paginacao { display: flex; gap: var(--esp-2); justify-content: flex-end; align-items: center; padding: var(--esp-3) 0; } /* ---------- badges */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 18px; background: var(--q-unknown-bg); color: var(--q-unknown); } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.sem-ponto::before { display: none; } .q-green { background: var(--q-green-bg); color: var(--q-green); } .q-yellow { background: var(--q-yellow-bg); color: var(--q-yellow); } .q-red { background: var(--q-red-bg); color: var(--q-red); } .q-unknown { background: var(--q-unknown-bg); color: var(--q-unknown); } .b-ok { background: var(--sucesso-suave); color: var(--sucesso); } .b-aviso { background: var(--aviso-suave); color: var(--aviso); } .b-perigo { background: var(--perigo-suave); color: var(--perigo); } .b-info { background: var(--info-suave); color: var(--primaria); } /* ---------- alertas */ .alerta { border-radius: var(--raio); padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-4); border: 1px solid transparent; } .alerta.info { background: var(--info-suave); border-color: var(--primaria-suave); } .alerta.aviso { background: var(--aviso-suave); color: var(--aviso); } .alerta.perigo { background: var(--perigo-suave); color: var(--perigo); } .alerta.ok { background: var(--sucesso-suave); color: var(--sucesso); } .faixa-kill { background: var(--perigo); color: #fff; text-align: center; font-weight: 700; padding: 6px; } .faixa-simulacao { background: var(--aviso-suave); color: var(--aviso); text-align: center; font-weight: 600; padding: 4px; font-size: 12px; } /* ---------- formulários */ form .campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--esp-3); } label { font-weight: 600; font-size: 12.5px; color: var(--texto-2); } .ajuda { font-size: 12px; color: var(--texto-3); } .erro-campo { font-size: 12px; color: var(--perigo); } input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=time], input[type=date], input[type=search], select, textarea { font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 7px 10px; min-width: 0; width: 100%; } input:focus, select:focus, textarea:focus, .botao:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; border-color: var(--primaria); } textarea { min-height: 90px; resize: vertical; } .filtros { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; margin-bottom: var(--esp-4); } .interruptor { display: inline-flex; align-items: center; gap: var(--esp-2); cursor: pointer; } /* ---------- botões */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; padding: 7px 14px; border-radius: var(--raio-sm); border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); cursor: pointer; text-decoration: none; } .botao:hover { background: var(--superficie-2); text-decoration: none; } .botao.primario { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); } .botao.primario:hover { filter: brightness(1.08); } .botao.perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; } .botao.pequeno { padding: 3px 9px; font-size: 12px; } .botao[disabled] { opacity: .5; cursor: not-allowed; } /* ---------- passos (assistente de importação) */ .passos { display: flex; gap: var(--esp-2); margin-bottom: var(--esp-4); flex-wrap: wrap; counter-reset: passo; } .passos li { list-style: none; padding: 6px 12px; border-radius: 999px; background: var(--superficie-2); color: var(--texto-2); font-size: 12.5px; font-weight: 600; counter-increment: passo; } .passos li::before { content: counter(passo) ". "; } .passos li.atual { background: var(--primaria); color: var(--primaria-texto); } .passos li.feito { background: var(--sucesso-suave); color: var(--sucesso); } .passos { padding: 0; } /* ---------- login */ .tela-login { min-height: 100vh; display: grid; place-items: center; padding: var(--esp-4); } .tela-login .cartao { width: 100%; max-width: 380px; } /* ---------- responsivo */ @media (max-width: 860px) { .app { grid-template-columns: 1fr; } .nav { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--borda); display: flex; flex-wrap: wrap; gap: 2px; padding: var(--esp-2) var(--esp-4); } .nav .grupo { display: none; } .nav .marca { width: 100%; padding-bottom: var(--esp-2); } .principal { padding: var(--esp-4); } }