*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
height:100%;
font-family:'Segoe UI',sans-serif;
background:#2c313a;
color:#e0e0e0;
}

.scada-container{
display:grid;
grid-template-rows:70px 1fr 100px;
height:100vh;
}

.top-bar{
background:#1f2328;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 25px;
border-bottom:2px solid #0078d4;
position:relative;
}

.title{
font-size:18px;
font-weight:bold;
}

.logo-central{
position:absolute;
left:50%;
transform:translateX(-50%);
font-size:24px;
color:#00c8ff;
}

.led-panel{
display:flex;
gap:25px;
}

.led-box{
display:flex;
align-items:center;
gap:6px;
font-size:13px;
}

.led{
width:14px;
height:14px;
border-radius:50%;
background:#111;
}

.led-green.active{
background:#00ff55;
box-shadow:0 0 10px #00ff55;
}

.led-red.active{
background:#ff2a2a;
box-shadow:0 0 10px #ff2a2a;
}

.video-container{
position:relative;
background:black;
overflow:hidden;
}

.video-layer{
position:absolute;
width:100%;
height:100%;
object-fit:contain;
background:black;
}

.overlay{
position:absolute;
top:15px;
left:20px;
display:flex;
gap:10px;
flex-wrap:wrap;
}

.status{
background:rgba(0,0,0,0.75);
padding:5px 12px;
border-radius:4px;
border:1px solid #555;
font-size:13px;
}

.status.marcha{
color:#00ff55;
border-color:#00ff55;
}

.status.paro{
color:#ff2a2a;
border-color:#ff2a2a;
}

.control-panel{
background:#1f2328;
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 25px;
border-top:2px solid #0078d4;
}

.modes,.actions{
display:flex;
gap:10px;
}

button{
background:#3b4046;
border:1px solid #555;
padding:8px 18px;
color:white;
cursor:pointer;
border-radius:4px;
}

button:hover{
background:#50565e;
}

.btn.marcha{
background:#006400;
}

.btn.paro{
background:#8b0000;
}

#velocidadControl{
width:220px;
}

#explosionControl{
align-items:center;
gap:10px;
}

#explosionSlider{
width:220px;
}

.footer-licencia{
position:absolute;
bottom:8px;
right:15px;
font-size:11px;
opacity:0.6;
}