:root{
  --navy:#16324F;
  --navy-deep:#0E2338;
  --gold:#B7871A;
  --gold-soft:#E8C77A;
  --bg:#F3F5F8;
  --card:#FFFFFF;
  --line:#E1E6EC;
  --ink:#1D2530;
  --ink-soft:#5B6675;
  --green:#1F7A4D;
  --green-bg:#E6F3EC;
  --amber:#B4740A;
  --amber-bg:#FCF0DA;
  --red:#B23A3A;
  --red-bg:#FBEAEA;
  --gray:#6B7280;
  --gray-bg:#EEF0F3;
  --radius:10px;
  --shadow: 0 1px 2px rgba(14,35,56,0.06), 0 4px 14px rgba(14,35,56,0.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
}
::selection{background:var(--gold-soft);}
h1,h2,h3,h4{font-family:'Inter',system-ui,sans-serif; margin:0; color:var(--navy-deep); font-weight:700; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:var(--navy);}
button{font-family:inherit; cursor:pointer;}

/* ---------- Layout shell ---------- */
#app{display:flex; min-height:100vh;}

.sidebar{
  width:230px; flex-shrink:0;
  background:linear-gradient(180deg, var(--navy-deep), var(--navy) 60%);
  color:#DCE6EE;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sidebar .brand{
  padding:22px 20px 16px 20px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.sidebar .brand .stamp{
  width:40px;height:40px;border-radius:50%;
  border:2px solid var(--gold-soft);
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif; font-weight:700; color:var(--gold-soft);
  font-size:15px; margin-bottom:10px; letter-spacing:0.5px;
  transform:rotate(-6deg);
}
.sidebar .brand .brand-logo{display:block; width:100%; max-width:132px; height:auto; margin-bottom:2px; opacity:0.95;}
.sidebar .brand .subtitle{font-size:11px; color:#9FB2C4; margin-top:4px; letter-spacing:0.3px;}

.nav{padding:14px 10px; flex:1; overflow-y:auto;}
.nav button{
  width:100%; text-align:left; background:none; border:none; color:#C7D5E1;
  padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:500;
  display:flex; align-items:center; gap:10px; margin-bottom:2px;
  transition:background .15s ease, color .15s ease;
}
.nav a.nav-btn{
  width:100%; text-align:left; background:none; border:none; color:#C7D5E1;
  padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:500;
  display:flex; align-items:center; gap:10px; margin-bottom:2px; text-decoration:none;
  transition:background .15s ease, color .15s ease; box-sizing:border-box;
}
.nav a.nav-btn:hover{background:rgba(255,255,255,0.08); color:#fff;}
.nav a.nav-btn.active{background:rgba(255,255,255,0.13); color:#fff;}
.nav button:hover{background:rgba(255,255,255,0.08); color:#fff;}
.nav button.active{background:rgba(255,255,255,0.13); color:#fff;}
.nav button .ic{width:18px; text-align:center; opacity:0.85; font-size:13px;}
.nav .badge{
  margin-left:auto; background:var(--red); color:#fff; font-size:10.5px;
  padding:1px 6px; border-radius:20px; font-weight:600;
}
.nav .section-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.8px; color:#7C93A8;
  padding:14px 12px 6px 12px; font-weight:600;
}
.sidebar .foot{
  padding:14px 20px; font-size:10.5px; color:#7C93A8; border-top:1px solid rgba(255,255,255,0.1);
}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  background:var(--card); border-bottom:1px solid var(--line);
  padding:16px 28px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:5;
}
.topbar h2{font-size:19px;}
.topbar .date{font-size:12px; color:var(--ink-soft); margin-top:2px; font-family:'IBM Plex Mono',monospace;}
.content{padding:24px 28px 60px 28px; max-width:1400px; width:100%;}

/* ---------- Reusable ---------- */
.grid{display:grid; gap:16px;}
.kpis{grid-template-columns:repeat(5,1fr); margin-bottom:22px;}
.kpi{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow);
}
.kpi .num{font-family:'Inter',sans-serif; font-size:28px; font-weight:800; color:var(--navy-deep);}
.kpi .label{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.4px; margin-top:2px;}
.kpi.alert .num{color:var(--red);}
.kpi.warn .num{color:var(--amber);}
.kpi.ok .num{color:var(--green);}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:20px;
}
.card .card-head{
  padding:14px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.card .card-head h3{font-size:15px;}
.card .card-body{padding:16px 18px;}

.stamp-badge{
  display:inline-flex; align-items:center; gap:5px;
  border:1.5px solid currentColor; border-radius:6px;
  padding:2px 8px; font-size:10.5px; font-weight:700; letter-spacing:0.6px;
  text-transform:uppercase; font-family:'IBM Plex Mono',monospace;
  transform:rotate(-1deg);
}
.st-CONCLUIDO{color:var(--green); background:var(--green-bg);}
.st-ANDAMENTO{color:var(--amber); background:var(--amber-bg);}
.st-ATRASADO{color:var(--red); background:var(--red-bg);}
.st-PENDENTE{color:var(--amber); background:var(--amber-bg);}
.st-SEM_STATUS{color:var(--gray); background:var(--gray-bg);}

table{width:100%; border-collapse:collapse; font-size:13px;}
th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.4px;
  color:var(--ink-soft); padding:8px 10px; border-bottom:2px solid var(--line);
  background:#FAFBFC; position:sticky; top:0;
}
td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top;}
tr:hover td{background:#F8FAFC;}
.tbl-wrap{overflow:auto; max-height:640px; border-radius:var(--radius);}
.clip{max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tag{
  display:inline-block; background:var(--gray-bg); color:var(--ink-soft);
  border-radius:5px; padding:1px 7px; font-size:11px; font-weight:600; margin:1px 3px 1px 0;
}

.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; align-items:center;}
.filters input, .filters select{
  padding:7px 10px; border:1px solid var(--line); border-radius:7px; font-size:13px;
  font-family:inherit; background:#fff; color:var(--ink);
}
.filters input[type=text]{min-width:220px;}
.btn{
  padding:8px 14px; border-radius:7px; border:1px solid var(--navy); background:var(--navy); color:#fff;
  font-size:13px; font-weight:600;
}
.btn:hover{background:var(--navy-deep);}
.btn.secondary{background:#fff; color:var(--navy); border-color:var(--line);}
.btn.secondary:hover{background:#F3F5F8;}
.btn.danger{background:#fff; color:var(--red); border-color:var(--red);}
.btn.gold{background:var(--gold); border-color:var(--gold); color:#fff;}
.btn.small{padding:4px 10px; font-size:12px;}

.row-days-late{font-weight:700; color:var(--red);}

/* Modal */
.overlay{
  position:fixed; inset:0; background:rgba(14,25,38,0.45); display:none;
  align-items:flex-start; justify-content:center; padding:40px 20px; z-index:50; overflow:auto;
}
.overlay.show{display:flex;}
.modal{
  background:#fff; border-radius:12px; width:100%; max-width:720px; box-shadow:0 20px 60px rgba(0,0,0,0.25);
  animation:pop .15s ease;
}
@keyframes pop{from{transform:translateY(8px); opacity:0;} to{transform:translateY(0); opacity:1;}}
.modal-head{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start;}
.modal-body{padding:18px 20px; max-height:65vh; overflow:auto;}
.modal-foot{padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px;}
.modal-close{background:none; border:none; font-size:20px; color:var(--ink-soft); line-height:1;}
.field{margin-bottom:12px;}
.field label{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:0.3px; color:var(--ink-soft); margin-bottom:4px; font-weight:600;}
input[type=checkbox], input[type=radio]{accent-color: var(--navy); width:15px; height:15px;}
.field textarea, .field input, .field select{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-family:inherit; font-size:13px;
}
.field textarea{min-height:70px; resize:vertical;}
input[type=text], input[type=date], input[type=password], input[type=email], textarea, select{
  font-family:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--line); border-radius:7px; color:var(--ink);
}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.meta-line{font-size:12px; color:var(--ink-soft); margin-bottom:3px;}
.cobranca-item{background:#F8FAFC; border:1px solid var(--line); border-radius:7px; padding:8px 10px; margin-bottom:6px; font-size:12.5px;}

.empty{text-align:center; padding:50px 20px; color:var(--ink-soft);}
.empty .ic{font-size:32px; margin-bottom:10px;}

.setor-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px 16px; margin-bottom:12px; cursor:pointer;
}
.setor-card .head{display:flex; justify-content:space-between; align-items:center;}
.setor-card .head h4{font-size:15px;}
.setor-card .stats{display:flex; gap:14px; margin-top:8px; font-size:12px; color:var(--ink-soft);}
.setor-card .stats b{color:var(--ink); font-family:'IBM Plex Mono',monospace;}
.setor-detail{display:none; margin-top:12px; border-top:1px solid var(--line); padding-top:10px;}
.setor-detail.show{display:block;}
details.card summary::-webkit-details-marker{display:none;}
details.card summary{outline:none;}
details.card[open] summary{border-bottom:1px solid var(--line);}
details.card summary:hover{background:#FAFBFC;}

.toast{
  position:fixed; bottom:22px; right:22px; background:var(--navy-deep); color:#fff;
  padding:12px 18px; border-radius:8px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,0.25);
  opacity:0; transform:translateY(10px); transition:all .2s ease; z-index:100;
}
.toast.show{opacity:1; transform:translateY(0);}

@media print{
  .sidebar, .topbar, .filters, .btn, .no-print{display:none !important;}
  .content{padding:0;}
  body{background:#fff;}
}

/* ---------- Auth screens ---------- */
.auth-wrap{
  min-height:100vh; width:100%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 20%, #1B3A5C 0%, var(--navy-deep) 55%, #081522 100%);
  padding:20px;
}
.auth-card{
  background:#fff; border-radius:14px; padding:32px 32px 28px 32px; width:100%; max-width:400px;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
}
.auth-brand{margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); text-align:center;}
.auth-brand .auth-logo{display:block; width:100%; max-width:180px; height:auto; margin:0 auto;}
.auth-brand .subtitle{font-size:12px; color:var(--ink-soft); margin-top:3px;}
.auth-error{
  background:var(--red-bg); color:var(--red); border:1px solid var(--red); border-radius:7px;
  padding:8px 10px; font-size:12.5px; margin-bottom:12px;
}