/*==================================================
        LA TÓXICA RADIO
        HEADER MÓVIL V2
        RADIO APP
==================================================*/


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

.header{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:78px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 14px;

    background:

        linear-gradient(
            180deg,
            rgba(8,21,38,.88) 0%,
            rgba(8,21,38,.58) 72%,
            rgba(8,21,38,0) 100%
        );

    border:none;

    box-shadow:none;

    overflow:visible;

    z-index:1000;

}


/*==================================================
        LÍNEA DE IDENTIDAD
==================================================*/

.header::after{

    content:"";

    position:absolute;

    left:14px;

    right:14px;

    bottom:0;

    height:1px;

    background:

        linear-gradient(
            90deg,
            transparent 0%,
            rgba(11,61,145,.70) 25%,
            rgba(255,212,0,.95) 50%,
            rgba(11,61,145,.70) 75%,
            transparent 100%
        );

    opacity:.75;

}


/*==================================================
        BOTÓN MENÚ
==================================================*/

.btn-menu{

    position:relative;

    flex-shrink:0;

    width:42px;

    height:42px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    cursor:pointer;

    z-index:1001;

    border-radius:12px;

    background:

        rgba(11,61,145,.72);

    border:

        1px solid
        rgba(255,212,0,.25);

    box-shadow:

        0 5px 15px
        rgba(0,0,0,.30);

    transition:

        transform .25s ease,
        background .25s ease,
        border-color .25s ease;

}


.btn-menu:active{

    transform:scale(.91);

}


.btn-menu:hover{

    background:

        rgba(11,61,145,.95);

    border-color:

        rgba(255,212,0,.65);

}


.btn-menu span{

    width:21px;

    height:2px;

    background:#FFFFFF;

    border-radius:999px;

    transition:

        transform .30s ease,
        opacity .20s ease,
        background .25s ease;

}


.btn-menu:hover span{

    background:

        var(--accent);

}


/*==================================================
        MENÚ → X
==================================================*/

.btn-menu.active span:nth-child(1){

    transform:

        translateY(7px)
        rotate(45deg);

}


.btn-menu.active span:nth-child(2){

    opacity:0;

    transform:scaleX(0);

}


.btn-menu.active span:nth-child(3){

    transform:

        translateY(-7px)
        rotate(-45deg);

}


/*==================================================
        INFORMACIÓN DE ESTADO
==================================================*/

.app-status{

    flex:1;

    min-width:0;

    height:54px;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    padding:0 10px;

}


/*==================================================
        CIUDAD
==================================================*/

#location-status{

    position:absolute;

    top:6px;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    text-align:center;

    color:#FFFFFF;

    font-size:.67rem;

    font-weight:700;

    letter-spacing:1.2px;

    text-transform:uppercase;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


/*==================================================
        HORA
==================================================*/

#time-status{

    margin-top:22px;

    color:

        var(--accent);

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.7px;

}


/*==================================================
        TEMPERATURA
==================================================*/

#weather-status{

    margin-top:22px;

    color:

        rgba(255,255,255,.82);

    font-size:.72rem;

    font-weight:500;

}


/*==================================================
        SEPARADORES
==================================================*/

.app-status .status-separator{

    margin-top:22px;

    margin-left:4px;

    margin-right:4px;

    color:

        rgba(255,255,255,.35);

    font-size:.65rem;

}


/*==================================================
        LIVE
==================================================*/

.live-button{

    flex-shrink:0;

    min-width:70px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:0 10px;

    border-radius:999px;

    background:

        rgba(255,49,49,.16);

    border:

        1px solid
        rgba(255,49,49,.65);

    color:#FFFFFF;

    font-size:.61rem;

    font-weight:800;

    letter-spacing:.8px;

    box-shadow:

        0 0 12px
        rgba(255,49,49,.16);

}


/*==================================================
        PUNTO LIVE
==================================================*/

.live-dot{

    width:8px;

    height:8px;

    flex-shrink:0;

    background:

        #FF3131;

    border-radius:50%;

    box-shadow:

        0 0 6px
        rgba(255,49,49,.90),

        0 0 12px
        rgba(255,49,49,.40);

    animation:

        livePulse 1.4s infinite;

}


/*==================================================
        ANIMACIÓN LIVE
==================================================*/

@keyframes livePulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.35);

        opacity:.60;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}


/*==================================================
        SIDEBAR
==================================================*/

#sidebar{

    position:fixed;

    top:0;

    left:-300px;

    width:280px;

    height:100vh;

    background:

        linear-gradient(
            180deg,
            #0B3D91 0%,
            #072C69 48%,
            #081526 100%
        );

    overflow-y:auto;

    transition:

        left .35s
        cubic-bezier(.4,0,.2,1);

    z-index:1200;

    padding-top:78px;

    border-right:

        2px solid
        rgba(255,212,0,.45);

    box-shadow:

        12px 0 35px
        rgba(0,0,0,.55);

}


#sidebar.active{

    left:0;

}


/*==================================================
        NAVEGACIÓN
==================================================*/

#sidebar nav{

    display:flex;

    flex-direction:column;

}


#sidebar nav a{

    position:relative;

    display:flex;

    align-items:center;

    min-height:56px;

    padding:16px 24px;

    color:#FFFFFF;

    font-size:14px;

    font-weight:600;

    letter-spacing:.4px;

    border-left:

        4px solid
        transparent;

    border-bottom:

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

    transition:

        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        padding-left .25s ease;

}


#sidebar nav a:hover{

    background:

        rgba(255,212,0,.10);

    color:

        var(--accent);

    border-left-color:

        var(--accent);

    padding-left:30px;

}


/*==================================================
        OVERLAY
==================================================*/

#overlay{

    position:fixed;

    inset:0;

    background:

        rgba(0,0,0,.72);

    backdrop-filter:blur(4px);

    -webkit-backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:

        opacity .30s ease,
        visibility .30s ease;

    z-index:1100;

}


#overlay.active{

    opacity:1;

    visibility:visible;

}


/*==================================================
        CONTENIDO MOBILE
==================================================*/

#mobile-main{

    width:100%;

    min-height:100vh;

    padding-top:78px;

    background:transparent;

    color:#FFFFFF;

}


/*==================================================
        FOOTER
==================================================*/

#mobile-app footer{

    background:transparent;

    color:

        rgba(255,255,255,.45);

    text-align:center;

    padding:18px;

    font-size:.75rem;

}


/*==================================================
        PANTALLAS PEQUEÑAS
==================================================*/

@media(max-width:420px){

    .header{

        height:74px;

        padding:

            0 11px;

    }


    .btn-menu{

        width:40px;

        height:40px;

        border-radius:11px;

    }


    .app-status{

        height:52px;

        padding:0 6px;

    }


    #location-status{

        top:5px;

        font-size:.61rem;

        letter-spacing:.9px;

    }


    #time-status,
    #weather-status{

        margin-top:21px;

        font-size:.68rem;

    }


    .app-status .status-separator{

        margin-top:21px;

        margin-left:3px;

        margin-right:3px;

    }


    .live-button{

        min-width:64px;

        height:30px;

        padding:0 8px;

        font-size:.57rem;

    }


    .live-dot{

        width:7px;

        height:7px;

    }


    #mobile-main{

        padding-top:74px;

    }


    .header::after{

        left:10px;

        right:10px;

    }

}


/*==================================================
        PANTALLAS MUY PEQUEÑAS
==================================================*/

@media(max-width:360px){

    .header{

        height:70px;

        padding:0 9px;

    }


    .btn-menu{

        width:38px;

        height:38px;

    }


    #location-status{

        font-size:.56rem;

    }


    #time-status,
    #weather-status{

        font-size:.64rem;

    }


    .live-button{

        min-width:59px;

        height:28px;

        padding:0 7px;

        font-size:.54rem;

    }


    .live-dot{

        width:6px;

        height:6px;

    }


    #mobile-main{

        padding-top:70px;

    }

}


/*==================================================
        DESKTOP
==================================================*/

@media screen and (min-width:768px){

    .header,
    #sidebar,
    #overlay{

        display:none;

    }

}


/*==================================================
        SCROLLBAR
==================================================*/

html{

    scrollbar-width:thin;

    scrollbar-color:

        var(--accent)
        var(--bg);

}


#sidebar{

    scrollbar-width:thin;

    scrollbar-color:

        rgba(255,212,0,.70)
        transparent;

}


#sidebar::-webkit-scrollbar{

    width:4px;

}


#sidebar::-webkit-scrollbar-thumb{

    background:

        rgba(255,212,0,.70);

    border-radius:999px;

}