:root { --bg:#f3f5f8; --surface:#fff; --ink:#1b2130; --muted:#5f6878; --line:#d8dde6; --accent:#1f5fbf; --accent-soft:#e8f0fc; --accent-ink:#fff; --erro:#b42318; --topo:#1b2130; --topo-ink:#e8ebf0; }
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg); color:var(--ink); font:15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; }
.topo { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:18px; padding:0 20px; height:52px; background:var(--topo); color:var(--topo-ink); }
.topo .marca { color:var(--topo-ink); text-decoration:none; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.atalhos { display:flex; gap:2px; overflow-x:auto; flex:1; }
.atalhos a { color:var(--topo-ink); text-decoration:none; padding:6px 10px; border-radius:6px; white-space:nowrap; opacity:.85; font-size:14px; }
.atalhos a:hover, .atalhos a.ativo { background:rgba(255,255,255,.14); opacity:1; }
.quem { display:flex; align-items:center; gap:10px; font-size:13px; white-space:nowrap; }
.quem small { opacity:.7; }
.conteudo { padding:22px 28px 40px; max-width:1320px; margin:0 auto; }
.trilha { margin:0 0 10px; font-size:13px; color:var(--muted); } .trilha a { color:var(--accent); text-decoration:none; }
h1 { font-size:24px; margin:0 0 6px; } h2 { font-size:16px; margin:22px 0 10px; color:var(--muted); font-weight:600; letter-spacing:.03em; text-transform:uppercase; } h3 { margin:0 0 4px; font-size:15px; }
.boas-vindas { margin-bottom:6px; } .boas-vindas h1 { font-size:26px; }
.muted { color:var(--muted); } .erro { color:var(--erro); font-weight:500; }
.cartao { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:10px 0; }
.grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.funcao { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; text-decoration:none; color:inherit; min-height:88px; transition:border-color .12s, transform .12s; }
.funcao:hover { border-color:var(--accent); transform:translateY(-1px); }
.funcao .icone { width:48px; height:48px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:22px; }
.funcao .texto { display:flex; flex-direction:column; gap:2px; } .funcao .texto small { color:var(--muted); }
.funcao .abrir { color:var(--accent); font-size:13px; white-space:nowrap; }
.estreito { width:min(420px, 92vw); } body.centro { display:grid; place-items:center; min-height:100vh; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
input, select { font:inherit; padding:7px 9px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); }
button, .botao { font:inherit; padding:7px 12px; border:1px solid var(--line); border-radius:6px; background:var(--surface); cursor:pointer; text-decoration:none; color:var(--ink); }
button.primario { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
button.link { background:none; border:none; color:inherit; padding:0; cursor:pointer; text-decoration:underline; }
.linha-form { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:10px 0; }
.inline { display:inline-flex; gap:6px; align-items:center; }
table { border-collapse:collapse; width:100%; background:var(--surface); border:1px solid var(--line); font-size:13.5px; }
th, td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; }
.rolagem { overflow-x:auto; } .acoes { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.pergunta { border-top:1px solid var(--line); padding:8px 0; } .resposta { color:var(--muted); }
details.cartao summary { cursor:pointer; font-weight:500; }
@media (max-width: 760px) { .topo { height:auto; flex-wrap:wrap; padding:8px 12px; gap:8px; } .conteudo { padding:14px; } .funcao { grid-template-columns:40px 1fr; } .funcao .abrir { display:none; } }
.vermelho { color:var(--erro); font-weight:600; } .ok { color:#1e7a46; }
tr.alerta td { background:#fff6f5; } tr.meu td { background:var(--accent-soft); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.chip { display:inline-flex; gap:6px; align-items:center; padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); text-decoration:none; font-size:13px; }
.chip.ativo { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); } .chip-erro { border-color:#f0b4ae; } .chip-erro b { color:var(--erro); }
.chip-mini { display:inline-block; padding:1px 8px; margin:0 4px 4px 0; border-radius:999px; background:#fff3e0; color:#8a4b00; font-size:12px; }
.selo { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.selo.ok { background:#e3f5ea; color:#1e7a46; } .selo.atencao { background:#fff3e0; color:#8a4b00; } .selo.erro { background:#fdecea; color:var(--erro); } .selo.neutro { background:#eceff3; color:var(--muted); }
.produto-cab { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.produto-grade { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; margin-top:10px; }
.produto-grade h4 { margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.produto-grade p { margin:3px 0; } .destaque { font-size:20px; font-weight:600; }
td.mudou { background:#fff8d6; font-weight:600; } .nowrap { white-space:nowrap; } table.hist { font-size:13px; }
.busca-cab { margin:10px 0; } .busca-cab .linha-form { margin:0; } .busca-cab details { margin-top:8px; }
.produto details { margin-top:8px; } .produto summary { cursor:pointer; font-size:13px; }
.estreito label { margin-bottom:12px; } .estreito button { width:100%; margin-top:6px; padding:10px; } .estreito h1 { margin-bottom:2px; }
.subnav { display:flex; gap:4px; margin:0 0 12px; border-bottom:1px solid var(--line); }
.subnav a { padding:8px 12px; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
.subnav a.ativo, .subnav a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.comparacao { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin:10px 0 4px; padding:8px 12px; border-radius:8px; background:#f3f5f8; border:1px solid var(--line); }
.comparacao.ruim { background:#fdf1f0; border-color:#f0b4ae; } .comparacao.bom { background:#eef8f1; border-color:#bfe3cb; }
.comparacao form { margin-left:auto; } label.inline { flex-direction:row; align-items:center; gap:6px; }
.cab-acao { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.cab-acao p { margin:0; }
button.grande { font-size:16px; padding:12px 22px; }
.aviso { background:#eef8f1; border:1px solid #bfe3cb; border-radius:8px; padding:8px 12px; }
.fatos { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px 18px; margin:8px 0 4px; }
.fatos small { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.fatos > div { font-size:15px; }
details.detalhes > summary { color:var(--accent); cursor:pointer; font-size:13px; margin-top:6px; }
hr { border:0; border-top:1px solid var(--line); margin:12px 0; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin:12px 0; }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:2px; }
.tile small { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; } .tile b { font-size:24px; }
.barra { height:6px; background:#e8ebf0; border-radius:3px; margin-top:6px; overflow:hidden; } .barra i { display:block; height:100%; background:var(--accent); }
.barra i.alta { background:#eda100; } .barra i.cheia { background:var(--erro); }
.barra-dia:hover rect:first-of-type { fill:#1c5cab; }
.permissoes { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; } label.chk { flex-direction:row; align-items:center; gap:4px; font-size:13px; color:var(--ink); white-space:nowrap; }
.legenda { display:flex; gap:16px; font-size:13px; color:var(--muted); margin:4px 0 8px; } .legenda i { display:inline-block; width:14px; height:3px; border-radius:2px; margin-right:6px; vertical-align:middle; } .legenda i.tracejado { border-top:2px dashed #5f6878; height:0; }
td.n { white-space:nowrap; } tr.grupo td { background:#f3f5f8; padding-top:8px; } tr.grupo a { margin-left:8px; font-size:12px; }