/*-------------------------
    TOP NAVIGATION
-------------------------*/
.wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}

.topnav_dropdown_full_name {
  color: var(--nav-text) !important;
  margin: 5px !important;
}

.logo-large {
  color: var(--nav-text) !important;
}

.text-brand {
  color: var(--nav-accent) !important;
}

.logo-large .text-brand {
  color: var(--logo-plus-color) !important;
  font-weight: 800;
}

/* TOPNAV ICONS - Override text-brand for better contrast */
.topbar .nav-link i {
  color: var(--nav-text) !important;
  transition: color 0.3s ease !important;
}

.topbar .nav-link:hover i {
  color: var(--nav-accent-vibrant) !important;
  text-shadow: 0 0 10px var(--nav-accent); /* Subtle glow on hover */
}
#content {
  width: 100%;
  padding-left: 300px;
  transition: all 0.3s;
}

body.sidebar-collapsed #content {
  padding-left: 0;
}

/* --- ULTRA-CLEAN TOPNAV CONSOLIDATION --- */
.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1060 !important; /* Above everything including sidebar */
  background: var(--nav-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--nav-border) !important;
  transition: all 0.2s ease !important;
}

/* Force all children to be transparent and match height */
.topbar .navbar,
.topbar .navbar-header,
.topbar .navbar-collapse,
.topbar .navbar-brand,
.topbar .fondo-brand,
.topbar .u-pro,
.topbar .header-overlay,
.topbar .navbar-color-nuevo {
  background: transparent !important;
  background-color: transparent !important;
  height: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
}

/* --- Logo Alignment (Far Left) --- */
.topbar .navbar-header {
  width: 300px !important;
  padding-left: 15px !important;
  justify-content: flex-start !important;
}

.topbar .navbar-nav,
.topbar .navbar-top-right {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  height: 64px !important;
}

.topbar .nav-item {
  display: flex !important;
  align-items: center !important;
  height: 64px !important;
}

.topbar .nav-link {
  display: flex !important;
  align-items: center !important;
  height: 64px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.topbar .navbar-brand {
  gap: 8px !important;
}

.topbar .logo-large {
  font-family: "Nunito", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -1.2px !important;
  font-size: 1.6rem !important;
  color: var(--nav-text) !important; /* Force white for "Gestión" */
  margin: 0 !important;
}

/* --- User Profile Badge & Dropdown --- */
.topbar .profile-pic {
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 15px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Stable Container for Avatar image + Animation */
.topbar .avatar-container {
  width: 42px !important;
  height: 42px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Premium Rotating Gradient Border - Fixed on Anchor */
.topbar .avatar-container::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 46px !important;
  height: 46px !important;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--nav-accent, #18967c) 50%,
    transparent 100%
  ) !important;
  border-radius: 50% !important;
  animation: avatarRotate 2s linear infinite !important;
  z-index: -1 !important;
  opacity: 0.8 !important;
}

@keyframes avatarRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.topbar .profile-pic:hover .avatar-container::before {
  opacity: 1 !important;
  animation-duration: 1.2s !important;
}

.topbar .profile-pic img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  padding: 2px !important;
  background: var(--nav-bg) !important;
  position: relative !important;
  z-index: 2 !important;
  object-fit: cover !important;
}

.topbar #topnav_username {
  color: var(--nav-text) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  font-family: "Poppins", sans-serif !important;
  letter-spacing: -0.2px !important;
}

/* Redesigned User Dropdown Menu */
.topbar .dropdown-menu {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid var(--nav-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
  padding: 15px !important;
  margin-top: 15px !important;
  min-width: 300px !important;
}

.topbar .dw-user-box {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 10px 10px 20px 10px !important;
  border-bottom: 1px solid var(--nav-border) !important;
  margin-bottom: 10px !important;
}

.topbar .dw-user-box .u-img img {
  width: 60px !important;
  height: 60px !important;
  border-radius: 12px !important; /* Modern rounded square */
  object-fit: cover !important;
}

.topbar .dw-user-box .u-text h4 {
  color: var(--nav-text) !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  margin-bottom: 2px !important;
  font-family: "Nunito", sans-serif !important;
}

.topbar .dw-user-box .u-text p {
  color: var(--nav-text-muted) !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
}

/* Global Dropdown Item Styling within Topbar */
.topbar .dropdown-item,
.topbar .dropdown-user li a {
  padding: 12px 15px !important;
  color: var(--nav-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  background: transparent !important;
  text-decoration: none !important;
}

.topbar .dropdown-item:hover,
.topbar .dropdown-user li a:hover {
  background: var(--nav-hover-bg) !important;
  color: var(--nav-hover-text) !important;
  padding-left: 20px !important;
}

.topbar .dropdown-item i,
.topbar .dropdown-user li a i {
  font-size: 1.1rem !important;
  color: var(--nav-accent) !important;
  opacity: 0.8;
  width: 20px !important;
  text-align: center !important;
}

/* User Box Specifics */
.topbar .dw-user-box .u-text a.btn-danger {
  display: inline-flex !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--nav-border) !important;
  color: var(--nav-text) !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  gap: 6px !important;
  margin-top: 8px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.topbar .dw-user-box .u-text a.btn-danger:hover {
  background: var(--nav-hover-bg) !important;
  border-color: var(--nav-accent) !important;
  transform: translateY(-1px) !important;
}

/* Specific overrides for legacy dropdown-user if needed */
.topbar .dropdown-user {
  padding: 0 !important;
  background: transparent !important;
}

.topbar .dropdown-user .divider {
  background: var(--nav-border) !important;
  height: 1px !important;
  margin: 8px 0 !important;
}