/* estilo.css — tema escuro, mobile-first */
* { box-sizing: border-box; margin: 0; }
:root { --fundo:#12141a; --painel:#1c1f28; --borda:#2b2f3d; --texto:#e6e8ee; --fraco:#9aa0b0; --acento:#5dd39e; --alerta:#ff6b6b; --aviso:#ffc94d; }
body { background:var(--fundo); color:var(--texto); font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
header { position:sticky; top:0; z-index:5; background:var(--painel); border-bottom:1px solid var(--borda); padding:.5rem .8rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
header h1 { font-size:1.05rem; }
#abas { display:flex; gap:.2rem; overflow-x:auto; flex:1; }
#abas a { color:var(--fraco); text-decoration:none; padding:.35rem .6rem; border-radius:.5rem; white-space:nowrap; font-size:.9rem; }
#abas a.ativa { background:var(--fundo); color:var(--acento); }
#meta { color:var(--fraco); font-size:.72rem; }
#sair { background:none; border:1px solid var(--borda); color:var(--fraco); border-radius:.5rem; padding:.25rem .6rem; cursor:pointer; }
main { padding: .8rem; max-width: 1100px; margin: 0 auto; }
h2 { font-size:1rem; margin:.9rem 0 .4rem; color:var(--acento); }
h3 { font-size:.9rem; margin:.7rem 0 .3rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.5rem; }
.card { background:var(--painel); border:1px solid var(--borda); border-radius:.7rem; padding:.6rem .7rem; }
.card .rotulo { color:var(--fraco); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; }
.card .valor { font-size:1.15rem; font-weight:600; margin-top:.15rem; }
.card .sub { color:var(--fraco); font-size:.78rem; }
.grafico { background:var(--painel); border:1px solid var(--borda); border-radius:.7rem; padding:.6rem; margin:.5rem 0; }
.grafico canvas { max-height: 260px; }
table { width:100%; border-collapse:collapse; background:var(--painel); border:1px solid var(--borda); border-radius:.7rem; overflow:hidden; font-size:.85rem; }
.rolavel { overflow-x:auto; margin:.5rem 0; }
th, td { padding:.4rem .55rem; text-align:left; border-bottom:1px solid var(--borda); white-space:nowrap; }
th { color:var(--fraco); font-weight:500; font-size:.75rem; text-transform:uppercase; }
tr:last-child td { border-bottom:none; }
td.num, th.num { text-align:right; }
.alerta { color:var(--alerta); font-weight:600; }
.aviso { color:var(--aviso); }
.bom { color:var(--acento); }
.vazio { color:var(--fraco); padding:1.2rem; text-align:center; }
.horas { display:flex; gap:2px; margin:.3rem 0 .6rem; }
.horas span { flex:1; height:1.5rem; border-radius:3px; background:var(--borda); font-size:.6rem; display:flex; align-items:center; justify-content:center; color:var(--fraco); }
.horas span.cortada { background:var(--alerta); color:#000; font-weight:700; }
.horas span.candidata { background:var(--aviso); color:#000; }
/* login */
body.login { display:flex; min-height:100vh; align-items:center; justify-content:center; }
.cartao { background:var(--painel); border:1px solid var(--borda); border-radius:1rem; padding:2rem; width:min(92vw,340px); text-align:center; }
.cartao h1 { margin-bottom:1.2rem; }
.cartao input { width:100%; margin:.35rem 0; padding:.6rem .7rem; border-radius:.6rem; border:1px solid var(--borda); background:var(--fundo); color:var(--texto); }
.cartao button { width:100%; margin-top:.7rem; padding:.6rem; border:none; border-radius:.6rem; background:var(--acento); color:#08130d; font-weight:700; cursor:pointer; }
.erro { color:var(--alerta); font-size:.85rem; margin-top:.6rem; min-height:1.2em; }