/*--------------------------------------------------------------------------
   1. FONT IMPORT DECLARATION
   --------------------------------------------------------------------------
   Defines the external font loading strategy for the channel.
   --------------------------------------------------------------------------*/
/* --- Cargar fuentes (debe ir al PRINCIPIO del CSS) --- */
@import url("https://use.typekit.net/ced0kdi.css");

:root {
   /*----------------------------------------------------------------------
          1. TYPOGRAPHY STACK
          ----------------------------------------------------------------------*/
   --theme-font-family: "din-condensed", sans-serif;

   /*----------------------------------------------------------------------
          2. MOBILE DRAWER NAVIGATION MENU
          ----------------------------------------------------------------------*/
   --ob-nav-text-color: #fff;
   /* Text color for mobile menu items */
   --ob-nav-bg-color: #004739;
   /* Background color for mobile menu container */
   --ob-nav-list-active-text-color: #fff;
   /* Active route text color */
   --ob-nav-list-active-bg-color: #004739;
   /* Active route background highlight */


   /*----------------------------------------------------------------------
          3. TOP NAVIGATION BAR (TOPBAR)
          ----------------------------------------------------------------------*/
   --ob-custom-nav-bg-color: #004739;
   /* Authenticated topbar background */
   --ob-custom-nav-text-color: #fff;
   /* Authenticated topbar text color */
   --ob-public-nav-bg-color: #004739;
   /* Public/login topbar background */
   --ob-public-nav-text-color: #fff;
   /* Public/login topbar text color */


   /*----------------------------------------------------------------------
          4. PRIMARY COLOR PALETTE SCALE (TINTS & SHADES)
          ----------------------------------------------------------------------*/
   --theme-primary-50: #E3EBE9;
   --theme-primary-100: #BACDCA;
   --theme-primary-200: #8CACA6;
   --theme-primary-300: #5C8980;
   --theme-primary-400: #336C61;
   --theme-primary-500: #004739;
   --theme-primary-600: #004134;
   --theme-primary-700: #003A2E;
   --theme-primary-800: #003228;
   --theme-primary-900: #00261F;
   --theme-primary-A100: #BACDCA;
   --theme-primary-A200: #8CACA6;
   --theme-primary-A400: #336C61;
   --theme-primary-A700: #003A2E;

   /* 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;
   --ob-custom-logo-filter: brightness(20);
   /* Footer logo filter */
}


/*--------------------------------------------------------------------------
      1. SUBFOOTER (DARK THEME OVERRIDES)
      --------------------------------------------------------------------------*/

/* Container background & global text color */
ob-footer.main-footer,
#desktop-footer {
   background-color: #004739 !important;
   color: #ffffff !important;
}

/* Force all text elements, links, buttons, spans, and icons inside the footer */
#desktop-footer *,
ob-footer.main-footer * {
   color: #ffffff !important;
}

/* Language selector button (Outlined button border & text fixes) */
ob-footer.main-footer ob-button .mat-mdc-outlined-button {
   border-color: #ffffff !important;
}

/* Logo display toggles & white color filter for dark background */
.fever-logo {
   display: block !important;
}

.onebox-logo {
   display: none !important;
}

/*--------------------------------------------------------------------------
      2. LOGIN SCREEN (BACKGROUND IMAGE SCALING) [OPTIONAL]
      --------------------------------------------------------------------------*/
.background-blur {
   background-image: url("https://client-dists-resources.s3.amazonaws.com/channels-client/fmf-b2b/background.webp");
   background-position: center right;
   background-repeat: no-repeat;
   background-size: cover;
   filter: brightness(80%);
}

/* ==========================================================================
   3. OB-PAGE-EVENTS
   ========================================================================== */
/*fondo calendario personalizado*/
.filter-container.ng-star-inserted {
   background-color: #fff !important;
}

/* Main page container background and base text setup */
ob-page-events,
ob-page-events section.main-container {
   background-color: #fff !important;
   /* Sets deep navy background color */
   color: #000 !important;
   /* Enforces white text color across the container */
   display: block !important;
   /* Ensures proper block layout flow */
}

/* Catalog card container border and rounded corners */
ob-page-events ob-catalog-card {
   background-color: #f8f8f8;
   border: solid 1px #f8f8f8;
   /* Applies semi-transparent white border */
   border-radius: 16px !important;
   /* Rounds card corners */
}

/* Card content padding adjustment */
ob-page-events ob-catalog-card .content {
   padding: 12px !important;
   /* Adds inner spacing for card body elements */
}

/* Secondary text and icon/flex row dimming */
ob-page-events ob-catalog-card .content span,
ob-page-events ob-catalog-card .content .flex.items-center.gap-2 {
   color: #000 !important;
   /* Dims text and inline metadata elements to 50% white opacity */
}

/* ==========================================================================
   4. FONT
   ========================================================================== */

/* --- Texto general --- */
body,
p,
a,
span,
li,
input,
button,
select {
   font-family: "Inter", sans-serif;
}

/* --- Titulares grandes (condensada, tipo Neue Plak Condensed) --- */
h1 {
   font-family: "din-condensed", sans-serif;
   font-weight: 700;
   text-transform: uppercase;
   /* opcional, para el aire del original */
}

/* --- Subtítulos "anchos" (simula Neue Plak Wide) --- */
h2 {
   font-family: "Inter", sans-serif;
   font-weight: 400;
}

/* --- h3 y botones --- */
h3,
button {
   font-family: "Inter", sans-serif;
   font-weight: 700;
}

/* ==========================================================================
   5. BUTTON PERSONALIZADO
   ========================================================================== */

/* --- Botones de acción principales en cian --- */
ob-button .mat-mdc-unelevated-button,
ob-button .mat-mdc-raised-button,
button.mat-mdc-unelevated-button.mat-primary {
   background-color: #329e4a !important;
   color: #fff !important;
   /* texto negro para que contraste sobre el cian */
}

/* Estado hover (un cian un pelín más oscuro para el feedback) */
ob-button .mat-mdc-unelevated-button:hover,
ob-button .mat-mdc-raised-button:hover,
button.mat-mdc-unelevated-button.mat-primary:hover {
   background-color: #006e46 !important;
   color: #fff !important;
}

/* ==========================================================================
   6. SHOPPING BUTTON
   ========================================================================== */

/*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: #b1b1b161 !important;
   fill: #b1b1b161 !important;
   /* por si la cesta es un icono SVG */
}