/*import*/
/*Google Sans*/
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');

:root {

    /*Fonts*/
    --theme-font-family: "Google Sans Flex", sans-serif;

    /*Top bar: internal section*/
    --ob-custom-nav-text-color: #e5e7eb;
    --ob-custom-nav-bg-color: #571012;

    /*Top bar: login section*/
    --ob-public-nav-text-color: #e5e7eb;
    --ob-public-nav-bg-color: #571012;

    /*Sidenav*/
    --ob-nav-text-color: #e5e7eb;
    --ob-nav-bg-color: #571012;

    /*Active button in sidenav*/
    --ob-nav-list-active-text-color: #fff;
    --ob-nav-list-active-bg-color: #a11d21;

    --theme-primary-50: #F5E6E7;
    --theme-primary-100: #E6C2C3;
    --theme-primary-200: #D5999B;
    --theme-primary-300: #C36E71;
    --theme-primary-400: #B44A4D;
    --theme-primary-500: #A11D21;
    --theme-primary-600: #931A1E;
    --theme-primary-700: #82171B;
    --theme-primary-800: #711417;
    --theme-primary-900: #571012;
    --theme-primary-A100: #E6C2C3;
    --theme-primary-A200: #D5999B;
    --theme-primary-A400: #B44A4D;
    --theme-primary-A700: #82171B;

    /*CONTRASTES*/
    --theme-primary-contrast-50: #212121;
    --theme-primary-contrast-100: #212121;
    --theme-primary-contrast-200: #212121;
    --theme-primary-contrast-300: #FFFFFF;
    --theme-primary-contrast-400: #FFFFFF;
    --theme-primary-contrast-500: #FFFFFF;
    --theme-primary-contrast-600: #FFFFFF;
    --theme-primary-contrast-700: #FFFFFF;
    --theme-primary-contrast-800: #FFFFFF;
    --theme-primary-contrast-900: #FFFFFF;
    --theme-primary-contrast-A100: #212121;
    --theme-primary-contrast-A200: #212121;
    --theme-primary-contrast-A400: #FFFFFF;
    --theme-primary-contrast-A700: #FFFFFF;

    /*Obfooter: logo filter*/
    --ob-custom-logo-filter: brightness(100);
}

/********* 
INDEX
0 - NAVBAR
1 - GIFT CARD
2 - BILLBOARD
3 - FOOTER
4 - CUSTOM PAGINA DEL EVENTO
5 - CUSTOM INFO PAGINA DEL EVENTO
6 - CUSTOM FOOTER
*********/

/********* 
0 - NAVBAR
*********/
/*Button shooping car disabled*/
mat-toolbar.mat-toolbar button.mdc-button.mat-mdc-button.mat-mdc-button-disabled.mat-unthemed.mat-mdc-button-base {
    color: #b1b1b1;
}

/*Ajuste del logo de la navbar de login*/
mat-toolbar.mat-toolbar.ob-top-bar img {
    height: 30px !important;
    /*Ajustar a la altura deseada*/
    width: auto !important;
    /*Mantener la proporción de la imagen*/
    min-height: 0;
    /*Eliminar la limitación del código base*/
}

/********* 
1 - BILLBOARD
*********/

aside.gift-card {
    background: #000 !important;
}

aside.gift-card span {
    color: #fdd086;
}

aside.gift-card * {
    color: #fff;
}

/*Color de fondo de la barra del boton "search by date"*/
ob-page-events .filter-container {
    background-color: transparent !important;
}

/*Boton "search by date"*/
ob-page-events .filter-container button.mdc-button.mdc-button--outlined.mat-mdc-outlined-button.mat-unthemed.mat-mdc-button-base.ng-star-inserted {
    color: #fff !important;
    border: 1px solid #fdd08690;
    background: #3f2021cc;
}

/*Elimina el fondo del contenedor para que se vea el fondo de la billboard*/
ob-page-events section.main-container {
    background-color: transparent;
}

/*Fondo de la billboard*/
ob-page-events {
    background-color: #3f2021;
    background-image:
        radial-gradient(at 85% 15%, #fdd086d9 0px, transparent 40%),
        radial-gradient(at 15% 15%, #a11d21f2 0px, transparent 45%),
        radial-gradient(at 85% 85%, #a11d21e6 0px, transparent 45%),
        radial-gradient(at 50% 50%, #fdd0864d 0px, transparent 50%),
        radial-gradient(at 15% 85%, #a11d21d9 0px, transparent 45%),
        linear-gradient(135deg, #3f2021 0%, #a11d21 50%, #3f2021 100%);
    background-repeat: no-repeat;
    background-size: cover;
}

/*Padding del contenido de las cards*/
ob-page-events ob-catalog-card .content {
    padding: 20px !important;
}

/*Color del texto de la card*/
ob-page-events ob-catalog-card .content * {
    color: #ffffff;
}

/*Color de fondo de las cards y borde*/
ob-page-events ob-catalog-card {
    background: #3f2021bf;
    border: 1px solid #fdd08690;
    box-shadow: 0 12px 32px 0 #00000066 !important;
    border-radius: 15px !important;
}

ob-page-events .main-container {
    overflow: visible !important;
}

/*FUENTES CARDS*/
ob-page-events ob-catalog-card h3 {
    text-transform: uppercase !important;
    color: #fdd086 !important;
}

/********* 
3 - FOOTER
*********/

/*Color de fondo del footer*/
ob-footer.main-footer {
    background-color: #221011;
    border-top: none;
}

/*Color del texto del footer*/
ob-footer.main-footer * {
    color: #fff !important;
}

/*Color del borde de los botones del footer*/
ob-footer.main-footer .mat-mdc-outlined-button {
    border-color: #fdd086 !important;
}

/*Force powered by fever*/
.fever-logo {
    display: block !important;
}

.onebox-logo {
    display: none
}

/*********
4 - CUSTOM PAGINA DEL EVENTO
*********/

/*FONDO DE LA PAGINA DEL EVENTO*/
ob-page-event {
    background-color: #3f2021;
    background-image:
        radial-gradient(at 85% 15%, #fdd086d9 0px, transparent 40%),
        radial-gradient(at 15% 15%, #a11d21f2 0px, transparent 45%),
        radial-gradient(at 85% 85%, #a11d21e6 0px, transparent 45%),
        radial-gradient(at 50% 50%, #fdd0864d 0px, transparent 50%),
        radial-gradient(at 15% 85%, #a11d21d9 0px, transparent 45%),
        linear-gradient(135deg, #3f2021 0%, #a11d21 50%, #3f2021 100%);
    background-repeat: no-repeat;
    background-size: cover;
}

/*NECESARIO PARA QUE SE VEA EL FONDO DE LA PAGIINA DEL EVENTO*/
ob-page-event .main-container {
    background: transparent;
    overflow: visible;
}

/*FONDO DEL CUADRO DE EVENT INFORMATION*/
ob-page-event-two-step section.section:nth-child(1) {
    background: #3f2021bf;
    border: 1px solid #fdd08690;
    box-shadow: 0 12px 32px 0 #00000066 !important;
    border-radius: 15px !important;
    padding: 2px 16px 18px 16px !important;
}

/*FONDO DEL CUADRO DE SESSION PICKER*/
ob-page-event-two-step section.section:nth-child(2) {
    background: #fff !important;
    padding: 2px 16px !important;
    border-radius: 16px;
    box-shadow: 0 12px 32px 0 #00000066 !important;
}

/*AJUSTES DEL TITULO H2 DE LOS CUADROS DE INFORMACION*/
ob-page-event-two-step section.section h2#eventInformation {
    padding-top: 20px;
    color: #fdd086;
}

/*AJUSTES DEL TITULO H2 DE LOS CUADROS DE CALENDARIO*/
ob-page-event-two-step section.section h2#eventSessions {
    padding-top: 20px;
    margin-top: 0px !important;
}


/********* 
5 - CUSTOM INFO PAGINA DEL EVENTO
*********/
/*Main wrapper layout*/

/*Block section structure*/
section.event-info-container .info-block {
    margin-bottom: 8px;
}

section.event-info-container h3 {
    font-size: 16px;
    color: #fff !important;
    margin-bottom: 12px !important;
    padding-bottom: 4px;
    border-bottom: 1px solid #ffffff50;
}

/*Clean list*/
section.event-info-container .info-list li {
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 8px;
    color: #cccccc;
}

section.event-info-container .info-list li::marker {
    color: #866319;
}

/*Promos & Tickets grid layout*/
section.event-info-container .promo-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    gap: 16px;
}

/*Generic card styling*/
section.event-info-container .promo-grid .promo-card {
    width: 100%;
    background-color: #fff;
    border: 1px solid #fdd086;
    border-radius: 8px;
    padding: 16px;
    align-self: stretch !important;
    /*Se estira obligatoriamente al alto del padre*/
}

section.event-info-container .promo-grid .promo-card h4 {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    color: #571012 !important;
}

section.event-info-container .promo-grid .promo-card p {
    font-size: 14px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    color: #333333 !important;
}

section.event-info-container .promo-grid .promo-card p,
section.event-info-container .promo-grid .promo-card a {
    word-break: keep-all !important;
    /*Evita desbordamiento del email en móvil*/
}

/*Layout Desktop (>= 768px): Vuelve a 3 columnas horizontales*/
@media (max-width: 768px) {
    section.event-info-container .promo-grid {
        flex-direction: column;
    }
}

/*Establece un color de texto gris claro para párrafos exportados desde Microsoft Office*/
p.MsoNormal {
    color: #ccc;
}

/*Contenedor de Diálogo / Cuadro Modal*/

/*Aplica un color de fondo granate a las secciones internas de los cuadros de diálogo Material*/
.mat-mdc-dialog-inner-container.mdc-dialog__container section.dialog-section {
    background-color: #561f22;
}
/*Fuerza el color de texto blanco para los títulos dentro de la sección del diálogo*/
.mat-mdc-dialog-inner-container.mdc-dialog__container section.dialog-section h2.title {
    color: #fff !important;
}

/********* 
6 - CUSTOM FOOTER
*********/
app-channel-footer .channel-footer {
    background-color: #231f20 !important;
}

.sponsors {
    max-width: 900px;
    margin: auto;
    padding: 35px 0px;
}

.sponsors-1 {
    display: flex;
    flex-direction: row;
    justify-content: space-around !important;
    height: 40px;
}

.sponsors a {
    text-decoration: none;
}

.sponsors img {
    height: 100%;
    width: auto;
    object-fit: cover;
    opacity: 1;
}

.sponsors img:hover {
    opacity: 0.8;
}

.sponsors-1,
.sponsors-2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 60px;
}

/*Adaptación Móvil (Máximo 728px)*/
@media only screen and (max-width: 728px) {


    /*Permitir multilínea y ajustar espaciado vertical entre filas*/
    .sponsors-1 {
        flex-wrap: wrap;
        height: auto;
        gap: 20px 0px;
    }

    /*Asignar 2 logos por fila*/
    .sponsors-1>div {
        flex: 0 0 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 28px;
        /*Reducción de altura del contenedor en móvil*/
    }

    /*Ajuste de escala más pequeña para las imágenes manteniendo proporción*/
    .sponsors img {
        height: 28px;
        width: auto;
    }
}