/* Colores administrables desde Control → Menús → Colores.
 * Este archivo se carga después del diseño base para que la selección del panel
 * prevalezca sin modificar la estructura propia de cada tema.
 */
.page-wrapper .header-bottom,
.page-wrapper .header-bottom .main-nav { background: var(--cc-menu-desktop-background) !important; }
.page-wrapper .header-bottom .menu > li > a { color: var(--cc-menu-desktop-text) !important; }
.page-wrapper .header-bottom .menu > li:hover > a,
.page-wrapper .header-bottom .menu > li > a:focus {
  background: var(--cc-menu-desktop-hover-background) !important;
  border-top-color: var(--cc-menu-desktop-hover-bar) !important;
  color: var(--cc-menu-desktop-hover-text) !important;
}
.page-wrapper .header-bottom .menu > li.active > a {
  background: var(--cc-menu-desktop-active-background) !important;
  border-top-color: var(--cc-menu-desktop-active-bar) !important;
  color: var(--cc-menu-desktop-active-text) !important;
}
.header-bottom .menu ul,
.header-bottom .menu .megamenu,
.header-bottom .cc-mm-left,
.header-bottom .cc-mm-right,
.header-bottom .cc-mm-card,
.header-bottom .cc-mm-card-img { background: var(--cc-menu-submenu-background) !important; }
.header-bottom .menu ul,
.header-bottom .menu .megamenu,
.header-bottom .cc-mm-left,
.header-bottom .cc-mm-card,
.header-bottom .cc-mm-col3-header { border-color: var(--cc-menu-submenu-border) !important; }
.header-bottom .menu ul li > a,
.header-bottom .cc-mm-left li a,
.header-bottom .cc-mm-panel-header > a:first-child,
.header-bottom .cc-mm-card span,
.header-bottom .cc-mm-col3-header { color: var(--cc-menu-submenu-text) !important; }
.header-bottom .menu ul li:hover > a,
.header-bottom .menu ul li.active > a,
.header-bottom .cc-mm-left li:hover > a,
.header-bottom .cc-mm-left li.cc-mm-active > a,
.header-bottom .cc-mm-card:hover span,
.header-bottom .cc-mm-card.active span,
.header-bottom .cc-mm-col3-header:hover,
.header-bottom .cc-mm-col3-header.active {
  background: var(--cc-menu-submenu-hover-background) !important;
  color: var(--cc-menu-submenu-hover-text) !important;
}
.header-bottom .menu > li.megamenu-container > .megamenu,
.header-bottom .cc-mm-panel-header { border-color: var(--cc-menu-desktop-hover-bar) !important; }
.mobile-menu-container,
.mobile-menu-wrapper { background: var(--cc-menu-mobile-background) !important; }
.cc-mm-header,
.cc-mm-actions,
.mobile-menu li,
.mobile-menu li:last-child,
.mobile-menu li > a,
.mobile-menu li .mmenu-btn,
.mobile-menu li > span.mmenu-btn { border-color: var(--cc-menu-mobile-separator) !important; }
.mobile-menu li > a,
.mobile-nav .mobile-menu li > a,
.mobile-menu .cc-mm-account-action,
.mobile-menu .cc-mm-logout-form .cc-mm-account-action { color: var(--cc-menu-mobile-text) !important; }
.mobile-menu li > a:hover,
.mobile-menu .cc-mm-account-action:hover,
.mobile-menu .cc-mm-account-action:focus,
.mobile-menu .cc-mm-logout-form .cc-mm-account-action:hover,
.mobile-menu .cc-mm-logout-form .cc-mm-account-action:focus {
  background: var(--cc-menu-mobile-hover-background) !important;
  color: var(--cc-menu-mobile-hover-text) !important;
}
.mobile-menu li.active > a { color: var(--cc-menu-mobile-active-text) !important; }
.mobile-menu li ul { background: var(--cc-menu-mobile-submenu-background) !important; }
.mobile-menu-close,
.mobile-menu-close i,
.mobile-menu li .mmenu-btn,
.mobile-menu li > span.mmenu-btn { color: var(--cc-menu-mobile-icon) !important; }
.sticky-navbar {
  background: var(--cc-menu-mobile-footer-background) !important;
  border-top-color: var(--cc-menu-mobile-footer-border) !important;
  color: var(--cc-menu-mobile-footer-text) !important;
}
.sticky-navbar .sticky-info > a,
.sticky-navbar .sticky-info > a > i,
.sticky-navbar .sticky-info .cc-sticky-mesas .cc-sticky-mesas-icon { color: var(--cc-menu-mobile-footer-text) !important; }
.sticky-navbar .sticky-info > a:hover,
.sticky-navbar .sticky-info > a:focus,
.sticky-navbar .sticky-info > a.is-active,
.sticky-navbar .sticky-info > a:hover > i,
.sticky-navbar .sticky-info > a:focus > i,
.sticky-navbar .sticky-info > a.is-active > i,
.sticky-navbar .sticky-info .cc-sticky-mesas:hover .cc-sticky-mesas-icon,
.sticky-navbar .sticky-info .cc-sticky-mesas:focus .cc-sticky-mesas-icon { color: var(--cc-menu-mobile-footer-hover-text) !important; }