/* Topbar Modular Layout */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  position: relative;
  z-index: 900;
}

.header-titulo-wrap {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header-right-group {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Info usuario */
.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 40px;
  padding: 8px;
  transition: all 0.3s ease;
  background: var(--color-blanco);
  border: var(--border);
  height: 64px;
  width: 297px;
  position: relative;
}

/* Trigger: toda el área (avatar + texto + chevron) abre el dropdown */
.user-info-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  gap: 16px;
  padding-right: 12px;
  cursor: pointer;
}

.user-info-chevron {
  font-size: 14px;
  color: var(--color-secundario);
  transition: transform .2s;
  flex-shrink: 0;
}

/* Rota automáticamente según el estado del dropdown hermano — sin JS extra */
.user-info:has(.dropdown.activo) .user-info-chevron {
  transform: rotate(180deg);
}

/* Grupo izquierdo: nombre/rol y avatar */
.user-info-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info img {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.user-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

/* Widgets de Notificación */
.header-widgets {
  display: flex;
  gap: 16px;
  width: 272px;
}

.widget-card {
  position: relative;
  justify-content: center;
  gap: 12px;
  height: 52px;
  width: 100% !important;
}

.widget-card:hover {
  background-color: var(--color-primario-opacidad) !important;
  color: var(--color-primario);
}

.widget-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  background: #2f9e44;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px !important;
}


/* Animación campana — se activa con .bell-shake */
@keyframes bellShake {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(18deg); }
  30%  { transform: rotate(-16deg); }
  45%  { transform: rotate(12deg); }
  60%  { transform: rotate(-8deg); }
  75%  { transform: rotate(4deg); }
  90%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

.bell-shake .fa-bell {
  animation: bellShake 0.7s ease;
}

@media (max-width: 1512px) {

  .header-widgets {
    width: 216px;
  }

  .widget-card {
    width: 100% !important;
  }

  .user-info {
    width: 244px;
  }
}