/* !! USAR DURANTE CONVIVENCIA ENTRE ESTILOS BASE. ELIMINAR CUANDO EL REDISEÑO ESTÉ COMPLETADO AL 100% Y APLICAR EN "/css/bplay-v25/base/styles-v25.css" */

.header {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* FIN DE ADVERTENCIA */
/* ------------------ */

.header {
    grid-column: 1 / -1;
    grid-auto-rows: max-content;
    row-gap: 0;
    transition: filter 2s;
}
.header .header__favorites {
    width: var(--Size-Huge, 24px);
    height: var(--Size-Huge, 24px);
}

/* !! USAR DURANTE CONVIVENCIA ENTRE ESTILOS BASE. ELIMINAR CUANDO EL 100% DE LA IMPLANTACIÓN DEL NUEVO REDISEÑO ESTÉ COMPLETADA */
@media screen and (max-width: 400px) {
    header {
        height: auto !important;
    }
}
header {
    height: auto;
}
.header {
    z-index: 9;
    width: 100%;
    max-width: none;
    padding: 0 !important;
}
.header section {
    margin-bottom: 0;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}
.header ul {
    margin-bottom: 0;
}
/* FIN DE ADVERTENCIA */
/* ------------------ */

/* HEADER TIMER */

.header__timer {
    background: var(--Principales-Verde-Bplay, lightgreen);
    grid-column: 1 / -1;
    width: 100%;
    z-index: 100;
    height: var(--Size-Huge, 24px);
    gap: var(--Size-Big, 16px);
}
@media screen and (min-width: 1280px) {
    .header__timer {
        display: none;
    }
}

.header__timer .time-panel {
    grid-column: 6 / 8;
    justify-self: center;
}
.header__timer .time-panel .time-panel__icon {
    width: var(--Size-Small, 12px);
    height: var(--Size-Small, 12px);
}
@media screen and (max-width: 1279px) {
    .header__timer .time-panel .time-panel__text {
        min-width: 105px;
        position: relative;
        top: 1px;
    }
    .header__timer .time-panel .time-panel__text span:first-child {
        display: inline-block;
        width: 43px;
    }
}
@media screen and (max-width: 767px) {
    .header__timer .time-panel {
        grid-column: 3 / 5;
    }
}

/* HEADER SECONDARY */

.header__secondary {
    background: var(--Bases-Light-Gray, #fff);
    grid-column: 1 / -1;
    width: 100%;
    height: 40px;
    z-index: 90;
    gap: var(--Size-Big, 16px);
    transition: all 0.3s;
}
@media screen and (min-width: 768px) {
    .header__secondary {
        display: none;
    }
}

.header__secondary .linked-container {
    grid-column: 2 / 4;
    justify-content: flex-start;
    align-items: center;
}
.header__secondary .linked-container .linked-container__img {
    width: 116px;
    height: 31.73px;
}

.header__secondary .bplay25-btn--primary {
    grid-column: 4 / 6;
    justify-self: self-end;
}

/* HEADER PRIMARY */

.header__primary {
    background: var(--Bases-Black, #000);
    grid-column: 1 / -1;
    height: 60px;
    z-index: 90;
    padding: var(--Size-Smallest, 8px) 0;
    gap: var(--Size-Big, 16px);
    transition: all 0.3s;
}
@media screen and (max-width: 1279px) {
    .header__primary {
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.32);
    }
}
/* !! USAR DURANTE CONVIVENCIA ENTRE ESTILOS BASE. ELIMINAR CUANDO EL 100% DE LA IMPLANTACIÓN DEL NUEVO REDISEÑO ESTÉ COMPLETADA */
@media screen and (min-width: 1390px) {
    .header section {
        width: 100%;
    }
}
@media screen and (max-width: 1655px) {
    .header section {
        width: 100%;
    }
}
/* FIN DE ADVERTENCIA */
/* ------------------ */

.header__primary .header__branding {
    grid-column: 3 / 6;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.header__primary .header__branding .burger-icon {
    height: 35px;
    width: 35px;
}
.header__primary .header__branding .sponsor-logo {
    height: 36px;
}
@media screen and (max-width: 1279px) {
    .header__primary .header__branding {
        grid-column: 3 / 7;
    }
}
@media screen and (max-width: 767px) {
    .header__primary .header__branding {
        grid-column: 2 / 4;
    }
}
.header__primary .header__branding .svg-separator {
    margin: 0 var(--Size-Mini, 4px)  0 var(--Size-Small, 12px) ;
}
@media screen and (max-width: 767px) {
    .header__primary .header__branding .svg-separator,
    .header__primary .header__branding .sponsor-logo {
        display: none;
    }
}

.header__primary .header__timer--embedded {
    grid-column: 7 / 9;
    justify-self: center;
}
.header__primary .header__timer--embedded .time-panel__text {
    min-width: 96px;
}
.header__primary .header__timer--embedded .time-panel__text span:first-child {
    display: inline-block;
    width: 42px;
}
@media screen and (max-width: 1279px) {
    .header__primary .header__timer--embedded {
        display: none;
    }
}

.header__primary .header__action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.header__primary .header__action--logged {
    grid-column: 10 / 15;
}
@media screen and (max-width: 1279px) {
    .header__primary .header__action--logged {
        grid-column: 7 / 11;
    }
}
@media screen and (max-width: 767px) {
    .header__primary .header__action--logged {
        grid-column: 4 / 6;
    }
}
.header__primary .header__action--logged .bplay25-btn--primary {
    margin: 0 var(--Size-Big, 16px) 0 var(--Size-Smallest, 8px);
}
.header__primary .header__action--logged .svg-separator {
    margin: 0 var(--Size-Mini, 4px) 0 var(--Size-Smallest, 8px);
}
@media screen and (max-width: 767px) {
    .header__primary .header__action--logged .bplay25-btn--primary,
    .header__primary .header__action--logged .user-info .svg-separator,
    .header__primary .header__action--logged .user-info__container {
        display: none;
    }
    .header__primary .balance-refresher + .svg-separator {
        margin: 0 var(--Size-Smallest, 8px) 0 var(--Size-Mini, 4px);
    }
}
.header__primary .header__action--unlogged {
    grid-column: 13 / 15;
}
@media screen and (max-width: 1279px) {
    .header__primary .header__action--unlogged {
        grid-column: 8 / 11;
    }
}
@media screen and (max-width: 767px) {
    .header__primary .header__action--unlogged {
        grid-column: 4 / 6;
        position: relative;
    }
}

/* Favorites styles */
.header__primary .header__favorites {
    margin-right: var(--Size-Big, 16px);
}
@media screen and (max-width: 767px) {
    .header__primary .header__favorites {
        display: none;
    }
}
@media screen and (min-width: 1280px) {
    .header__primary .header__favorites {
        display: none;
    }
}
.header__primary .header__action--logged .header__favorites svg {
    width: 80%;
    height: 80%;
    position: relative;
    top: 3px;
}
.header__primary .header__action--logged .header__favorites--void svg {
    width: 100%;
    height: 100%;
    position: relative;
    top: 1px;
}

/* HEADER LINKLIST */

.header__nav {
    background: var(--Principales-Verde-Bplay, green);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.40);
    grid-column: 1 / -1;
    height: 36px;
    gap: var(--Size-Big, 16px);
    justify-items: flex-start;
    align-items: flex-start;
}
@media screen and (max-width: 1279px) {
    .header__nav {
        display: none;
    }
}
/* !! USAR DURANTE CONVIVENCIA ENTRE ESTILOS BASE. ELIMINAR CUANDO EL 100% DE LA IMPLANTACIÓN DEL NUEVO REDISEÑO ESTÉ COMPLETADA */
@media screen and (max-width: 400px) {
    .header {
        height: unset !important;
    }
}
/* FIN DE ADVERTENCIA */
/* ------------------ */

.header .linklist {
    align-items: stretch;
    font-size: var(--Size-Small, 12px);
    line-height: var(--Size-Big, 16px);
    width: max-content;
    height: 100%;
}
.header .linklist.linklist--left {
    justify-content: flex-start;
    grid-column: 3 / 10;
    font-weight: 700;
}
.header .linklist.linklist--right {
    justify-content: flex-end;
    justify-self: end;
    grid-column: 13 / 15;
    font-weight: 400;
}
.header .linklist .linklist__item {
    padding: 0 var(--Size-Small, 12px);
    height: inherit;
    display: flex;
    align-items: center;
}
.header .linklist .linklist__item:hover {
    background: var(--Bases-Pure-White, #fff);
}
.header .linklist .linklist__item .linklist__link:active,
.header .linklist .linklist__item .linklist__link:link,
.header .linklist .linklist__item .linklist__link:visited,
.header .linklist .linklist__item .linklist__link:hover {
    color: var(--Bases-Darkest, #000);
}

/* Favorites styles */
.header .linklist.linklist--right .linklist__item[data-itemType="favorites"] {
    margin-left: var(--Size-Smallest, 8px);
    padding-right: 0;
}
.header .header__nav--logged .linklist.linklist--right .header__favorites {
    position: relative;
    top: 1px;
    right: 5px;
}
.header .header__nav--unlogged .linklist.linklist--right .header__favorites, .header .header__nav--logged .linklist.linklist--right .header__favorites--void {
    position: relative;
    right: 6px;
}
.header .header__nav--logged .linklist.linklist--right .header__favorites svg {
    width: 80%;
    height: 80%;
}
.header .header__nav--logged .linklist.linklist--right .header__favorites--void svg {
    width: 100%;
    height: 100%;
}