@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#F2EFE6;
  --surface:#FBFAF5;
  --ink:#1C2024;
  --ink-soft:#565C63;
  --ink-faint:#8B8F87;
  --line:#DBD5C4;
  --line-strong:#C7BFA9;
  --accent:#A15A24;
  --accent-strong:#7C4419;
  --accent-soft:#EBDCC5;
  --good:#3E6B4F;
  --good-soft:#DDE7DC;
  --bad:#9C4636;
  --bad-soft:#EEDAD2;
  --focus:#3F6FB0;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
  font-size:15.5px;
  line-height:1.5;
}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-strong); text-decoration:underline;}
code, .mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

/* ---------- shell / nav ---------- */
.shell{display:grid; grid-template-columns:220px 1fr; min-height:100vh;}
.side{
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  padding:22px 16px;
  position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:28px; padding:0 4px;}
.brand-mark{
  font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:12px;
  background:var(--accent); color:#FBFAF5;
  width:30px; height:30px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
}
.brand-name{font-size:13px; font-weight:600; line-height:1.25; color:var(--ink);}
.nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.nav a{
  color:var(--ink-soft); font-size:14.5px; font-weight:500;
  padding:9px 10px; border-radius:5px;
}
.nav a:hover{background:var(--accent-soft); color:var(--accent-strong); text-decoration:none;}
.nav a.active{background:var(--accent); color:#fff;}
.side-foot{border-top:1px solid var(--line); padding-top:14px; margin-top:14px; display:flex; align-items:center; justify-content:space-between;}
.who{font-size:13px; color:var(--ink-soft); font-weight:600;}
.logout{font-size:12.5px; color:var(--ink-faint);}

.content{padding:34px 40px 60px; min-width:0;}
.content-solo{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
}

@media (max-width: 860px){
  .shell{grid-template-columns:1fr;}
  .side{position:static; height:auto; flex-direction:row; align-items:center; overflow-x:auto; gap:18px;}
  .nav{flex-direction:row;}
  .side-foot{border-top:none; margin:0; padding:0;}
  .content{padding:22px 18px 50px;}
}

/* ---------- page header ---------- */
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap;}
.page-head h1{font-size:1.5rem; margin:0 0 4px; font-weight:700;}
.page-head .sub{color:var(--ink-soft); font-size:14px; margin:0;}
.btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:#fff; border:none;
  padding:9px 16px; border-radius:5px; font-size:14px; font-weight:600;
  cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--accent-strong); color:#fff; text-decoration:none;}
.btn.secondary{background:var(--surface); color:var(--ink); border:1px solid var(--line-strong);}
.btn.secondary:hover{background:var(--paper); color:var(--ink);}

/* ---------- stat tiles ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:32px;}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:16px 18px;
}
.stat .label{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:8px;}
.stat .value{font-family:'IBM Plex Mono',monospace; font-size:1.5rem; font-variant-numeric:tabular-nums; font-weight:500;}
.stat .value.good{color:var(--good);}
.stat .value.bad{color:var(--bad);}

/* ---------- tables ---------- */
.table-card{background:var(--surface); border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom:28px;}
.table-scroll{overflow-x:auto;}
table{border-collapse:collapse; width:100%; font-size:14px;}
thead th{
  text-align:left; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-faint); font-weight:500;
  padding:11px 14px; border-bottom:1px solid var(--line-strong); white-space:nowrap;
}
tbody td{padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--accent-soft);}
td.num, th.num{text-align:right; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;}
td.good{color:var(--good);}
td.bad{color:var(--bad);}

.pill{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  padding:3px 9px; border-radius:99px; font-weight:500;
  background:var(--accent-soft); color:var(--accent-strong);
}
.pill.gtc{background:#DDE3EE; color:#3F5787;}
.pill.divisa{background:#E4E7D6; color:#5B6B33;}

.empty{padding:40px 20px; text-align:center; color:var(--ink-faint); font-size:14px;}

/* ---------- forms ---------- */
.form-card{background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:26px 28px; max-width:640px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:4px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.field input, .field select{
  border:1px solid var(--line-strong); border-radius:5px; padding:9px 11px;
  font-size:14.5px; font-family:inherit; background:#fff; color:var(--ink);
}
.field input:focus, .field select:focus{border-color:var(--accent);}
.field .hint{font-size:12px; color:var(--ink-faint);}
.form-actions{display:flex; gap:10px; margin-top:22px;}

.alert{padding:12px 16px; border-radius:5px; font-size:14px; margin-bottom:20px;}
.alert.error{background:var(--bad-soft); color:var(--bad); border:1px solid var(--bad);}
.alert.ok{background:var(--good-soft); color:var(--good); border:1px solid var(--good);}

/* ---------- login ---------- */
.login-card{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:38px 34px; width:100%; max-width:360px; box-shadow:0 8px 24px -12px rgba(28,32,36,.18);
}
.login-card .brand-mark{margin-bottom:14px;}
.login-card h1{font-size:1.25rem; margin:0 0 6px;}
.login-card p.sub{color:var(--ink-soft); font-size:13.5px; margin:0 0 22px;}
.login-card .btn{width:100%; justify-content:center; margin-top:6px;}

/* filters */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; align-items:end;}
.filters .field{margin-bottom:0;}
.filters select, .filters input{padding:7px 10px; font-size:13.5px;}