/* ??????????????????????????????????????????????????????????????
   Bartack – Brand Overrides (sobre Velzon)
   Paleta: Navy #0f172a · Gold #cc9a2a · OffWhite #f9f7f4
   ?????????????????????????????????????????????????????????????? */

/* ?? Variables de marca ?? */
:root {
 --bartack-navy: #0f172a;
 --bartack-navy-light: #1e293b;
 --bartack-gold: #cc9a2a;
 --bartack-gold-hover: #d4a534;
 --bartack-offwhite: #f9f7f4;
}

/* ?? Primary color ? Gold ?? */
:root,
[data-theme="default"] {
 --vz-primary: var(--bartack-gold);
 --vz-primary-rgb: 204, 154, 42;
 --vz-primary-bg-subtle: rgba(204, 154, 42, 0.1);
 --vz-primary-text-emphasis: #a67d1a;
 --vz-primary-border-subtle: rgba(204, 154, 42, 0.25);
}

/* ?? Sidebar dark ? Navy ?? */
[data-sidebar="dark"] {
 --vz-vertical-menu-bg: var(--bartack-navy);
 --vz-vertical-menu-bg-active: var(--bartack-navy-light);
 --vz-vertical-menu-item-active-color: var(--bartack-gold);
 --vz-vertical-menu-item-active-bg: rgba(204, 154, 42, 0.08);
}

/* ?? Botones primarios con gold ?? */
.btn-primary {
 --vz-btn-bg: var(--bartack-gold);
 --vz-btn-border-color: var(--bartack-gold);
 --vz-btn-color: var(--bartack-navy);
 --vz-btn-hover-bg: var(--bartack-gold-hover);
 --vz-btn-hover-border-color: var(--bartack-gold-hover);
 --vz-btn-hover-color: var(--bartack-navy);
 --vz-btn-active-bg: #b8892a;
 --vz-btn-active-border-color: #b8892a;
 --vz-btn-active-color: var(--bartack-navy);
 --vz-btn-disabled-bg: var(--bartack-gold);
 --vz-btn-disabled-border-color: var(--bartack-gold);
 font-weight: 600;
}

/* ?? Botón secondary ? Navy ?? */
.btn-secondary {
 --vz-btn-bg: var(--bartack-gold);
 --vz-btn-border-color: var(--bartack-gold);
 --vz-btn-color: #fff;
 --vz-btn-hover-bg: var(--bartack-gold-hover);
 --vz-btn-hover-border-color: var(--bartack-gold-hover);
 --vz-btn-hover-color: #fff;
 font-weight: 600;
}

/* ?? Links con gold ?? */
a {
 color: var(--bartack-gold);
}
a:hover {
 color: var(--bartack-gold-hover);
}

/* ?? Texto primary ?? */
.text-primary {
 color: var(--bartack-gold) !important;
}

/* ?? Page title breadcrumb active ?? */
.page-title-box .breadcrumb-item.active {
 color: var(--bartack-gold);
}

/* ?? Body background suave ?? */
:root {
 --vz-body-bg: var(--bartack-offwhite);
}

/* ?? Topbar dark – alineado al sidebar ?? */
html[data-sidebar="dark"][data-topbar="dark"] {
 /* Igualar variables del header a las del sidebar */
 --vz-header-bg: var(--vz-vertical-menu-bg);
 --vz-header-item-color: var(--vz-vertical-menu-item-color, #e9ecef);
 --vz-header-border-color: var(--vz-vertical-menu-border-color, transparent);
 /* Hacer que los items del header usen el mismo fondo que el topbar */
 --vz-header-item-bg: var(--vz-vertical-menu-bg);
}

/* Fallback explícito por si alguna vista no usa variables del header */
html[data-sidebar="dark"][data-topbar="dark"] #page-topbar,
html[data-sidebar="dark"][data-topbar="dark"] #page-topbar .navbar-header {
 background-color: var(--vz-vertical-menu-bg) !important;
 border-color: var(--vz-vertical-menu-border-color, transparent) !important;
}

/* Asegurar contraste correcto en iconos y botones del topbar */
html[data-sidebar="dark"][data-topbar="dark"] #page-topbar .header-item,
html[data-sidebar="dark"][data-topbar="dark"] #page-topbar .btn,
html[data-sidebar="dark"][data-topbar="dark"] #page-topbar .nav-link {
 color: var(--vz-vertical-menu-item-color, #e9ecef) !important;
}

/* Hamburguesa: líneas con el color de texto actual */
html[data-sidebar="dark"][data-topbar="dark"] #topnav-hamburger-icon .hamburger-icon span {
 background-color: currentColor !important;
}

/* Topbar User container: igualar fondo al topbar y eliminar resaltados turquesa */
html[data-sidebar="dark"][data-topbar="dark"] #page-topbar .header-item.topbar-user {
 background-color: var(--vz-vertical-menu-bg) !important;
 border-color: var(--vz-vertical-menu-border-color, transparent) !important;
}
html[data-sidebar="dark"][data-topbar="dark"] #page-topbar .header-item.topbar-user:hover,
html[data-sidebar="dark"][data-topbar="dark"] #page-topbar .header-item.topbar-user:focus-within {
 background-color: var(--vz-vertical-menu-bg) !important;
}
/* Botón del usuario: fondo/colores y sin anillo de foco (turquesa) */
html[data-sidebar="dark"][data-topbar="dark"] #page-topbar .header-item.topbar-user .btn {
 background-color: var(--vz-vertical-menu-bg) !important;
 color: var(--vz-vertical-menu-item-color, #e9ecef) !important;
 border-color: var(--vz-vertical-menu-border-color, transparent) !important;
 box-shadow: none !important;
}
html[data-sidebar="dark"][data-topbar="dark"] #page-topbar .header-item.topbar-user .btn:hover,
html[data-sidebar="dark"][data-topbar="dark"] #page-topbar .header-item.topbar-user .btn:focus,
html[data-sidebar="dark"][data-topbar="dark"] #page-topbar .header-item.topbar-user .btn:active,
html[data-sidebar="dark"][data-topbar="dark"] #page-topbar .header-item.topbar-user .btn:focus-visible,
html[data-sidebar="dark"][data-topbar="dark"] #page-topbar .header-item.topbar-user .btn.show {
 background-color: var(--vz-vertical-menu-bg) !important;
 color: var(--vz-vertical-menu-item-color, #e9ecef) !important;
 border-color: var(--vz-vertical-menu-border-color, transparent) !important;
 outline: none !important;
 box-shadow: none !important;
}

/* ?? Logo Bartack: forzar tamaño visible en sidebar y topbar ?? */
.navbar-brand-box {
 padding: 10px 0 !important;
}
.navbar-brand-box .logo img {
 max-height: none !important;
}
.navbar-brand-box .logo-lg img {
 height: 50px !important;
}
.navbar-brand-box .logo-sm img {
 height: 36px !important;
}
.horizontal-logo .logo img {
 max-height: none !important;
}
.horizontal-logo .logo-lg img {
 height: 50px !important;
}
.horizontal-logo .logo-sm img {
 height: 36px !important;
}