/*==================================================*
* LA TOXICA RADIO
* TOP 5 / TOXIMETRO
* ESTILO MODERNO
*==================================================*/


/*==================================================*
* SECCION
*==================================================*/

.top5-section {

    width: 100%;

    margin: 0;

    padding: 8px 8px 12px;

    box-sizing: border-box;

    background: #FFD400;

}


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

.top5-header {

    position: relative;

    width: 100%;

    min-height: 48px;

    margin: 0 0 8px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

}


/*==================================================*
* MARCA
*==================================================*/

.top5-brand {

    display: flex;

    align-items: center;

    justify-content: center;

}


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

.top5-title-logo {

    display: block;

    width: 125px;

    max-width: 125px;

    height: auto;

    margin: 0 auto;

    object-fit: contain;

}


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

.spotify-logo-top5 {

    position: absolute;

    top: 50%;

    right: 3px;

    width: 30px;

    height: auto;

    transform: translateY(-50%);

}


/*==================================================*
* CONTENEDOR TOP 5
*==================================================*/

.top5-grid {

    width: 100%;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 5px;

    box-sizing: border-box;

}


/*==================================================*
* TARJETA
*==================================================*/

.top5-card {

    position: relative;

    width: 100%;

    min-height: 64px;

    margin: 0;

    padding: 7px 6px;

    display: flex;

    align-items: center;

    gap: 8px;

    box-sizing: border-box;

    background: #0B3D91;

    border: 0;

    border-radius: 9px;

    overflow: hidden;

    box-shadow:

        0 3px 8px

        rgba(0, 0, 0, .20);

}


/*==================================================*
* PRIMERA TARJETA
*==================================================*/

.top5-card-1 {

    min-height: 74px;

}


/*==================================================*
* NUMERO
*==================================================*/

.top5-number {

    flex: 0 0 34px;

    width: 34px;

    min-width: 34px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border-radius: 6px;

    background: #FFFFFF;

    color: #111111;

    font-size: 12px;

    font-weight: 900;

    line-height: 1;

}


/*==================================================*
* NUMERO #1
*==================================================*/

.top5-card-1 .top5-number {

    flex-basis: 40px;

    width: 40px;

    min-width: 40px;

    height: 36px;

    background: #111111;

    color: #FFD400;

    font-size: 15px;

}


/*==================================================*
* FLECHA SUBE
*==================================================*/

.top5-card.up .top5-number::after {

    content: "";

    position: absolute;

    margin-top: 45px;

    width: 0;

    height: 0;

    border-left: 4px solid transparent;

    border-right: 4px solid transparent;

    border-bottom: 6px solid #25D366;

}


/*==================================================*
* FLECHA BAJA
*==================================================*/

.top5-card.down .top5-number::after {

    content: "";

    position: absolute;

    margin-top: 45px;

    width: 0;

    height: 0;

    border-left: 4px solid transparent;

    border-right: 4px solid transparent;

    border-top: 6px solid #FF3131;

}


/*==================================================*
* FLECHA #1
*==================================================*/

.top5-card-1.up .top5-number::after {

    margin-top: 52px;

    border-left-width: 5px;

    border-right-width: 5px;

    border-bottom-width: 8px;

}


/*==================================================*
* PORTADA
*==================================================*/

.top5-cover {

    flex: 0 0 47px;

    width: 47px;

    height: 47px;

    min-width: 47px;

    overflow: hidden;

    box-sizing: border-box;

    background: #111111;

    border-radius: 6px;

}


/*==================================================*
* IMAGEN
*==================================================*/

.top5-cover img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/*==================================================*
* PORTADA #1
*==================================================*/

.top5-card-1 .top5-cover {

    flex-basis: 55px;

    width: 55px;

    height: 55px;

    min-width: 55px;

}


/*==================================================*
* INFORMACION
*==================================================*/

.top5-info {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    margin: 0;

    padding: 0;

}


/*==================================================*
* CANCION
*==================================================*/

.top5-info h3 {

    width: 100%;

    margin: 0;

    padding: 0;

    color: #FFFFFF !important;

    font-size: 10px;

    font-weight: 900;

    line-height: 1.15;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/*==================================================*
* ARTISTA
*==================================================*/

.top5-info p {

    width: 100%;

    margin: 3px 0 0;

    padding: 0;

    color: #FFFFFF !important;

    opacity: .78;

    font-size: 7.5px;

    font-weight: 700;

    line-height: 1.1;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/*==================================================*
* CANCION #1
*==================================================*/

.top5-card-1 .top5-info h3 {

    font-size: 11.5px;

}


/*==================================================*
* ARTISTA #1
*==================================================*/

.top5-card-1 .top5-info p {

    font-size: 8px;

}


/*==================================================*
* ACCIONES
*==================================================*/

.top5-actions {

    flex: 0 0 42px;

    width: 42px;

    min-width: 42px;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

}


/*==================================================*
* BOTON YOUTUBE
*==================================================*/

.top5-play {

    width: 29px;

    height: 29px;

    flex: 0 0 29px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border: 0;

    border-radius: 50%;

    background: #111111;

    color: #FFD400;

    text-decoration: none;

    font-size: 9px;

    font-weight: 900;

    line-height: 1;

    box-shadow:

        0 2px 5px

        rgba(0, 0, 0, .30);

}


/*==================================================*
* BOTON VOTAR
*==================================================*/

.top5-vote {

    position: relative;

    width: 36px;

    min-height: 20px;

    margin: 0;

    padding: 4px 5px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

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

    border-radius: 6px;

    background: #FFD400;

    color: #111111;

    font-family: Arial, sans-serif;

    font-size: 6px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: .3px;

    text-align: center;

    text-transform: uppercase;

    cursor: pointer;

    box-shadow:

        0 2px 5px

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

    transition:

        transform .15s ease,

        background .15s ease,

        box-shadow .15s ease;

}


/*==================================================*
* SIN PUNTO DECORATIVO
*==================================================*/

.top5-vote::before {

    content: none !important;

    display: none !important;

}


/*==================================================*
* BOTON VOTADO
*==================================================*/

.top5-vote.voted {

    background: #25D366;

    border-color: #25D366;

    color: #FFFFFF;

    box-shadow:

        0 0 8px

        rgba(37, 211, 102, .45);

}


.top5-vote.voted::before {

    content: none !important;

    display: none !important;

}


/*==================================================*
* HOVER
*==================================================*/

.top5-vote:hover {

    background: #FFFFFF;

    color: #111111;

    box-shadow:

        0 3px 8px

        rgba(0, 0, 0, .35);

}


/*==================================================*
* PRESION
*==================================================*/

.top5-vote:active {

    transform: scale(.90);

}


.top5-play:active {

    transform: scale(.88);

}


/*==================================================*
* DESHABILITADO
*==================================================*/

.top5-vote:disabled {

    cursor: default;

}


/*==================================================*
* OCULTAR ELEMENTOS ANTIGUOS
*==================================================*/

.top5-meter,
.top5-level,
.top5-percent {

    display: none !important;

}


/*==================================================*
* TARJETA SIN TRAZOS
*==================================================*/

.top5-card::before,
.top5-card::after {

    content: none !important;

    display: none !important;

}


/*==================================================*
* PANTALLAS PEQUENAS
*==================================================*/

@media (max-width: 360px) {

    .top5-section {

        padding: 7px 6px 10px;

    }


    .top5-title-logo {

        width: 112px;

    }


    .spotify-logo-top5 {

        width: 27px;

    }


    .top5-card {

        min-height: 58px;

        padding: 6px 4px;

        gap: 6px;

    }


    .top5-card-1 {

        min-height: 67px;

    }


    .top5-number {

        flex-basis: 29px;

        width: 29px;

        min-width: 29px;

        height: 26px;

        font-size: 10px;

    }


    .top5-card-1 .top5-number {

        flex-basis: 34px;

        width: 34px;

        min-width: 34px;

        height: 32px;

        font-size: 13px;

    }


    .top5-cover {

        flex-basis: 41px;

        width: 41px;

        height: 41px;

        min-width: 41px;

    }


    .top5-card-1 .top5-cover {

        flex-basis: 48px;

        width: 48px;

        height: 48px;

        min-width: 48px;

    }


    .top5-info h3 {

        font-size: 8.5px;

    }


    .top5-info p {

        font-size: 6.5px;

    }


    .top5-card-1 .top5-info h3 {

        font-size: 9.5px;

    }


    .top5-card-1 .top5-info p {

        font-size: 7px;

    }


    .top5-actions {

        flex-basis: 38px;

        width: 38px;

        min-width: 38px;

        gap: 4px;

    }


    .top5-play {

        width: 25px;

        height: 25px;

        flex-basis: 25px;

        font-size: 7px;

    }


    .top5-vote {

        width: 34px;

        min-height: 19px;

        font-size: 5.5px;

    }

}


/*==================================================*
* MUY PEQUENAS
*==================================================*/

@media (max-width: 320px) {

    .top5-card {

        min-height: 54px;

        padding: 5px 3px;

        gap: 5px;

    }


    .top5-card-1 {

        min-height: 62px;

    }


    .top5-cover {

        flex-basis: 37px;

        width: 37px;

        height: 37px;

        min-width: 37px;

    }


    .top5-card-1 .top5-cover {

        flex-basis: 43px;

        width: 43px;

        height: 43px;

        min-width: 43px;

    }


    .top5-actions {

        flex-basis: 35px;

        width: 35px;

        min-width: 35px;

    }


    .top5-play {

        width: 23px;

        height: 23px;

        flex-basis: 23px;

    }


    .top5-vote {

        width: 32px;

        min-height: 18px;

        font-size: 5px;

    }

}


/*==================================================*
* TABLET
*==================================================*/

@media (min-width: 768px) {

    .top5-title-logo {

        width: 145px;

        max-width: 145px;

    }


    .spotify-logo-top5 {

        width: 34px;

    }


    .top5-card {

        min-height: 70px;

    }


    .top5-card-1 {

        min-height: 80px;

    }


    .top5-info h3 {

        font-size: 12px;

    }


    .top5-info p {

        font-size: 9px;

    }


    .top5-vote {

        width: 42px;

        min-height: 22px;

        font-size: 7px;

    }

}