/* =========================================================
   AUTOMATION STUDIO X - MAIN.CSS PRO
========================================================= */

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

body{
background:#111827;
font-family:'Segoe UI',Inter,sans-serif;
color:#e5e7eb;
overflow:hidden;
}

/* =========================================================
   LAYOUT
========================================================= */

.layout{
display:flex;
height:calc(100vh - 80px);
}

.sidebar{
width:340px;
background:#1f2937;
border-right:1px solid #374151;
padding:20px;
overflow:auto;
}

.main{
flex:1;
padding:20px;
overflow:auto;
}

/* =========================================================
   HEADER
========================================================= */

.top-header{
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 25px;
border-bottom:1px solid #374151;
background:#1f2937;
}

.logo-area{
display:flex;
align-items:center;
gap:15px;
}

.logo-icon{
width:52px;
height:52px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
background:#2563eb;
color:white;
font-weight:900;
box-shadow:none;
}

.title{
font-size:24px;
font-family:'Segoe UI',sans-serif;
font-weight:700;
color:#f8fafc;
letter-spacing:.5px;
}

.subtitle{
font-size:12px;
color:#94a3b8;
letter-spacing:.5px;
}

.top-buttons{
display:flex;
gap:12px;
}

.nav-btn{
padding:14px 22px;
border:none;
border-radius:10px;
cursor:pointer;
font-weight:600;
background:#374151;
color:#e5e7eb;
border:1px solid #4b5563;
transition:.25s;
}

.nav-btn:hover{
transform:translateY(-2px);
background:#475569;
}

.active-nav{
background:#2563eb;
color:white;
box-shadow:none;
}

.top-status{
display:flex;
gap:12px;
}

.status-box{
background:#374151;
padding:12px 18px;
border-radius:10px;
border:1px solid #4b5563;
font-weight:700;
}

.run{
color:#22c55e;
}

.stop{
color:#ef4444;
}

/* =========================================================
   PANELS
========================================================= */

.panel{
background:#1f2937;
border-radius:16px;
padding:20px;
margin-bottom:20px;
border:1px solid #374151;
box-shadow:none;
}

.panel h2{
font-size:18px;
margin-bottom:18px;
color:#f8fafc;
font-family:'Segoe UI',sans-serif;
font-weight:700;
}

/* =========================================================
   IO
========================================================= */

.io-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.io-card{
background:#273449;
padding:16px;
border-radius:12px;
border:1px solid #475569;
transition:.25s;
}

.io-card:hover{
transform:translateY(-2px);
border-color:#60a5fa;
}

.io-name{
font-weight:700;
margin-bottom:12px;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn{
padding:10px 14px;
border:none;
border-radius:10px;
cursor:pointer;
font-weight:700;
transition:.25s;
font-size:13px;
width:auto;
min-width:120px;
display:inline-flex;
align-items:center;
justify-content:center;
white-space:nowrap;
}

.btn:hover{
transform:translateY(-2px);
}

.green{
background:#2563eb;
color:white;
}

.red{
background:#dc2626;
color:white;
}

.yellow{
background:#f59e0b;
color:white;
}

.blue{
background:#3b82f6;
color:white;
}

.premium-btn{
background:#7c3aed;
color:white;
}

/* =========================================================
   MEMORY
========================================================= */

.memory-list{
display:flex;
flex-direction:column;
gap:12px;
}

.memory-item{
background:#273449;
padding:14px;
border-radius:12px;
display:flex;
justify-content:space-between;
border:1px solid #475569;
}

/* =========================================================
   MOTOR
========================================================= */

.motor-container{
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
}

.motor{
width:240px;
height:130px;
background:linear-gradient(180deg,#6b7280,#4b5563);
border-radius:20px;
position:relative;
overflow:hidden;
box-shadow:none;
}

.fan{
position:absolute;
width:70px;
height:70px;
border-radius:50%;
border:5px solid #d1d5db;
left:20px;
top:30px;
animation:spin .3s linear infinite;
animation-play-state:paused;
}

@keyframes spin{
100%{
transform:rotate(360deg);
}
}

.pilot-row{
display:flex;
gap:18px;
}

.pilot{
width:36px;
height:36px;
border-radius:50%;
background:#4b5563;
border:2px solid #6b7280;
}

.on-green{
background:#22c55e;
box-shadow:none;
}

.on-red{
background:#ef4444;
box-shadow:none;
}

.on-blue{
background:#3b82f6;
box-shadow:none;
}

.motor-info{
display:flex;
gap:15px;
}

.info-box{
background:#273449;
padding:14px 18px;
border-radius:12px;
text-align:center;
border:1px solid #475569;
min-width:120px;
}

/* =========================================================
   TOOLBAR
========================================================= */

.toolbar{
display:flex;
gap:12px;
margin-bottom:20px;
flex-wrap:wrap;
}

.toolbar .btn{
flex:none;
width:auto;
min-width:130px;
height:42px;
padding:10px 16px;
border-radius:10px;
font-size:13px;
}

.toolbar{
align-items:center;
}

/* =========================================================
   LADDER
========================================================= */

.ladder-area{
position:relative;
background:#1f2937;
border:1px solid #374151;
border-radius:16px;
padding:25px 50px;
min-height:650px;
}

/* RIELES GLOBALES DEL LADDER */

.ladder-left-rail{
position:absolute;
left:20px;
top:20px;
bottom:20px;
width:4px;
background:#64748b;
border-radius:4px;
}

.ladder-right-rail{
position:absolute;
right:20px;
top:20px;
bottom:20px;
width:4px;
background:#64748b;
border-radius:4px;
}

/* REDES */

.rung{
display:flex;
align-items:center;
gap:10px;
margin-bottom:25px;
}

.rail{
display:none;
}

.line{
height:3px;
background:#64748b;
flex:1;
box-shadow:none;
}

.contact{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:70px;
height:48px;
padding:0 10px;
background:transparent;
border:none;
border-left:3px solid #64748b;
border-right:3px solid #64748b;
border-radius:0;
font-weight:700;
font-size:12px;
color:#94a3b8;
}

.contact[data-type="NC"]::after{
content:'';
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) rotate(15deg);
width:2px;
height:70%;
background:#64748b;
border-radius:1px;
}

.contact.powered{
border-left-color:#22c55e;
border-right-color:#22c55e;
color:#22c55e;
background:transparent;
box-shadow:none;
}

.contact[data-type="NC"].powered::after{
background:#22c55e;
}

.coil{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:64px;
height:48px;
padding:0 10px;
background:transparent;
border:none;
border-left:3px solid #64748b;
border-right:3px solid #64748b;
border-radius:0;
font-weight:700;
font-size:12px;
color:#94a3b8;
}

.coil::before{
content:'';
position:absolute;
width:36px;
height:36px;
border-radius:50%;
border:3px solid #64748b;
background:transparent;
}

.coil.powered{
border-left-color:#22c55e;
border-right-color:#22c55e;
color:#22c55e;
}

.coil.powered::before{
border-color:#22c55e;
}

.timer{
padding:8px 14px;
min-width:100px;
text-align:center;
background:#1e293b;
border:2px solid #64748b;
border-radius:6px;
font-weight:700;
color:#94a3b8;
font-size:12px;
}

.timer.powered{
border-color:#22c55e;
color:#22c55e;
}

.line{
height:3px;
background:#334155;
flex:1;
border-radius:0;
}

.line.powered{
background:#22c55e;
}

/* =========================================================
   LOGS
========================================================= */

.log-box{
height:220px;
overflow:auto;
display:flex;
flex-direction:column;
gap:10px;
}

.log-box p{
background:#273449;
padding:12px;
border-radius:10px;
border-left:4px solid #3b82f6;
}

/* =========================================================
   COURSES
========================================================= */

.courses-page{
padding:30px;
overflow:auto;
height:calc(100vh - 80px);
}

.courses-title{
font-size:38px;
font-family:'Segoe UI',sans-serif;
font-weight:700;
color:#f8fafc;
margin-bottom:10px;
}

.courses-subtitle{
color:#94a3b8;
margin-bottom:30px;
}

.courses-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
}

.course-card{
background:#1f2937;
border:1px solid #374151;
border-radius:16px;
padding:25px;
}

.course-card h2{
margin-bottom:15px;
color:#f8fafc;
font-family:'Segoe UI',sans-serif;
font-size:18px;
font-weight:700;
}

.course-card p{
color:#cbd5e1;
line-height:1.6;
margin-bottom:20px;
}

.premium-card{
border-color:#7c3aed;
box-shadow:none;
}

.back-btn{
margin-top:30px;
padding:14px 24px;
border:none;
border-radius:10px;
background:#273449;
color:white;
cursor:pointer;
font-weight:700;
border:1px solid #475569;
}

/* =========================================================
   LOADER
========================================================= */

.loading{
position:fixed;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:#111827;
z-index:999;
}

.loading h1{
font-family:'Segoe UI',sans-serif;
font-size:42px;
font-weight:700;
color:#f8fafc;
margin-bottom:15px;
}

.loading p{
color:#94a3b8;
font-size:16px;
}

/* =========================================================
   VFD PRO
========================================================= */

.vfd-page{
padding:25px;
height:calc(100vh - 80px);
overflow:auto;
background:#111827;
}

.vfd-container{
display:flex;
gap:20px;
align-items:flex-start;
}

/* DRIVE */

.vfd-drive{
width:250px;
background:#374151;
border-radius:16px;
padding:15px;
border:1px solid #4b5563;
box-shadow:none;
}

.drive-header{
display:flex;
justify-content:space-between;
font-family:'Segoe UI',sans-serif;
font-size:14px;
font-weight:700;
margin-bottom:18px;
}

.drive-screen{
background:#d1d5db;
border:2px solid #9ca3af;
border-radius:8px;
padding:20px 10px;
text-align:center;
margin-bottom:16px;
color:#111827;
font-family:'Segoe UI',sans-serif;
box-shadow:none;
}

.drive-screen .freq{
font-size:26px;
font-weight:700;
}

.drive-screen .rpm{
margin-top:8px;
font-size:16px;
}

.drive-screen .amp{
margin-top:8px;
font-size:14px;
}

.drive-leds{
display:flex;
justify-content:center;
gap:14px;
margin-bottom:18px;
}

.led{
width:12px;
height:12px;
border-radius:50%;
background:#6b7280;
}

.led.green-led{
background:#22c55e;
box-shadow:none;
}

.led.red-led{
background:#ef4444;
box-shadow:none;
}

.drive-buttons{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.drive-btn{
padding:12px;
border:none;
border-radius:10px;
font-weight:700;
cursor:pointer;
}

.drive-btn.run{
background:#2563eb;
color:white;
}

.drive-btn.stop{
background:#dc2626;
color:white;
}

.drive-btn.gray{
background:#4b5563;
color:white;
}

/* PANEL RIGHT */

.vfd-panel{
flex:1;
background:#1f2937;
border:1px solid #374151;
border-radius:16px;
padding:20px;
}

.vfd-tabs{
display:flex;
gap:12px;
margin-bottom:20px;
}

.vfd-tab{
padding:12px 20px;
border-radius:10px;
background:#374151;
font-weight:700;
cursor:pointer;
color:#e5e7eb;
}

.vfd-tab.active{
background:#2563eb;
color:white;
}

.vfd-grid{
display:grid;
grid-template-columns:360px 1fr;
gap:20px;
}

.vfd-card{
background:#273449;
border:1px solid #475569;
border-radius:14px;
padding:20px;
margin-bottom:20px;
}

.vfd-card h3{
font-family:'Segoe UI',sans-serif;
font-size:16px;
font-weight:700;
color:#f8fafc;
margin-bottom:18px;
}

.freq-slider{
width:100%;
margin-bottom:20px;
}

.big-freq{
font-size:30px;
font-family:'Segoe UI',sans-serif;
font-weight:700;
color:#f8fafc;
}

/* COMMANDS */

.cmd-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.cmd-btn{
padding:14px;
border:none;
border-radius:10px;
font-weight:700;
cursor:pointer;
}

.cmd-green{
background:#2563eb;
color:white;
}

.cmd-red{
background:#dc2626;
color:white;
}

.cmd-dark{
background:#4b5563;
color:white;
}

/* GAUGES */

.gauge-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.gauge-card{
background:#273449;
border:1px solid #475569;
border-radius:14px;
padding:20px;
text-align:center;
}

.gauge-card h4{
margin-bottom:15px;
font-family:'Segoe UI',sans-serif;
font-weight:700;
color:#f8fafc;
}

.gauge{
width:140px;
height:140px;
border-radius:50%;
margin:auto;
position:relative;
background:
conic-gradient(
#2563eb 0deg,
#2563eb 220deg,
#f59e0b 220deg,
#f59e0b 300deg,
#475569 300deg
);
display:flex;
align-items:center;
justify-content:center;
}

.gauge::before{
content:"";
position:absolute;
width:110px;
height:110px;
border-radius:50%;
background:#1f2937;
}

.needle{
position:absolute;
width:4px;
height:50px;
background:white;
bottom:50%;
left:50%;
transform-origin:bottom center;
border-radius:4px;
transition:.3s;
z-index:5;
}

.gauge-value{
margin-top:18px;
font-size:26px;
font-family:'Segoe UI',sans-serif;
font-weight:700;
}

/* STATUS */

.vfd-status{
margin-top:20px;
display:flex;
justify-content:space-between;
background:#273449;
border:1px solid #475569;
border-radius:14px;
padding:20px;
font-size:18px;
font-weight:700;
}

/* =========================================================
   SCROLL
========================================================= */

::-webkit-scrollbar{
width:10px;
height:10px;
}

::-webkit-scrollbar-thumb{
background:#4b5563;
border-radius:10px;
}

::-webkit-scrollbar-track{
background:#1f2937;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px){

.vfd-grid{
grid-template-columns:1fr;
}

.gauge-grid{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:900px){

.layout{
flex-direction:column;
overflow:auto;
}

.sidebar{
width:100%;
height:auto;
border-right:none;
border-bottom:1px solid #374151;
}

.top-header{
flex-wrap:wrap;
height:auto;
padding:20px;
gap:20px;
}

.vfd-container{
flex-direction:column;
}

.gauge-grid{
grid-template-columns:1fr;
}

}

@media(max-width:600px){

.title{
font-size:18px;
}

.nav-btn{
padding:10px 14px;
font-size:12px;
}

.status-box{
padding:10px;
font-size:12px;
}

.toolbar{
flex-direction:row;
flex-wrap:wrap;
}

}