/*import*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /*Fonts*/
    --theme-font-family: "Montserrat", sans-serif;
    /*Navbar Colors*/
    --ob-nav-text-color: #ffffff;
    --ob-nav-bg-color: #9a1f36;
    --ob-nav-list-active-bg-color: #40B289;
    /*color primary*/
    --theme-primary-50: #E8F6F1;
    --theme-primary-100: #C6E8DB;
    --theme-primary-200: #A0D8C3;
    --theme-primary-300: #7AC8AA;
    --theme-primary-400: #5DBE99;
    --theme-primary-500: #2F8364;
    --theme-primary-600: #3AA881;
    --theme-primary-700: #329C76;
    --theme-primary-800: #2A906C;
    --theme-primary-900: #1D7D59;
    --theme-primary-A100: #C6E8DB;
    --theme-primary-A200: #A0D8C3;
    --theme-primary-A400: #5DBE99;
    --theme-primary-A700: #329C76;
    --theme-primary-contrast-50: #212121;
    --theme-primary-contrast-100: #212121;
    --theme-primary-contrast-200: #212121;
    --theme-primary-contrast-300: #212121;
    --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;
}

/********* 
INDEX
1 - NAVBAR
2 - CARDS
3 - FOOTER
4- OCULTAR TODO PARA IFRAME
*********/

/********* 
1 - 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: #7d7d7d61;
}

/********* 
2 - CARDS
*********/

/*Cards personalizada*/
ob-page-events ob-catalog-card {
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 4px 4px #9a1f36;
    border: 1px solid #9a1f36;
}

/*custom texto en página de evento*/
ob-catalog-item-card mat-card-subtitle .vertical-subtitle {
    color: #9a1f36;
}

ob-catalog-item-card item-date-container {
    color: #9a1f36;
}

/*color de la fecha en sesiones*/
ob-catalog-item-date span.month-day {
    color: #1a1a1a;
}

/*Changes the date container text color*/
.item-date-container,
ob-catalog-item-date {
    color: #9a1f36;
}

/*custom adhoc para integracion*/
ob-page-event,
ob-page-full-checkout {
    margin: 6rem;
}

ob-page-event aside {
    display: none !important;
}

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

/*Footer*/
#desktop-footer {
    background-color: #de7c5a;
}

/*Footer en movil*/
footer.flex.justify-between.gap-3.flex-col.tablet\:flex-row.tablet\:items-center {
    background-color: #de7c5a;
}

/*Color links subfooter & copyright*/
ob-footer.main-footer,
ob-footer.main-footer a,
ob-footer.main-footer span.footer-copyright,
ob-footer.main-footer span.justify-end {
    color: #212121 !important;
}

/*Button language links subfooter*/
/*Language & icon */
ob-footer.main-footer span.mdc-button__label,
ob-footer.main-footer mat-icon.mat-icon {
    color: #212121 !important;
    font-weight: 400;
}

/*Border*/
ob-footer.main-footer ob-button>.mat-mdc-outlined-button {
    border: 1px solid#212121 !important;
}

/*Text powered by*/
ob-footer.main-footer section.items-center {
    color: #212121;
}

/********* 4- OCULTAR TODO PARA IFRAME*/

/* 1. Ocultar la barra superior, cabeceras y toolbar*/
.ob-top-bar,
mat-toolbar,
app-channel-header,
#toppanel,
.mat-toolbar-single-row,
.mat-elevation-z8,
header.session-header-container {
    display: none !important;
}

/* 2. Eliminar contenedores de filtros, regalos y el menú lateral (sidenav)*/
ob-page-event-header,
.filter-container,
aside.gift-card,
mat-sidenav,
ob-venue-filters-content#venue-filters-content,
.filter-container,
.mat-drawer-inner-container,
mat-drawer.mat-drawer.left-side-panel.mat-drawer-opened.mat-drawer-side {
    display: none !important;
}

/* 3. Forzar a que el contenedor de contenido no tenga el margen superior que empuja todo hacia abajo*/
mat-sidenav-content,
.mat-drawer-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

/* 4. Ocultar el footer por completo*/
footer,
ob-footer,
#desktop-footer,
.main-footer {
    display: none !important;
}

/* 5. Resetear fondos, marcos y sombras para que flote en la web del cliente*/
html,
body,
#wrapper,
.main-container,
mat-sidenav-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/*Oculta estrictamente el botón delineado de 'Filtros' en pantallas moviles*/
@media screen and (max-width: 767px) {
    button.mdc-button.mat-mdc-button-base.mdc-button--outlined.mat-mdc-outlined-button.gray.mat-unthemed[aria-label="Filtros"] {
        display: none !important;
    }
}

/********* OCULTAR PESTAÑA Y BLOQUE DE INFORMACIÓN (BLINDAJE DE NAVEGACIÓN)
*********/

/* 1. Ocultar la barra completa de pestañas superiores ("INFORMACIÓN" y "SESIONES") */
/* Como el cliente solo quiere ver las sesiones abajo directamente, no tiene sentido dejar esa barra arriba que confunda*/
.mat-mdc-tab-nav-bar,
.mat-tab-nav-bar,
[role="tablist"] {
    display: none !important;
}

/* 2. Ocultar la sección de Información utilizando clases estructurales genéricas de la vista */
/* Atacamos la sección estructural por su etiqueta nativa dentro de la página de eventos*/
ob-page-event section.section:not(.ng-trigger-tabAnimation),
ob-page-event .section:first-of-type,
ob-page-event h2[id="eventInformation"],
ob-page-event p.description {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
}

/* 3. Forzar a la sección de las Sesiones (el calendario) a estar siempre visible y al 100% de ancho */
/* En lugar de usar el ID del panel, atacamos la sección que contiene la animación activa de las sesiones*/
ob-page-event section.ng-trigger-tabAnimation,
ob-page-event .section:last-of-type {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
}

ob-page-event,
ob-page-full-checkout {
    margin: 0 !important;
}

/*Aplica un margen exterior de 8px en las vistas de la página de evento del proceso de pago para evitar que el contenido toque los bordes físicos de la pantalla del teléfono*/
@media screen and (max-width: 767px) {
    ob-page-event,
    ob-page-full-checkout {
        margin: 8px !important;
    }
}

/*Añade un margen izquierdo de 7px al componente compacto del contador de tiempo del pedido (countdown)*/
@media screen and (max-width: 767px) {
    span.ob-order-countdown.ob-compact {
        margin-left: 7px;
    }
}