:root { --fundo:#f4f6f8; --cartao:#fff; --texto:#1d2733; --sub:#5b6b7b; --borda:#dde3ea; --azul:#1f6feb; --verde:#1a7f37; --amarelo:#9a6700; --vermelho:#c0392b; --cinza:#6b7785; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--fundo); color:var(--texto); }
a { color:var(--azul); text-decoration:none; } a:hover { text-decoration:underline; }
code { background:#eef1f4; padding:1px 5px; border-radius:4px; font-size:.92em; }
pre { background:#eef1f4; padding:10px; border-radius:6px; overflow:auto; font-size:.85em; }
.topo { display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:#fff; border-bottom:1px solid var(--borda); }
.marca { font-weight:700; color:var(--texto); font-size:1.1em; }
.topo nav a { margin-left:18px; } .usuario { margin-left:18px; color:var(--sub); }
.conteudo { max-width:1000px; margin:0 auto; padding:24px; }
h1 { margin:0 0 4px; font-size:1.6em; } h2 { font-size:1.1em; margin:28px 0 10px; color:var(--sub); text-transform:uppercase; letter-spacing:.04em; }
.sub { color:var(--sub); margin:0 0 18px; }
.cartao { background:var(--cartao); border:1px solid var(--borda); border-radius:10px; padding:18px 20px; }
.cartoes { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.cartao.processo { display:flex; flex-direction:column; gap:6px; color:var(--texto); }
.cartao.processo:hover { border-color:var(--azul); text-decoration:none; box-shadow:0 2px 8px rgba(31,111,235,.12); }
.cartao.processo span { color:var(--sub); font-size:.92em; }
.formulario fieldset { border:0; padding:0; margin:0 0 20px; } legend { font-weight:600; margin-bottom:8px; }
.campo { display:block; margin-bottom:14px; } .campo > span { display:block; font-weight:500; margin-bottom:4px; } .campo em { color:var(--vermelho); font-style:normal; }
.campo input { width:100%; max-width:420px; padding:8px 10px; border:1px solid var(--borda); border-radius:6px; font:inherit; }
.campo small { display:block; color:var(--sub); font-size:.85em; margin-top:3px; }
.login-form label { display:block; margin-bottom:12px; } .login-form input { width:100%; padding:9px; border:1px solid var(--borda); border-radius:6px; font:inherit; }
body.login { display:flex; align-items:center; justify-content:center; min-height:100vh; } .login-form { width:360px; }
.botao { background:var(--azul); color:#fff; border:0; border-radius:6px; padding:9px 18px; font:inherit; font-weight:600; cursor:pointer; }
.botao:disabled { opacity:.6; cursor:wait; } .botao.grande { padding:12px 28px; font-size:1.05em; }
.acoes { display:flex; align-items:center; gap:16px; } .acoes small { color:var(--sub); max-width:520px; }
.alerta { border-radius:8px; padding:10px 14px; margin:12px 0; border:1px solid; }
.alerta.vermelho { background:#fdecea; border-color:#f5c2c0; color:#7a1e14; } .alerta.azul { background:#e8f0fe; border-color:#c5d8fb; color:#1b4d9b; }
.alerta.amarelo { background:#fff8e1; border-color:#f3e0a0; color:#6b4a00; } .alerta ul { margin:6px 0 0 18px; }
.tabela { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--borda); border-radius:8px; overflow:hidden; }
.tabela th, .tabela td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--borda); font-size:.94em; } .tabela th { background:#f7f9fb; color:var(--sub); font-weight:600; }
.etiqueta { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.85em; font-weight:600; color:#fff; background:var(--cinza); }
.etiqueta.azul { background:var(--azul); } .etiqueta.verde { background:var(--verde); } .etiqueta.amarelo { background:var(--amarelo); } .etiqueta.vermelho { background:var(--vermelho); }
.etiqueta.grande { font-size:1em; padding:5px 14px; }
.status-cartao { border-left:6px solid var(--cinza); } .status-cartao.azul { border-left-color:var(--azul); } .status-cartao.verde { border-left-color:var(--verde); }
.status-cartao.amarelo { border-left-color:var(--amarelo); } .status-cartao.vermelho { border-left-color:var(--vermelho); }
.status-linha { display:flex; align-items:center; gap:14px; margin-bottom:10px; } .quando, .pulso { color:var(--sub); font-size:.9em; }
.pulso { animation:pulso 1.6s infinite; } @keyframes pulso { 50% { opacity:.4; } }
.numeros { display:flex; gap:28px; margin:12px 0; } .numeros div { display:flex; flex-direction:column; } .numeros b { font-size:1.6em; } .numeros span { color:var(--sub); font-size:.85em; }
.mensagem { font-size:1.05em; } .acao { margin-top:10px; } .nota { color:var(--sub); font-size:.9em; }
details { margin:8px 0; } summary { cursor:pointer; color:var(--sub); } .ids { font-family:ui-monospace,monospace; font-size:.85em; word-break:break-all; }
ul.erros li { color:var(--vermelho); }