/*==================================================
    CHATEADORES V3 - CABECERA
==================================================*/

.cabecera{
    position:fixed;
    top:6px;
    left:50%;
    z-index:200;
    margin:0;
    transform:translateX(-50%);
    width:95%;
    max-width:1700px;
    height:78px;
    margin:6px auto;
    display:flex;
    align-items:center;
    background:linear-gradient(180deg,#1b2348,#141b39);
    border:1px solid rgba(120,180,255,.15);
    border-radius:22px;
    backdrop-filter:blur(10px);
    box-shadow:
        0 12px 30px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.05);
    overflow:hidden;
}

/*==================================================
LOGO
==================================================*/

.cabecera-logo{

    width:360px;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;

    transform:translateX(-20px);

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

}

.cabecera-logo img{
    width:315px;
    max-width:95%;
    transition:.25s;
}

.cabecera-logo img:hover{
    transform:scale(1.03);
    filter:drop-shadow(0 0 12px rgba(90,180,255,.5));
}

/*==================================================
DERECHA
==================================================*/

.cabecera-derecha{

    flex:1;

    display:flex;

    align-items:center;

    height:100%;

}

/*==================================================
EMISORA
==================================================*/

.cabecera-radio{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:700;

    color:#8edbff;

    letter-spacing:.5px;

}

/*==================================================
PLAYER
==================================================*/

.cabecera-player{

    width:285px;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

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

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

}

/* botones */

.cabecera-player button{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.07);

    color:#fff;

    font-size:20px;

    cursor:pointer;

    transition:.25s;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 0 1px rgba(120,180,255,.18);

}

.cabecera-player button:hover{

    transform:translateY(-2px) scale(1.05);

    background:linear-gradient(135deg,#2fbcff,#7c69ff);

    box-shadow:
        0 0 18px rgba(90,180,255,.45);

}

/* slider */

#volumen{

    width:130px;

    height:6px;

    cursor:pointer;

    accent-color:#4dbfff;

}

/*==================================================
USUARIOS
==================================================*/

.cabecera-usuarios{

    width:120px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    font-size:20px;

    font-weight:bold;

}

#usuarios-online{

    min-width:34px;

    padding:4px 10px;

    border-radius:999px;

    text-align:center;

    background:rgba(255,255,255,.06);

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

}

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

@media(max-width:900px){

    .cabecera{

        height:auto;

        flex-wrap:wrap;

    }

    .cabecera-logo,
    .cabecera-radio,
    .cabecera-player,
    .cabecera-usuarios{

        width:100%;

        border:none;

        padding:12px 0;

    }

    .cabecera-logo img{

        width:240px;

    }

}