/*==================================================*
 * LA TOXICA RADIO
 * TOXIMETRO WEB
 * DISENO PREMIUM
 * VERSION DESKTOP
 *==================================================*/


/*==================================================*
 * VARIABLES
 *==================================================*/

#toximetro {

    --tox-black: #0A0A0A;
    --tox-dark: #111111;
    --tox-panel: #181818;
    --tox-card: #202020;
    --tox-card-light: #272727;

    --tox-yellow: #FFD400;
    --tox-orange: #FF8A00;
    --tox-red: #FF3131;
    --tox-green: #25D366;

    --tox-white: #FFFFFF;
    --tox-muted: #A7A7A7;
    --tox-line: rgba(255, 255, 255, 0.10);

}


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

#toximetro {

    position: relative;

    width: 430px;

    max-width: 430px;

    margin: 135px 0 45px;

    padding: 0;

    box-sizing: border-box;

    background: var(--tox-black);

    border: 1px solid rgba(255, 212, 0, 0.18);

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.35);

}


/*==================================================*
 * LINEA SUPERIOR
 *==================================================*/

#toximetro::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #FFD400 0%,
            #FF8A00 45%,
            #FF3131 100%
        );

    z-index: 20;

}


/*==================================================*
 * BRILLO
 *==================================================*/

#toximetro::after {

    content: "";

    position: absolute;

    top: -140px;

    right: -100px;

    width: 300px;

    height: 300px;

    background: rgba(255, 212, 0, 0.08);

    border-radius: 50%;

    filter: blur(55px);

    pointer-events: none;

}


/*==================================================*
 * CONTENEDOR
 *==================================================*/

.toximetro-container {

    position: relative;

    width: 100%;

    margin: 0;

    padding: 28px 22px 24px;

    box-sizing: border-box;

    z-index: 2;

}


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

.toximetro-header {

    position: relative;

    width: 100%;

    height: 115px;

    margin: 0 0 25px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

}


/*==================================================*
 * LINEA DECORATIVA HEADER
 *==================================================*/

.toximetro-header::before {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -9px;

    width: 95px;

    height: 3px;

    transform: translateX(-50%);

    background: var(--tox-yellow);

    border-radius: 10px;

}


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

.toximetro-logo {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}


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

.toximetro-logo img {

    display: block;

    width: 300px;

    max-width: 100%;

    height: auto;

    margin: 0;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 15px
            rgba(0, 0, 0, 0.55)
        );

}


/*==================================================*
 * LISTA
 *==================================================*/

.toximetro-list {

    position: relative;

    width: 100%;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 8px;

    box-sizing: border-box;

}


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

.toximetro-list > * {

    position: relative;

    width: 100%;

    min-height: 78px;

    margin: 0;

    padding: 9px 10px;

    display: flex;

    align-items: center;

    gap: 11px;

    box-sizing: border-box;

    background: var(--tox-card);

    border: 1px solid var(--tox-line);

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, 0.22);

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;

}


/*==================================================*
 * BARRA LATERAL
 *==================================================*/

.toximetro-list > *::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 4px;

    height: 100%;

    background: #555555;

}


/*==================================================*
 * COLORES POR POSICION
 *==================================================*/

.toximetro-list > .top5-card-1::before {

    background: var(--tox-yellow);

}


.toximetro-list > .top5-card-2::before {

    background: #C0C0C0;

}


.toximetro-list > .top5-card-3::before {

    background: #CD7F32;

}


.toximetro-list > .top5-card-4::before {

    background: #6C8EBF;

}


.toximetro-list > .top5-card-5::before {

    background: #805AD5;

}


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

.toximetro-list > *:hover {

    transform: translateX(5px);

    background: var(--tox-card-light);

    border-color:
        rgba(255, 212, 0, 0.30);

    box-shadow:
        0 10px 24px
        rgba(0, 0, 0, 0.32);

}


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

.toximetro-list > *:first-child {

    min-height: 135px;

    padding: 13px;

    background:
        linear-gradient(
            135deg,
            #292929 0%,
            #151515 100%
        );

    border: 1px solid
        rgba(255, 212, 0, 0.45);

    border-radius: 17px;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.38);

}


/*==================================================*
 * DESTELLO #1
 *==================================================*/

.toximetro-list > *:first-child::after {

    content: "";

    position: absolute;

    right: -70px;

    top: -90px;

    width: 190px;

    height: 190px;

    background:
        radial-gradient(
            circle,
            rgba(255, 212, 0, 0.22) 0%,
            rgba(255, 212, 0, 0) 70%
        );

    pointer-events: none;

}


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

.toximetro-list > * > *:first-child {

    position: relative;

    flex: 0 0 44px;

    width: 44px;

    min-width: 44px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    background: #303030;

    color: var(--tox-white);

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

    border-radius: 8px;

    font-family: Arial, sans-serif;

    font-size: 11px;

    font-weight: 900;

    line-height: 1;

    z-index: 5;

}


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

.toximetro-list > *:first-child > *:first-child {

    flex: 0 0 61px;

    width: 61px;

    min-width: 61px;

    height: 61px;

    background: var(--tox-yellow);

    color: #111111;

    border: 0;

    border-radius: 11px;

    font-size: 18px;

    box-shadow:
        0 5px 15px
        rgba(255, 212, 0, 0.20);

}


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

.toximetro-list > * img {

    position: relative;

    flex: 0 0 57px;

    width: 57px;

    height: 57px;

    min-width: 57px;

    display: block;

    object-fit: cover;

    box-sizing: border-box;

    background: #0D0D0D;

    border: 2px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 9px;

    z-index: 5;

}


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

.toximetro-list > *:first-child img {

    flex: 0 0 88px;

    width: 88px;

    height: 88px;

    min-width: 88px;

    border-radius: 11px;

    border: 2px solid
        rgba(255, 212, 0, 0.65);

    box-shadow:
        0 7px 18px
        rgba(0, 0, 0, 0.45);

}


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

.toximetro-list > * .top5-info {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    margin: 0;

    padding: 0;

    z-index: 6;

}


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

.toximetro-list > * h3 {

    width: 100%;

    margin: 0;

    padding: 0;

    color: var(--tox-white);

    font-family: Arial, sans-serif;

    font-size: 12px;

    font-weight: 900;

    line-height: 1.2;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


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

.toximetro-list > * p {

    width: 100%;

    margin: 4px 0 0;

    padding: 0;

    color: var(--tox-muted);

    font-family: Arial, sans-serif;

    font-size: 9px;

    font-weight: 700;

    line-height: 1.2;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/*==================================================*
 * TITULO #1
 *==================================================*/

.toximetro-list > *:first-child h3 {

    font-size: 16px;

}


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

.toximetro-list > *:first-child p {

    font-size: 10px;

}


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

.toximetro-list > * .top5-actions {

    flex: 0 0 43px;

    width: 43px;

    min-width: 43px;

    margin-left: auto;

    padding: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    z-index: 10;

}


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

.toximetro-list > * a {

    width: 32px;

    height: 32px;

    flex: 0 0 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    background: #090909;

    color: var(--tox-yellow);

    border: 1px solid
        rgba(255, 212, 0, 0.30);

    border-radius: 50%;

    font-family: Arial, sans-serif;

    font-size: 9px;

    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 4px 9px
        rgba(0, 0, 0, 0.30);

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;

}


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

.toximetro-list > * a:hover {

    background: var(--tox-yellow);

    color: #111111;

    transform: scale(1.08);

}


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

.toximetro-list > * button {

    width: 41px;

    min-width: 41px;

    min-height: 21px;

    padding: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    background: transparent;

    color: var(--tox-yellow);

    border: 1px solid
        rgba(255, 212, 0, 0.55);

    border-radius: 5px;

    font-family: Arial, sans-serif;

    font-size: 6px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.4px;

    text-align: center;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;

}


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

.toximetro-list > * button:hover {

    background: var(--tox-yellow);

    color: #111111;

}


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

.toximetro-list > * button.voted {

    background: var(--tox-green);

    color: #FFFFFF;

    border-color: var(--tox-green);

    box-shadow:
        0 0 12px
        rgba(37, 211, 102, 0.35);

}


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

.toximetro-list > * a:active,
.toximetro-list > * button:active {

    transform: scale(0.90);

}


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

.toximetro-list > *.up .top5-position::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -10px;

    transform: translateX(-50%);

    width: 0;

    height: 0;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-bottom: 8px solid var(--tox-green);

}


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

.toximetro-list > *.down .top5-position::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -10px;

    transform: translateX(-50%);

    width: 0;

    height: 0;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-top: 8px solid var(--tox-red);

}


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

.toximetro-meter,
.toximetro-level,
.toximetro-percent {

    display: none !important;

}


/*==================================================*
 * MENSAJE VACIO
 *==================================================*/

.toximetro-empty,
.toximetro-error {

    padding: 25px;

    color: var(--tox-muted);

    font-family: Arial, sans-serif;

    font-size: 11px;

    font-weight: 700;

    text-align: center;

}


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

.toximetro-footer {

    position: relative;

    width: 100%;

    margin: 21px 0 0;

    padding: 14px 4px 0;

    border-top: 1px solid var(--tox-line);

    color: #777777;

    font-family: Arial, sans-serif;

    font-size: 9px;

    font-weight: 700;

    line-height: 1.5;

    text-align: center;

}


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

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

    #toximetro {

        width: 390px;

        max-width: 390px;

        margin-top: 115px;

    }


    .toximetro-container {

        padding: 25px 19px 21px;

    }


    .toximetro-header {

        height: 105px;

    }


    .toximetro-logo img {

        width: 275px;

    }

}


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

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

    #toximetro {

        width: 430px;

        max-width: 430px;

    }

}


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

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

    #toximetro {

        width: 455px;

        max-width: 455px;

        margin-top: 135px;

    }


    .toximetro-container {

        padding: 30px 23px 25px;

    }


    .toximetro-header {

        height: 120px;

        margin-bottom: 27px;

    }


    .toximetro-logo img {

        width: 315px;

    }


    .toximetro-list {

        gap: 9px;

    }


    .toximetro-list > * {

        min-height: 80px;

    }


    .toximetro-list > *:first-child {

        min-height: 140px;

    }


    .toximetro-list > * img {

        flex-basis: 61px;

        width: 61px;

        height: 61px;

        min-width: 61px;

    }


    .toximetro-list > *:first-child img {

        flex-basis: 91px;

        width: 91px;

        height: 91px;

        min-width: 91px;

    }


    .toximetro-list > * h3 {

        font-size: 13px;

    }


    .toximetro-list > * p {

        font-size: 9px;

    }


    .toximetro-list > *:first-child h3 {

        font-size: 17px;

    }


    .toximetro-list > *:first-child p {

        font-size: 10px;

    }

}


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

@media screen and (max-width: 767px) {

    #toximetro {

        display: none !important;

    }

}