*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --o:#ff5c00;--o2:#ff7a2b;--o3:#ff9a4d;
  --ol:rgba(255,92,0,.08);--om:rgba(255,92,0,.18);
  --w:#ffffff;--bg:#f4f5f7;
  --ink:#111111;--ink2:#333333;--muted:#888888;--muted2:#aaaaaa;
  --border:#e8e8e8;--border2:#d0d0d0;
  --g:#00c37a;--g2:#e6fff4;
  --b:#3b82f6;--b2:#eff6ff;
  --r:#ef4444;--r2:#fef2f2;
  --y:#f59e0b;--y2:#fffbeb;
  --sidebar:220px;
}
html{font-size:15px;height:100%}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);min-height:100%;-webkit-font-smoothing:antialiased}

a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ===== TOPBAR ===== */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:56px;background:var(--w);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 1.5rem;gap:1rem;
  box-shadow:0 1px 8px rgba(0,0,0,.05);
}
.tb-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1rem;margin-right:.5rem}
.tb-logo-icon{
  width:30px;height:30px;border-radius:7px;background:var(--o);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:800;color:#fff;flex-shrink:0;
}
.tb-app-name{font-size:.82rem;font-weight:600;background:var(--bg);padding:.3rem .8rem;border-radius:6px;border:1px solid var(--border)}
.tb-right{display:flex;align-items:center;gap:.8rem;margin-left:auto}
.tb-notif{
  position:relative;width:36px;height:36px;border-radius:50%;
  background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1rem;
}
.tb-notif-badge{
  position:absolute;top:0;right:0;min-width:16px;height:16px;padding:0 3px;border-radius:50%;
  background:var(--r);color:#fff;font-size:.55rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--w);
}
.tb-avatar{
  width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--o),var(--o2));
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:#fff;
}
.tb-user{display:flex;align-items:center;gap:.6rem;cursor:pointer;position:relative}
.tb-user-name{font-size:.82rem;font-weight:700}
.tb-user-role{font-size:.68rem;color:var(--muted)}
.tb-menu-btn{display:none;background:none;border:none;cursor:pointer;font-size:1.3rem;padding:4px}
.tb-dropdown{
  position:absolute;top:46px;right:0;background:#fff;border:1px solid var(--border);
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:180px;overflow:hidden;display:none;z-index:400;
}
.tb-dropdown.open{display:block}
.tb-dropdown button, .tb-dropdown a{
  display:block;width:100%;text-align:left;padding:.65rem 1rem;background:none;border:none;font-size:.82rem;cursor:pointer;color:var(--ink);
}
.tb-dropdown button:hover, .tb-dropdown a:hover{background:var(--bg)}
.notif-panel{
  position:absolute;top:46px;right:0;background:#fff;border:1px solid var(--border);
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);width:320px;max-height:400px;overflow-y:auto;display:none;z-index:400;
}
.notif-panel.open{display:block}
.notif-item{padding:.8rem 1rem;border-bottom:1px solid var(--border);font-size:.78rem;white-space:pre-line}
.notif-item.unread{background:var(--ol)}
.notif-empty{padding:1.2rem;text-align:center;color:var(--muted);font-size:.8rem}

/* ===== LAYOUT ===== */
.layout{display:flex;margin-top:56px;min-height:calc(100vh - 56px)}
.sidebar{
  width:var(--sidebar);flex-shrink:0;background:var(--w);border-right:1px solid var(--border);
  position:fixed;top:56px;left:0;bottom:0;z-index:200;overflow-y:auto;transition:transform .25s;
}
.sidebar-section{padding:1rem .8rem}
.sidebar-label{font-size:.62rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:0 .6rem;margin-bottom:.4rem}
.nav-item{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:8px;
  font-size:.85rem;font-weight:600;color:var(--ink2);cursor:pointer;margin-bottom:2px;border-left:3px solid transparent;
}
.nav-item:hover{background:var(--bg)}
.nav-item.active{background:var(--ol);color:var(--o);border-left-color:var(--o)}
.nav-icon{width:18px;text-align:center;flex-shrink:0}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:190;display:none}
.sidebar-overlay.open{display:block}

.main{flex:1;margin-left:var(--sidebar);padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem;max-width:100%}

/* ===== PAGE HEADER ===== */
.page-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.page-title{font-size:1.3rem;font-weight:800}
.page-sub{font-size:.78rem;color:var(--muted);margin-top:2px}
.header-actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* ===== BUTTONS ===== */
.btn{
  padding:.55rem 1.1rem;border-radius:7px;font-weight:700;font-size:.82rem;border:1.5px solid transparent;
  cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:transform .1s,box-shadow .15s;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--o);color:#fff;box-shadow:0 4px 12px rgba(255,92,0,.25)}
.btn-primary:hover{background:var(--o2)}
.btn-secondary{background:#fff;border-color:var(--border2);color:var(--ink)}
.btn-secondary:hover{background:var(--bg)}
.btn-danger{background:var(--r2);color:var(--r);border-color:var(--r2)}
.btn-danger:hover{background:#fde2e2}
.btn-success{background:var(--g2);color:var(--g);border-color:var(--g2)}
.btn-success:hover{background:#d3ffee}
.btn-sm{padding:.35rem .7rem;font-size:.74rem}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ===== KPI GRID ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.kpi{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.1rem;transition:transform .15s,box-shadow .15s}
.kpi:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.kpi-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.kpi-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1rem}
.kpi-icon.orange{background:var(--ol);color:var(--o)}
.kpi-icon.green{background:var(--g2);color:var(--g)}
.kpi-icon.blue{background:var(--b2);color:var(--b)}
.kpi-icon.red{background:var(--r2);color:var(--r)}
.kpi-label{font-size:.72rem;color:var(--muted);font-weight:600}
.kpi-value{font-size:1.6rem;font-weight:900}

/* ===== CARDS ===== */
.card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:.6rem}
.card-title{font-size:.95rem;font-weight:800}
.card-body{padding:1.2rem}

/* ===== TABLES ===== */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.82rem}
th{text-align:left;text-transform:uppercase;font-size:.66rem;letter-spacing:.04em;color:var(--muted);background:var(--bg);padding:.7rem 1rem;white-space:nowrap}
td{padding:.75rem 1rem;border-bottom:1px solid var(--border);white-space:nowrap}
tr:hover td{background:rgba(255,92,0,.02)}
.empty-row td{text-align:center;color:var(--muted);padding:2rem}

/* ===== STATUS PILLS ===== */
.status{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:20px;font-size:.72rem;font-weight:700}
.status-dot{width:6px;height:6px;border-radius:50%}
.s-pendente{background:var(--y2);color:#b45309}
.s-pendente .status-dot{background:var(--y)}
.s-pago{background:var(--g2);color:#047857}
.s-pago .status-dot{background:var(--g)}
.s-atrasado{background:var(--r2);color:#b91c1c}
.s-atrasado .status-dot{background:var(--r)}
.s-ativo{background:var(--b2);color:#1d4ed8}
.s-ativo .status-dot{background:var(--b)}
.s-quitado{background:var(--g2);color:#047857}
.s-quitado .status-dot{background:var(--g)}
.s-cancelado{background:var(--bg);color:var(--muted)}
.s-cancelado .status-dot{background:var(--muted2)}

/* ===== FORMS ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:.35rem}
.form-group.full{grid-column:1/-1}
.form-label{font-size:.76rem;font-weight:700;color:var(--ink2)}
.form-input,.form-select,.form-textarea{
  border:1.5px solid var(--border);border-radius:7px;padding:.6rem .8rem;font-size:.85rem;font-family:inherit;background:#fff;color:var(--ink);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;border-color:var(--o);box-shadow:0 0 0 3px rgba(255,92,0,.08);
}
.form-hint{font-size:.7rem;color:var(--muted)}
.form-error{font-size:.7rem;color:var(--r)}
.form-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.5rem}

/* ===== ALERTS ===== */
.alert{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem 1rem;border-radius:10px;font-size:.8rem}
.alert-orange{background:var(--ol);color:#9a3a00}
.alert-red{background:var(--r2);color:#b91c1c}
.alert-green{background:var(--g2);color:#047857}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:500;padding:1rem}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:14px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.3rem;border-bottom:1px solid var(--border)}
.modal-title{font-weight:800;font-size:1rem}
.modal-close{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--muted)}
.modal-body{padding:1.3rem}

/* ===== FILTER BAR ===== */
.filter-bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.filter-bar .form-input,.filter-bar .form-select{min-width:160px}

/* ===== LOGIN PAGE ===== */
.login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:1.5rem;
}
.login-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:2.2rem;width:100%;max-width:380px;box-shadow:0 20px 50px rgba(0,0,0,.06)}
.login-logo{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-bottom:1.6rem}
.login-logo-icon{width:52px;height:52px;border-radius:14px;background:var(--o);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:1.2rem}
.login-title{font-size:1.1rem;font-weight:800}
.login-sub{font-size:.78rem;color:var(--muted);text-align:center}
.login-form{display:flex;flex-direction:column;gap:1rem}

/* ===== UTILITIES ===== */
.text-muted{color:var(--muted)}
.text-right{text-align:right}
.mt-1{margin-top:1rem}
.hidden{display:none!important}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .tb-menu-btn{display:block}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0;padding:1rem}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .tb-app-name,.tb-user-role{display:none}
}
@media (max-width:480px){
  .kpi-grid{grid-template-columns:1fr}
  .page-header{align-items:flex-start}
}