@import url('https://fonts.googleapis.com/css2?family=National+Park:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}
body{margin:0;background:#fafaff;color:#303344;font-family:'National Park',Arial,sans-serif}
header{background:#fff;border-bottom:1px solid #e9e9f2}
.wrap{width:min(100% - 40px,1080px);margin:auto}
.head{min-height:85px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{width:150px;max-height:50px}
.head h1{font-size:clamp(1rem,2.4vw,1.45rem);font-weight:600;margin:0;text-align:right}
.intro{padding:56px 0 24px}
.intro h1{font-size:clamp(1.8rem,4vw,2.8rem);margin:0 0 8px;line-height:1.16}
.intro p{color:#75798a;margin:0}
.hero{display:flex;gap:16px;align-items:center;padding:22px 26px;margin-top:36px;background:#fff;border:1px solid #e7e8f0;border-radius:14px;box-shadow:0 8px 25px #2724510c}
.hero strong{font-size:1.08rem}.hero p{color:#747889;margin:4px 0 0;font-size:.89rem}
.dot{width:10px;height:10px;min-width:10px;border-radius:50%;background:#9ca3b4}.hero>.dot{width:16px;height:16px;min-width:16px}
.operacional .dot{background:#12a46d}.degradado .dot{background:#e6a600}.indisponivel .dot,.critico .dot{background:#df5561}.manutencao .dot{background:#508bd2}
.hero>.dot{position:relative;isolation:isolate}
.hero>.dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:inherit;opacity:.35;z-index:-1;animation:status-pulse 2s ease-out infinite}
@keyframes status-pulse{0%{transform:scale(.7);opacity:.45}75%,100%{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero>.dot::after{animation:none;opacity:0}}
.overview-plot{margin-top:16px;padding:16px 20px;background:#fff;border:1px solid #e7e8f0;border-radius:12px}
.overview-plot>span{display:block;margin-bottom:8px;color:#6b7182;font-size:.8rem;font-weight:600}
.sla-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.sla-grid>div{background:#fff;border:1px solid #e7e8f0;border-radius:12px;padding:16px 20px;text-align:center}
.sla-grid small{display:block;color:#777b8c;font-size:.8rem}
.sla-value{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:5px}
.sla-value strong{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;font-size:1.4rem;font-variant-numeric:tabular-nums}
.sla-square{width:10px;height:10px;flex:0 0 10px;border-radius:2px;background:#a1a7b2}
.bom{color:#087750}.atencao{color:#956600}.critico{color:#af3444}.sem-dados{color:#777b8c}
.bom .sla-square{background:#12a46d}.atencao .sla-square{background:#e6a600}.critico .sla-square{background:#df5561}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}.section-heading h2{margin:0}
.history-link{color:#4845ff;text-decoration:none;font-size:.87rem;font-weight:700;white-space:nowrap}.history-link:hover{text-decoration:underline}
.back-link{display:inline-block;margin-bottom:18px;color:#4845ff;text-decoration:none;font-size:.88rem;font-weight:600}.back-link:hover{text-decoration:underline}
.history-heading{color:#777b8c;font-size:.84rem}.history-heading h2{color:#303344;font-size:1.02rem}
.history-navigation{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:20px;color:#777b8c;font-size:.88rem}
.history-navigation a{color:#4845ff;text-decoration:none;font-weight:700}.history-navigation a:hover{text-decoration:underline}
.empty-state{color:#777b8c;padding:22px;margin:0;font-size:.88rem}
.group{margin-top:38px}.group h2{font-size:1.08rem;margin:0 0 12px}
.group .section-heading h2{margin:0}
.items{background:#fff;border:1px solid #e7e8f0;border-radius:14px;overflow:hidden;box-shadow:0 4px 18px #27245108}
.item{padding:17px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #eff0f5}.item:first-child{border-top:0}
.item strong{font-weight:600}.item small{display:block;color:#777b8b;margin-top:3px}
.component+.component{border-top:1px solid #eff0f5}
.component .item{border-top:0}
.subitems{margin:0 22px 18px;padding:0 0 0 18px;border-left:2px solid #e9eaf3}
.subitem{min-width:0;padding:16px 0;color:#6b7182;font-size:.88rem;line-height:1.35}
.subitem+.subitem{border-top:1px solid #eff0f5}
.subitem-top{display:flex;align-items:center;justify-content:space-between;gap:18px}
.subitem-name{display:flex;align-items:center;gap:9px;min-width:0;color:#303344}
.subitem-name strong{font-size:.93rem;font-weight:600}
.subitem .dot{width:9px;height:9px;min-width:9px}
.subitem-sla{display:flex;gap:20px;text-align:center;flex:0 0 auto;font-variant-numeric:tabular-nums}
.subitem-sla span{display:flex;flex-direction:column;gap:2px}.subitem-sla small{font-size:.68rem;color:#8a8e9a}.subitem-sla strong{font-size:.8rem;font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace}
.subitem-plot{margin-top:12px;padding-top:9px;border-top:1px solid #f0f0f6}
.plot-scroll{overflow-x:auto}
.plot-track{display:block;width:100%;min-width:780px;height:18px}
.plot-track .p0{fill:#d6d9e1}.plot-track .p1{fill:#12a46d}.plot-track .p2{fill:#e6a600}.plot-track .p3{fill:#df5561}
.state{display:inline-flex;flex:0 0 166px;width:166px;min-height:36px;align-items:center;justify-content:center;gap:8px;padding:6px 10px;border:1px solid #dfe2e9;border-radius:8px;background:#f0f1f5;color:#626879;font-size:.84rem;font-weight:700;white-space:nowrap;text-align:center}
.state .dot{width:8px;height:8px;min-width:8px}
.state.operacional{background:#e8f7ef;border-color:#c6ead7;color:#087750}
.state.degradado{background:#fff6dc;border-color:#f2dfa3;color:#956600}
.state.indisponivel{background:#feebed;border-color:#f4cbd0;color:#af3444}
.state.critico{background:#feebed;border-color:#f4cbd0;color:#af3444}
.state.manutencao{background:#eaf3ff;border-color:#c9dff8;color:#336fae}
footer{color:#9295a3;font-size:.8rem;padding:55px 0 36px}
@media(max-width:600px){.head{min-height:68px}.logo{width:130px}.head h1{max-width:55%;font-size:1rem}.intro{padding-top:38px}.item{padding:15px 17px}}
@media(max-width:480px){.item{flex-wrap:wrap}.state{margin-left:auto}.subitems{margin-left:17px;margin-right:17px;padding-left:12px}}
@media(max-width:600px){.sla-grid{gap:7px}.sla-grid>div{padding:12px}.sla-grid strong{font-size:1rem}.sla-grid small{font-size:.7rem}}
@media(max-width:700px){.subitem-top{display:block}.subitem-sla{margin:10px 0 0 18px}.section-heading{flex-wrap:wrap}}