@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f5f7fb;
  --bg2: #eef3fa;
  --panel: #fff;
  --card: #fff;
  --line: #e0e6ef;
  --text: #111c32;
  --muted: #617089;
  --blue: #1265eb;
  --gold: #428eff;
  --green: #0b936b;
}
html { scroll-behavior: smooth }
body { background:#f5f7fb !important; color:#111c32 !important; font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif; font-size:15px; }
button,input,select,textarea { font:inherit }
::selection { background:#c9ddff; color:#071a3b }

/* Login: the same white header, midnight canvas and electric blue as PROTEC Solutions. */
.login-screen { display:block; min-height:100svh; padding:0; background:#fff }
.login-shell { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(440px,.92fr); width:100%; min-height:100svh; border:0; border-radius:0; box-shadow:none; overflow:visible }
.login-brand {
  position:relative; isolation:isolate; display:flex; flex-direction:column;
  align-items:flex-start; padding:clamp(32px,5vw,76px);
  background:radial-gradient(circle at 80% 48%,#183b78 0%,#10274b 28%,transparent 62%),linear-gradient(135deg,#080f20 6%,#102142 72%,#070d1b);
  color:#fff; overflow:hidden;
}
.login-brand::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.28; background:linear-gradient(145deg,transparent 48%,#447ed21f 48.1%,transparent 48.3%),radial-gradient(circle at 74% 55%,transparent 0 23%,#5e8bc625 23.1% 23.25%,transparent 23.4% 38%,#5e8bc618 38.1% 38.25%,transparent 38.4%) }
.login-logo { min-width:0; min-height:0; display:flex; align-items:center; gap:20px; background:none; padding:0; border-radius:0 }
.login-logo .protecReal { display:block; height:auto; width:220px; max-width:50%; filter:brightness(0) invert(1) }
.login-logo .brandDivider { height:56px; width:1px; flex:none; background:#adc8f05c }
.login-logo .maisvoltLogin { display:block; width:154px; max-width:39%; height:auto; border-radius:6px; border:1px solid #4e83c977; box-shadow:0 12px 28px #06142d55; }
.loginBrandBody { margin:auto 0; padding:56px 0 86px; position:relative; z-index:1 }
.login-brand .eyebrow { margin:0; color:#87b8ff; font-size:12px; letter-spacing:.18em; font-weight:800 }
.login-brand h2 { max-width:610px; font-size:clamp(50px,5.5vw,80px); line-height:1.02; letter-spacing:-.065em; margin:21px 0 27px; color:#fff !important; font-weight:800 }
.login-brand p { max-width:480px; font-size:clamp(17px,1.5vw,21px); line-height:1.6; color:#c4d0e2; margin:0 }
.login-brandMeta { margin-top:auto; font-size:11px; letter-spacing:.13em; color:#8fa7ca; font-weight:700 }
.loginAccess { display:flex; flex-direction:column; justify-content:center; min-width:0; background:#fff; padding:40px clamp(28px,6vw,105px) 24px }
.login-card { align-self:stretch; max-width:480px; margin:auto 0; padding:0; color:#111c32 }
.login-card .eyebrow { color:#1265eb; letter-spacing:.15em; font-size:12px; font-weight:800 }
.login-card h1 { margin:14px 0 12px; font-size:clamp(32px,3.3vw,44px); line-height:1.12; letter-spacing:-.05em; color:#111c32 !important }
.login-card .loginTitle span { position:relative; display:inline-block; background:linear-gradient(105deg,#0d52cb 8%,#277bea 55%,#66b8ff 100%); background-clip:text; -webkit-background-clip:text; color:transparent!important; }
.login-card .loginTitle span::after { content:""; position:absolute; left:3px; right:2px; bottom:-5px; height:3px; border-radius:4px; background:linear-gradient(90deg,#1265eb,#8fcaff); box-shadow:0 3px 13px #1265eb50; }
.login-card p { font-size:16px; color:#647188; margin:0 0 38px; line-height:1.5 }
.login-card label { display:block; font-size:14px; font-weight:700; color:#253451; margin:20px 0 8px }
.login-card input { display:block; width:100%; height:54px; border:1px solid #ccd6e4; border-radius:10px; background:#fff; color:#12213d; padding:0 15px; box-shadow:none; outline:none }
.login-card input:focus { border-color:#1265eb; box-shadow:0 0 0 4px #1265eb1a; outline:none }
.login-card input::placeholder { color:#99a6b9 }
.passwordField { position:relative }
.passwordField input { padding-right:90px }
.passwordField button { position:absolute; right:8px; top:7px; width:auto!important; height:40px; margin:0!important; padding:0 10px; border:0; border-radius:7px; background:transparent; color:#385a83; font-size:13px; font-weight:700; cursor:pointer }
.passwordField button:hover,.passwordField button:focus-visible { background:#eff5ff; color:#1265eb }
.login-card .btn.primary { margin-top:27px; height:54px; justify-content:space-between; display:flex; align-items:center; padding:0 20px; background:#1265eb !important; border-color:#1265eb !important; color:#fff !important; border-radius:10px }
.login-card .btn.primary:hover { background:#0751c7 !important; border-color:#0751c7 !important; transform:translateY(-1px); box-shadow:0 12px 25px #1265eb30 }
.login-card .btn.primary span { font-size:21px; line-height:1; font-weight:400 }
.login-card .workspaceStatus { min-height:25px; margin-top:13px; color:#3b5d84; font-size:14px }
.loginAccessFoot { margin-top:auto; padding-top:50px; color:#8a96a9; font-size:12px }

/* Working surface */
.wrap { display:grid; grid-template-columns:224px minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); gap:0 25px; max-width:none; width:100%; margin:0; padding:0 30px 50px; align-items:start }
.top { grid-column:1/-1; grid-row:1; min-width:0; min-height:138px; margin:0 -30px 20px; padding:14px 30px; border:0; border-bottom:1px solid #e4e9f0; border-radius:0; background:#fff; box-shadow:none; display:flex; align-items:center }
.top h1 { font-size:25px; line-height:1.2; letter-spacing:-.045em; margin:4px 0 2px; color:#101c33 !important }
.top .eyebrow { color:#1265eb; letter-spacing:.13em; font-weight:800 }
.top .sub { font-size:13px; color:#6a7890; margin:0; line-height:1.4 }
.top .brand { display:flex; flex-wrap:nowrap; gap:19px; align-items:center; justify-content:flex-end; flex:none }
.top .brand .logoWrap { display:grid; place-items:center; width:auto; height:auto; border:0; background:transparent !important; padding:0; box-shadow:none; min-width:0 }
.top .brand .protecReal { width:205px; max-width:205px; height:auto; filter:none }
.top .brand .brandDivider { height:70px; width:1px; flex:none; background:#dce5f2 }
.top .brand .maisvoltReal { width:123px; height:123px; max-width:123px; max-height:123px; object-fit:contain }
.accountbar { grid-column:2; grid-row:2; display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:9px; min-height:45px; margin:0 0 17px; padding:0 0 13px; background:none; border:0; border-bottom:1px solid #e4e9f0; border-radius:0; color:#617089; font-size:13px }
.accountbar strong { color:#203452 !important }
.accountbar .pill { border:1px solid #dbe7fa; background:#edf4ff; color:#2155a2; border-radius:6px; padding:5px 8px; font-size:11px; font-weight:800 }
.accountbar .btn { min-height:32px; padding:6px 10px; margin-left:5px; font-size:12px }
.nav { grid-column:1; grid-row:2/span 2; display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0; position:sticky; top:20px; padding:17px 12px; margin:0; border:1px solid #142f5a; border-radius:14px; background:linear-gradient(170deg,#0c1a34,#10294e 72%,#10213e); box-shadow:0 12px 30px #0f274520 }
.navCluster { display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; padding:12px 0; gap:2px; border:0; border-bottom:1px solid #d0e0ff1e; min-width:0 }
.navCluster:first-child { padding-top:0 }
.navCluster:last-child { border:0; padding-bottom:0 }
.navCluster>span { width:auto; display:block; margin:0 8px 8px; color:#8299bb; font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:800 }
.nav button { min-height:40px; text-align:left; padding:9px 12px; border:0!important; border-radius:8px; background:transparent!important; color:#c8d6ec!important; font-size:13px; font-weight:600; box-shadow:none; cursor:pointer; transition:background .16s,color .16s,transform .16s }
.nav button:hover { color:#fff!important; background:#ffffff18!important; transform:translateX(2px) }
.nav button.active { color:#fff!important; background:#1265eb!important; box-shadow:0 4px 14px #06162d50 }
.wrap>.tab { grid-column:2; grid-row:3; min-width:0 }
.wrap>.tab.active { animation:panelReveal .24s ease-out }
@keyframes panelReveal { from{opacity:.55;transform:translateY(5px)} to{opacity:1;transform:none} }
.eyebrow,.small { color:#67809e; letter-spacing:.09em; font-weight:800 }
.sectionHead h2,#financeiro .financeHeader h2,#seguranca h2 { color:#13223b; letter-spacing:-.045em; font-weight:800 }
.sectionHead p,#financeiro .financeHeader p { font-size:14px; color:#64748b; max-width:650px }
.grid { gap:12px }
.panel,.card { background:#fff!important; border:1px solid #e0e7f0!important; border-radius:12px; box-shadow:0 3px 14px #0b234508!important; }
.panel { padding:21px }
.card { padding:20px; min-height:122px }
.card .big { color:#142340!important; font-size:clamp(25px,2.4vw,35px); font-weight:800; letter-spacing:-.05em }
.card .small { color:#667b97!important; font-size:11px; letter-spacing:.08em }
.card .muted { color:#6b7b92!important; font-size:12px; line-height:1.55 }
#visao .kpis .card:first-child,#financeiro .financeGrid .card:first-child { background:linear-gradient(125deg,#0e1e3a,#163965)!important; border-color:#183c70!important; box-shadow:0 10px 24px #0a2b5d28!important }
#visao .kpis .card:first-child .small,#financeiro .financeGrid .card:first-child .small { color:#9fbff2!important }
#visao .kpis .card:first-child .big,#financeiro .financeGrid .card:first-child .big { color:#fff!important }
#visao .kpis .card:first-child .muted,#financeiro .financeGrid .card:first-child .muted { color:#bbcae1!important }
.section,.clubBrand { letter-spacing:-.035em; color:#142340!important }
.clubHero { background:linear-gradient(135deg,#f3f7ff,#eaf2ff)!important; border-color:#d8e5f9!important; position:relative; overflow:hidden }
.clubHero::after { content:""; position:absolute; right:-45px; top:-40px; width:175px; height:175px; border:1px solid #1265eb20; border-radius:50%; box-shadow:0 0 0 35px #1265eb08; pointer-events:none }
.clubBrand span { color:#1265eb }
.station,.row,.listItem,.securitySite { border-color:#e0e7ef!important; background:#fff!important; border-radius:9px }
.station { transition:background .15s,border-color .15s; }
.station:hover { background:#f7faff!important; border-color:#96bafa!important }
.btn,#field button[type="submit"],#financeiro .financeControls button { border:1px solid #cdd9e8!important; border-radius:8px; background:#fff!important; color:#1e3e6c!important; font-weight:700; min-height:42px; transition:background .16s,border-color .16s,box-shadow .16s,transform .16s }
.btn:hover,#financeiro .financeControls button:hover { background:#eff5ff!important; border-color:#8ab3f7!important; color:#104fae!important }
.btn.primary,#field button[type="submit"] { background:#1265eb!important; border-color:#1265eb!important; color:#fff!important }
.btn.primary:hover,#field button[type="submit"]:hover { background:#0751c7!important; border-color:#0751c7!important; color:#fff!important; box-shadow:0 8px 20px #1265eb29 }
.btn:active,#field button[type="submit"]:active { transform:translateY(1px) }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #83aefe; outline-offset:2px }
.btn:disabled,button:disabled { opacity:.5; box-shadow:none!important; transform:none!important }
.notice,.financeState,#seguranca .securityNote { border-radius:9px; background:#eff5ff; border-color:#d4e4fb; color:#38567d }
.emptyState,#financeiro .chartEmpty { border:1px dashed #ccd8e8; border-radius:9px; background:#f8faff; color:#64748b; padding:35px 22px }
#financeiro .financeGrid .card { background:#fff!important; border-color:#e0e7f0!important; color:#142340!important }
#financeiro .financeGrid .card:first-child { background:linear-gradient(125deg,#0e1e3a,#163965)!important; border-color:#183c70!important; color:#fff!important }
#financeiro .financeGrid .card:first-child .small { color:#9fbff2!important }
#financeiro .financeGrid .card:first-child .big { color:#fff!important }
#financeiro .financeGrid .card:first-child .muted { color:#bbcae1!important }
#financeiro .financeGrid .card .big { color:#142340 }
#financeiro .financePanel { padding:24px }
#financeiro .financePanel h3 { color:#142340; letter-spacing:-.025em }
#financeiro .financeChart { min-height:280px; display:block; overflow:visible; position:relative }
#financeiro .chartStrip { display:flex; flex-wrap:wrap; gap:28px; padding:3px 0 10px; color:#687c95 }
#financeiro .chartStrip>div { display:flex; align-items:baseline; gap:8px; min-width:0 }
#financeiro .chartStrip span { font-size:12px; white-space:nowrap }
#financeiro .chartStrip strong { font-size:13px; color:#203c66!important; font-variant-numeric:tabular-nums }
#financeiro .financeChart svg { display:block; width:100%; height:auto; touch-action:pan-y }
#financeiro .financeChart .chartTip { display:none; position:absolute; z-index:3; pointer-events:none; background:#102447; color:#fff; padding:9px 12px; border-radius:8px; box-shadow:0 8px 22px #091e3d33; font-size:12px; line-height:1.6; white-space:nowrap; transform:translate(-50%,-100%); }
#financeiro .financeChart .chartTip strong { display:block; color:#fff!important; font-size:14px }
#financeiro .financeChart .chartTip.active { display:block }
#financeiro .financeChart .chartTip span { color:#abc7f2 }
#financeiro .financeChart .chartTrack { stroke:#7ea7ee; stroke-width:1; stroke-dasharray:3 4; opacity:0; pointer-events:none }
#financeiro .financeChart .chartDot { fill:#1265eb; stroke:white; stroke-width:3; opacity:0; pointer-events:none }
#financeiro .financeChart svg.is-hovered .chartTrack,#financeiro .financeChart svg.is-hovered .chartDot { opacity:1 }
#financeiro .financeChart .chartPoint { cursor:crosshair; fill:transparent }
#financeiro .financeChart .chartPoint:focus { outline:none; fill:#1265eb }
#financeiro .financeChart .chartPoint:focus-visible { stroke:#fff; stroke-width:3 }
#financeiro .stationFinance { background:#fff; border-color:#e0e7f0; border-radius:10px; transition:border-color .15s,box-shadow .15s,transform .15s }
#financeiro .stationFinance:hover { border-color:#94b8f7; box-shadow:0 8px 22px #0e407a12; transform:translateY(-2px) }
#financeiro .stationFinance[aria-pressed="true"] { border:1px solid #1265eb; box-shadow:inset 3px 0 0 #1265eb; background:#f8fbff }
.hourChart { gap:5px; padding:20px 4px 0; min-height:165px; border-bottom:1px solid #dae4f1 }
.hourColumn { position:relative; grid-template-rows:1fr 23px; min-width:25px; height:145px; }
.hourBar { width:100%; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#5e9df4,#1b68d9); transition:height .32s ease,filter .15s ease; }
.hourColumn:hover .hourBar,.hourColumn:focus-visible .hourBar { filter:brightness(.85) }
.hourColumn.is-peak .hourBar { background:linear-gradient(180deg,#152f5d,#1265eb) }
.hourColumn::after { content:attr(data-detail); display:none; position:absolute; bottom:calc(100% - 3px); left:50%; transform:translateX(-50%); white-space:nowrap; padding:7px 9px; background:#102447; color:#fff; border-radius:6px; font-size:12px; z-index:5 }
.hourColumn:hover::after,.hourColumn:focus-visible::after { display:block }
.hourColumn:focus-visible { outline:2px solid #1265eb; outline-offset:2px }
.hourColumn span { font-size:11px; color:#677b96 }
#seguranca .securityStats .card { background:#fff!important; color:#142340!important }
.statusGood { background:#e5f5ef; color:#05694a }
.statusWait { background:#fff3df; color:#865609 }
.statusBad { background:#ffeded; color:#a3332b }
@media(max-width:1090px) {
  .wrap { grid-template-columns:190px minmax(0,1fr); gap:0 16px; padding:0 18px 35px }
  .top { margin:0 -18px 16px; padding:14px 18px }
  .nav button { padding:9px 10px }
}
@media(max-width:850px) {
  .login-shell { grid-template-columns:1fr; min-height:100svh }
  .login-brand { min-height:265px; padding:26px 30px }
  .login-logo .protecReal { width:180px }
  .login-logo .maisvoltLogin { width:125px }
  .loginBrandBody { padding:31px 0 0; margin:0 }
  .login-brand h2 { font-size:39px; margin:10px 0 10px }
  .login-brand p { font-size:15px; line-height:1.45 }
  .login-brandMeta { display:none }
  .loginAccess { padding:36px 30px 25px; min-height:475px }
  .login-card { margin:0 auto; width:100%; max-width:500px }
  .loginAccessFoot { text-align:center; padding-top:40px }
  .wrap { display:block; padding:0 18px 35px }
  .top { margin:0 -18px; min-height:0; flex-direction:column; align-items:flex-start; gap:10px }
  .top .brand { width:100%; justify-content:flex-start; gap:16px }
  .top .brand .logoWrap { display:grid }
  .top .brand .protecReal { width:160px; max-width:160px }
  .top .brand .maisvoltReal { width:98px; height:98px; max-width:98px; max-height:98px }
  .top .brand .brandDivider { height:52px }
  .accountbar { margin:0 -18px; padding:9px 18px; min-height:47px; border-bottom:1px solid #e4e9f0 }
  .nav { position:relative; top:auto; display:flex; flex-direction:row; flex-wrap:nowrap; gap:4px; overflow-x:auto; margin:12px 0 18px; padding:7px; scrollbar-width:thin; border-radius:10px }
  .navCluster { display:contents }
  .navCluster>span { display:none }
  .nav button { flex:0 0 auto; white-space:nowrap; text-align:center; font-size:12px; min-height:38px }
}
@media(max-width:620px) {
  .login-brand { min-height:233px; padding:22px 24px }
  .login-logo { gap:11px }
  .login-logo .protecReal { width:150px }
  .login-logo .maisvoltLogin { width:103px }
  .login-logo .brandDivider { height:43px }
  .loginBrandBody { padding-top:26px }
  .login-brand h2 { font-size:34px }
  .login-brand p { font-size:14px }
  .loginAccess { min-height:calc(100svh - 233px); padding:32px 24px 20px }
  .login-card h1 { font-size:32px }
  .login-card p { margin-bottom:28px }
  .loginAccessFoot { font-size:11px; padding-top:30px }
  .top { gap:8px; padding:14px 18px }
  .top .brand { gap:12px }
  .top .brand .protecReal { width:150px; max-width:150px }
  .top .brand .maisvoltReal { width:88px; height:88px; max-width:88px; max-height:88px }
  .top h1 { font-size:22px }
  .top .sub { font-size:12px }
  .accountbar { justify-content:flex-start; font-size:12px }
  .panel { padding:17px }
  .card { min-height:105px }
  #financeiro .financePanel { padding:17px }
  #financeiro .financeChart { min-height:220px }
  #financeiro .financeChart .chartTip { font-size:11px; white-space:normal; min-width:120px }
}
@media(prefers-reduced-motion:reduce) {
  .wrap>.tab.active { animation:none }
  .hourBar { transition:none }
}