/**
 * Cabezote (header) — más vida: gradientes, hover y transiciones.
 * Scope: .main-header.fge-header y .fge-navbar. No pisa estilos globales.
 */

/* Fondo del header: oscuro con un poco más de profundidad */
.main-header.fge-header,
.main-header.fge-header .navbar.fge-navbar {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #0b0f1a 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Texto e iconos claros sobre fondo oscuro */
.main-header.fge-header .navbar .nav > li > a,
.main-header.fge-header .qbtn,
.main-header.fge-header .qbtn-icon {
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.main-header.fge-header .socti-core-text,
.main-header.fge-header .fge-user-info,
.main-header.fge-header .fge-context-info {
  color: #e2e8f0 !important;
}

.main-header.fge-header .socti-core-light {
  color: #94a3b8 !important;
  opacity: 0.9;
}

/* Botones rápidos (Menú, Inicio, Carrito, etc.): hover con vida */
.main-header.fge-header .qbtn,
.main-header.fge-header .qbtn-icon {
  border-radius: 12px !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}

.main-header.fge-header .qbtn:hover,
.main-header.fge-header .qbtn-icon:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.main-header.fge-header .qbtn:not(.qbtn-special):hover,
.main-header.fge-header .qbtn-icon:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Botón naranja "Seleccionar Empresa" / "Cambiar Empresa" */
.main-header.fge-header .qbtn-special:hover {
  box-shadow: 0 4px 16px rgba(243, 156, 18, 0.4);
  transform: translateY(-1px);
}

/* Dropdown sucursal */
.main-header.fge-header .qbtn-ghost:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Bloque SOCTI Core: en una sola línea horizontal, que no se descomponga */
.main-header.fge-header .socti-core-badge {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  min-width: fit-content !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

.main-header.fge-header .socti-core-badge:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.main-header.fge-header .socti-core-text {
  letter-spacing: 0.03em;
  white-space: nowrap !important;
  display: inline !important;
}

/* Contexto (empresa/sucursal) en línea, no debajo */
.main-header.fge-header .navbar-custom-menu .nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

.main-header.fge-header .fge-context-info {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  white-space: nowrap !important;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Info usuario: más legible */
.main-header.fge-header .fge-user-info {
  border-radius: 12px !important;
  padding: 6px 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: background 0.2s ease !important;
}

.main-header.fge-header .fge-user-info:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

/* Campanita de notificaciones: destaque sutil */
.main-header.fge-header .notifications-menu .qbtn-icon:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.main-header.fge-header .label-notif.label-success {
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.main-header.fge-header .label-notif.label-danger {
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* Salir: hover suave */
.main-header.fge-header .navbar-custom-menu .qbtn-icon[href="salir"]:hover,
.main-header.fge-header .navbar-custom-menu .qbtn-icon[title="Salir"]:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

/* Iconos con color para que no se vean todos igual (más vida) */
.main-header.fge-header .fge-quick .sidebar-toggle .fa { color: #94a3b8 !important; }
.main-header.fge-header .fge-quick li:nth-child(2) .fa { color: #60a5fa !important; }   /* Menú: azul */
.main-header.fge-header .fge-quick li:nth-child(3) .fa { color: #34d399 !important; } /* Inicio: verde */
.main-header.fge-header .fge-quick li:nth-child(4) .fa { color: #fbbf24 !important; } /* Carrito: ámbar */
.main-header.fge-header .fge-quick .qbtn-special .fa,
.main-header.fge-header .fge-quick .qbtn-ghost .fa { color: #e2e8f0 !important; }
.main-header.fge-header .fge-user-info .fa,
.main-header.fge-header .fge-user-info .user-image-header { color: #60a5fa !important; }
.main-header.fge-header .notifications-menu .qbtn-icon .fa { color: #fbbf24 !important; }
.main-header.fge-header .navbar-custom-menu .qbtn-icon[href="salir"] .fa,
.main-header.fge-header .navbar-custom-menu .qbtn-icon[title="Salir"] .fa { color: #f87171 !important; }
.main-header.fge-header .fge-context-info .fa { color: #34d399 !important; }

/* Responsive: mantener transiciones ligeras en móvil */
@media (max-width: 768px) {
  .main-header.fge-header .qbtn:hover,
  .main-header.fge-header .qbtn-icon:hover {
    transform: none;
  }
}