/*==========================================================
    EDITORIAL TICKER WEB
    LA TOXICA RADIO
    DESKTOP
==========================================================*/


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

.editorial-ticker-web {

    position: relative;

    width: 100%;
    height: 48px;

    margin: 0;
    padding: 0;

    background: #FFFFFF;

    border-bottom: 1px solid rgba(8, 21, 38, 0.12);

    overflow: hidden;

    box-sizing: border-box;

    z-index: 20;

}


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

.editorial-ticker-web-inner {

    position: relative;

    width: 100%;
    height: 48px;

    margin: 0;
    padding: 0 24px;

    display: flex;

    align-items: center;

    box-sizing: border-box;

    overflow: hidden;

}


/*==========================================================
    FECHA
==========================================================*/

.editorial-ticker-web-date {

    flex: 0 0 86px;

    width: 86px;
    min-width: 86px;
    max-width: 86px;

    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    color: #081526;

    font-family: Arial, sans-serif;

    font-size: 11px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.3px;

    white-space: nowrap;

    box-sizing: border-box;

}


/*==========================================================
    SEPARADOR
==========================================================*/

.editorial-ticker-web-separator {

    flex: 0 0 16px;

    width: 16px;
    min-width: 16px;
    max-width: 16px;

    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    color: #FFD400;

    font-family: Arial, sans-serif;

    font-size: 17px;

    font-weight: 900;

    line-height: 1;

    box-sizing: border-box;

}


/*==========================================================
    BLOQUE CENTRAL
==========================================================*/

.editorial-ticker-web-image-box {

    --ticker-image-offset: 0px;

    flex: 0 0 32px;

    width: 32px;
    min-width: 32px;
    max-width: 32px;

    height: 32px;

    margin: 0 10px 0 0;

    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #081526;

    border-radius: 5px;

    overflow: hidden;

    box-sizing: border-box;

    position: relative;

    left: var(--ticker-image-offset);

    z-index: 2;

}


/*==========================================================
    MINIATURA
==========================================================*/

.editorial-ticker-web-image {

    display: block;

    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;

    margin: 0;

    padding: 0;

    object-fit: cover;

    object-position: center;

    border: 0;

    border-radius: 5px;

    background: #081526;

    box-sizing: border-box;

    visibility: hidden;

}


/*==========================================================
    CONTENEDOR DEL TITULO
==========================================================*/

.editorial-ticker-web-title-container {

    position: relative;

    flex: 1 1 auto;

    width: auto;

    min-width: 0;

    height: 48px;

    margin: 0;

    padding: 0;

    display: block;

    overflow: hidden;

    box-sizing: border-box;

}


/*==========================================================
    TITULO
==========================================================*/

.editorial-ticker-web-title {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;

    padding: 0 10px;

    box-sizing: border-box;

    overflow: hidden;

    color: #081526 !important;

    font-family: Arial, sans-serif !important;

    font-size: 13px !important;

    font-weight: 800 !important;

    line-height: 17px;

    text-align: center;

    transform: translateY(0);

}


/*==========================================================
    TEXTO DEL TITULO
==========================================================*/

.editorial-ticker-web-text {

    display: block;

    width: 100%;

    max-width: 100%;

    margin: 0;

    padding: 0;

    color: #081526 !important;

    font-family: Arial, sans-serif !important;

    font-size: 13px !important;

    font-weight: 800 !important;

    line-height: 17px;

    text-align: center;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/*==========================================================
    TITULO ENTRANDO
==========================================================*/

.editorial-ticker-web-title.ticker-next {

    transform: translateY(100%);

}


/*==========================================================
    TITULO VISIBLE
==========================================================*/

.editorial-ticker-web-title.ticker-visible {

    transform: translateY(0);

    transition:
        transform 650ms ease;

}


/*==========================================================
    TITULO SALIENDO
==========================================================*/

.editorial-ticker-web-title.ticker-up {

    transform: translateY(-100%);

    transition:
        transform 650ms ease;

}


/*==========================================================
    ESTADO DE CARGA
==========================================================*/

.editorial-ticker-web-loading {

    width: 100%;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;

    padding: 0 10px;

    color: #081526;

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: 800;

    line-height: 14px;

    letter-spacing: 0.4px;

    text-align: center;

    box-sizing: border-box;

}


/*==========================================================
    IMAGEN SIN CONTENIDO
==========================================================*/

.editorial-ticker-web-image[src=""] {

    visibility: hidden;

}


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

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

    .editorial-ticker-web {

        height: 44px;

    }


    .editorial-ticker-web-inner {

        height: 44px;

        padding: 0 18px;

    }


    .editorial-ticker-web-date {

        flex-basis: 76px;

        width: 76px;
        min-width: 76px;
        max-width: 76px;

        height: 44px;

        font-size: 10px;

    }


    .editorial-ticker-web-separator {

        flex-basis: 14px;

        width: 14px;
        min-width: 14px;
        max-width: 14px;

        height: 44px;

        font-size: 15px;

    }


    .editorial-ticker-web-image-box {

        flex-basis: 29px;

        width: 29px;
        min-width: 29px;
        max-width: 29px;

        height: 29px;

        margin-right: 8px;

    }


    .editorial-ticker-web-image {

        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;

        height: 29px !important;
        min-height: 29px !important;
        max-height: 29px !important;

    }


    .editorial-ticker-web-title-container {

        height: 44px;

    }


    .editorial-ticker-web-title {

        height: 44px;

        padding: 0 8px;

        font-size: 12px !important;

        line-height: 16px;

    }


    .editorial-ticker-web-text {

        font-size: 12px !important;

        line-height: 16px;

    }


    .editorial-ticker-web-loading {

        height: 44px;

        font-size: 9px;

    }

}


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

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

    .editorial-ticker-web {

        height: 50px;

    }


    .editorial-ticker-web-inner {

        height: 50px;

        padding: 0 32px;

    }


    .editorial-ticker-web-date {

        flex-basis: 92px;

        width: 92px;
        min-width: 92px;
        max-width: 92px;

        height: 50px;

        font-size: 11px;

    }


    .editorial-ticker-web-separator {

        flex-basis: 18px;

        width: 18px;
        min-width: 18px;
        max-width: 18px;

        height: 50px;

        font-size: 18px;

    }


    .editorial-ticker-web-image-box {

        flex-basis: 34px;

        width: 34px;
        min-width: 34px;
        max-width: 34px;

        height: 34px;

        margin-right: 10px;

        border-radius: 6px;

    }


    .editorial-ticker-web-image {

        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;

        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;

        border-radius: 6px;

    }


    .editorial-ticker-web-title-container {

        height: 50px;

    }


    .editorial-ticker-web-title {

        height: 50px;

        padding: 0 10px;

        font-size: 14px !important;

        line-height: 18px;

    }


    .editorial-ticker-web-text {

        font-size: 14px !important;

        line-height: 18px;

    }


    .editorial-ticker-web-loading {

        height: 50px;

        padding: 0 10px;

        font-size: 10px;

    }

}


/*==========================================================
    PANTALLAS GRANDES
==========================================================*/

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

    .editorial-ticker-web-inner {

        padding: 0 45px;

    }


    .editorial-ticker-web-date {

        flex-basis: 100px;

        width: 100px;
        min-width: 100px;
        max-width: 100px;

        font-size: 12px;

    }


    .editorial-ticker-web-image-box {

        flex-basis: 36px;

        width: 36px;
        min-width: 36px;
        max-width: 36px;

        height: 36px;

        margin-right: 11px;

    }


    .editorial-ticker-web-image {

        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;

        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;

    }


    .editorial-ticker-web-title {

        font-size: 15px !important;

    }


    .editorial-ticker-web-text {

        font-size: 15px !important;

    }

}


/*==========================================================
    CONTROL DE POSICION DE MINIATURA
==========================================================*/

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

    .editorial-ticker-web-image-box {

        --ticker-image-offset: 0px;

    }

}


/*
    EJEMPLOS PARA MOVER LA MINIATURA:

    Hacia la derecha:

    --ticker-image-offset: 10px;

    Hacia la izquierda:

    --ticker-image-offset: -10px;

    Este movimiento no modifica el ancho del texto.
*/


/*==========================================================
    OCULTAR EN MOVIL
==========================================================*/

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

    .editorial-ticker-web {

        display: none !important;

    }

}