/* ========================= */
/* Velnora Control Panel v2  */
/* ========================= */

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

body{

    font-family:Segoe UI,Arial,sans-serif;

    background:#1A1B26;

    color:#C0CAF5;

}


/* Layout */

.layout{

    display:flex;

    min-height:100vh;

}


/* Sidebar */

.sidebar{

    width:250px;

    background:#16161E;

    padding:30px 20px;

    border-right:1px solid #2F354A;

}


.sidebar h2{

    color:#73DACA;

    margin-bottom:5px;

}


.subtitle{

    color:#888;

    margin-bottom:35px;

}


.sidebar nav{

    display:flex;

    flex-direction:column;

    gap:12px;

}


.sidebar nav a{

    text-decoration:none;

    color:#C0CAF5;

    padding:12px;

    border-radius:10px;

    transition:.25s;

}


.sidebar nav a:hover{

    background:#2F354A;

}


.active{

    background:#7AA2F7;

    color:white !important;

}


/* Contenido */

.content{

    flex:1;

    padding:35px;

}


/* Header */

header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}


header h1{

    font-size:32px;

}


/* Estado */

.online{

    background:#22C55E;

    padding:10px 18px;

    border-radius:25px;

    font-weight:bold;

}


.offline{

    background:#EF4444;

    padding:10px 18px;

    border-radius:25px;

    font-weight:bold;

}


/* Tarjetas */

.cards{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;

}


.card{

    background:#24283B;

    border-radius:14px;

    padding:22px;

    transition:.25s;

    box-shadow:0 0 20px rgba(0,0,0,.15);

}


.card:hover{

    transform:translateY(-5px);

}


.card h3{

    margin-bottom:15px;

    color:#73DACA;

}


/* ========================= */
/* Barras de porcentaje      */
/* ========================= */


.progress{

    width:100%;

    height:18px;

    background:#111827;

    border-radius:20px;

    overflow:hidden;

    margin-top:10px;

}


.progress-bar{

    height:100%;

    border-radius:20px;

    transition:width .5s ease;

}


.progress-bar.verde{

    background:#22C55E;

}


.progress-bar.amarillo{

    background:#EAB308;

}


.progress-bar.rojo{

    background:#EF4444;

}


.progress-text{

    margin-top:10px;

    font-size:18px;

    font-weight:bold;

    color:#FFFFFF;

}


/* Información */

.info{

    background:#24283B;

    padding:25px;

    border-radius:14px;

    margin-bottom:25px;

}


.info h2{

    margin-bottom:20px;

    color:#73DACA;

}


.info p{

    margin-bottom:10px;

}


/* Botones */

.acciones{

    display:flex;

    gap:15px;

    margin-bottom:30px;

}


button{

    border:none;

    padding:14px 28px;

    border-radius:12px;

    cursor:pointer;

    color:white;

    font-size:16px;

    transition:.25s;

}


button:hover{

    transform:scale(1.05);

}


.verde{

    background:#22C55E;

}


.rojo{

    background:#EF4444;

}


.azul{

    background:#3B82F6;

}


/* Consola */
/* Botones rápidos consola */

.quick-commands{

    display:flex;

    gap:10px;

    margin-bottom:20px;

    flex-wrap:wrap;

}


.quick-commands button{

    background:#24283B;

    color:#73DACA;

    border:1px solid #2F354A;

    padding:10px 18px;

    border-radius:10px;

    font-size:14px;

}


.quick-commands button:hover{

    background:#7AA2F7;

    color:white;

}



.console{

    background:#111827;

    border-radius:14px;

    padding:25px;

}


.console h2{

    margin-bottom:20px;

    color:#73DACA;

}


.console-box{

    max-height:450px;

    overflow:auto;

    scrollbar-width:thin;

}


.console pre{

    background:#050505;

    color:#9ECE6A;

    padding:20px;

    border-radius:10px;

    min-height:300px;

    max-height:450px;

    overflow:auto;

    font-family:Consolas,"Courier New",monospace;

    font-size:14px;

    line-height:1.5;

    border:1px solid #2F354A;

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.8),
        0 0 15px rgba(0,0,0,.4);

}


/* Input consola */

.console-input{

    display:flex;

    gap:10px;

    margin-top:15px;

}


.console-input input{

    flex:1;

    padding:14px;

    border-radius:10px;

    border:none;

    background:#24283B;

    color:white;

    font-size:16px;

}


/* Responsive */

@media(max-width:900px){

.layout{

    flex-direction:column;

}


.sidebar{

    width:100%;

}


header{

    flex-direction:column;

    gap:20px;

}


.acciones{

    flex-direction:column;

}


.console-input{

    flex-direction:column;

}

}


/* ========================= */
/* Login                    */
/* ========================= */


.login-container{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}



.login-box{

    background:#24283B;

    padding:40px;

    border-radius:15px;

    width:350px;

    text-align:center;

    box-shadow:0 0 30px rgba(0,0,0,.4);

}



.login-box h1{

    color:#73DACA;

    margin-bottom:10px;

}



.login-box p{

    color:#888;

    margin-bottom:25px;

}



.login-box input{

    width:100%;

    padding:14px;

    margin-bottom:15px;

    border-radius:10px;

    border:1px solid #2F354A;

    background:#16161E;

    color:white;

    font-size:16px;

    outline:none;

}



.login-box input:focus{

    border-color:#7AA2F7;

}



.login-box button{

    width:100%;

}



.login-error{

    background:#7F1D1D;

    color:#FCA5A5;

    border:1px solid #EF4444;

    padding:12px;

    border-radius:10px;

    margin-bottom:20px;

    text-align:center;

    font-size:14px;

}



.uptime-box{

    display:flex;

    gap:10px;

    width:100%;

}


.uptime-box div{

    background:#16161E;

    padding:12px 8px;

    border-radius:10px;

    text-align:center;

    flex:1;

    min-width:0;

}


.uptime-box strong{

    display:block;

    font-size:28px;

    color:#7AA2F7;

}


.uptime-box span{

    color:#C0CAF5;

    font-size:14px;

}



/* ========================= */
/* Jugadores                 */
/* ========================= */


.players-box{

    display:flex;

    gap:10px;

    width:100%;

}



.players-box div{

    background:#16161E;

    padding:12px 8px;

    border-radius:10px;

    text-align:center;

    flex:1;

}



.players-box strong{

    display:block;

    font-size:28px;

    color:#73DACA;

}



.players-box span{

    color:#C0CAF5;

    font-size:14px;

}



.user-create{

    background:#11131c;

    padding:25px;

    border-radius:15px;

    margin-bottom:25px;

}



.section-title h2{

    margin-bottom:5px;

}


.section-title p{

    color:#9ca3af;

}



.user-form{

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:20px;

    margin-top:20px;

}



.form-group{

    display:flex;

    flex-direction:column;

}



.form-group label{

    margin-bottom:8px;

    font-weight:bold;

}



.form-group input,
.form-group select{


    padding:12px;

    border-radius:10px;

    border:1px solid #303545;

    background:#181b27;

    color:white;

}



.create-button{

    grid-column:1 / -1;

    padding:14px;

    font-size:16px;

}



.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}



.player-card{

    border:1px solid #73DACA;

}


.player-card p{

    margin-top:10px;

    color:#C0CAF5;

}


.player-card h3{

    color:#73DACA;

}


.player-actions{

    display:flex;

    gap:8px;

    margin-top:25px;

    padding-top:5px;

}


.player-actions button{

    padding:8px 12px;

    font-size:13px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    opacity:0.85;

    transition:0.2s;

}


.player-actions button:hover{

    opacity:1;

    transform:translateY(-2px);

}


.player-actions .azul{

    background:#3b5b8a;

    color:white;

}


.player-actions .verde{

    background:#3f7a5a;

    color:white;

}


.player-actions .rojo{

    background:#8a4141;

    color:white;

}


/* ===========================
   MODAL VELNORA
=========================== */

.modal-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(8px);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.25s ease;

    z-index:9999;

}


.modal-overlay.active{

    opacity:1;

    visibility:visible;

}


.modal-window{

    width:600px;

    max-width:90%;

    background:#1a1d24;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.45);

    overflow:hidden;

    transform:translateY(30px) scale(.96);

    transition:.25s ease;

}


.modal-overlay.active .modal-window{

    transform:translateY(0) scale(1);

}


.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 25px;

    border-bottom:1px solid rgba(255,255,255,.08);

}


.modal-header h2{

    margin:0;

    color:white;

    font-size:22px;

}


.modal-header button{

    width:38px;

    height:38px;

    border:none;

    border-radius:10px;

    background:transparent;

    color:#b5b5b5;

    cursor:pointer;

    font-size:18px;

    transition:.2s;

}


.modal-header button:hover{

    background:#2a2e38;

    color:white;

}


.modal-body{

    padding:25px;

    min-height:180px;

}


.modal-footer{

    padding:20px 25px;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:flex-end;

    gap:12px;

}


.modal-body textarea{

    width:100%;

    height:120px;

    resize:none;

    background:#11141a;

    border:1px solid rgba(255,255,255,.1);

    border-radius:10px;

    padding:15px;

    color:white;

    font-size:15px;

    outline:none;

}


.modal-body textarea:focus{

    border-color:#4caf50;

}


.modal-body p{

    color:white;

    margin-bottom:15px;

    font-size:16px;

}



/* ======================================
   VELNORA - SERVERS CARD
====================================== */


.servers-page {

    padding: 120px 40px 60px;

}



.servers-header {

    text-align:center;

    margin-bottom:50px;

}



.servers-header h1 {

    font-size:42px;

    background:
    linear-gradient(
        90deg,
        #5865f2,
        #8b5cf6
    );

    -webkit-background-clip:text;

    color:transparent;

}



.servers-header p {

    color:#a1a1aa;

}





.servers-grid {

    display:grid;

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

    gap:30px;

}





.server-card {


    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.04)
    );


    border:

    1px solid
    rgba(255,255,255,.15);



    backdrop-filter:

    blur(20px);



    border-radius:

    28px;



    padding:

    30px;



    box-shadow:

    0 20px 60px
    rgba(0,0,0,.35);



    transition:

    .35s ease;



}





.server-card:hover {


    transform:

    translateY(-8px);



}





.server-header {


    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;


}



.server-header h2 {


    margin:0;

    color:white;

    font-size:24px;


}



.server-header p {


    margin-top:8px;

    color:#9ca3af;


}





.server-status {


    padding:

    8px 16px;



    border-radius:

    20px;



    background:

    rgba(34,197,94,.15);



    color:

    #22c55e;



    font-weight:

    600;


}





.server-metrics {


    display:flex;

    flex-direction:column;

    gap:20px;


}





.metric {


    background:

    rgba(0,0,0,.25);



    padding:

    15px;



    border-radius:

    18px;


}





.metric h4 {


    margin:0 0 8px;

    color:#d4d4d8;

}



.metric p {


    margin:0;

    font-size:22px;

    color:white;

    font-weight:700;


}





.progress-bar {


    width:100%;


    height:10px;


    background:

    rgba(255,255,255,.12);



    border-radius:

    20px;



    overflow:hidden;



    margin-top:12px;


}





.progress-fill {


    height:100%;


    width:0;



    background:

    linear-gradient(
        90deg,
        #5865f2,
        #8b5cf6
    );



    border-radius:

    inherit;



    transition:

    width .5s ease;


}





.server-button {


    width:100%;


    margin-top:30px;


    padding:

    14px;



    border:none;



    border-radius:

    18px;



    cursor:pointer;



    background:

    linear-gradient(
        90deg,
        #5865f2,
        #8b5cf6
    );



    color:white;



    font-weight:700;



    font-size:16px;


}