*{box-sizing:border-box}
:root{
  --bg:#061a2c; --bg2:#082642; --panel:#0a2743; --panel2:#0d3153;
  --line:#1d5d90; --line2:#174f7a; --txt:#f4f8ff; --muted:#8fb0cd;
  --blue:#0f79ff; --blue2:#2f9cff; --green:#20d68a; --green2:#0d7f5e;
  --red:#ff3b53; --red2:#8b1730;
}
html,body{margin:0;background:
radial-gradient(circle at 15% 90%,rgba(0,255,208,.14),transparent 25%),
radial-gradient(circle at 95% 0%,rgba(0,113,255,.20),transparent 28%),
linear-gradient(180deg,#05172a,#061d34 60%,#05182b);
color:var(--txt);font-family:Inter,Segoe UI,Arial,sans-serif;min-height:100%}
body{min-height:100vh}
.shell{min-height:100vh;display:flex;flex-direction:column}
.hero{position:relative;overflow:hidden;padding:30px 30px 28px;border-bottom:1px solid rgba(69,150,213,.45);min-height:228px}
.hero:before,.hero:after{content:"";position:absolute;right:-10%;top:-80px;width:55%;height:340px;transform:skewX(-28deg) rotate(-8deg);background:linear-gradient(135deg,transparent 10%,rgba(20,95,180,.18) 20%,rgba(0,98,255,.35) 42%,rgba(8,39,83,.14) 44%,transparent 58%);pointer-events:none}
.hero:after{right:-18%;top:-130px;opacity:.8}
.brandblock{position:relative;z-index:3;padding-left:18px;border-left:5px solid #1687ff}
.brandblock h1{font-size:46px;line-height:1;margin:0 0 8px;font-weight:800;letter-spacing:-1px}
.brandblock p{margin:0;color:#c0d2e6;font-size:18px}
.hero-logo{position:absolute;z-index:3;right:34px;top:-4px;width:min(500px,34vw);height:225px;object-fit:contain;object-position:center;opacity:1;filter:drop-shadow(0 16px 28px rgba(0,0,0,.42));pointer-events:none}
.hero-line{position:absolute;right:0;top:0;width:52%;height:100%;background:linear-gradient(145deg,transparent 52%,rgba(0,125,255,.85) 53%,transparent 54%);opacity:.8}
.nav{position:relative;z-index:4;display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.nav a{display:flex;align-items:center;gap:10px;color:#deedff;text-decoration:none;padding:12px 20px;border:1px solid #2671a7;border-radius:10px;background:rgba(5,31,55,.76);font-weight:600}
.nav a.active{background:#0b78f4;border-color:#1687ff;box-shadow:0 0 22px rgba(25,128,255,.24)}
.icon{width:18px;height:18px;display:inline-grid;place-items:center;font-size:17px}
.main{padding:26px 36px 0;flex:1}
.filters{display:grid;grid-template-columns:150px minmax(320px,1.2fr) 265px 255px 170px;gap:16px;align-items:center;background:linear-gradient(180deg,rgba(8,39,67,.95),rgba(6,31,54,.95));border:1px solid #175786;border-radius:15px;padding:22px;margin-bottom:24px;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.field,select,input{height:50px;border-radius:10px;border:1px solid #24689c;background:#061b30;color:white;padding:0 15px;font-size:15px;outline:none;width:100%}
input::placeholder{color:#7899b5}
.searchwrap{position:relative}.searchwrap input{padding-left:44px}.searchwrap:before{content:"⌕";position:absolute;left:15px;top:8px;font-size:29px;color:#73a9d9}
.update{height:50px;border:0;border-radius:10px;background:#0c78f0;color:white;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 0 18px rgba(0,117,255,.22)}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px}
.card{background:linear-gradient(180deg,rgba(8,39,67,.94),rgba(6,31,54,.94));border:1px solid #175786;border-radius:15px;padding:22px 18px;min-height:126px;display:flex;gap:16px;align-items:flex-start}
.kpi-ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:700;flex:0 0 56px}
.kpi-ico.green{background:linear-gradient(135deg,#0a8f63,#12c584)} .kpi-ico.red{background:linear-gradient(135deg,#d72840,#ff455b)} .kpi-ico.blue{background:linear-gradient(135deg,#0b63c9,#238cff)}
.card small{color:#a9c6df;font-size:14px}.card strong{display:block;font-size:32px;margin:5px 0 2px}.card span{font-size:13px;color:#6f91ad}
.tablebox{border:1px solid #175786;border-radius:15px;overflow:auto;background:rgba(4,24,43,.72);box-shadow:0 12px 30px rgba(0,0,0,.10)}
table{width:100%;border-collapse:collapse;min-width:1300px}
th,td{padding:13px 14px;border-bottom:1px solid #174867;text-align:center;white-space:nowrap}
th{background:#092844;color:#d9e9f8;font-size:15px;position:sticky;top:0;z-index:2}
th:first-child,td:first-child{text-align:left}
.client{display:flex;align-items:center;gap:12px}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:white;font-weight:800}.a1{background:#087cf0}.a2{background:#8341eb}.a3{background:#ff920b}.a4{background:#17bd78}
.client b{display:block;font-size:15px}.client small{color:#85a8c3}
.month.active{background:linear-gradient(180deg,rgba(6,95,71,.75),rgba(5,72,58,.75));color:#4effb4;font-size:18px}
.month.left{background:linear-gradient(180deg,rgba(139,23,48,.82),rgba(90,17,35,.82));color:#ff6579;font-weight:700}
.month.none{color:#617f99}
.legend{display:flex;gap:28px;align-items:center;padding:22px 0;color:#8eadc7;font-size:13px;flex-wrap:wrap}
.dot{width:15px;height:15px;border-radius:50%;background:#4effad;box-shadow:0 0 13px rgba(78,255,173,.35);display:inline-block;margin-right:8px}.square{width:20px;height:20px;background:#df3048;display:inline-block;margin-right:8px;border-radius:2px}.dash{display:inline-block;margin-right:8px}
.note{margin-left:auto}
.footer{margin-top:24px;border-top:1px solid rgba(49,118,174,.45);padding:24px 36px 28px;display:flex;justify-content:space-between;color:#8ba8c1;font-size:13px;background:rgba(3,20,36,.45)}
.footer strong{color:#e3effb}.footbrand{display:flex;gap:16px;align-items:center}.footbrand:before{content:"";width:4px;height:30px;background:#1687ff;border-radius:4px}
@media(max-width:1200px){
 .hero-logo{opacity:.3;width:400px}
 .filters{grid-template-columns:1fr 1.5fr 1fr}.update{grid-column:auto}
 .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
 .hero{padding:24px 18px}.brandblock h1{font-size:38px}.hero-logo{display:none}
 .main{padding:18px}.filters{grid-template-columns:1fr}.cards{grid-template-columns:1fr}
 .footer{padding:20px 18px;gap:15px;flex-direction:column}
}

/* V4 - fidelidade ao layout aprovado */
.hero{background:linear-gradient(105deg,#04172a 0%,#051a30 54%,#082a55 100%)}
.hero:before{right:-4%;top:-100px;width:52%;height:390px;transform:skewX(-27deg) rotate(-7deg);background:linear-gradient(135deg,transparent 16%,rgba(11,64,127,.30) 24%,rgba(8,105,235,.32) 43%,rgba(4,40,87,.16) 45%,transparent 62%)}
.hero:after{right:-14%;top:-105px;width:47%;height:360px;background:linear-gradient(145deg,transparent 40%,rgba(0,117,255,.68) 41%,rgba(0,117,255,.10) 42%,transparent 43%)}
.main{max-width:none;width:100%;padding:26px 30px 0}
.filters{grid-template-columns:150px minmax(360px,1.45fr) 260px 260px 160px}
.cards{grid-template-columns:repeat(5,minmax(190px,1fr))}
.tablebox{width:100%}
table{min-width:1250px}