/* ===== RotaFlex - design system ===== */
:root{
  --bg:#eef1f5; --surface:#ffffff; --ink:#151a21; --muted:#6b7480;
  --line:#e3e7ec; --line-2:#eef1f4;
  --accent:#1d4ed8; --accent-ink:#ffffff; --accent-soft:#eaf0ff;
  --topbar:#141b26; --topbar-ink:#e7ecf3;
  --ok-bg:#e7f6ec; --ok:#12703a;
  --warn-bg:#fdf3e0; --warn:#9a5b00;
  --bad-bg:#fdeceb; --bad:#c02a22;
  --crit-bg:#3a0b0b; --crit:#ffd9d5;
  --neutral-bg:#eceff2; --neutral:#5b6570;
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:22px; letter-spacing:-.01em; margin:4px 0 18px}
h3{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:26px 0 10px; font-weight:600}
.muted{color:var(--muted); font-size:13px}
svg{flex:none}

/* layout */
.wrap{max-width:1160px; margin:0 auto; padding:24px 22px 60px}

/* topbar */
.topbar{background:var(--topbar); color:var(--topbar-ink); position:sticky; top:0; z-index:50; box-shadow:0 1px 0 rgba(255,255,255,.06)}
.topbar .wrap{max-width:1160px; margin:0 auto; padding:0 22px; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.brand{display:inline-flex; align-items:center; gap:9px; color:#fff!important; font-weight:700; font-size:16px; letter-spacing:-.01em; text-decoration:none!important}
.brand .mark{width:26px; height:26px; display:grid; place-items:center; background:linear-gradient(135deg,#2f6bff,#1d4ed8); border-radius:8px}
.nav{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.nav a{display:inline-flex; align-items:center; gap:7px; color:var(--topbar-ink)!important; text-decoration:none!important;
  padding:7px 11px; border-radius:9px; font-weight:500; font-size:13.5px; opacity:.85; transition:.15s}
.nav a:hover{background:rgba(255,255,255,.09); opacity:1}
.nav .who{opacity:.7; padding:7px 6px; font-size:13px}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer; font-size:13.5px; font-weight:500; line-height:1;
  transition:.15s; text-decoration:none!important; white-space:nowrap}
.btn:hover{border-color:#c7ced7; background:#fbfcfd}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.primary:hover{background:#1a44be; border-color:#1a44be}
.btn.small{padding:6px 10px; font-size:12.5px; border-radius:8px}
.btn.ghost{border-color:transparent; background:transparent}
.btn.ghost:hover{background:var(--line-2)}
.btn svg{width:15px; height:15px}
.nav .btn{color:#fff}

/* cards */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin-bottom:16px}

/* forms */
label{display:block; font-size:12.5px; font-weight:600; color:#3a424d; margin:12px 0 5px}
input,textarea,select{width:100%; padding:9px 11px; border:1px solid #cdd4dd; border-radius:9px; font-size:14px; background:#fff; color:var(--ink); transition:.15s}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(29,78,216,.14)}
input[readonly]{background:#f3f5f8; color:#525b66}
.row{display:flex; gap:14px; flex-wrap:wrap}
.row>div{flex:1; min-width:180px}

/* tables */
.table-wrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow-x:auto}
table{width:100%; border-collapse:collapse; min-width:560px}
th,td{text-align:left; padding:12px 15px; font-size:13.5px; border-bottom:1px solid var(--line-2)}
th{position:sticky; top:0; background:#fafbfc; color:#4a525d; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#f8fafc}
td .btn{margin:0 2px 0 0}

/* badges */
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.01em; white-space:nowrap}
.OK{background:var(--ok-bg); color:var(--ok)}
.PODE_ECONOMIZAR{background:var(--warn-bg); color:var(--warn)}
.DIVERGENTE{background:var(--bad-bg); color:var(--bad)}
.VALOR_INSUFICIENTE{background:var(--crit-bg); color:var(--crit)}
.SEM_ROTA,.ERRO_API,.NAO_CONSULTADO{background:var(--neutral-bg); color:var(--neutral)}

/* stat cards (painel) */
.stats{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); text-align:center}
.stat .n{font-size:28px; font-weight:750; letter-spacing:-.02em; line-height:1}
.stat .l{margin-top:8px}

/* page head */
.page-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:4px}

/* auth screens */
.auth{max-width:400px; margin:6vh auto 0}
.auth .card{padding:26px}

/* loading overlay */
.overlay{position:fixed; inset:0; background:rgba(15,20,28,.5); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:1000}
.overlay.show{display:flex}
.overlay .box{background:#fff; padding:26px 34px; border-radius:16px; text-align:center; box-shadow:0 16px 50px rgba(0,0,0,.28)}
.spinner{width:40px; height:40px; margin:0 auto 14px; border:4px solid #e6e9ee; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-loading{opacity:.7; pointer-events:none}

@media (max-width:640px){
  .wrap{padding:18px 14px 48px}
  th{position:static}
  .nav a span.lbl{display:none}   /* no mobile, so icones no menu */
  .nav .who{display:none}
}