*{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#D0D8E0;--navy2:#FFFFFF;
  --accent:#00957A;--accent2:#0070D6;--amber:#C87800;--red:#C8203A;--purple:#7C5CDA;--orange:#C85A00;
  --text:#1A2332;--text2:#3D5470;--text3:#7A90A8;
  --border:rgba(0,0,0,0.10);--border2:rgba(0,0,0,0.15);
  --card:rgba(0,0,0,0.03);--card2:rgba(0,0,0,0.06);
  --font:'DM Sans',sans-serif;--mono:'DM Mono',monospace;
}
html,body{height:100%;background:var(--navy);color:var(--text);font-family:var(--font)}
.app{display:flex;height:100vh;overflow:hidden}

/* SIDEBAR */
.sidebar{width:238px;min-width:238px;background:#FFFFFF;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;box-shadow:2px 0 8px rgba(0,0,0,0.06)}
.logo{padding:20px 18px 16px;border-bottom:1px solid var(--border)}
.logo-mark{display:flex;align-items:center;gap:10px}
.logo-icon{width:34px;height:34px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.logo-text{font-size:14px;font-weight:600;color:var(--text);line-height:1.2}
.logo-sub{font-size:10px;color:var(--text3);letter-spacing:.07em;text-transform:uppercase;margin-top:1px}
.nav{padding:10px 0;flex:1}
.nav-section{padding:10px 18px 4px;font-size:11.5px;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 18px;font-size:14.5px;color:var(--text2);cursor:pointer;border-left:2px solid transparent;transition:all .15s;user-select:none}
.nav-item:hover{background:var(--card);color:var(--text)}
.nav-item.active{background:rgba(0,149,122,.10);color:var(--accent);border-left-color:var(--accent)}
.nav-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.sidebar-footer{padding:14px 18px;border-top:1px solid var(--border)}
.user-card{display:flex;align-items:center;gap:10px}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#4158D0,#C850C0);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.user-name{font-size:12px;font-weight:500;color:var(--text)}
.user-role{font-size:10px;color:var(--text3)}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{height:54px;min-height:54px;background:#FFFFFF;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:12px;box-shadow:0 2px 6px rgba(0,0,0,0.05)}
.page-title{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.badge-alert{background:rgba(200,32,58,.10);color:var(--red);border:1px solid rgba(200,32,58,.28);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:500;cursor:pointer;white-space:nowrap}
.badge-ok{background:rgba(0,149,122,.12);color:var(--accent);border:1px solid rgba(0,149,122,.24);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:500;white-space:nowrap}
.content{flex:1;overflow-y:auto;padding:22px}

/* SCREENS */
.screen{display:none}.screen.active{display:block}

/* STATS */
.stats-row{display:grid;gap:12px;margin-bottom:18px}
.stats-4{grid-template-columns:repeat(4,1fr)}
.stats-5{grid-template-columns:repeat(5,1fr)}
.stat-card{background:#FFFFFF;border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.stat-label{font-size:11.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.stat-value{font-size:21px;font-weight:600;color:var(--text);font-family:var(--mono)}
.stat-sub{font-size:11px;color:var(--text3);margin-top:3px}

/* SECTION */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:10px}
.section-title{font-size:12.5px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:.07em}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 15px;font-size:12px;font-weight:500;border-radius:8px;border:none;cursor:pointer;font-family:var(--font);transition:all .15s;white-space:nowrap}
.btn:hover{opacity:.85}
.btn-primary{background:var(--accent);color:#000}
.btn-secondary{background:#F0F4F8;color:var(--text);border:1px solid var(--border2)}
.btn-sm{padding:4px 9px;font-size:11px;border-radius:6px}
.btn-danger{background:rgba(200,32,58,.10);color:var(--red);border:1px solid rgba(200,32,58,.28)}
.btn-amber{background:rgba(200,120,0,.10);color:var(--amber);border:1px solid rgba(200,120,0,.28)}
.btn-edit{background:rgba(0,112,214,.10);color:var(--accent2);border:1px solid rgba(0,112,214,.25)}
.btn-save{background:rgba(0,149,122,.10);color:var(--accent);border:1px solid rgba(0,149,122,.28)}
.action-btns{display:flex;gap:5px;flex-wrap:nowrap}
.tr-cancelada td{opacity:.68;text-decoration:none;background:rgba(200,32,58,.035)!important}
.btn-muted{background:rgba(0,0,0,.06);color:var(--text2);border:1px solid var(--border2)}
.oc-visual-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px 0;flex-wrap:wrap}
.oc-filter-tabs{display:flex;gap:4px;background:#FFFFFF;border:1px solid var(--border);border-radius:12px;padding:4px;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.oc-filter-tab{border:none;background:transparent;color:var(--text2);font-family:var(--font);font-size:12px;font-weight:600;border-radius:9px;padding:7px 12px;cursor:pointer;transition:all .15s;white-space:nowrap}
.oc-filter-tab:hover{background:#F0F4F8;color:var(--text)}
.oc-filter-tab.on{background:rgba(0,149,122,.12);color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.oc-filter-tab.danger.on{background:rgba(200,32,58,.10);color:var(--red)}
.oc-legend{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text3);flex-wrap:wrap}
.oc-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle}
.oc-dot.green{background:var(--accent)}
.oc-dot.red{background:var(--red)}
.oc-status-card{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.oc-status-card.ativa{background:rgba(0,149,122,.10);color:#006B57;border-color:rgba(0,149,122,.26)}
.oc-status-card.cancelada{background:rgba(200,32,58,.10);color:var(--red);border-color:rgba(200,32,58,.30)}
.oc-num-wrap{display:flex;align-items:center;gap:7px;white-space:nowrap}
.oc-cancel-tag{font-size:9px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 6px;background:rgba(200,32,58,.10);color:var(--red);border:1px solid rgba(200,32,58,.22);font-weight:700}
.oc-motivo{font-size:10.5px;color:var(--red);margin-top:3px;line-height:1.25;max-width:260px;white-space:normal}
.tr-cancelada td{opacity:.76;text-decoration:none;background:rgba(200,32,58,.045)!important}
.tr-cancelada:hover td{background:rgba(200,32,58,.075)!important}
.oc-card-mobile-hint{font-size:11px;color:var(--text3)}

/* TABLE */
.table-wrap{background:#FFFFFF;border:1px solid var(--border);border-radius:12px;overflow:auto;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
table{width:100%;border-collapse:collapse}
thead th{background:#F5F8FB;padding:9px 11px;text-align:left;font-size:11.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:9px 11px;font-size:12px;color:var(--text);border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#F0F4F8}

/* CHIPS */
.chip{display:inline-flex;align-items:center;padding:2px 7px;border-radius:20px;font-size:11px;font-weight:600;font-family:var(--mono);white-space:nowrap}
.cg{background:rgba(0,149,122,.12);color:#006B57;border:1px solid rgba(0,149,122,.30)}
.ca{background:rgba(200,120,0,.12);color:#8B5000;border:1px solid rgba(200,120,0,.30)}
.cr{background:rgba(200,32,58,.12);color:#8B0018;border:1px solid rgba(200,32,58,.30)}
.cb{background:rgba(0,112,214,.12);color:#003D99;border:1px solid rgba(0,112,214,.30)}
.cgr{background:rgba(0,0,0,.06);color:var(--text2);border:1px solid var(--border2)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:none;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal{background:#FFFFFF;border:1px solid var(--border2);border-radius:16px;padding:24px;width:540px;max-height:88vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,0.18)}
.modal-title{font-size:15px;font-weight:600;margin-bottom:20px;color:var(--text);display:flex;align-items:center;gap:8px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group.full{grid-column:1/-1}
label{font-size:13px;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
input,select,textarea{background:#F5F8FB;border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:var(--font);font-size:13px;padding:9px 12px;outline:none;transition:border-color .15s;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:#FFFFFF}
select option{background:#FFFFFF;color:var(--text)}
input[type=date]{color-scheme:light}
textarea{resize:vertical;min-height:65px}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}

/* CONFIRM MODAL */
.confirm-modal{width:380px;text-align:center}
.confirm-icon{font-size:36px;margin-bottom:12px}
.confirm-msg{font-size:13px;color:var(--text2);margin-bottom:4px}
.confirm-detail{font-size:12px;color:var(--text3);margin-bottom:20px}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;background:#FFFFFF;border:1px solid var(--border2);border-radius:10px;padding:12px 18px;font-size:13px;color:var(--text);z-index:9999;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);transform:translateY(80px);opacity:0;transition:all .3s;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1}
.toast.success .toast-dot{background:var(--accent)}
.toast.error .toast-dot{background:var(--red)}
.toast-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* LAYOUT HELPERS */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card-block{background:#FFFFFF;border:1px solid var(--border);border-radius:12px;padding:15px 17px;margin-bottom:15px;box-shadow:0 2px 6px rgba(0,0,0,0.04)}
.alert-bar{background:rgba(200,120,0,.08);border:1px solid rgba(200,120,0,.25);border-radius:10px;padding:11px 15px;margin-bottom:15px;font-size:13px;color:var(--amber);display:flex;align-items:center;gap:10px}
.progress-bar-wrap{background:rgba(255,255,255,.07);border-radius:4px;height:6px;margin-top:5px}
.progress-bar{height:6px;border-radius:4px;background:var(--accent)}
.progress-bar.warn{background:var(--amber)}
.progress-bar.danger{background:var(--red)}
.divider{height:1px;background:var(--border);margin:16px 0}
.mono{font-family:var(--mono)}
.empty{text-align:center;padding:26px;font-size:13px;color:var(--text3)}

/* FILTER BAR */
.filter-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:#FFFFFF;border:1px solid var(--border);border-radius:12px;padding:12px 15px;margin-bottom:16px;box-shadow:0 2px 6px rgba(0,0,0,0.04)}
.filter-bar label{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;font-weight:600}
.filter-bar select,.filter-bar input[type=date]{font-size:12px;padding:6px 9px}

/* TABS */
.tab-row{display:flex;gap:3px;background:#F0F4F8;border:1px solid var(--border);border-radius:10px;padding:4px;margin-bottom:14px}
.tab{padding:7px 13px;font-size:12px;font-weight:500;border-radius:7px;cursor:pointer;color:var(--text2);border:none;background:none;font-family:var(--font);transition:all .15s}
.tab.on{background:#FFFFFF;color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,0.1)}
.leg{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:9px}
.li{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text2)}
.ld{width:8px;height:8px;border-radius:2px;flex-shrink:0}


/* LOGO IMAGE */
.logo-img{width:200px;object-fit:contain;mix-blend-mode:multiply}
.sidebar .logo-mark{gap:0}

/* PRINT OC HALF A4 PORTRAIT */
@media print{
  body *{visibility:hidden!important}
  #oc-print-area,#oc-print-area *{visibility:visible!important}
  #oc-print-area{position:fixed;left:0;top:0;width:105mm;min-height:148mm}
}

/* PARCELAS GRID */
.parcelas-wrap{background:rgba(0,112,214,.05);border:1px solid rgba(0,112,214,.20);border-radius:10px;padding:12px 14px;margin-top:4px}
.parcelas-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.parcelas-title{font-size:10px;font-weight:600;color:var(--accent2);text-transform:uppercase;letter-spacing:.06em}
.parcela-row{display:grid;grid-template-columns:32px 1fr 1fr auto;gap:8px;align-items:center;margin-bottom:7px}
.parcela-row:last-child{margin-bottom:0}
.parcela-num{font-size:11px;font-weight:600;font-family:var(--mono);color:var(--text3);text-align:center}
.parcela-row input{font-size:12px;padding:6px 9px}
.parcela-total-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:9px;border-top:1px solid rgba(0,153,255,.18)}
.parcela-diff{font-size:11px;font-weight:600;font-family:var(--mono)}
.parcela-diff.ok{color:var(--accent)}
.parcela-diff.err{color:var(--red)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:99px}
.cq-check{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text2);cursor:pointer;padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--card);user-select:none}
.cq-check:hover{background:var(--card2)}
.cq-check input{accent-color:var(--accent)}
.cq-card{background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden}
.cq-card-header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
.cq-card-header:hover{background:var(--card)}
.cq-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
.cq-badge.oc{background:rgba(0,112,214,.12);color:var(--accent2)}
.cq-badge.nf{background:rgba(0,149,122,.12);color:var(--accent)}
.cq-badge.tit{background:rgba(200,120,0,.12);color:var(--amber)}
.cq-badge.fat{background:rgba(124,92,218,.12);color:var(--purple)}
.cq-row{display:grid;gap:4px;padding:10px 14px 12px}
.cq-row-item{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:3px 0;border-bottom:1px solid var(--border)}
.cq-row-item:last-child{border-bottom:none}
.cq-label{color:var(--text3);font-size:11px;min-width:120px}
.cq-val{color:var(--text);font-weight:500;text-align:right}
.cq-goto{font-size:11px;color:var(--accent2);font-weight:600;cursor:pointer;padding:2px 8px;border-radius:5px;border:1px solid rgba(0,112,214,.25);background:rgba(0,112,214,.06)}
.cq-goto:hover{background:rgba(0,112,214,.14)}
.cq-resumo-chip{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.desp-ok{background:rgba(0,149,122,.10);color:var(--accent);font-weight:700}
.desp-nok{background:rgba(200,80,80,.10);color:var(--red);font-weight:700}
.desp-vazio{color:var(--text3);font-size:11px}
.desp-media-ok{background:rgba(0,149,122,.15);color:var(--accent);font-weight:800;font-size:13px}
.desp-media-nok{background:rgba(200,80,80,.15);color:var(--red);font-weight:800;font-size:13px}
#tb-despesas th{font-size:11px;padding:8px 10px;white-space:nowrap}
#tb-despesas td{font-size:12px;padding:7px 10px;white-space:nowrap;text-align:right}
#tb-despesas td:first-child{text-align:left;font-weight:700;font-family:var(--mono);color:var(--accent2)}
#tb-despesas td:nth-child(2){text-align:right;color:var(--text3);font-size:11px}
.rm-total-row td{font-weight:800;font-size:13px;border-top:2px solid var(--border);background:var(--card)}
.rm-cat-label{font-weight:600;font-size:12px;color:var(--text)}
.rm-zero{color:var(--text3);font-size:11px}
.rm-mes-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:8px}
.rm-mes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:12px}
.rm-mes-item{background:var(--card);border-radius:8px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center}
.rm-mes-item-label{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.rm-mes-item-val{font-size:13px;font-weight:700;font-family:var(--mono);color:var(--text)}
.rm-mes-total{background:rgba(0,112,214,.07);border:1px solid rgba(0,112,214,.2)}
#tb-relmensal th{font-size:11px;padding:8px 10px;white-space:nowrap;text-align:right}
#tb-relmensal th:first-child{text-align:left}
#tb-relmensal td{font-size:12px;padding:7px 10px;white-space:nowrap;text-align:right;font-family:var(--mono)}
#tb-relmensal td:first-child{text-align:left;font-family:var(--font);font-weight:600;color:var(--text)}
</style>
/* LOGIN */
.login-wrap{position:fixed;inset:0;background:linear-gradient(135deg,#E8F4F1 0%,#EEF3F8 50%,#E8EFF8 100%);display:flex;align-items:center;justify-content:center;z-index:9999}
.login-box{background:#FFFFFF;border:1px solid var(--border2);border-radius:20px;padding:36px 40px;width:380px;box-shadow:0 24px 64px rgba(0,0,0,.15)}
.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.login-logo-icon{width:42px;height:42px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.login-title{font-size:17px;font-weight:600;color:var(--text)}
.login-sub{font-size:11px;color:var(--text3);margin-top:2px}
.login-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.login-field label{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.login-field input{background:#F5F8FB;border:1px solid var(--border2);border-radius:9px;color:var(--text);font-family:var(--font);font-size:13px;padding:10px 13px;outline:none;transition:border-color .15s;width:100%}
.login-field input:focus{border-color:var(--accent)}
.login-btn{width:100%;padding:11px;background:var(--accent);color:#000;font-size:13px;font-weight:600;border:none;border-radius:9px;cursor:pointer;font-family:var(--font);margin-top:6px;transition:opacity .15s}
.login-btn:hover{opacity:.85}
.login-err{background:rgba(200,32,58,.10);border:1px solid rgba(200,32,58,.28);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--red);margin-bottom:14px;display:none}
/* LOGOUT btn */
.btn-logout{display:flex;align-items:center;gap:7px;width:100%;padding:7px 10px;border-radius:8px;border:1px solid rgba(200,32,58,.25);background:rgba(200,32,58,.07);color:var(--red);font-size:11px;font-weight:500;cursor:pointer;font-family:var(--font);margin-top:10px;transition:all .15s}
.btn-logout:hover{background:rgba(200,32,58,.15)}
</style>