/* ============================================================
   ESTILO.CSS  ·  Painel Wmup  ·  tema escuro
   ============================================================ */
:root{
  --bg:#0D0D0D; --card:#141414; --card2:#1A1A1A; --line:#262626;
  --coral:#ED4A37; --coral2:#D85A30; --amber:#FEC52B; --amber2:#F5B82E;
  --txt:#F4EFE8; --txt2:#A89C8B; --txt3:#6E6457;
  --green:#3DBE78; --red:#E2554B;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--txt);
  font-family:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;font-size:15px}
a{color:inherit;text-decoration:none}
.sora{font-family:'Sora',sans-serif}
.mono{font-family:'JetBrains Mono',monospace}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}

/* ----------  LAYOUT  ---------- */
.wrap{display:flex;min-height:100vh}
.side{width:240px;min-width:240px;background:var(--card);border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.side .brand{padding:24px 22px 20px;border-bottom:1px solid var(--line)}
.side .logo{font-family:'Sora',sans-serif;font-size:25px;font-weight:800;letter-spacing:-1px}
.side .logo .w{color:var(--coral)} .side .logo .d{color:var(--amber)}
.side .tag{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--txt3);margin-top:3px;letter-spacing:1.5px}
.nav{padding:12px;flex:1}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;margin-bottom:3px;border-radius:10px;
  color:var(--txt2);font-weight:500;border-left:2px solid transparent;transition:.15s}
.nav a:hover{background:var(--card2);color:var(--txt)}
.nav a.on{background:linear-gradient(90deg,#ED4A3718,transparent);color:var(--txt);
  border-left:2px solid var(--coral);font-weight:600}
.nav a svg{width:18px;height:18px;flex-shrink:0}
.side .foot{padding:16px 20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:11}
.side .avatar{width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--coral),var(--amber));
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#0D0D0D;flex-shrink:0}
.side .foot small{color:var(--txt3);font-size:11px;display:block}

.main{flex:1;padding:28px 32px;max-width:1280px;margin:0 auto;width:100%}

/* ----------  TOPO  ---------- */
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.top h1{font-family:'Sora',sans-serif;font-size:23px;font-weight:700;letter-spacing:-.5px}
.top .sub{font-size:13px;color:var(--txt3);margin-top:2px}

/* ----------  BOTÕES  ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:10px;
  padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.btn-c{background:var(--coral);color:#fff} .btn-c:hover{background:#d33f2d}
.btn-a{background:var(--amber);color:#0D0D0D} .btn-a:hover{background:#e9b526}
.btn-g{background:var(--card2);color:var(--txt2);border:1px solid var(--line)} .btn-g:hover{color:var(--txt)}
.btn svg{width:15px;height:15px}

/* ----------  CARDS  ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--coral);
  border-radius:var(--radius);padding:16px 18px}
.kpi.amber{border-left-color:var(--amber)} .kpi.green{border-left-color:var(--green)}
.kpi.red{border-left-color:var(--red)}
.kpi .l{font-size:12px;color:var(--txt2);margin-bottom:7px}
.kpi .v{font-family:'Sora',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.5px}

/* ----------  PILLS / BADGES  ---------- */
.pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap;letter-spacing:.3px}
.p-amber{background:#FEC52B22;color:var(--amber)} .p-coral{background:#ED4A3722;color:var(--coral)}
.p-green{background:#3DBE7822;color:var(--green)} .p-red{background:#E2554B22;color:var(--red)}
.p-gray{background:#A89C8B22;color:var(--txt2)}

/* ----------  TABELAS  ---------- */
table{width:100%;border-collapse:collapse}
thead tr{background:var(--card2)}
th{text-align:left;padding:12px 16px;font-size:11px;color:var(--txt3);font-weight:600;
  text-transform:uppercase;letter-spacing:.5px}
td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px}
tbody tr:hover{background:var(--card2)}
.tr-right{text-align:right}

/* ----------  FORMULÁRIOS  ---------- */
label{font-size:12px;color:var(--txt2);display:block;margin-bottom:6px;font-weight:500}
input,select,textarea{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;color:var(--txt);font-size:14px;font-family:inherit;transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--coral)}
textarea{resize:vertical;min-height:80px}
.field{margin-bottom:14px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}

/* ----------  LOGIN  ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:36px 32px}
.login-box .logo{font-family:'Sora',sans-serif;font-size:32px;font-weight:800;text-align:center;margin-bottom:6px;letter-spacing:-1px}
.err{background:#E2554B18;border:1px solid #E2554B40;color:var(--red);
  padding:11px 14px;border-radius:10px;font-size:13px;margin-bottom:16px}
.ok{background:#3DBE7818;border:1px solid #3DBE7840;color:var(--green);
  padding:11px 14px;border-radius:10px;font-size:13px;margin-bottom:16px}

/* ----------  AGENDA  ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .dow{text-align:center;font-size:11px;color:var(--txt3);font-weight:600;padding:4px 0}
.cal .cell{min-height:64px;border-radius:9px;padding:6px;background:var(--card2);border:1px solid var(--line)}
.cal .cell.empty{background:transparent;border-color:transparent}
.cal .cell.today{background:#ED4A3718;border-color:var(--coral)}
.cal .cell .num{font-size:11px;color:var(--txt2);font-weight:500;margin-bottom:3px}
.cal .cell.today .num{color:var(--coral);font-weight:700}
.ev{font-size:9px;border-radius:4px;padding:2px 4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-coral{background:#ED4A3722;color:var(--coral)} .ev-amber{background:#FEC52B22;color:var(--amber)}
.ev-red{background:#E2554B22;color:var(--red)}

/* ----------  PROGRESSO  ---------- */
.bar{height:6px;background:var(--card2);border-radius:6px;overflow:hidden;margin:8px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--coral),var(--amber));border-radius:6px}

/* ----------  UTIL  ---------- */
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.muted{color:var(--txt3);font-size:12px}
.mt{margin-top:18px} .mb{margin-bottom:18px}
.flash{padding:11px 16px;border-radius:10px;font-size:13px;margin-bottom:16px;
  background:#3DBE7818;border:1px solid #3DBE7840;color:var(--green)}
.acts a{color:var(--txt3);margin-left:12px;font-size:13px}
.acts a:hover{color:var(--coral)}
.empty{text-align:center;color:var(--txt3);padding:40px 20px;font-size:14px}

@media print{
  .side,.top,.btn,.acts,.no-print{display:none!important}
  .main{padding:0;max-width:100%}
  body{background:#fff;color:#000}
  .card{border:1px solid #ccc}
}
@media(max-width:820px){
  .side{position:fixed;z-index:50;transform:translateX(-100%);transition:.25s}
  .side.open{transform:none}
  .main{padding:18px}
}