/* Painel de Projetos — identidade Via3 Tecnologia (base #102830) */
:root {
  --page:#0a1c22; --surface:#102830; --surface-2:#16343d;
  --ink:#f2f7f8; --ink-2:#a9c2c8; --ink-muted:#7d979e;
  --line:rgba(255,255,255,.10); --line-strong:#23454f;
  --brand:#35c0c6; --brand-ink:#06222a; --s-est:#12a3a8; --s-real:#d95926; --logo:#ff4a00;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --radius:10px;
}
html[data-theme="light"] {
  --page:#f4f7f8; --surface:#fff; --surface-2:#eef3f4;
  --ink:#0d2229; --ink-2:#476067; --ink-muted:#7d979e;
  --line:rgba(16,40,48,.12); --line-strong:#c3d3d7;
  --brand:#0c6e73; --brand-ink:#fff; --s-est:#00949a; --s-real:#c9501f; --logo:#e63f00;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; line-height:1.45; }
a { color:var(--brand); }
.wrap { max-width:1400px; margin:0 auto; padding:20px 20px 70px; }
.hide { display:none !important; }

button, select, input, textarea { font:inherit; color:var(--ink); }
button, select, input[type="search"], input[type="text"], input[type="email"], input[type="date"], input[type="number"], textarea {
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:7px 12px;
}
button { cursor:pointer; }
button:hover, select:hover { background:var(--surface-2); }
button.primary { background:var(--brand); border-color:transparent; color:var(--brand-ink); font-weight:650; }
button.primary:hover { filter:brightness(1.08); }
button.ghost { background:transparent; }
button:disabled { opacity:.55; cursor:default; }
input[type="date"] { color-scheme:dark; }
html[data-theme="light"] input[type="date"] { color-scheme:light; }

/* ---------------- topo ---------------- */
.topbar { border-top:3px solid var(--brand);
  border-image:linear-gradient(90deg,var(--brand) 0%,var(--s-real) 55%,transparent 100%) 1;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:16px 0 14px; margin-bottom:18px; }
.brandmark { font-size:17px; font-weight:750; letter-spacing:-.01em; }
.brandmark i { font-style:normal; color:var(--logo); }
.brandmark small { display:block; font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-muted); }
.marca .logo-img { display:block; height:34px; width:auto; max-width:220px; margin-bottom:4px; }
.marca .logo-img[hidden] { display:none; }
.marca-login { margin-bottom:20px; }
.marca-login .logo-img { height:52px; max-width:260px; }
html[data-theme="light"] .marca .logo-img { filter:none; }
.topbar nav { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.topbar nav button.on { background:var(--surface-2); border-color:var(--line-strong); }
.eu { font-size:12px; color:var(--ink-muted); text-align:right; }
.eu b { display:block; color:var(--ink-2); font-weight:600; }

/* ---------------- login ---------------- */
.login { max-width:420px; margin:8vh auto; }
.login .card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px 26px; }
.login h1 { font-size:19px; margin:0 0 4px; }
.login p.sub { margin:0 0 20px; color:var(--ink-2); font-size:13px; }
.login label { display:block; font-size:12px; color:var(--ink-2); margin:0 0 6px; }
.login input { width:100%; margin-bottom:14px; }
.login button { width:100%; }
.login .voltar { margin-top:12px; background:transparent; border:0; color:var(--ink-muted); font-size:12px; }
.codigo { letter-spacing:.35em; font-size:22px; text-align:center; font-variant-numeric:tabular-nums;
  background:var(--page) !important; color:var(--ink) !important; -webkit-text-fill-color:var(--ink);
  border-color:var(--line-strong); padding:10px 12px; }
.codigo::placeholder { color:var(--ink-muted); -webkit-text-fill-color:var(--ink-muted); opacity:1; }
.codigo:focus { border-color:var(--brand); outline:none; }
/* o preenchimento automático do navegador pintava o campo de branco */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--ink) !important;
  box-shadow:0 0 0 1000px var(--page) inset !important;
  caret-color:var(--ink);
  transition:background-color 9999s ease-out;
}
.aviso { border-radius:8px; padding:9px 12px; font-size:13px; margin-bottom:14px; }
.aviso.erro { background:color-mix(in srgb,var(--critical) 16%,transparent); color:var(--ink); border:1px solid color-mix(in srgb,var(--critical) 45%,transparent); }
.aviso.ok { background:color-mix(in srgb,var(--good) 14%,transparent); border:1px solid color-mix(in srgb,var(--good) 40%,transparent); }

/* ---------------- kpis / cards ---------------- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:12px; margin-bottom:18px; }
.tile { position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 16px; }
.tile .label { font-size:12px; color:var(--ink-2); margin-bottom:6px; }
.tile .value { font-size:27px; font-weight:640; letter-spacing:-.02em; line-height:1.1; }
.tile .value .unit { font-size:15px; font-weight:500; color:var(--ink-2); }
.tile .sub { font-size:12px; color:var(--ink-muted); margin-top:4px; }
.tile.accent .value { color:var(--brand); }
.tile.accent::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand); }
.bar { height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:4px; background:var(--s-est); transition:width .25s ease; }
.bar.done > i { background:var(--good); }

.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:18px; }
.panel h2 { font-size:14px; margin:0 0 2px; font-weight:600; }
.panel .cap { font-size:12px; color:var(--ink-muted); margin-bottom:12px; }
.legend { display:flex; gap:16px; font-size:12px; color:var(--ink-2); margin-bottom:12px; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.chart-row { display:grid; grid-template-columns:minmax(120px,240px) 1fr; gap:14px; align-items:center; margin-bottom:12px; }
.chart-row .name { font-size:13px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chart-bars { display:grid; gap:2px; }
.chart-bars .track { position:relative; height:14px; }
.chart-bars .fill { height:14px; border-radius:0 4px 4px 0; }
.chart-bars .fill.est { background:var(--s-est); }
.chart-bars .fill.real { background:var(--s-real); }
.chart-bars .val { position:absolute; top:0; height:14px; display:flex; align-items:center;
  font-size:11px; color:var(--ink-2); padding-left:6px; font-variant-numeric:tabular-nums; }

/* ---------------- tabela ---------------- */
.tbl-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
table { width:max-content; min-width:100%; border-collapse:collapse; table-layout:fixed; }
th.c-tarefa { width:var(--w-tarefa,430px); }
thead th { position:relative; text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line);
  background:var(--surface-2); white-space:nowrap; }
.rsz { position:absolute; top:0; right:-4px; width:9px; height:100%; cursor:col-resize; user-select:none; z-index:2; }
.rsz::after { content:""; position:absolute; left:4px; top:6px; bottom:6px; width:2px; background:var(--line-strong); border-radius:2px; opacity:.6; }
.rsz:hover::after, body.resizing .rsz::after { background:var(--brand); opacity:1; }
body.resizing { cursor:col-resize; user-select:none; }
td { padding:6px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:hover td { background:var(--surface-2); }
tr.group td { background:var(--surface-2); font-weight:600; }
tr.group .gname { display:flex; align-items:center; gap:8px; }
tr.group .caret { cursor:pointer; color:var(--ink-muted); width:14px; display:inline-block; user-select:none; }
tr.group .gprog { display:flex; align-items:center; gap:8px; font-weight:500; font-size:12px; color:var(--ink-2); }
tr.group .gprog .bar { width:80px; }
tr.done .tname { color:var(--ink-muted); text-decoration:line-through; }
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cell-in { width:100%; background:transparent; border:1px solid transparent; border-radius:6px; padding:4px 6px; }
.cell-in:hover { border-color:var(--line); }
.cell-in:focus { border-color:var(--brand); outline:none; background:var(--page); }
.cell-in.num { text-align:right; }
input[type="date"].vazio:not(:focus):not(:hover) { color:transparent; }
select.status { font-size:12px; border-radius:999px; padding:3px 8px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink-2); }
select.status.st-and { color:var(--warning); border-color:color-mix(in srgb,var(--warning) 45%,transparent); }
select.status.st-pend { color:var(--serious); border-color:color-mix(in srgb,var(--serious) 45%,transparent); }
select.status.st-ok { color:var(--good); border-color:color-mix(in srgb,var(--good) 45%,transparent); }
.btn-apont { background:transparent; border:1px solid var(--line); border-radius:7px; padding:3px 9px;
  font-size:12px; font-variant-numeric:tabular-nums; color:var(--ink); width:100%; text-align:right; }
.btn-apont:hover { border-color:var(--brand); color:var(--brand); }
.btn-apont .n { font-size:10px; color:var(--ink-muted); margin-left:5px; }
tfoot td { padding:12px; font-weight:650; border-top:1px solid var(--line-strong); background:var(--surface-2); }
.row-tools { opacity:0; display:flex; gap:4px; }
tr:hover .row-tools { opacity:1; }
.icon-btn { padding:2px 7px; font-size:13px; color:var(--ink-muted); background:transparent; border:1px solid transparent; }
.icon-btn:hover { color:var(--critical); border-color:var(--line); background:var(--surface); }
.add-row td { padding:8px 12px; }
.add-row button { font-size:12px; padding:4px 10px; color:var(--ink-2); }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.toolbar .spacer { flex:1; }
.hint { font-size:12px; color:var(--ink-muted); margin-top:10px; }
.hint code { background:var(--surface-2); padding:1px 5px; border-radius:4px; }

/* ---------------- lista de projetos ---------------- */
.grid-proj { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.proj { position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; cursor:pointer; }
.proj:hover { border-color:var(--brand); }
.proj-x { position:absolute; top:10px; right:10px; opacity:0; }
.proj:hover .proj-x, .proj-x:focus { opacity:1; }
button.perigo { color:var(--critical); border-color:color-mix(in srgb,var(--critical) 40%,transparent); }
button.perigo:hover { background:color-mix(in srgb,var(--critical) 14%,transparent); }
.modal .acoes button.primary.perigo-ok { background:var(--critical); color:#fff; }
#btn-excluir-proj { margin-left:auto; }
.proj h3 { margin:0 0 4px; font-size:15px; }
.proj .cli { font-size:12px; color:var(--ink-muted); margin-bottom:12px; }
.proj .nums { display:flex; gap:18px; font-size:12px; color:var(--ink-2); margin-bottom:10px; }
.proj .nums b { display:block; font-size:17px; color:var(--ink); font-weight:640; }

/* ---------------- modal ---------------- */
.modal-bg { position:fixed; inset:0; background:rgba(4,14,18,.6); display:flex; align-items:center;
  justify-content:center; padding:20px; z-index:50; }
.modal { background:var(--surface); border:1px solid var(--line-strong); border-radius:14px;
  width:100%; max-width:560px; max-height:86vh; overflow:auto; padding:22px 24px; }
.modal h3 { margin:0 0 2px; font-size:16px; }
.modal .sub { color:var(--ink-muted); font-size:12px; margin-bottom:18px; }
.form-linha { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.form-linha > * { flex:1; min-width:160px; }
.modal input, .modal select { width:100%; }
.modal input[type="date"] { min-width:165px; padding-right:8px; }
.modal label { display:block; font-size:12px; color:var(--ink-2); margin-bottom:5px; }
.modal .acoes { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.lista-ap { margin-top:18px; border-top:1px solid var(--line); }
.lista-ap .item { display:flex; gap:10px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.lista-ap .item .h { font-weight:650; font-variant-numeric:tabular-nums; min-width:52px; }
.lista-ap .item .who { color:var(--ink-2); }
.lista-ap .item .obs { color:var(--ink-muted); flex:1; }
.lista-ap .item .x { margin-left:auto; }

footer.rodape { margin-top:26px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; font-size:12px; color:var(--ink-muted); }
@media print { .topbar nav, .toolbar, .row-tools, .add-row { display:none !important; } }
@media (max-width:820px) { .col-hide { display:none; } .chart-row { grid-template-columns:1fr; } }