:root{
    --fondo:#0b1220;
    --panel:#111c30;
    --panel2:#16243d;
    --azul:#1683ff;
    --azul-claro:#4db3ff;
    --blanco:#ffffff;
    --gris:#b8c7dc;
    --verde:#00c853;
    --rojo:#ff3d3d;
    --amarillo:#ffc107;
}


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


body{

    background:var(--fondo);
    color:var(--blanco);

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    min-height:100vh;
}


/* CABECERA */

.topbar{

    background:
    linear-gradient(
        135deg,
        #07101f,
        #12335c
    );

    padding:25px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    border-bottom:2px solid var(--azul);

}


.topbar h1{

    font-size:32px;
    margin-bottom:5px;

}


.topbar p{

    color:var(--azul-claro);
    font-size:18px;

}


.estado-servidor{

    background:#0c2b20;

    color:#00ff88;

    padding:12px 18px;

    border-radius:10px;

    font-weight:bold;

}



/* CONTENEDOR */

main{

    width:95%;
    max-width:1400px;

    margin:30px auto;

}



/* RESUMEN */

.resumen{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(220px,1fr)
    );

    gap:20px;

}



.panel-info{

    background:var(--panel);

    padding:20px;

    border-radius:12px;

    border:1px solid #24395c;

}


.panel-info h3{

    color:var(--azul-claro);

    margin-bottom:10px;

    font-size:18px;

}


.panel-info p{

    font-size:20px;

}



/* TITULO */

.titulo-seccion{

    margin:35px 0 20px;

    font-size:28px;

}



/* TARJETAS BOTS */

.grid-bots{

    display:grid;

    grid-template-columns:

    repeat(
        auto-fit,
        minmax(280px,1fr)
    );

    gap:20px;

}



.bot-card{

    background:var(--panel);

    border-radius:15px;

    padding:22px;

    border:1px solid #24395c;

}



.bot-card h3{

    font-size:22px;

    margin-bottom:15px;

}


.estado{

    font-size:18px;

    margin-bottom:20px;

}


.activo{

    color:var(--verde);

    font-weight:bold;

}


.inactivo{

    color:var(--rojo);

    font-weight:bold;

}



/* BOTONES */

.bot-card button{

    width:100%;

    padding:14px;

    border:none;

    border-radius:8px;

    margin-top:10px;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

}


.btn-iniciar{

    background:var(--verde);

    color:#001b0c;

}


.btn-detener{

    background:var(--rojo);

    color:white;

}



/* MOBILE */

@media(max-width:700px){

    .topbar{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }


    .topbar h1{

        font-size:25px;

    }


    .titulo-seccion{

        font-size:24px;

    }


}