:root{
  --navy:#1F2A38; --ink:#2C3E51; --blue:#4078BC; --sky:#9DC3E6;
  --red:#BD352E; --green:#2E7D52; --amber:#B57A1E;
  --surf:#F1F4F8; --line:#DCE3EB; --muted:#6B7A8A; --white:#fff;
  --pad:20px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--surf); color:var(--ink);
  font:15px/1.5 'IBM Plex Sans',system-ui,sans-serif;
}
h1,h2,h3,.num{font-family:'Archivo',system-ui,sans-serif}
.num{font-variant-numeric:tabular-nums}

header{
  background:var(--navy); color:#fff; padding:22px var(--pad);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
header img{height:38px}
header .t{font:600 19px/1.2 'Archivo'}
header .s{color:var(--sky); font-size:13px}

.wrap{max-width:1360px; margin:0 auto; padding:var(--pad);
  display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:20px; align-items:start}
@media(max-width:960px){.wrap{grid-template-columns:1fr}}

.card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:16px}
.card > h2{margin:0 0 4px; font-size:16px; font-weight:600; color:var(--navy)}
.card > .hint{margin:0 0 14px; font-size:12.5px; color:var(--muted)}

.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px}
label{display:block; font-size:12px; font-weight:500; color:var(--muted); margin-bottom:5px}
input,select,textarea{
  width:100%; font:15px 'IBM Plex Sans'; color:var(--ink);
  padding:9px 11px; border:1px solid var(--line); border-radius:7px; background:#fff;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
input[type=number]{font-family:'IBM Plex Mono'; font-variant-numeric:tabular-nums}

.pracas{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.praca{
  flex:1; min-width:120px; text-align:left; cursor:pointer; background:#fff;
  border:1.5px solid var(--line); border-radius:9px; padding:11px 13px; font:inherit; color:var(--ink);
}
.praca strong{display:block; font:600 15px 'Archivo'; color:var(--navy)}
.praca span{font-size:11.5px; color:var(--muted)}
.praca[aria-pressed=true]{border-color:var(--blue); background:#EDF3FB}
.praca:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

table.desp{width:100%; border-collapse:collapse; margin-top:6px}
table.desp th{font-size:11.5px; font-weight:500; color:var(--muted); text-align:left; padding:0 6px 6px}
table.desp th:nth-child(2){text-align:right; width:120px}
table.desp td{padding:3px 6px}
table.desp input[type=text]{font-size:14px}
table.desp input[type=number]{text-align:right}
.tog{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink); cursor:pointer; padding:6px 0}
.tog input{width:auto; margin:0}

aside{position:sticky; top:20px}
@media(max-width:960px){aside{position:static}}
.sum{background:var(--navy); color:#fff; border-radius:10px; padding:20px; margin-bottom:14px}
.sum h2{margin:0 0 14px; font:600 15px 'Archivo'; color:var(--sky)}
.sum .big{font:700 34px/1 'Archivo'; letter-spacing:-.5px}
.sum .cap{font-size:12px; color:var(--sky); margin-top:4px}
.sum dl{margin:16px 0 0; font-size:13.5px}
.sum dl div{display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-top:1px solid #35435419}
.sum dl div:first-child{border-top:0}
.sum dt{color:#C4D2E0}
.sum dd{margin:0; font-family:'IBM Plex Mono'; font-variant-numeric:tabular-nums}
.sum .trib dt,.sum .trib dd{color:#F2A9A4}
.sum .tot{border-top:1px solid #4E5F72 !important; margin-top:6px; padding-top:9px !important; font-weight:600}

/* barra de composição — assinatura da ferramenta */
.bars{margin:16px 0 4px}
.bar{display:flex; height:12px; border-radius:6px; overflow:hidden; background:#35435433}
.bar i{display:block; transition:width .25s ease}
.leg{display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:9px; font-size:11.5px; color:#C4D2E0}
.leg s{width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:5px; text-decoration:none}

button.go{
  width:100%; padding:14px; border:0; border-radius:9px; cursor:pointer;
  background:var(--blue); color:#fff; font:600 15px 'Archivo';
}
button.go:hover{background:#35659F}
button.go:disabled{background:var(--muted); cursor:progress}
button.go:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.status{font-size:12.5px; color:var(--muted); text-align:center; min-height:18px; margin-top:9px}

.alertas{background:#FFF8E8; border:1px solid #EBD9A8; border-radius:10px; padding:15px 18px}
.alertas h3{margin:0 0 8px; font:600 13px 'Archivo'; color:var(--amber)}
.alertas ul{margin:0; padding-left:17px; font-size:12.5px; color:#6A5A34}
.alertas li{margin-bottom:6px}
.alertas li:last-child{margin-bottom:0}

footer{max-width:1360px; margin:0 auto; padding:4px var(--pad) 34px; font-size:12px; color:var(--muted)}
@media(prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---------- login ---------- */
#login{position:fixed; inset:0; background:var(--navy); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50}
#login .box{width:100%; max-width:380px}
#login img{height:44px; margin-bottom:26px}
#login h1{margin:0 0 6px; font:600 22px 'Archivo'; color:#fff}
#login p.sub{margin:0 0 22px; font-size:13px; color:var(--sky)}
#login label{color:#A9BACB}
#login input{background:#2A3949; border-color:#3C4C5E; color:#fff; margin-bottom:14px}
#login input::placeholder{color:#6B7A8A}
#login .err{min-height:20px; font-size:13px; color:#F2A9A4; margin:2px 0 10px}
#login .aviso{margin-top:20px; font-size:11.5px; color:#7F8FA0; line-height:1.5}

/* ---------- navegação ---------- */
nav.tabs{display:flex; gap:4px; margin-left:auto; align-items:center}
nav.tabs button{
  background:transparent; border:0; color:#A9BACB; font:500 14px 'IBM Plex Sans';
  padding:9px 15px; border-radius:7px; cursor:pointer;
}
nav.tabs button[aria-current=true]{background:#2A3949; color:#fff}
nav.tabs button:hover{color:#fff}
nav.tabs .quem{color:var(--sky); font-size:12.5px; padding:0 10px 0 16px; border-left:1px solid #3C4C5E; margin-left:10px}
nav.tabs .sair{color:#8FA0B2; font-size:12.5px}
#app{display:none}

/* ---------- histórico ---------- */
.hist{width:100%; border-collapse:collapse; font-size:13.5px}
.hist th{
  text-align:left; font:500 11.5px 'IBM Plex Sans'; text-transform:uppercase; letter-spacing:.4px;
  color:var(--muted); padding:0 10px 9px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.hist td{padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.hist tr:last-child td{border-bottom:0}
.hist .r{text-align:right; font-family:'IBM Plex Mono'; font-variant-numeric:tabular-nums}
.hist .cli{font-weight:600; color:var(--navy)}
.hist .meta{font-size:11.5px; color:var(--muted)}
.tag{display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; background:#E8EFF7; color:var(--blue)}
.acts{display:flex; gap:6px; justify-content:flex-end}
.acts button{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font:500 12px 'IBM Plex Sans'; padding:6px 10px; border-radius:6px; cursor:pointer; white-space:nowrap;
}
.acts button:hover{border-color:var(--blue); color:var(--blue)}
.acts button.del:hover{border-color:var(--red); color:var(--red)}
.vazio{padding:44px 10px; text-align:center; color:var(--muted); font-size:14px}
.totais{display:flex; gap:26px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.totais div span{display:block; font-size:11.5px; color:var(--muted)}
.totais div strong{font:600 20px 'Archivo'; color:var(--navy); font-variant-numeric:tabular-nums}
.barra{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.barra button{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font:500 13px 'IBM Plex Sans'; padding:8px 13px; border-radius:7px; cursor:pointer;
}
.barra button:hover{border-color:var(--blue); color:var(--blue)}
.alerta-armaz{background:#FFF8E8; border:1px solid #EBD9A8; border-radius:8px; padding:11px 14px;
  font-size:12.5px; color:#6A5A34; margin-bottom:14px; display:none}
@media(max-width:760px){
  .hist thead{display:none}
  .hist td{display:block; border:0; padding:3px 0}
  .hist tr{display:block; padding:14px 0; border-bottom:1px solid var(--line)}
  .acts{justify-content:flex-start; margin-top:8px}
}

/* ---------- grade da escala ---------- */
table.esc{border-collapse:collapse; font-size:11.5px; white-space:nowrap}
table.esc th,table.esc td{border:1px solid var(--line); padding:4px 5px; text-align:center; min-width:30px}
table.esc th{background:var(--surf); font-weight:600; color:var(--muted); font-size:10.5px; line-height:1.25}
table.esc th.dom{background:#E8EFF7; color:var(--blue)}
table.esc .fix{background:#fff; text-align:left; font-weight:600; color:var(--navy); min-width:110px; position:sticky; left:0; z-index:1}
table.esc td.t{background:#EDF3FB; color:var(--blue); font-weight:600}
table.esc td.f{background:#FBEDEC; color:var(--red); font-weight:600}
table.esc td.x{background:#F7F9FB; color:#C4CDD8}
table.esc tr.cob td{font-size:10.5px; font-weight:600}
table.esc tr.cob td.ok{background:#EDF5EF; color:var(--green)}
table.esc tr.cob td.no{background:#FBEDEC; color:var(--red)}